adding a label with turn combat

package.json

@@ -32,6 +32,7 @@
     "@astrojs/vercel": "7.5.2",
     "@midudev/tailwind-animations": "0.0.7",
     "@types/dom-view-transitions": "1.0.4",
+    "@typescript-eslint/eslint-plugin": "7.6.0",
     "@typescript-eslint/parser": "7.6.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
@@ -42,7 +43,7 @@
     "lint-staged": "15.2.2",
     "postcss-import": "16.1.0",
     "postcss-nesting": "12.1.1",
-    "prettier": "3.2.5",
+    "prettier": "^3.2.5",
     "prettier-plugin-astro": "0.13.0",
     "prettier-plugin-astro-organize-imports": "0.4.4",
     "prettier-plugin-tailwindcss": "0.5.13",

src/consts/event-date.ts

@@ -1,4 +1,4 @@
-export const EVENT_TIMESTAMP = 1720886400000 as const
+export const EVENT_TIMESTAMP = 1720886400000
 
 /*
  Mapeo de Abreviaturas de Zonas Horarias

src/consts/ordinals.ts

@@ -0,0 +1,8 @@
+export const ordinals: Record<number, string> = {
+	1: "Primer",
+	2: "Segundo",
+	3: "Tercer",
+	4: "Cuarto",
+	5: "Quinto",
+	6: "Sexto",
+}

src/pages/combates/[id].astro

@@ -2,7 +2,9 @@
 import { Image } from "astro:assets"
 
 import BackgroundVideo from "@/components/Combates/BackgroundVideo.astro"
+import Typography from "@/components/Typography.astro"
 import { COMBATS } from "@/consts/combats"
+import { ordinals } from "@/consts/ordinals"
 import Layout from "@/layouts/Layout.astro"
 import CombatFeatures from "@/sections/CombatFeatures.astro"
 
@@ -33,6 +35,7 @@ if (!combatData) {
 		status: 404,
 	}
 }
+const ordinal = ordinals[combatData.number]
 
 const { teams, boxers } = combatData
 const [slug1, slug2] = teams ?? boxers
@@ -88,6 +91,15 @@ export const prerender = true
 				class="relative right-36 h-[600px] w-auto md:h-[1000px] xl:right-24 xl:h-[1500px]"
 			/>
 		</div>
+
+		<div class="mt-20 flex items-center justify-center">
+			<span class="bg-accent px-5 py-2">
+				<Typography as="span" variant="h2" color="white" class="m-auto inline"
+					>{ordinal} combate</Typography
+				>
+			</span>
+		</div>
+
 		<div class="pointer-events-auto">
 			{combatData.boxers.length <= 4 && <CombatFeatures boxerIds={combatData.boxers} />}
 		</div>

src/sections/Combat.astro

@@ -5,20 +5,14 @@ import Typography from "@/components/Typography.astro"
 import { COMBATS } from "@/consts/combats"
 import type { Boxer } from "@/types/Boxer"
 
+import { ordinals } from "@/consts/ordinals"
+
 interface Props {
 	combatId: string
 	combatNumber: number
 	boxers: Boxer[]
 }
 
-const ordinals: Record<number, string> = {
-	1: "Primer",
-	2: "Segundo",
-	3: "Tercer",
-	4: "Cuarto",
-	5: "Quinto",
-	6: "Sexto",
-}
 const { combatNumber, combatId, boxers } = Astro.props
 
 const createCombatDisplay = (boxers: Boxer[]) => {