From 8f501b2bf8f75bba52f9cce912d5d4dfd233d3c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel=20Dur=C3=A1n?= <miduga@gmail.com>
Date: Mon, 13 May 2024 17:00:42 -0700
Subject: [PATCH] Add King of the Kill pronosticos

---
 src/components/ForecastBoxer.astro | 15 ++++++--
 src/pages/combates/[id].astro      |  2 +-
 src/sections/Forecasts.astro       | 60 ++++++++++++++++++++++++++----
 3 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/src/components/ForecastBoxer.astro b/src/components/ForecastBoxer.astro
index 17efcfbd2..0d67aef4e 100644
--- a/src/components/ForecastBoxer.astro
+++ b/src/components/ForecastBoxer.astro
@@ -5,9 +5,10 @@ interface Props {
 	boxerId: string
 	boxerName: string
 	boxerHref: string
+	isSmall?: boolean
 }
 
-const { image, imageAlt, boxerId, boxerName, boxerHref } = Astro.props
+const { image, imageAlt, boxerId, boxerName, boxerHref, isSmall = false } = Astro.props
 ---
 
 <a
@@ -18,13 +19,21 @@ const { image, imageAlt, boxerId, boxerName, boxerHref } = Astro.props
 	<article>
 		<img decoding="async" class="image" src={image} alt={imageAlt} />
 		<h3
-			class="text-center text-2xl font-medium uppercase text-white transition-transform group-hover:scale-125 md:group-hover:scale-150"
+			class:list={[
+				"text-center font-medium uppercase text-white transition-transform group-hover:scale-125 md:group-hover:scale-150",
+				isSmall && "text-lg",
+				!isSmall && "text-2xl",
+			]}
 		>
 			{boxerName}
 		</h3>
 		<h4
 			data-id={boxerId}
-			class="boxer-forecast mt-1 text-center text-6xl font-semibold text-accent transition-transform group-hover:scale-75"
+			class:list={[
+				"boxer-forecast mt-1 text-center font-semibold text-accent transition-transform group-hover:scale-75",
+				isSmall && "text-3xl",
+				!isSmall && "text-6xl",
+			]}
 		>
 			&nbsp;
 		</h4>
diff --git a/src/pages/combates/[id].astro b/src/pages/combates/[id].astro
index 3570de457..591d2b110 100644
--- a/src/pages/combates/[id].astro
+++ b/src/pages/combates/[id].astro
@@ -59,7 +59,7 @@ export const prerender = true
 	image={`https://cdn.lavelada.dev/matches/og-${id}-min.jpg`}
 >
 	<BackgroundVideo id={id} />
-	<main class="pointer-events-none md:-mt-12">
+	<main class="md:-mt-12">
 		<div
 			class="full-width relative z-[-10] flex h-[60vh] w-screen items-center justify-center overflow-x-clip md:h-[76vh]"
 		>
diff --git a/src/sections/Forecasts.astro b/src/sections/Forecasts.astro
index a7cfd6ba8..bb116550a 100644
--- a/src/sections/Forecasts.astro
+++ b/src/sections/Forecasts.astro
@@ -16,7 +16,45 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 ---
 
 {
-	combatId !== REY_DE_LA_PISTA_ID && combatId !== "3-zeling-y-nissaxter-vs-alana-y-ama-blitz" && (
+	combatId === REY_DE_LA_PISTA_ID && <section
+			id="forecast"
+			data-combat-id={combatId}
+			class="forecastGrid mt-40 flex flex-col items-center gap-4 px-7"
+		>
+			<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>
+			</div>
+
+			<div class="grid grid-cols-2 sm:grid-cols-4 xl:grid-cols-5 gap-8">
+			{boxers.map((boxer) => boxer && (
+				<ForecastBoxer
+					image={`https://cdn.lavelada.dev/boxers/${boxer.id}-small.webp`}
+					imageAlt={`${boxer.name}`}
+					boxerId={boxer.id}
+					boxerName={boxer.name}
+					boxerHref={`/boxers/${boxer.id}`}
+					class:list={["boxer-forecast"]}
+					isSmall={true}
+				/>
+			))}
+			</div>
+
+			<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"
 			data-combat-id={combatId}
@@ -76,14 +114,20 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 				const { totalVotes, percentageVotes } = json?.data ?? {}
 				if (totalVotes == null || totalVotes === 0) return
 
-				const [, lastBoxer] = $forecast.querySelectorAll(".boxer-forecast")
-				const lastBoxerId = lastBoxer.getAttribute("data-id")
-				if (lastBoxerId == null) return
+				const allBoxers = $forecast.querySelectorAll(".boxer-forecast")
+
+				const isKingOfTheHill = allBoxers.length > 4
+
+				if (!isKingOfTheHill) {
+					const [, lastBoxer] = $forecast.querySelectorAll(".boxer-forecast")
+					const lastBoxerId = lastBoxer.getAttribute("data-id")
+					if (lastBoxerId == null) return
 
-				const percentage = percentageVotes[lastBoxerId]
-				if (percentage) {
-					const event = new CustomEvent("forecast:loaded", { detail: percentage })
-					dispatchEvent(event)
+					const percentage = percentageVotes[lastBoxerId]
+					if (percentage) {
+						const event = new CustomEvent("forecast:loaded", { detail: percentage })
+						dispatchEvent(event)
+					}
 				}
 
 				const $pronostico = $forecast.querySelector(".pronostico") as HTMLElement