Tweak votes predictions

midudev · Apr 25, 2024 · 1f4deca · 1f4deca
1 parent ebaee95
commit 1f4deca
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/src/pages/api/forecasts/get-forecast-by-combat-id.json.ts b/src/pages/api/forecasts/get-forecast-by-combat-id.json.ts
@@ -19,8 +19,7 @@ export const GET: APIRoute = async ({ url }) => {
 		return new Response(JSON.stringify({ error: "Combat Not found" }), { status: 404 })
 	}
 
-	// 3. comprobar en la cache, que tenemos el pronóstico
-	// guardado.
+	// 3. comprobar en la cache, que tenemos el pronóstico guardado.
 	const cache = await db
 		.select({ data: Cache.data, timestamp: Cache.timestamp })
 		.from(Cache)
@@ -55,16 +54,16 @@ export const GET: APIRoute = async ({ url }) => {
 		.insert(Cache)
 		.values({
 			id: combatId,
-			data: percentageVotes,
+			data: { percentageVotes, totalVotes },
 			timestamp: new Date(),
 		})
 		.onConflictDoUpdate({
 			target: Cache.id,
 			set: {
-				data: percentageVotes,
+				data: { percentageVotes, totalVotes },
 				timestamp: new Date(),
 			},
 		})
 
-	return new Response(JSON.stringify({ percentageVotes }))
+	return new Response(JSON.stringify({ data: { percentageVotes, totalVotes } }))
 }
diff --git a/src/sections/Forecasts.astro b/src/sections/Forecasts.astro
@@ -34,8 +34,8 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 	}
 	<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="hidden max-w-72 text-center text-xl text-primary">
-			Probabilidad de victoria basada en 0 predicciones
+		<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>
 		{boxers[1] && <Velocimetro />}
 	</div>
@@ -67,27 +67,34 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 
 	document.addEventListener("astro:page-load", () => {
 		const $forecast = $("#forecast") as HTMLElement
+		console.log($forecast)
 		if ($forecast == null) return
 
 		const combatId = $forecast.getAttribute("data-combat-id")
-
+		console.log(combatId)
 		fetch(`/api/forecasts/get-forecast-by-combat-id.json?id=${combatId}`)
 			.then((res) => res.json())
-			.then((json: { data: Record<string, number> }) => {
-				if (json?.data == null) return
+			.then((json: { data: { totalVotes: number; percentageVotes: Record<string, number> } }) => {
+				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 percentage = json.data[lastBoxerId]
+				const percentage = percentageVotes[lastBoxerId]
 				if (percentage) {
 					const event = new CustomEvent("forecast:loaded", { detail: percentage })
 					dispatchEvent(event)
 				}
 
-				const { data }: { data: Record<string, number> } = json
-				Object.entries(data).forEach(([boxerId, forecast]) => {
+				const $pronostico = $forecast.querySelector(".pronostico") as HTMLElement
+				$pronostico.querySelector(".opacity-0")?.classList.remove("opacity-0")
+
+				const $pronosticoNumber = $pronostico.querySelector("span")
+				if ($pronosticoNumber) $pronosticoNumber.innerText = totalVotes.toString()
+
+				Object.entries(percentageVotes).forEach(([boxerId, forecast]) => {
 					const el = $(`.boxer-forecast[data-id="${boxerId}"]`)
 					if (el) el.innerText = `${forecast.toFixed(2)}%`
 				})