feat(#864): added navigation to allies

src/components/BoxerClips.astro

@@ -17,7 +17,7 @@ const hasClips = clips.length > 0
 	hasClips && (
 		<section class="z-20 mx-auto mt-2 max-w-96 overflow-x-hidden py-5 md:mt-0 md:overflow-x-visible">
 			<ClipsModal />
-			<div class="carousel flex select-none flex-row flex-nowrap items-center transition duration-700 md:max-w-none md:!translate-x-0 md:flex-wrap md:place-content-center md:gap-4">
+			<div class="carousel mx-auto flex select-none flex-row flex-nowrap px-4 transition duration-700 md:max-w-72 md:!translate-x-0 md:flex-wrap md:place-content-center md:gap-4 lg:max-w-96">
 				{clips.map(({ text, url }) => (
 					<button
 						data-url={url}
@@ -29,7 +29,7 @@ const hasClips = clips.length > 0
 							variant="atomic-quote"
 							color="primary"
 							class:list={
-								"flex flex-1 -skew-y-6 items-center justify-center text-pretty text-center transition group-hover:scale-110"
+								"flex flex-1 -skew-y-6 items-center justify-center text-pretty text-center transition group-hover:scale-110 md:text-lg lg:text-2xl"
 							}
 						>
 							"{text.toLowerCase()}"

src/components/BoxerDetailInfoAlly.astro

@@ -0,0 +1,74 @@
+---
+import type { Boxer } from "@/types/Boxer"
+
+interface Props {
+	title: string
+	value: Boxer[]
+	id: string
+}
+
+const { title, value, id } = Astro.props
+---
+
+<article class="flex justify-center text-white">
+	<div class="flex w-full flex-col items-center pl-2.5 pr-2.5 pt-2 text-center">
+		<h4>{title}</h4>
+		<div
+			class="flex w-full flex-row flex-wrap justify-center gap-x-2 md:justify-center md:text-center"
+		>
+			{
+				value.map((item, index) => (
+					<a
+						class="boxer-link  mx-2 p-1 text-xl font-bold text-accent"
+						href={item.id}
+						title={`Visita la página del boxeador ${item.name}`}
+						id={id + (index + 1)}
+					>
+						<div class="boxer-link-background w-32" />
+
+						<img
+							src={`https://cdn.lavelada.dev/boxers/${item.id}-small.webp`}
+							class="boxer-image w-32 md:w-auto"
+							alt={`Foto en pequeño del rival ${item.name}`}
+							style="mask-image: linear-gradient(to bottom, black 50%, transparent 100%);"
+						/>
+						<span class="font-atomic text-xl text-accent">{item.name.toLowerCase()}</span>
+					</a>
+				))
+			}
+		</div>
+	</div>
+</article>
+
+<style>
+	.boxer-link {
+		@apply relative mb-2 flex flex-col transition-opacity duration-300 ease-in-out md:size-28 xl:size-36;
+
+		&:hover {
+			@apply opacity-90;
+		}
+
+		& .boxer-image {
+			@apply z-20 w-32 transition-opacity duration-300 ease-in-out;
+			mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
+			filter: grayscale(100%);
+			transition: filter 0.3s ease;
+		}
+	}
+
+	.boxer-link-background {
+		@apply absolute bottom-0 block h-3/5 opacity-25 transition-opacity duration-300 ease-in-out;
+		background: linear-gradient(
+			180deg,
+			rgba(255, 255, 255, 1) 0%,
+			rgba(255, 255, 255, 0.5) 30%,
+			rgba(0, 0, 0, 0) 95%
+		);
+	}
+
+	.boxer-link:hover .boxer-image,
+	.boxer-link.active .boxer-image {
+		scale: 1.05;
+		filter: grayscale(0%);
+	}
+</style>

src/components/BoxerDetailInfoRival.astro

@@ -46,7 +46,9 @@ const isVersus = value[0].versus.length === 2
 
 						<img
 							src={`https://cdn.lavelada.dev/boxers/${item.id}-small.webp`}
-							class:list={isKingOfTheTrack ? ["h-14 object-contain"] : ["boxer-image"]}
+							class:list={
+								isKingOfTheTrack ? ["h-14 object-contain"] : ["boxer-image w-32 md:w-auto"]
+							}
 							alt={`Foto en pequeño del rival ${item.name}`}
 							style="mask-image: linear-gradient(to bottom, black 50%, transparent 100%);"
 						/>

src/pages/boxers/[id].astro

@@ -2,6 +2,7 @@
 import BoxerBigImage from "@/components/BoxerBigImage.astro"
 import BoxerClips from "@/components/BoxerClips.astro"
 import BoxerDetailInfo from "@/components/BoxerDetailInfo.astro"
+import BoxerDetailInfoAlly from "@/components/BoxerDetailInfoAlly.astro"
 import BoxerDetailInfoRival from "@/components/BoxerDetailInfoRival.astro"
 import BoxerSocialLink from "@/components/BoxerSocialLink.astro"
 import BoxerWorkout from "@/components/BoxerWorkout.astro"
@@ -56,6 +57,25 @@ if (typeof boxer.versus === "object") {
 	rivals = boxers.filter((rival: Boxer) => rival.id !== boxer.id)
 }
 
+let allies: Boxer[] = []
+if (typeof boxer.allies === "object") {
+	for (const vs of boxer.allies) {
+		allies = allies.concat(BOXERS.filter((ally: Boxer) => ally.id === vs))
+	}
+} else {
+	allies = boxers.filter((ally: Boxer) => ally.id !== boxer.id)
+}
+
+if (forecast) {
+	forecast.forecastData.forEach((forecastData) => {
+		const boxer = boxers.find((boxer) => boxer.id === forecastData.boxerId)
+		if (boxer) {
+			boxersWithForecast.push({ ...boxer, forecast: forecastData.forecast })
+			forecastCount += forecastData.predictionsCount
+		}
+	})
+}
+
 const preloadBoxerImage: Preload[] = [
 	{
 		as: "image",
@@ -68,7 +88,7 @@ const preloadBoxerImage: Preload[] = [
 const rivalOrRivals = rivals.length > 1 ? "Rivales" : "Rival"
 const guardBoxer = boxer.guard === undefined ? "Desconocida" : boxer.guard
 const flagAlt = countryName === undefined ? "un país" : countryName.name
-
+const is2v2 = allies.length > 0
 export const prerender = true
 ---
 
@@ -77,16 +97,20 @@ export const prerender = true
 	title={`${boxer.name} - La Velada del Año IV`}
 	preload={preloadBoxerImage}
 >
-	<main>
+	<main class="flex flex-col gap-y-10">
 		<section class="relative flex flex-col items-center justify-center">
 			<div class="flex w-full flex-col md:flex-row md:gap-10">
 				<div
-					class="left-10 order-2 flex w-full flex-col md:absolute md:order-1 md:w-[300px] md:gap-y-20"
+					class="left-10 order-2 flex w-full flex-col md:absolute md:order-1 md:w-[300px] md:gap-y-5"
 				>
 					<BoxerClips clips={boxer.clips} />
-					<div class="hidden md:block">
-						<BoxerDetailInfoRival title={rivalOrRivals} value={rivals} id="boxer-rival-desk" />
-					</div>
+					{
+						!is2v2 && (
+							<div class="hidden md:block">
+								<BoxerDetailInfoRival title={rivalOrRivals} value={rivals} id="boxer-rival-desk" />
+							</div>
+						)
+					}
 				</div>
 
 				<div class="flex w-full flex-col md:w-1/4 md:gap-y-20"></div>
@@ -104,7 +128,7 @@ export const prerender = true
 				</div>
 
 				<div
-					class="order-3 mx-auto flex w-full max-w-[450px] flex-col md:w-auto md:max-w-none md:gap-y-20 lg:w-1/4"
+					class="order-3 mx-auto flex h-full w-full max-w-[450px] flex-col md:w-auto md:max-w-none md:gap-y-20 lg:w-1/4"
 				>
 					<BoxerDetailInfo title="Edad" value={`${boxer.age} años`} id="boxer-edad" />
 					{
@@ -116,12 +140,34 @@ export const prerender = true
 					<BoxerDetailInfo title="Guardia" value={guardBoxer} id="boxer-guardia" />
 
 					<div class="mx-auto block max-w-96 md:hidden">
+						{
+							is2v2 && (
+								<BoxerDetailInfoAlly title={"Aliada"} value={allies} id="boxer-ally-mobile" />
+							)
+						}
 						<BoxerDetailInfoRival title={rivalOrRivals} value={rivals} id="boxer-rival-mobile" />
 					</div>
 				</div>
 			</div>
+			{
+				is2v2 && (
+					<section
+						class:list={[
+							"order-4 flex w-full justify-between",
+							`${boxer.clips && boxer.clips.length > 2 ? "md:translate-y-5 lg:-translate-y-24" : "md:-translate-y-5 lg:-translate-y-56"}`,
+						]}
+					>
+						<div class="order-1 hidden md:block">
+							<BoxerDetailInfoRival title={rivalOrRivals} value={rivals} id="boxer-rival-desk" />
+						</div>
+						<div class="order-2 hidden pr-5 md:block">
+							<BoxerDetailInfoAlly title={"Aliada"} value={allies} id="boxer-ally-desk" />
+						</div>
+					</section>
+				)
+			}
 		</section>
-		<section class="mt-20 md:mt-64">
+		<section class:list={["mt-20", { "md:mt-10": is2v2 }, { "md:mt-64": !is2v2 }]}>
 			<Typography as="h3" variant="h3" color="white" class:list={"mb-12 text-center"}>
 				REDES SOCIALES
 			</Typography>