From e87f1a097951b9a3dc5088d8f1e18328d6010d18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel=20Dur=C3=A1n?= <miduga@gmail.com>
Date: Fri, 12 Jul 2024 21:23:12 +0200
Subject: [PATCH] Add forecast girls

---
 src/components/Combates/BackgroundVideo.astro |  5 +-
 src/sections/Forecasts.astro                  | 47 +++++++++++++++++++
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/components/Combates/BackgroundVideo.astro b/src/components/Combates/BackgroundVideo.astro
index 5fe2edacc..cf5d8544e 100644
--- 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
index bb116550a..cace2631a 100644
--- 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")