feat: add age filter functionality and localization support in guess history

src/lib/components/GuessHistoryTable.svelte

@@ -211,6 +211,17 @@
 								</p>
 							</div>
 						{/if}
+						{#if columnVisibility.age !== false}
+							<div
+								class="flex w-16 shrink-0 items-center justify-center rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 text-center sm:w-20 sm:p-2 md:w-24"
+							>
+								<p
+									class="text-[9px] font-semibold tracking-wider text-amber-100 uppercase sm:text-xs"
+								>
+									{$t.game.components.guessHistory.age}
+								</p>
+							</div>
+						{/if}
 						{#if columnVisibility.origin !== false}
 							<div
 								class="flex w-16 shrink-0 items-center justify-center rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 text-center sm:w-20 sm:p-2 md:w-24"

src/lib/i18n/en.json

@@ -144,6 +144,7 @@
 			"withFruit": "With Fruit",
 			"withoutFruit": "Without Fruit",
 			"heightDefined": "Height defined",
+			"ageDefined": "Age defined",
 			"originDefined": "Origin defined",
 			"availableCharactersSingular": "character available",
 			"availableCharactersPlural": "characters available",

src/lib/i18n/fr.json

@@ -144,6 +144,7 @@
 			"withFruit": "Avec Fruit",
 			"withoutFruit": "Sans Fruit",
 			"heightDefined": "Taille definie",
+			"ageDefined": "Age defini",
 			"originDefined": "Origine definie",
 			"availableCharactersSingular": "personnage disponible",
 			"availableCharactersPlural": "personnages disponibles",

src/routes/(game)/infinite/+page.svelte

@@ -28,6 +28,7 @@
 		hasDevilFruit: null as boolean | null, // null = all, true = with fruit, false = without fruit
 		status: [] as string[],
 		hasHeight: false,
+		hasAge: false,
 		hasOrigin: false,
 		arcs: [] as string[]
 	};
@@ -141,6 +142,9 @@
 				if (!characterFilters.arcs) {
 					characterFilters.arcs = [];
 				}
+				if (typeof characterFilters.hasAge !== 'boolean') {
+					characterFilters.hasAge = false;
+				}
 			} catch (e) {
 				console.error('Failed to parse filters', e);
 			}
@@ -277,6 +281,11 @@
 			return false;
 		}
 
+		// Age filter
+		if (characterFilters.hasAge && (char.age === null || char.age === undefined)) {
+			return false;
+		}
+		
 		// Origin filter
 		if (characterFilters.hasOrigin && (char.origin === null || char.origin === undefined || char.origin === '')) {
 			return false;
@@ -306,6 +315,7 @@
 		haki: $t.game.components.guessHistory.haki,
 		bounty: $t.game.components.guessHistory.bounty,
 		height: $t.game.components.guessHistory.height,
+		age: $t.game.components.guessHistory.age,
 		origin: $t.game.components.guessHistory.origin,
 		arc: $t.game.components.guessHistory.arc
 	};
@@ -424,6 +434,13 @@
 		}
 	}
 
+	function toggleAgeFilter() {
+		characterFilters.hasAge = !characterFilters.hasAge;
+		if (!hasWon) {
+			generateNewCharacter();
+		}
+	}
+
 	function toggleOriginFilter() {
 		characterFilters.hasOrigin = !characterFilters.hasOrigin;
 		// Regenerate character with new filters
@@ -451,6 +468,7 @@
 			hasDevilFruit: null,
 			status: [],
 			hasHeight: false,
+			hasAge: false,
 			hasOrigin: false,
 			arcs: []
 		};
@@ -661,7 +679,7 @@
 						<h3 class="text-xs font-semibold tracking-[0.2em] text-amber-200 uppercase">
 							{$t.game.infinite.filtersTitle}
 						</h3>
-						{#if characterFilters.gender.length > 0 || characterFilters.hasHaki || characterFilters.hasDevilFruit !== null || characterFilters.status.length > 0 || characterFilters.hasHeight || characterFilters.hasOrigin || characterFilters.arcs.length > 0}
+						{#if characterFilters.gender.length > 0 || characterFilters.hasHaki || characterFilters.hasDevilFruit !== null || characterFilters.status.length > 0 || characterFilters.hasHeight || characterFilters.hasAge || characterFilters.hasOrigin || characterFilters.arcs.length > 0}
 							<button
 								type="button"
 								onclick={clearAllFilters}
@@ -758,6 +776,15 @@
 								>
 									{$t.game.infinite.heightDefined}
 								</button>
+								<button
+									type="button"
+									onclick={toggleAgeFilter}
+									class="rounded-full border px-2.5 py-1 text-xs font-medium transition-colors {characterFilters.hasAge
+										? 'border-amber-300/50 bg-amber-300/10 text-amber-100 hover:bg-amber-300/20'
+										: 'border-white/20 bg-slate-900/40 text-slate-400 hover:bg-slate-900/60'}"
+								>
+									{$t.game.infinite.ageDefined}
+								</button>
 								<button
 									type="button"
 									onclick={toggleOriginFilter}