feat: add French localization support for character attributes and improve character display logic

- Added optional French names, affiliations, origins, and epithets to character records.
- Updated character import logic to handle new French fields.
- Enhanced character search and display components to show French names and epithets based on selected language.
- Modified database schema to include French fields for characters.
- Improved error handling in daily character setup to check for existing characters.
- Refactored components to utilize helper functions for displaying names and attributes based on language.

src/lib/components/CharacterSearchInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { CharacterWithRelations } from '$lib/server/daily-character';
 	import { onMount } from 'svelte';
-	import { t } from '$lib/i18n';
+	import { language, t } from '$lib/i18n';
 
 	let {
 		characters,
@@ -20,6 +20,46 @@
 		searchContainer: null as HTMLDivElement | null
 	});
 
+	const isFrench = $derived($language === 'fr');
+
+	function parseEpithets(value: unknown): string[] {
+		if (Array.isArray(value)) {
+			return value.filter((entry): entry is string => typeof entry === 'string' && entry.length > 0);
+		}
+
+		if (typeof value === 'string') {
+			try {
+				const parsed = JSON.parse(value);
+				if (Array.isArray(parsed)) {
+					return parsed.filter((entry): entry is string => typeof entry === 'string' && entry.length > 0);
+				}
+			} catch {
+				if (value.length > 0) {
+					return [value];
+				}
+			}
+		}
+
+		return [];
+	}
+
+	function getDisplayName(character: CharacterWithRelations): string {
+		if (isFrench && typeof character.frName === 'string' && character.frName.length > 0) {
+			return character.frName;
+		}
+
+		return character.name;
+	}
+
+	function getDisplayEpithets(character: CharacterWithRelations): string[] {
+		const frenchEpithets = parseEpithets(character.frEpithets);
+		if (isFrench && frenchEpithets.length > 0) {
+			return frenchEpithets;
+		}
+
+		return parseEpithets(character.epithets);
+	}
+
 	function normalizeSearchText(value: string): string {
 		return value
 			.normalize('NFD')
@@ -40,25 +80,12 @@
 		const searchTerm = normalizeSearchText(state.searchInput);
 
 		return characters.filter((char) => {
-			const nameMatches = normalizeSearchText(char.name).includes(searchTerm);
-
-			let epithetsMatches = false;
-			if (char.epithets) {
-				try {
-					const parsedEpithets =
-						typeof char.epithets === 'string' ? JSON.parse(char.epithets) : char.epithets;
-
-					if (Array.isArray(parsedEpithets)) {
-						epithetsMatches = parsedEpithets.some((epithet: string) =>
-							normalizeSearchText(epithet).includes(searchTerm)
-						);
-					} else if (typeof parsedEpithets === 'string') {
-						epithetsMatches = normalizeSearchText(parsedEpithets).includes(searchTerm);
-					}
-				} catch {
-					epithetsMatches = normalizeSearchText(String(char.epithets)).includes(searchTerm);
-				}
-			}
+			const displayName = getDisplayName(char);
+			const displayEpithets = getDisplayEpithets(char);
+			const nameMatches = normalizeSearchText(displayName).includes(searchTerm);
+			const epithetsMatches = displayEpithets.some((epithet) =>
+				normalizeSearchText(epithet).includes(searchTerm)
+			);
 
 			return (nameMatches || epithetsMatches) &&
 				!selectedCharacters.some((selected) => selected.id === char.id);
@@ -161,7 +188,7 @@
 							{#if character.pictureUrl}
 								<img
 									src={character.pictureUrl}
-									alt={character.name}
+									alt={getDisplayName(character)}
 									loading="lazy"
 									class="w-12 h-12 rounded-full object-cover border border-amber-200/30"
 								/>
@@ -171,16 +198,11 @@
 								</div>
 							{/if}
 							<div class="flex-1">
-								<span class="font-semibold text-amber-100">{character.name}</span>
-								{#if character.epithets}
-									{@const parsedEpithets = typeof character.epithets === 'string' 
-										? JSON.parse(character.epithets) 
-										: character.epithets}
-									{#if Array.isArray(parsedEpithets) && parsedEpithets.length > 0}
+								<span class="font-semibold text-amber-100">{getDisplayName(character)}</span>
+								{#if getDisplayEpithets(character).length > 0}
 										<span class="ml-2 text-xs text-slate-400">
-											• {parsedEpithets.join(', ')}
+											• {getDisplayEpithets(character).join(', ')}
 										</span>
-									{/if}
 								{/if}
 							</div>
 						</button>

src/lib/components/GuessHistoryTable.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { formatBounty } from '$lib';
+	import { resolve } from '$app/paths';
 	import type { CharacterWithRelations } from '$lib/server/daily-character';
-	import { t } from '$lib/i18n';
+	import { language, t } from '$lib/i18n';
 
 	export let selectedCharacters: CharacterWithRelations[];
 	export let dailyCharacter: CharacterWithRelations;
@@ -62,6 +63,52 @@
 		const dailyPrimary = firstAffiliation(dailyAffiliations);
 		return characterPrimary === dailyPrimary;
 	}
+
+	$: isFrench = $language === 'fr';
+
+	function getDisplayName(character: CharacterWithRelations): string {
+		if (isFrench && typeof character.frName === 'string' && character.frName.length > 0) {
+			return character.frName;
+		}
+
+		return character.name;
+	}
+
+	function getWikiUrl(character: CharacterWithRelations): string {
+		if (isFrench && typeof character.frUrl === 'string' && character.frUrl.length > 0) {
+			return character.frUrl;
+		}
+
+		return character.url || '';
+	}
+
+	function getWikiBaseUrl(): string {
+		return isFrench ? 'https://onepiece.fandom.com/fr/wiki/' : 'https://onepiece.fandom.com/wiki/';
+	}
+
+	function getDisplayOrigin(character: CharacterWithRelations): string | null {
+		if (isFrench && typeof character.frOrigin === 'string' && character.frOrigin.length > 0) {
+			return character.frOrigin;
+		}
+
+		return character.origin;
+	}
+
+	function hasMatchingOrigin(characterEntry: CharacterWithRelations, dailyEntry: CharacterWithRelations): boolean {
+		return getDisplayOrigin(characterEntry) === getDisplayOrigin(dailyEntry);
+	}
+
+	function getDisplayArcName(character: CharacterWithRelations): string | null {
+		if (isFrench && typeof character.frArcName === 'string' && character.frArcName.length > 0) {
+			return character.frArcName;
+		}
+
+		return character.arcName;
+	}
+
+	function hasMatchingArc(characterEntry: CharacterWithRelations, dailyEntry: CharacterWithRelations): boolean {
+		return getDisplayArcName(characterEntry) === getDisplayArcName(dailyEntry);
+	}
 </script>
 
 <section
@@ -197,14 +244,14 @@
 							>
 								{#if character.pictureUrl}
 									<a
-										href={'https://onepiece.fandom.com/fr/wiki/' + character.url}
+										href={getWikiBaseUrl() + getWikiUrl(character)}
 										target="_blank"
 										rel="noopener noreferrer"
 										class="block h-full w-full"
 									>
 										<img
 											src={character.pictureUrl}
-											alt={character.name}
+											alt={getDisplayName(character)}
 											class="h-full w-full cursor-pointer object-cover transition-opacity hover:opacity-80"
 										/>
 									</a>
@@ -214,7 +261,7 @@
 									>
 										<span
 											class="line-clamp-3 text-center text-xs font-semibold sm:text-sm md:text-xl"
-											>{character.name}</span
+											>{getDisplayName(character)}</span
 										>
 									</div>
 								{/if}
@@ -407,13 +454,12 @@
 							<!-- Origine -->
 							{#if columnVisibility.origin !== 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.origin ===
-									dailyCharacter.origin
+									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 {hasMatchingOrigin(character, dailyCharacter)
 										? 'bg-emerald-600/90'
 										: 'bg-red-900/60'} flex items-center justify-center p-1 sm:p-2"
 								>
 									<p class="text-center text-[10px] font-bold text-white sm:text-xs md:text-sm">
-										{character.origin || $t.game.components.guessHistory.unknown}
+										{getDisplayOrigin(character) || $t.game.components.guessHistory.unknown}
 									</p>
 								</div>
 							{/if}
@@ -421,12 +467,11 @@
 							<!-- Arc -->
 							{#if columnVisibility.arc !== 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.arcName ===
-									dailyCharacter.arcName
+									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 {hasMatchingArc(character, dailyCharacter)
 										? 'bg-emerald-600/90'
 										: 'bg-red-900/60'} relative flex items-center justify-center overflow-hidden p-1 sm:p-2"
 								>
-									{#if character.arcName !== dailyCharacter.arcName && character.firstAppearance && dailyCharacter.firstAppearance && character.firstAppearance !== dailyCharacter.firstAppearance}
+									{#if !hasMatchingArc(character, dailyCharacter) && character.firstAppearance && dailyCharacter.firstAppearance && character.firstAppearance !== dailyCharacter.firstAppearance}
 										<div
 											class="pointer-events-none absolute h-full w-full opacity-30"
 											style="
@@ -440,7 +485,7 @@
 									<p
 										class="relative z-10 text-center text-[10px] font-bold text-white sm:text-xs md:text-sm"
 									>
-										{character.arcName || $t.game.components.guessHistory.unknown}
+										{getDisplayArcName(character) || $t.game.components.guessHistory.unknown}
 									</p>
 								</div>
 							{/if}

src/lib/components/HintsPanel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { CharacterWithRelations } from "$lib/server/daily-character";
-	import { t } from '$lib/i18n';
+	import { language, t } from '$lib/i18n';
 
 	export let dailyCharacter: CharacterWithRelations;
 	export let selectedCharacters: CharacterWithRelations[];
@@ -16,6 +16,15 @@
 	$: isOriginAvailable = selectedCharacters.length >= 5;
 	$: isFruitAvailable = selectedCharacters.length >= 10;
 	$: isAffiliationAvailable = selectedCharacters.length >= 15;
+	$: isFrench = $language === 'fr';
+
+	function getDisplayOrigin(character: CharacterWithRelations): string | null {
+		if (isFrench && typeof character.frOrigin === 'string' && character.frOrigin.length > 0) {
+			return character.frOrigin;
+		}
+
+		return character.origin;
+	}
 </script>
 
 <svelte:head>
@@ -47,7 +56,7 @@
 		>
 			<p class="text-sm font-medium text-amber-100">{$t.game.components.hints.origin}</p>
 			{#if showHintOrigin}
-				<p class="mt-2 text-xs text-white font-semibold">{dailyCharacter.origin || $t.game.components.hints.unknown}</p>
+				<p class="mt-2 text-xs text-white font-semibold">{getDisplayOrigin(dailyCharacter) || $t.game.components.hints.unknown}</p>
 			{:else if Math.max(0, 5 - selectedCharacters.length) > 0}
 				<p class="mt-2 text-xs text-slate-400">{Math.max(0, 5 - selectedCharacters.length)} {$t.game.components.hints.beforeUnlock}</p>
 			{:else}

src/lib/components/WinPanel.svelte

@@ -1,11 +1,33 @@
 <script lang="ts">
 	import type { CharacterWithRelations } from "$lib/server/daily-character";
-	import { t } from '$lib/i18n';
+	import { language, t } from '$lib/i18n';
 
 	export let selectedCharacter: CharacterWithRelations;
 	export let selectedCharacters: CharacterWithRelations[];
 	export let isGeckoMoriaWin: boolean = false;
 
+	$: isFrench = $language === 'fr';
+
+	function getDisplayName(character: CharacterWithRelations): string {
+		if (isFrench && typeof character.frName === 'string' && character.frName.length > 0) {
+			return character.frName;
+		}
+
+		return character.name;
+	}
+
+	function getWikiUrl(character: CharacterWithRelations): string {
+		if (isFrench && typeof character.frUrl === 'string' && character.frUrl.length > 0) {
+			return character.frUrl;
+		}
+
+		return character.url || '';
+	}
+
+	function getWikiBaseUrl(): string {
+		return isFrench ? 'https://onepiece.fandom.com/fr/wiki/' : 'https://onepiece.fandom.com/wiki/';
+	}
+
 	const pickMessage = (messages: readonly string[]) => messages[Math.floor(Math.random() * messages.length)];
 
 	const getAttemptMessage = (attempts: number): string => {
@@ -48,19 +70,19 @@
 			<div class="mt-3">
 				{#if selectedCharacter.pictureUrl}
 				<a
-					href={"https://onepiece.fandom.com/fr/wiki/" + selectedCharacter.url}
+					href={getWikiBaseUrl() + getWikiUrl(selectedCharacter)}
 					target="_blank"
 					rel="noopener noreferrer"
 					class="inline-block"
 				>
 					<img
 						src={selectedCharacter.pictureUrl}
-						alt={selectedCharacter.name}
+						alt={getDisplayName(selectedCharacter)}
 						class="w-20 h-20 mx-auto rounded-full border-2 border-slate-600 shadow-lg object-cover hover:border-slate-500 transition-colors cursor-pointer opacity-80"
 					/>
 				</a>
 				{/if}
-				<p class="mt-2 text-lg font-bold text-slate-200">{selectedCharacter.name}</p>
+				<p class="mt-2 text-lg font-bold text-slate-200">{getDisplayName(selectedCharacter)}</p>
 			</div>
 		</div>
 	</div>
@@ -74,19 +96,19 @@
 			<div class="mt-3">
 				{#if selectedCharacter.pictureUrl}
 				<a
-					href={"https://onepiece.fandom.com/fr/wiki/" + selectedCharacter.url}
+					href={getWikiBaseUrl() + getWikiUrl(selectedCharacter)}
 					target="_blank"
 					rel="noopener noreferrer"
 					class="inline-block"
 				>
 					<img
 						src={selectedCharacter.pictureUrl}
-						alt={selectedCharacter.name}
+						alt={getDisplayName(selectedCharacter)}
 						class="w-20 h-20 mx-auto rounded-full border-2 border-emerald-400 shadow-lg object-cover hover:border-emerald-300 transition-colors cursor-pointer"
 					/>
 				</a>
 				{/if}
-				<p class="mt-2 text-lg font-bold text-white">{selectedCharacter.name}</p>
+				<p class="mt-2 text-lg font-bold text-white">{getDisplayName(selectedCharacter)}</p>
 			</div>
 		</div>
 	</div>

src/lib/components/YesterdayCharacter.svelte

@@ -1,8 +1,57 @@
 <script lang="ts">
 	import type { CharacterWithRelations } from "$lib/server/daily-character";
-	import { t } from '$lib/i18n';
+	import { language, t } from '$lib/i18n';
 
 	export let yesterdayCharacter: CharacterWithRelations | null;
+
+	$: isFrench = $language === 'fr';
+
+	function parseEpithets(value: unknown): string[] {
+		if (Array.isArray(value)) {
+			return value.filter((entry): entry is string => typeof entry === 'string' && entry.length > 0);
+		}
+
+		if (typeof value === 'string') {
+			try {
+				const parsed = JSON.parse(value);
+				if (Array.isArray(parsed)) {
+					return parsed.filter((entry): entry is string => typeof entry === 'string' && entry.length > 0);
+				}
+			} catch {
+				if (value.length > 0) {
+					return [value];
+				}
+			}
+		}
+
+		return [];
+	}
+
+	function getDisplayName(character: CharacterWithRelations): string {
+		if (isFrench && typeof character.frName === 'string' && character.frName.length > 0) {
+			return character.frName;
+		}
+
+		return character.name;
+	}
+
+	function getDisplayEpithets(character: CharacterWithRelations): string[] {
+		const frenchEpithets = parseEpithets(character.frEpithets);
+		if (isFrench && frenchEpithets.length > 0) {
+			return frenchEpithets;
+		}
+
+		return parseEpithets(character.epithets);
+	}
+
+	function getWikiUrl(character: CharacterWithRelations): string {
+		if (isFrench && typeof character.frUrl === 'string' && character.frUrl.length > 0) {
+			return character.frUrl;
+		}
+
+		return character.url || '';
+	}
+
 </script>
 
 <section class="mt-8 rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
@@ -11,7 +60,7 @@
 			{#if yesterdayCharacter.pictureUrl}
 				<img
 					src={yesterdayCharacter.pictureUrl}
-					alt={yesterdayCharacter.name}
+					alt={getDisplayName(yesterdayCharacter)}
 					class="h-20 w-20 rounded-full border border-amber-200/40 object-cover"
 				/>
 			{:else}
@@ -21,23 +70,32 @@
 			{/if}
 			<div class="flex-1">
 				<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">{$t.game.components.yesterdayCharacter.title}</p>
-				<p class="mt-2 text-lg font-semibold text-white">{yesterdayCharacter.name}</p>
-				{#if yesterdayCharacter.epithets}
+				<p class="mt-2 text-lg font-semibold text-white">{getDisplayName(yesterdayCharacter)}</p>
+				{#if getDisplayEpithets(yesterdayCharacter).length > 0}
 					<p class="mt-1 text-sm text-slate-400">
-						{typeof yesterdayCharacter.epithets === 'string' 
-							? JSON.parse(yesterdayCharacter.epithets).join(', ') 
-							: (yesterdayCharacter.epithets as string[]).join(', ')}
+						{getDisplayEpithets(yesterdayCharacter).join(', ')}
 					</p>
 				{/if}
 			</div>
-			<a
-				href={"https://onepiece.fandom.com/fr/wiki/" + yesterdayCharacter.url}
-				target="_blank"
-				rel="noopener noreferrer"
-				class="w-full rounded-full border border-amber-200/40 bg-transparent px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-200 hover:text-amber-50 sm:w-auto"
-			>
-				{$t.game.components.yesterdayCharacter.openPage}
-			</a>
+			{#if isFrench}
+				<a
+					href="https://onepiece.fandom.com/fr/wiki/{getWikiUrl(yesterdayCharacter)}"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="w-full rounded-full border border-amber-200/40 bg-transparent px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-200 hover:text-amber-50 sm:w-auto"
+				>
+					{$t.game.components.yesterdayCharacter.openPage}
+				</a>
+			{:else}
+				<a
+					href="https://onepiece.fandom.com/wiki/{getWikiUrl(yesterdayCharacter)}"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="w-full rounded-full border border-amber-200/40 bg-transparent px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-200 hover:text-amber-50 sm:w-auto"
+				>
+					{$t.game.components.yesterdayCharacter.openPage}
+				</a>
+			{/if}
 		</div>
 	{:else}
 		<div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:text-left">