Add forecast girls

midudev · Jul 12, 2024 · e87f1a0 · e87f1a0
1 parent 106bb68
commit e87f1a0
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 deletions.
diff --git a/src/components/Combates/BackgroundVideo.astro b/src/components/Combates/BackgroundVideo.astro
@@ -25,7 +25,6 @@ const url = `https://cdn.lavelada.dev/${id}-corto.mp4`
 </div>
 
 <script is:inline>
-	import { $ } from "@/lib/dom-selector"
-
-	$("#video-player").load()
+	const videoEl = document.querySelector("#video-player")
+	videoEl?.load()
 </script>
diff --git a/src/sections/Forecasts.astro b/src/sections/Forecasts.astro
@@ -54,6 +54,51 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 	</section>
 }
 
+{ combatId === "3-zeling-y-nissaxter-vs-alana-y-ama-blitz" && (
+	<section
+		id="forecast"
+		data-combat-id={combatId}
+		class="forecastGrid mt-40 grid items-center gap-4 px-7"
+	>
+
+		<ForecastBoxer
+			image={"https://cdn.lavelada.dev/boxers/vote/vote-3-zeling-nissaxter.webp"}
+			imageAlt={"Zeling y Nissaxter"}
+			boxerId={"zeling-nissaxter"}
+			boxerName={"Zeling y Nissaxter"}
+			boxerHref={"/boxers/nissaxter"}
+			class:list={["boxer1"]}
+		/>
+
+		<div class="pronostico flex flex-col items-center justify-center gap-4">
+			<h2 class="text-2xl font-medium uppercase text-white">Pronóstico</h2>
+			<p class="max-w-72 text-center text-xl text-primary opacity-0">
+				Basado en <span class="font-semibold text-accent">0</span> predicciones
+			</p>
+			<Velocimetro />
+		</div>
+
+			<ForecastBoxer
+				image={"https://cdn.lavelada.dev/boxers/vote/vote-3-alana-ama-blitz.webp"}
+				imageAlt={"Alana y Ama Blitz"}
+				boxerId={"alana-ama-blitz"}
+				boxerName={"Alana y Ama Blitz"}
+				boxerHref={"/boxers/alana"}
+				class:list={["boxer2"]}
+			/>
+
+		<div class="action flex w-full flex-col items-center justify-center">
+			<Action
+				class="mt-20 w-full max-w-lg text-center text-base uppercase text-primary"
+				as="a"
+				href="/pronosticos"
+			>
+				¡Haz tu pronóstico!
+			</Action>
+		</div>
+	</section>
+)}
+
 { combatId !== REY_DE_LA_PISTA_ID && combatId !== "3-zeling-y-nissaxter-vs-alana-y-ama-blitz" && (
 		<section
 			id="forecast"
@@ -112,6 +157,8 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 			.then((res) => res.json())
 			.then((json: { data: { totalVotes: number; percentageVotes: Record<string, number> } }) => {
 				const { totalVotes, percentageVotes } = json?.data ?? {}
+				console.log({ totalVotes, percentageVotes })
+
 				if (totalVotes == null || totalVotes === 0) return
 
 				const allBoxers = $forecast.querySelectorAll(".boxer-forecast")