Adjust some things for select boxers

midudev · Mar 13, 2024 · f9dbf1e · f9dbf1e
1 parent 94229d0
commit f9dbf1e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 59 deletions.
diff --git a/src/pages/boxers/[id].astro b/src/pages/boxers/[id].astro
@@ -19,21 +19,22 @@ const [boxer] = BOXERS.filter((boxer) => boxer.id === id)
 >
 	<main class="flex flex-col items-center">
 		<div class="w-full lg:flex lg:items-center">
-			<picture class="mb-8 w-full px-10 sm:px-0 md:mb-0 lg:w-1/2">
-				<source srcset={`/img/boxers/${id}-big.avif`} type="image/avif" />
+			<picture
+				class:list={"boxer-photo h-auto w-[400px] object-contain"}
+				transition:name="boxer-big-image"
+			>
+				<source srcset="/img/boxers/el-mariana-big.avif" type="image/avif" />
 				<img
-					class="mx-auto h-auto w-full max-w-xs object-contain md:max-w-sm"
-					alt={`Fotografía de ${boxer.name}`}
-					src={`/img/boxers/${id}-big.avif`}
-					style="filter: drop-shadow(0 0 20px rgba(0, 0, 0, .5)); mask-image: linear-gradient(to bottom, black 80%, transparent 100%);"
+					class="aspect-[285/428] h-auto w-full"
+					alt="Fotografía de El Mariana"
+					src="/img/boxers/el-mariana-big.webp"
+					style="
+						filter: drop-shadow(0 0 20px rgba(0, 0, 0, .5));
+						mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+					"
 				/>
 			</picture>
 			<div class="w-full px-10 text-center lg:mx-auto lg:w-1/2 lg:text-left">
-				<img
-					class="mx-auto ml-2 max-w-xs object-contain sm:max-w-full md:max-w-sm"
-					src={`/img/boxers/${boxer.id}-title.webp`}
-					alt={boxer.name}
-				/>
 				<p class="text-xl text-white">{boxer.realName}</p>
 				<p class="text-xl text-white">Edad: {boxer.age}</p>
 				<p class="text-xl text-white">Peso: {boxer.weight} kg</p>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,13 +2,11 @@
 import Layout from "@/layouts/Layout.astro"
 import Countdown from "@/sections/Countdown.astro"
 
-// import Boxing from "@/sections/Boxing.astro"
 import Hero from "@/sections/Hero.astro"
 import Info from "@/sections/Info.astro"
 import PresentationVideo from "@/sections/PresentationVideo.astro"
 import PrincipalDate from "@/sections/PrincipalDate.astro"
 
-// import SelectYourBoxer from "@/sections/SelectYourBoxer.astro"
 import Sponsors from "@/sections/Sponsors.astro"
 ---
 
@@ -21,7 +19,7 @@ import Sponsors from "@/sections/Sponsors.astro"
 	<main>
 		<PrincipalDate />
 		<Info />
-		<!-- <SelectYourBoxer /> -->
+		<!--  <SelectYourBoxer /> -->
 		<!-- <Boxing /> -->
 		<PresentationVideo />
 		<Sponsors />

diff --git a/src/sections/SelectYourBoxer.astro b/src/sections/SelectYourBoxer.astro
@@ -29,7 +29,6 @@ const msFadeLuchador = 150
 
 	<div class="flex flex-col items-center justify-center gap-8">
 		<article
-			data-transition-duration={msFadeLuchador}
 			class="relative flex w-full flex-col items-center justify-center"
 			style="view-transition-name: boxer;"
 		>
@@ -44,14 +43,14 @@ const msFadeLuchador = 150
 				>
 				</div>
 				<picture
-					x.transition:name="boxer-big-image"
-					class:list={"boxer-photo h-auto object-contain px-10 sm:w-[30vw] sm:px-0 xl:w-[19vw] 3xl:h-[600px] 3xl:w-[480px]"}
+					class:list={"boxer-photo h-auto w-[400px] object-contain"}
+					transition:name="boxer-big-image"
 				>
 					<source srcset="/img/boxers/el-mariana-big.avif" type="image/avif" />
 					<img
-						class:list={"boxer-photo h-auto object-contain px-10 sm:w-[30vw] sm:px-0 xl:w-[19vw] 3xl:h-[600px] 3xl:w-[480px]"}
+						class="aspect-[285/428] h-auto w-full"
 						alt="Fotografía de El Mariana"
-						src="/img/boxers/el-mariana-big.wepb"
+						src="/img/boxers/el-mariana-big.webp"
 						style="
 							filter: drop-shadow(0 0 20px rgba(0, 0, 0, .5));
 							mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
@@ -108,10 +107,10 @@ const msFadeLuchador = 150
 			<div class="blur"><div class="clip-black"></div></div>
 			<nav class="boxers-nav">
 				{
-					listOfBoxers.map(({ id, name, country, countryName, weight }) => (
+					listOfBoxers.map(({ id, name, country, countryName, weight }, index) => (
 						<a
 							href={`/boxers/${id}`}
-							class="boxer-link"
+							class:list={["boxer-link", { active: index === 0 }]}
 							title={`Visita la página del boxeador ${name}`}
 							data-id={id}
 							data-name={name}
@@ -137,44 +136,40 @@ const msFadeLuchador = 150
 </section>
 
 <script>
-	const article = document.querySelector("article") as HTMLElement
-	const boxerLinks = document.querySelectorAll(".boxer-link")
-	const boxerTitle = document.querySelector(".boxer-title") as HTMLImageElement
-	const boxerPhoto = document.querySelector(".boxer-photo") as HTMLPictureElement
-	const boxerCountry = document.querySelector(".boxer-flag") as HTMLImageElement
-	const boxerFooter = document.getElementById("boxer-footer") as HTMLElement
-	const boxerCountryElement = document.getElementById("boxer-country") as HTMLElement
-	const boxerWeightElement = document.getElementById("boxer-weight") as HTMLElement
-
-	boxerLinks.forEach((link) => {
-		let timeout: number
-
-		link.addEventListener("mouseenter", (event) => {
-			const { id, name, country, countryName, weight } = (event.currentTarget as HTMLElement)
-				?.dataset
-			link.classList.add("active")
-			timeout = setTimeout(
-				() => {
-					const boxerSrc = `/img/boxers/${id}-big`
-
-					boxerPhoto.getElementsByTagName("source")[0].srcset = `${boxerSrc}.avif`
-					boxerPhoto.getElementsByTagName("img")[0].src = `${boxerSrc}.webp`
-					boxerTitle.innerText = name?.toLocaleLowerCase() ?? ""
-					boxerCountry.src = `/img/flags/${country}.webp`
-
-					boxerPhoto.getElementsByTagName("img")[0].alt = `Fotografía de ${name}`
-					boxerCountry.alt = `Bandera de ${countryName}`
-
-					boxerCountryElement.innerText = countryName ?? ""
-					boxerWeightElement.innerText = weight ?? ""
-					boxerFooter.style.display = "flex"
-				},
-				article.getAttribute("data-transition-duration") as unknown as number
-			)
-		})
-		link.addEventListener("mouseleave", () => {
-			link.classList.remove("active")
-			clearTimeout(timeout)
+	document.addEventListener("astro:page-load", () => {
+		const boxerLinks = document.querySelectorAll(".boxer-link")
+		const boxerNav = document.querySelector(".boxers-nav")
+		const boxerTitle = document.querySelector(".boxer-title") as HTMLImageElement
+		const boxerPhoto = document.querySelector(".boxer-photo") as HTMLPictureElement
+		const boxerCountry = document.querySelector(".boxer-flag") as HTMLImageElement
+		const boxerFooter = document.getElementById("boxer-footer") as HTMLElement
+		const boxerCountryElement = document.getElementById("boxer-country") as HTMLElement
+		const boxerWeightElement = document.getElementById("boxer-weight") as HTMLElement
+
+		boxerLinks.forEach((link) => {
+			link.addEventListener("mouseenter", (event) => {
+				const currentTarget = event.currentTarget as HTMLElement
+				if (currentTarget.classList.contains("active")) return
+
+				const { id, name, country, countryName, weight } = currentTarget?.dataset
+
+				boxerNav?.querySelector(".active")?.classList.remove("active")
+				link.classList.add("active")
+
+				const boxerSrc = `/img/boxers/${id}-big`
+
+				boxerPhoto.getElementsByTagName("source")[0].srcset = `${boxerSrc}.avif`
+				boxerPhoto.getElementsByTagName("img")[0].src = `${boxerSrc}.webp`
+				boxerTitle.innerText = name?.toLocaleLowerCase() ?? ""
+				boxerCountry.src = `/img/flags/${country}.webp`
+
+				boxerPhoto.getElementsByTagName("img")[0].alt = `Fotografía de ${name}`
+				boxerCountry.alt = `Bandera de ${countryName}`
+
+				boxerCountryElement.innerText = countryName ?? ""
+				boxerWeightElement.innerText = weight ?? ""
+				boxerFooter.style.display = "flex"
+			})
 		})
 	})
 </script>