refactor: enhance type safety and improve layout structure in GuessHistoryTable component

src/lib/components/GuessHistoryTable.svelte

@@ -1,105 +1,180 @@
 <script lang="ts">
 	import { formatBounty } from '$lib';
+	import type { CharacterWithRelations } from '$lib/server/daily-character';
 
-	export let selectedCharacters: any[];
+	export let selectedCharacters: CharacterWithRelations[];
-	export let dailyCharacter: any;
+	export let dailyCharacter: CharacterWithRelations;
 	export let columnVisibility: any;
 </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">
+<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"
+>
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col items-center gap-4 text-center">
-			<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">Historique</p>
+			<p class="text-xs font-semibold tracking-[0.28em] text-amber-100 uppercase">Historique</p>
 		</div>
 		{#if selectedCharacters.length === 0}
-			<p class="text-sm text-slate-200 text-center">Aucune tentative pour le moment.</p>
+			<p class="text-center text-sm text-slate-200">Aucune tentative pour le moment.</p>
 		{:else}
-			<div class="overflow-x-auto pb-2 -mx-6 px-6 sm:mx-0 sm:px-0">
+			<div class="-mx-6 overflow-x-auto px-6 pb-2 sm:mx-0 sm:px-0">
-				<div class="w-max min-w-max mx-auto">
+				<div class="mx-auto w-max min-w-max">
 					<!-- Header -->
-					<div class="flex gap-1 sm:gap-2 mb-2">
+					<div class="mb-2 flex gap-1 sm:gap-2">
-						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+						<div
-								<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Personnage</p>
+							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"
+							>
+								Personnage
+							</p>
 						</div>
 						{#if columnVisibility.status !== false}
-						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<div
-							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Statut</p>
+								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"
+								>
+									Statut
+								</p>
 							</div>
 						{/if}
 						{#if columnVisibility.gender !== false}
-						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<div
-							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Genre</p>
+								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"
+								>
+									Genre
+								</p>
 							</div>
 						{/if}
 						{#if columnVisibility.affiliations !== false}
-						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<div
-							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Affiliations</p>
+								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"
+								>
+									Affiliations
+								</p>
 							</div>
 						{/if}
 						{#if columnVisibility.devilFruitType !== false}
-						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<div
-							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Fruit</p>
+								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"
+								>
+									Fruit
+								</p>
 							</div>
 						{/if}
 						{#if columnVisibility.haki !== false}
-						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<div
-							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Haki</p>
+								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"
+								>
+									Haki
+								</p>
 							</div>
 						{/if}
 						{#if columnVisibility.bounty !== false}
-						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<div
-							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Prime</p>
+								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"
+								>
+									Prime
+								</p>
 							</div>
 						{/if}
 						{#if columnVisibility.height !== false}
-						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<div
-							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Taille</p>
+								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"
+								>
+									Taille
+								</p>
 							</div>
 						{/if}
 						{#if columnVisibility.origin !== false}
-						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<div
-							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Origine</p>
+								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"
+								>
+									Origine
+								</p>
 							</div>
 						{/if}
 						{#if columnVisibility.arc !== false}
-						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<div
-							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Arc</p>
+								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"
+								>
+									Arc
+								</p>
 							</div>
 						{/if}
 					</div>
 
 					<!-- Rows -->
 					{#each selectedCharacters as character (character.id)}
-						<div class="flex gap-1 sm:gap-2 mb-2">
+						<div class="mb-2 flex gap-1 sm:gap-2">
 							<!-- Personnage -->
-							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 bg-slate-950/60 overflow-hidden">
+							<div
+								class="h-16 w-16 shrink-0 overflow-hidden rounded-lg border border-white/10 bg-slate-950/60 sm:h-20 sm:w-20 md:h-24 md:w-24"
+							>
 								{#if character.pictureUrl}
 									<a
-									href={"https://onepiece.fandom.com/fr/wiki/" + character.url}
+										href={'https://onepiece.fandom.com/fr/wiki/' + character.url}
 										target="_blank"
 										rel="noopener noreferrer"
-									class="block w-full h-full"
+										class="block h-full w-full"
 									>
 										<img
 											src={character.pictureUrl}
 											alt={character.name}
-										class="w-full h-full object-cover hover:opacity-80 transition-opacity cursor-pointer"
+											class="h-full w-full cursor-pointer object-cover transition-opacity hover:opacity-80"
 										/>
 									</a>
 								{:else}
-									<div class="w-full h-full bg-slate-800 flex items-center justify-center p-1 sm:p-2">
+									<div
-										<span class="text-xs sm:text-sm md:text-xl text-center font-semibold line-clamp-3">{character.name}</span>
+										class="flex h-full w-full items-center justify-center bg-slate-800 p-1 sm:p-2"
+									>
+										<span
+											class="line-clamp-3 text-center text-xs font-semibold sm:text-sm md:text-xl"
+											>{character.name}</span
+										>
 									</div>
 								{/if}
 							</div>
 
 							<!-- Vivant / Mort -->
 							{#if columnVisibility.status !== false}
-							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.status === dailyCharacter.status ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center">
+								<div
-								<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center">
+									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.status ===
+									dailyCharacter.status
+										? '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.status === 'Alive'
 											? 'Vivant'
-										: character.status === 'Deceased' || character.status === 'Dead'
+											: character.status === 'Dead'
 												? 'Mort'
 												: character.status === 'Unknown'
 													? 'Inconnu'
@@ -112,22 +187,42 @@
 
 							<!-- Genre -->
 							{#if columnVisibility.gender !== false}
-							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.gender === dailyCharacter.gender ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center">
+								<div
-								<p class="text-xs sm:text-sm md:text-base font-bold text-white text-center">
+									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.gender ===
-									{character.gender === 'Male' ? 'Homme' : character.gender === 'Female' ? 'Femme' : character.gender || 'Inconnu'}
+									dailyCharacter.gender
+										? 'bg-emerald-600/90'
+										: 'bg-red-900/60'} flex items-center justify-center p-1 sm:p-2"
+								>
+									<p class="text-center text-xs font-bold text-white sm:text-sm md:text-base">
+										{character.gender === 'Male'
+											? 'Homme'
+											: character.gender === 'Female'
+												? 'Femme'
+												: character.gender || 'Inconnu'}
 									</p>
 								</div>
 							{/if}
 
 							<!-- Affiliations -->
 							{#if columnVisibility.affiliations !== false}
-							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {(() => {
+								<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 {(() => {
 										try {
-									const charAff = typeof character.affiliations === 'string' 
+											const charAff =
-										? ((character.affiliations as string).includes('[') ? JSON.parse(character.affiliations) : (character.affiliations as string).split(',').map((a: string) => a.trim()))
+												typeof character.affiliations === 'string'
+													? (character.affiliations as string).includes('[')
+														? JSON.parse(character.affiliations)
+														: (character.affiliations as string)
+																.split(',')
+																.map((a: string) => a.trim())
 													: character.affiliations;
-									const dailyAff = typeof dailyCharacter.affiliations === 'string'
+											const dailyAff =
-										? ((dailyCharacter.affiliations as string).includes('[') ? JSON.parse(dailyCharacter.affiliations) : (dailyCharacter.affiliations as string).split(',').map((a: string) => a.trim()))
+												typeof dailyCharacter.affiliations === 'string'
+													? (dailyCharacter.affiliations as string).includes('[')
+														? JSON.parse(dailyCharacter.affiliations)
+														: (dailyCharacter.affiliations as string)
+																.split(',')
+																.map((a: string) => a.trim())
 													: dailyCharacter.affiliations;
 											const charFirstAff = Array.isArray(charAff) ? charAff[0] : charAff;
 											const dailyFirstAff = Array.isArray(dailyAff) ? dailyAff[0] : dailyAff;
@@ -136,55 +231,91 @@
 											const dailyHasAff = dailyFirstAff && dailyFirstAff.trim() !== '';
 
 											// If both have the same affiliation status and value
-									if (charHasAff === dailyHasAff && ((!charHasAff && !dailyHasAff) || charFirstAff === dailyFirstAff)) {
+											if (
+												charHasAff === dailyHasAff &&
+												((!charHasAff && !dailyHasAff) || charFirstAff === dailyFirstAff)
+											) {
 												return 'bg-emerald-600/90';
 											}
 											return 'bg-red-900/60';
 										} catch (e) {
+											console.error('Error parsing affiliations for character', character.name, e);
 											return 'bg-slate-950/60';
 										}
-							})()} p-1 sm:p-2 flex items-center justify-center overflow-hidden">
+									})()} flex items-center justify-center overflow-hidden p-1 sm:p-2"
+								>
 									{#if character.affiliations}
-									{@const parsedAffiliations = typeof character.affiliations === 'string' 
+										{@const parsedAffiliations =
-										? (character.affiliations.includes('[') ? JSON.parse(character.affiliations) : character.affiliations.split(',').map((a: string) => a.trim()))
+											typeof character.affiliations === 'string'
+												? character.affiliations.includes('[')
+													? JSON.parse(character.affiliations)
+													: character.affiliations.split(',').map((a: string) => a.trim())
 												: character.affiliations}
 										{#if Array.isArray(parsedAffiliations) && parsedAffiliations.length > 0}
-										<p class="w-full text-[10px] sm:text-xs md:text-sm font-bold text-white text-center whitespace-normal break-words leading-tight">{parsedAffiliations[0]}</p>
+											<p
+												class="w-full text-center text-[10px] leading-tight font-bold wrap-break-word whitespace-normal text-white sm:text-xs md:text-sm"
+											>
+												{parsedAffiliations[0]}
+											</p>
 										{:else}
-										<p class="w-full text-[10px] sm:text-xs md:text-sm font-bold text-white text-center whitespace-normal break-words leading-tight">{parsedAffiliations}</p>
+											<p
+												class="w-full text-center text-[10px] leading-tight font-bold wrap-break-word whitespace-normal text-white sm:text-xs md:text-sm"
+											>
+												{parsedAffiliations}
+											</p>
 										{/if}
 									{:else}
-									<p class="text-xs sm:text-sm md:text-base font-bold text-slate-400 text-center">-</p>
+										<p class="text-center text-xs font-bold text-slate-400 sm:text-sm md:text-base">
+											-
+										</p>
 									{/if}
 								</div>
 							{/if}
 
 							<!-- Fruit -->
 							{#if columnVisibility.devilFruitType !== false}
-							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.devilFruitType === dailyCharacter.devilFruitType ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center">
+								<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.devilFruitType ===
+									dailyCharacter.devilFruitType
+										? 'bg-emerald-600/90'
+										: 'bg-red-900/60'} flex items-center justify-center p-1 sm:p-2"
+								>
 									{#if character.devilFruitType}
-								<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center">{character.devilFruitType}</p>
+										<p class="text-center text-[10px] font-bold text-white sm:text-xs md:text-sm">
+											{character.devilFruitType}
+										</p>
 									{:else}
-								<p class="text-2xl sm:text-3xl md:text-5xl font-bold text-white text-center">✕</p>
+										<p class="text-center text-2xl font-bold text-white sm:text-3xl md:text-5xl">
+											✕
+										</p>
 									{/if}
 								</div>
 							{/if}
 
 							<!-- Haki -->
 							{#if columnVisibility.haki !== false}
-							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {(() => {
+								<div
-								if (character.hakiObservation === dailyCharacter.hakiObservation && character.hakiArmament === dailyCharacter.hakiArmament && character.hakiConqueror === dailyCharacter.hakiConqueror) {
+									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 {(() => {
+										if (
+											character.hakiObservation === dailyCharacter.hakiObservation &&
+											character.hakiArmament === dailyCharacter.hakiArmament &&
+											character.hakiConqueror === dailyCharacter.hakiConqueror
+										) {
 											return 'bg-emerald-600/90';
-								} else if ((character.hakiObservation && dailyCharacter.hakiObservation) ||
+										} else if (
+											(character.hakiObservation && dailyCharacter.hakiObservation) ||
 											(character.hakiArmament && dailyCharacter.hakiArmament) ||
-									(character.hakiConqueror && dailyCharacter.hakiConqueror)) {
+											(character.hakiConqueror && dailyCharacter.hakiConqueror)
+										) {
 											return 'bg-yellow-600/80';
 										} else {
 											return 'bg-red-900/60';
 										}
-							})()} p-1 sm:p-2 flex items-center justify-center">
+									})()} flex items-center justify-center p-1 sm:p-2"
-							<p class="text-sm sm:text-lg md:text-2xl font-bold text-white text-center">
+								>
-								{#if character.hakiObservation}<span title="Haki de l'Observation">👁️</span>{/if}
+									<p class="text-center text-sm font-bold text-white sm:text-lg md:text-2xl">
+										{#if character.hakiObservation}<span title="Haki de l'Observation">👁️</span
+											>{/if}
 										{#if character.hakiArmament}<span title="Haki de l'Armement">🦾</span>{/if}
 										{#if character.hakiConqueror}<span title="Haki des Rois">👑</span>{/if}
 										{#if !character.hakiObservation && !character.hakiArmament && !character.hakiConqueror}
@@ -196,61 +327,112 @@
 
 							<!-- Prime -->
 							{#if columnVisibility.bounty !== false}
-							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.bounty === dailyCharacter.bounty ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center relative overflow-hidden">
+								<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.bounty ===
+									dailyCharacter.bounty
+										? 'bg-emerald-600/90'
+										: 'bg-red-900/60'} relative flex items-center justify-center overflow-hidden p-1 sm:p-2"
+								>
 									{#if character.bounty != null && dailyCharacter.bounty != null && character.bounty !== dailyCharacter.bounty}
-								<div class="absolute w-full h-full opacity-30 pointer-events-none" style="
+										<div
+											class="pointer-events-none absolute h-full w-full opacity-30"
+											style="
 									background-color: rgb(203, 213, 225);
 										clip-path: {character.bounty > dailyCharacter.bounty
 												? '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>
+								"
+										></div>
 									{/if}
 									{#if character.bounty != null}
-								<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">{formatBounty(character.bounty)} ฿</p>
+										<p
+											class="relative z-10 text-center text-[10px] font-bold text-white sm:text-xs md:text-sm"
+										>
+											{formatBounty(character.bounty)} ฿
+										</p>
 									{:else}
-									<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">Inconnue</p>
+										<p
+											class="relative z-10 text-center text-[10px] font-bold text-white sm:text-xs md:text-sm"
+										>
+											Inconnue
+										</p>
 									{/if}
 								</div>
 							{/if}
 
 							<!-- Taille -->
 							{#if columnVisibility.height !== false}
-								<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.height === dailyCharacter.height ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center relative overflow-hidden">
+								<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.height ===
+									dailyCharacter.height
+										? 'bg-emerald-600/90'
+										: 'bg-red-900/60'} relative flex items-center justify-center overflow-hidden p-1 sm:p-2"
+								>
 									{#if character.height && dailyCharacter.height && character.height !== dailyCharacter.height}
-									<div class="absolute w-full h-full opacity-30 pointer-events-none" style="
+										<div
+											class="pointer-events-none absolute h-full w-full opacity-30"
+											style="
 										background-color: rgb(203, 213, 225);
 										clip-path: {character.height > dailyCharacter.height
 												? '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>
+									"
+										></div>
 									{/if}
 									{#if character.height}
-										<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">{character.height} m</p>
+										<p
+											class="relative z-10 text-center text-[10px] font-bold text-white sm:text-xs md:text-sm"
+										>
+											{character.height} m
+										</p>
 									{:else}
-										<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">Inconnue</p>
+										<p
+											class="relative z-10 text-center text-[10px] font-bold text-white sm:text-xs md:text-sm"
+										>
+											Inconnue
+										</p>
 									{/if}
 								</div>
 							{/if}
 
 							<!-- Origine -->
 							{#if columnVisibility.origin !== false}
-								<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.origin === dailyCharacter.origin ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center">
+								<div
-									<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center">{character.origin || 'Inconnue'}</p>
+									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
+										? '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 || 'Inconnue'}
+									</p>
 								</div>
 							{/if}
 
 							<!-- Arc -->
 							{#if columnVisibility.arc !== false}
-								<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.arcName === dailyCharacter.arcName ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center relative overflow-hidden">
+								<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
+										? '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}
-								<div class="absolute w-full h-full opacity-30 pointer-events-none" style="
+										<div
+											class="pointer-events-none absolute h-full w-full opacity-30"
+											style="
 									background-color: rgb(203, 213, 225);
 									clip-path: {character.firstAppearance > dailyCharacter.firstAppearance
 												? '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>
+								"
+										></div>
 									{/if}
-								<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">{character.arcName || 'Inconnu'}</p>
+									<p
+										class="relative z-10 text-center text-[10px] font-bold text-white sm:text-xs md:text-sm"
+									>
+										{character.arcName || 'Inconnu'}
+									</p>
 								</div>
 							{/if}
 						</div>