refactor: enhance affiliation handling and improve type definitions in GuessHistoryTable component

src/lib/components/GuessHistoryTable.svelte

@@ -4,7 +4,63 @@
 
 	export let selectedCharacters: CharacterWithRelations[];
 	export let dailyCharacter: CharacterWithRelations;
-	export let columnVisibility: any;
+	export let columnVisibility: {
+		status?: boolean;
+		gender?: boolean;
+		affiliations?: boolean;
+		devilFruitType?: boolean;
+		haki?: boolean;
+		bounty?: boolean;
+		height?: boolean;
+		origin?: boolean;
+		arc?: boolean;
+	};
+
+	function normalizeAffiliations(value: unknown): string[] {
+		if (Array.isArray(value)) {
+			return value
+				.map((entry) => (typeof entry === 'string' ? entry.trim() : ''))
+				.filter((entry) => entry.length > 0);
+		}
+
+		if (typeof value === 'string') {
+			const trimmed = value.trim();
+			if (trimmed.length === 0) {
+				return [];
+			}
+
+			if (trimmed.startsWith('[')) {
+				try {
+					const parsed = JSON.parse(trimmed);
+					if (Array.isArray(parsed)) {
+						return parsed
+							.map((entry) => (typeof entry === 'string' ? entry.trim() : ''))
+							.filter((entry) => entry.length > 0);
+					}
+				} catch {
+					return [];
+				}
+			}
+
+			return trimmed
+				.split(',')
+				.map((entry) => entry.trim())
+				.filter((entry) => entry.length > 0);
+		}
+
+		return [];
+	}
+
+	function firstAffiliation(value: unknown): string | null {
+		const affiliations = normalizeAffiliations(value);
+		return affiliations.length > 0 ? affiliations[0] : null;
+	}
+
+	function hasMatchingPrimaryAffiliation(characterAffiliations: unknown, dailyAffiliations: unknown): boolean {
+		const characterPrimary = firstAffiliation(characterAffiliations);
+		const dailyPrimary = firstAffiliation(dailyAffiliations);
+		return characterPrimary === dailyPrimary;
+	}
 </script>
 
 <section
@@ -206,64 +262,16 @@
 							<!-- Affiliations -->
 							{#if columnVisibility.affiliations !== 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 {(() => {
+									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 {hasMatchingPrimaryAffiliation(character.affiliations, dailyCharacter.affiliations)
-										try {
+										? 'bg-emerald-600/90'
-											const charAff =
+										: 'bg-red-900/60'} flex items-center justify-center overflow-hidden p-1 sm:p-2"
-												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'
-													? (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;
-
-											const charHasAff = charFirstAff && charFirstAff.trim() !== '';
-											const dailyHasAff = dailyFirstAff && dailyFirstAff.trim() !== '';
-
-											// If both have the same affiliation status and value
-											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';
-										}
-									})()} flex items-center justify-center overflow-hidden p-1 sm:p-2"
 								>
-									{#if character.affiliations}
+									{#if firstAffiliation(character.affiliations)}
-										{@const parsedAffiliations =
-											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-center text-[10px] leading-tight font-bold wrap-break-word whitespace-normal text-white sm:text-xs md:text-sm"
 											>
-												{parsedAffiliations[0]}
+												{firstAffiliation(character.affiliations)}
 											</p>
-										{:else}
-											<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-center text-xs font-bold text-slate-400 sm:text-sm md:text-base">
 											-