feat: add age attribute to character history and localization support

scripts/init-column-config.ts

@@ -23,7 +23,8 @@ const columns = [
 	'origin',
 	'devilFruitType',
 	'arc',
-	'status'
+	'status',
+	'age'
 ] as const;
 
 async function initColumnConfig(): Promise<void> {

src/lib/components/GuessHistoryTable.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { formatBounty } from '$lib';
-	import { resolve } from '$app/paths';
 	import type { CharacterWithRelations } from '$lib/server/daily-character';
 	import { language, t } from '$lib/i18n';
 
@@ -14,6 +13,7 @@
 		haki?: boolean;
 		bounty?: boolean;
 		height?: boolean;
+		age?: boolean;
 		origin?: boolean;
 		arc?: boolean;
 	};
@@ -451,6 +451,41 @@
 								</div>
 							{/if}
 
+							<!-- Age -->
+							{#if columnVisibility.age !== false}
+								<div
+									class="h-16 w-16 shrink-0 rounded-lg border border-white/10 sm:h-20 sm:w-20 md:h-24 md:w-24 {character.age ===
+									dailyCharacter.age
+										? 'bg-emerald-600/90'
+										: 'bg-red-900/60'} relative flex items-center justify-center overflow-hidden p-1 sm:p-2"
+								>
+									{#if character.age != null && dailyCharacter.age != null && character.age !== dailyCharacter.age}
+										<div
+											class="pointer-events-none absolute h-full w-full opacity-30"
+											style="
+												background-color: rgb(203, 213, 225);
+												clip-path: {character.age > dailyCharacter.age
+													? 'polygon(97% 60%,80% 60%,80% 5%,20% 5%,20% 60%,3% 60%,50% 95%)'
+													: 'polygon(97% 40%,80% 40%,80% 95%,20% 95%,20% 40%,3% 40%,50% 5%)'};
+											"
+										></div>
+									{/if}
+									{#if character.age != null}
+										<p
+											class="relative z-10 text-center text-[10px] font-bold text-white sm:text-xs md:text-sm"
+										>
+											{character.age}
+										</p>
+									{:else}
+										<p
+											class="relative z-10 text-center text-[10px] font-bold text-white sm:text-xs md:text-sm"
+										>
+											{$t.game.components.guessHistory.unknown}
+										</p>
+									{/if}
+								</div>
+							{/if}
+
 							<!-- Origine -->
 							{#if columnVisibility.origin !== false}
 								<div

src/lib/i18n/en.json

@@ -175,6 +175,7 @@
 				"haki": "Haki",
 				"bounty": "Bounty",
 				"height": "Height",
+				"age": "Age",
 				"origin": "Origin",
 				"arc": "Arc",
 				"alive": "Alive",

src/lib/i18n/fr.json

@@ -175,6 +175,7 @@
 				"haki": "Haki",
 				"bounty": "Prime",
 				"height": "Taille",
+				"age": "Age",
 				"origin": "Origine",
 				"arc": "Arc",
 				"alive": "Vivant",