feat: add fruit translation hints and update related logic in DailyFruitHint component

src/lib/components/DailyFruitHint.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { CharacterWithRelations } from '$lib/server/daily-character.js';
 	import type { DevilFruit } from '$lib/server/db/schema';
-	import { t } from '$lib/i18n';
+	import { language, t } from '$lib/i18n';
 
 	interface $$Props {
 		dailyFruit: DevilFruit | null;
@@ -12,12 +12,31 @@
 	export let selectedCharacters: NonNullable<$$Props['selectedCharacters']> = [];
 
 	let showFruitTypeHint = false;
+	let showFruitTranslationHint = false;
 
 	$: isFruitTypeAvailable = selectedCharacters.length >= 3;
+	$: isFruitTranslationAvailable = selectedCharacters.length >= 6;
 	$: guessesBeforeUnlock = Math.max(0, 3 - selectedCharacters.length);
+	$: translationGuessesBeforeUnlock = Math.max(0, 6 - selectedCharacters.length);
+	$: isFrench = $language === 'fr';
 	$: if (!isFruitTypeAvailable) {
 		showFruitTypeHint = false;
 	}
+	$: if (!isFruitTranslationAvailable) {
+		showFruitTranslationHint = false;
+	}
+
+	function getFruitTranslation(fruit: DevilFruit | null): string | null {
+		if (!fruit) {
+			return null;
+		}
+
+		if (isFrench) {
+			return fruit.frTranslatedName ?? fruit.translatedName ?? null;
+		}
+
+		return fruit.translatedName ?? fruit.frTranslatedName ?? null;
+	}
 </script>
 
 <svelte:head>
@@ -41,6 +60,7 @@
 </svelte:head>
 
 <div class="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
+	<div class="grid gap-3 sm:grid-cols-2">
 		<button
 			type="button"
 			class="flex w-full flex-col items-center justify-center rounded-2xl border border-white/10 px-3 py-4 transition-colors hover:bg-slate-900/80 {isFruitTypeAvailable ? 'bg-slate-950/60' : 'cursor-not-allowed bg-slate-950/30 opacity-50 hover:bg-slate-950/30'}"
@@ -56,4 +76,21 @@
 				<p class="mt-2 text-xs text-slate-400">{$t.game.components.hints.available}</p>
 			{/if}
 		</button>
+
+		<button
+			type="button"
+			class="flex w-full flex-col items-center justify-center rounded-2xl border border-white/10 px-3 py-4 transition-colors hover:bg-slate-900/80 {isFruitTranslationAvailable ? 'bg-slate-950/60' : 'cursor-not-allowed bg-slate-950/30 opacity-50 hover:bg-slate-950/30'}"
+			disabled={!isFruitTranslationAvailable}
+			onclick={() => (showFruitTranslationHint = !showFruitTranslationHint)}
+		>
+			<p class="text-sm font-medium text-amber-100">{$t.game.components.hints.fruitTranslation}</p>
+			{#if showFruitTranslationHint}
+				<p class="mt-2 text-xs font-semibold text-white">{getFruitTranslation(dailyFruit) || $t.game.components.hints.unknown}</p>
+			{:else if translationGuessesBeforeUnlock > 0}
+				<p class="mt-2 text-xs text-slate-400">{translationGuessesBeforeUnlock} {$t.game.components.hints.beforeUnlock}</p>
+			{:else}
+				<p class="mt-2 text-xs text-slate-400">{$t.game.components.hints.available}</p>
+			{/if}
+		</button>
+	</div>
 </div>

src/lib/i18n/en.json

@@ -161,6 +161,7 @@
 				"origin": "Origin",
 				"devilFruit": "Devil fruit",
 				"fruitKind": "Fruit type",
+				"fruitTranslation": "Fruit translation",
 				"affiliation": "Affiliation",
 				"unknown": "Unknown",
 				"none": "None",

src/lib/i18n/fr.json

@@ -161,6 +161,7 @@
 				"origin": "Origine",
 				"devilFruit": "Fruit du demon",
 				"fruitKind": "Type du fruit",
+				"fruitTranslation": "Traduction du fruit",
 				"affiliation": "Affiliation",
 				"unknown": "Inconnue",
 				"none": "Aucun",