Merge pull request #487 from midudev/select-your-boxer-description

Peso y País del boxeador (mejora del PR #454)
midudev · Mar 13, 2024 · 776d31a · 776d31a
2 parents 3324ffa + 02e91a4
commit 776d31a
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/src/sections/SelectYourBoxer.astro b/src/sections/SelectYourBoxer.astro
@@ -83,7 +83,7 @@ const msFadeLuchador = 150
 			>
 				<div class="flex flex-col gap-y-2">
 					<h4 class="text-lg">País</h4>
-					<p class="text-lg font-bold">México</p>
+					<p id="boxer-country" class="text-lg font-bold">México</p>
 					<a
 						href="#"
 						class="mt-10 inline-block font-semibold text-accent transition hover:scale-110"
@@ -94,7 +94,7 @@ const msFadeLuchador = 150
 
 				<div class="flex flex-col gap-y-2">
 					<h4 class="text-lg">Peso</h4>
-					<p class="text-lg font-bold">61 kg</p>
+					<p id="boxer-weight" class="text-lg font-bold">87</p>
 					<a
 						href="#"
 						class="mt-10 inline-block font-semibold text-accent transition hover:scale-110"
@@ -108,7 +108,7 @@ const msFadeLuchador = 150
 			<div class="blur"><div class="clip-black"></div></div>
 			<nav class="boxers-nav">
 				{
-					listOfBoxers.map(({ id, name, country, countryName }) => (
+					listOfBoxers.map(({ id, name, country, countryName, weight }) => (
 						<a
 							href={`/boxers/${id}`}
 							class="boxer-link"
@@ -117,10 +117,10 @@ const msFadeLuchador = 150
 							data-name={name}
 							data-country={country}
 							data-country-name={countryName}
+							data-weight={weight}
 						>
 							<div class="boxer-link-background" />
 							<picture class="boxer-image">
-								<source srcset={`/img/boxers/${id}-small.avif`} type="image/avif" />
 								<img
 									loading="lazy"
 									src={`/img/boxers/${id}-small.webp`}
@@ -142,12 +142,16 @@ const msFadeLuchador = 150
 	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 } = (event.currentTarget as HTMLElement)?.dataset
+			const { id, name, country, countryName, weight } = (event.currentTarget as HTMLElement)
+				?.dataset
 			link.classList.add("active")
 			timeout = setTimeout(
 				() => {
@@ -160,6 +164,10 @@ const msFadeLuchador = 150
 
 					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
 			)