Merge branch 'main' of github.com:midudev/la-velada-web-oficial

.gitignore

@@ -38,4 +38,5 @@ yarn.lock
 .config/*
 
 local-images/*
-src/middleware.tsall
+src/middleware.tsall
+.vercel

auth.config.js

@@ -1,12 +1,11 @@
-import Twitch from "@auth/core/providers/twitch"
 import { defineConfig } from "auth-astro"
 
 export default defineConfig({
 	providers: [
-		Twitch({
-			clientId: import.meta.env.TWITCH_CLIENT_ID,
-			clientSecret: import.meta.env.TWITCH_CLIENT_SECRET,
-		}),
+		// Twitch({
+		// 	clientId: import.meta.env.TWITCH_CLIENT_ID,
+		// 	clientSecret: import.meta.env.TWITCH_CLIENT_SECRET,
+		// }),
 	],
 	callbacks: {
 		session: ({ session, token }) => ({

src/components/Header.astro

@@ -16,10 +16,10 @@ const pages = [
 	{ name: "Combates", href: "/combates", active: normalizedPathName.startsWith("/combates") },
 	{ name: "Pronósticos", href: "/pronosticos" },
 	{
-		name: "Entradas",
-		href: "https://www.entradas.com/artist/la-velada-del-ano/?affiliate=LVL",
+		name: "Tienda Oficial",
+		href: "https://lavelada.store/",
 		target: "_blank",
-	}
+	},
 ].map((page) => ({
 	...page,
 	active: page.active ?? normalizedPathName === page.href,

src/components/Velocimetro.astro

@@ -1,16 +1,22 @@
-<canvas id="velocimeter" width="500px" height="260px" class="w-full md:w-[500px]"></canvas>
+---
+const { id } = Astro.props
+---
 
-<script>
-	import { $ } from "@/lib/dom-selector"
+<canvas
+	id={`velocimeter-${id}`}
+	width="500px"
+	height="260px"
+	class="velocimeter w-full md:w-[500px]"></canvas>
 
+<script define:vars={{ id }}>
 	const COLORS = {
 		"accent": "#b4cd02",
 		"white": "#fff",
 		"white-50": "rgba(255, 255, 255, 0.5)",
 	}
 
 	document.addEventListener("astro:page-load", () => {
-		const canvas = $("#velocimeter") as HTMLCanvasElement
+		const canvas = document.querySelector(`#velocimeter-${id}`)
 		if (!canvas) return
 		const ctx = canvas.getContext("2d")
 
@@ -22,7 +28,7 @@
 			drawVelocimeter(velocimeterValue)
 		}
 
-		function drawVelocimeter(value: number) {
+		function drawVelocimeter(value) {
 			if (!ctx) return
 
 			const centerX = canvas.width / 2
@@ -95,8 +101,12 @@
 		updateVelocimeter()
 
 		window.addEventListener("forecast:loaded", (event) => {
-			const { detail } = event as CustomEvent<string>
-			canvas.setAttribute("data-percentage", detail)
+			const { detail } = event
+			const { combatId, percentage } = detail
+
+			if (combatId !== id) return
+
+			canvas.setAttribute("data-percentage", percentage)
 			updateVelocimeter()
 		})
 	})

src/pages/api/votes/[combatId].ts

@@ -1,9 +1,5 @@
 import type { APIRoute } from "astro"
-import { NOW, Votes, db } from "astro:db"
-import { getSession } from "auth-astro/server"
-import { object, safeParse, string } from "valibot"
-
-import { COMBATS } from "@/consts/combats"
+import { object, string } from "valibot"
 
 const VoteSchema = object({
 	voteId: string(),
@@ -17,56 +13,58 @@ const res = (
 	{ status, statusText, headers }: { status?: number; statusText?: string; headers?: Headers }
 ) => new Response(body, { status, statusText, headers })
 
-export const POST: APIRoute = async ({ params, request }) => {
-	const session = await getSession(request)
-
-	if (!session || session?.user?.email == null) {
-		return res("Unauthorized", { status: 401 })
-	}
-
-	const { combatId } = params
-	if (!combatId) return res("CombatId is required", { status: 400 })
-
-	const combatData = COMBATS.find((c) => c.id === combatId)
-	if (!combatData) return res("Combat not found", { status: 404 })
-
-	const { success, output } = safeParse(VoteSchema, await request.json())
-	if (!success) return res("Bad request", { status: 400 })
-
-	const { voteId } = output
-	let boxerData: string | undefined
-	if (combatData.teams !== undefined) {
-		boxerData = combatData.teams.find((t) => t === voteId)
-	} else {
-		boxerData = combatData.boxers.find((b) => b === voteId)
-	}
-	if (!boxerData) return res("Boxer not found", { status: 404 })
-
-	const userId = session.user.id
-
-	if (userId === undefined) {
-		return res("Unauthorized", { status: 401 })
-	}
-
-	const votedAt = NOW
-
-	const newId = `${userId}-${combatId}`
-	const vote = { id: newId, userId, votedAt, voteId, combatId }
-
-	try {
-		await db.insert(Votes).values(vote).onConflictDoUpdate({
-			target: Votes.id,
-			set: {
-				combatId,
-				userId,
-				voteId,
-				votedAt,
-			},
-		})
-	} catch (error) {
-		console.error(error)
-		return res("Error inserting vote", { status: 500 })
-	}
-
-	return res("OK", { status: 200 })
+export const POST: APIRoute = ({ params, request }) => {
+	return res("Unauthorized", { status: 401 })
+
+	// const session = await getSession(request)
+
+	// if (!session || session?.user?.email == null) {
+	// 	return res("Unauthorized", { status: 401 })
+	// }
+
+	// const { combatId } = params
+	// if (!combatId) return res("CombatId is required", { status: 400 })
+
+	// const combatData = COMBATS.find((c) => c.id === combatId)
+	// if (!combatData) return res("Combat not found", { status: 404 })
+
+	// const { success, output } = safeParse(VoteSchema, await request.json())
+	// if (!success) return res("Bad request", { status: 400 })
+
+	// const { voteId } = output
+	// let boxerData: string | undefined
+	// if (combatData.teams !== undefined) {
+	// 	boxerData = combatData.teams.find((t) => t === voteId)
+	// } else {
+	// 	boxerData = combatData.boxers.find((b) => b === voteId)
+	// }
+	// if (!boxerData) return res("Boxer not found", { status: 404 })
+
+	// const userId = session.user.id
+
+	// if (userId === undefined) {
+	// 	return res("Unauthorized", { status: 401 })
+	// }
+
+	// const votedAt = NOW
+
+	// const newId = `${userId}-${combatId}`
+	// const vote = { id: newId, userId, votedAt, voteId, combatId }
+
+	// try {
+	// 	await db.insert(Votes).values(vote).onConflictDoUpdate({
+	// 		target: Votes.id,
+	// 		set: {
+	// 			combatId,
+	// 			userId,
+	// 			voteId,
+	// 			votedAt,
+	// 		},
+	// 	})
+	// } catch (error) {
+	// 	console.error(error)
+	// 	return res("Error inserting vote", { status: 500 })
+	// }
+
+	// return res("OK", { status: 200 })
 }

src/pages/index.astro

@@ -1,13 +1,13 @@
 ---
 import Layout from "@/layouts/Layout.astro"
-import Countdown from "@/sections/Countdown.astro"
 
 import Hero from "@/sections/Hero.astro"
 import Info from "@/sections/Info.astro"
+import LaVeladaVideo from "@/sections/LaVeladaVideo.astro"
 import PresentationVideo from "@/sections/PresentationVideo.astro"
-import PrincipalDate from "@/sections/PrincipalDate.astro"
 import Promotions from "@/sections/Promotions.astro"
 import SelectYourBoxer from "@/sections/SelectYourBoxer.astro"
+import ThanksMessage from "@/sections/ThanksMessage.astro"
 ---
 
 <Layout
@@ -18,13 +18,14 @@ import SelectYourBoxer from "@/sections/SelectYourBoxer.astro"
 	<Hero />
 
 	<main>
-		<PrincipalDate />
+		<ThanksMessage />
+		<LaVeladaVideo />
 		<SelectYourBoxer />
 		<Promotions />
 
 		<PresentationVideo />
 		<Info />
 		<!-- <Boxing /> -->
-		<Countdown />
+		<!-- <Countdown /> -->
 	</main>
 </Layout>

src/pages/pronosticos.astro

@@ -1,18 +1,15 @@
 ---
-import { getSession } from "auth-astro/server"
-
-import Intro from "@/components/Pronosticos/Intro.astro"
-import Vote from "@/components/Pronosticos/Vote.astro"
 import Layout from "@/layouts/Layout.astro"
 
-const session = await getSession(Astro.request)
+import { COMBATS } from "@/consts/combats"
+import Forecasts from "@/sections/Forecasts.astro"
 ---
 
 <Layout
 	title="Pronostica los ganadores - La Velada del Año IV"
 	description="¡Participa votando a los boxeadores que crees que ganarán sus combates!"
 >
 	<main class="flex flex-col items-center justify-center text-white">
-		{session === null ? <Intro /> : <Vote user={session.user} />}
+		{COMBATS.map((combat) => <Forecasts combatId={combat.id} />)}
 	</main>
 </Layout>

src/pages/pronosticos.astro copy.old

@@ -0,0 +1,18 @@
+---
+import { getSession } from "auth-astro/server"
+
+import Intro from "@/components/Pronosticos/Intro.astro"
+import Vote from "@/components/Pronosticos/Vote.astro"
+import Layout from "@/layouts/Layout.astro"
+
+const session = await getSession(Astro.request)
+---
+
+<Layout
+	title="Pronostica los ganadores - La Velada del Año IV"
+	description="¡Participa votando a los boxeadores que crees que ganarán sus combates!"
+>
+	<main class="flex flex-col items-center justify-center text-white">
+		{session === null ? <Intro /> : <Vote user={session.user} />}
+	</main>
+</Layout>