refactor: streamline character selection and improve rendering logic in +page.svelte

This commit is contained in:
2026-03-14 17:29:57 +01:00
parent fd83ac911a
commit 8b08950719

View File

@@ -15,13 +15,11 @@
let filterGender = $state('all');
let filterArc = $state('all');
let filterHaki = $state<'all' | 'observation' | 'armament' | 'conqueror' | 'none'>('all');
let selectedCharacterId = $state<string | null>(null);
let isEditModalOpen = $state(false);
let isSaving = $state(false);
let saveMessage = $state<{ type: 'success' | 'error'; text: string } | null>(null);
let dailyModeToast = $state<{ type: 'success' | 'error'; text: string } | null>(null);
let selectedChar = $state<any>(null);
let showOriginalValue = $state<Record<string, boolean>>({});
const showDailyModeToast = (type: 'success' | 'error', text: string) => {
dailyModeToast = { type, text };
@@ -38,12 +36,6 @@
}
};
const getFandomUrl = (url: string | null | undefined) => {
if (!url) return null;
if (url.startsWith('http://') || url.startsWith('https://')) return url;
return `https://onepiece.fandom.com/fr/wiki/${url}`;
};
let editForm = $state<any>({
id: '',
name: '',
@@ -98,7 +90,6 @@
};
const openEditModal = (char: any) => {
selectedCharacterId = char.id;
selectedChar = char;
const override = char.override || {};
@@ -123,13 +114,11 @@
arcId: override.arcId !== null && override.arcId !== undefined ? override.arcId : (char.arcId || ''),
status: override.status ?? ''
};
showOriginalValue = {};
isEditModalOpen = true;
};
const closeModal = () => {
isEditModalOpen = false;
selectedCharacterId = null;
selectedChar = null;
editForm = {
id: '',
@@ -179,6 +168,7 @@
}, 3000);
}
} catch (error) {
console.error('Error deleting character:', error);
saveMessage = {
type: 'error',
text: 'Error deleting character'
@@ -221,7 +211,7 @@
class="rounded-lg bg-slate-700 px-4 py-2 text-sm text-white outline-none transition focus:ring-2 focus:ring-amber-600"
>
<option value="all">All Statuses</option>
{#each data.availableStatuses as status}
{#each data.availableStatuses as status (status)}
<option value={status}>{status}</option>
{/each}
</select>
@@ -230,7 +220,7 @@
class="rounded-lg bg-slate-700 px-4 py-2 text-sm text-white outline-none transition focus:ring-2 focus:ring-amber-600"
>
<option value="all">All Genders</option>
{#each data.availableGenders as gender}
{#each data.availableGenders as gender (gender)}
<option value={gender}>{gender}</option>
{/each}
</select>
@@ -239,8 +229,8 @@
class="rounded-lg bg-slate-700 px-4 py-2 text-sm text-white outline-none transition focus:ring-2 focus:ring-amber-600"
>
<option value="all">All Arcs</option>
{#each data.arcs as arc}
<option value={String(arc.id)}>{arc.name}</option>
{#each data.arcs as arc (arc.id)}
<option value={arc.id}>{arc.name}</option>
{/each}
</select>
<select
@@ -284,17 +274,17 @@
</tr>
</thead>
<tbody>
{#each filteredCharacters as char}
{#each filteredCharacters as char (char.id)}
<tr class="border-b border-white/5 hover:bg-slate-800/50">
<!-- Character -->
<td class="px-4 py-4 text-sm text-white w-64 max-w-64 {isFieldOverridden(char, 'name') || isFieldOverridden(char, 'pictureUrl') ? 'bg-amber-500/10' : ''}">
<div class="flex items-center gap-3 min-w-0">
{#if getFandomUrl(char.displayValues.url)}
{#if char.displayValues.url}
<a
href={getFandomUrl(char.displayValues.url)}
href={"https://onepiece.fandom.com/fr/wiki/" + char.displayValues.url}
target="_blank"
rel="noopener noreferrer"
class="flex-shrink-0 transition-opacity hover:opacity-80"
class="shrink-0 transition-opacity hover:opacity-80"
>
{#if char.displayValues.pictureUrl}
<img
@@ -315,18 +305,18 @@
src={char.displayValues.pictureUrl}
alt={char.displayValues.name}
loading="lazy"
class="h-10 w-10 flex-shrink-0 rounded-full object-cover"
class="h-10 w-10 shrink-0 rounded-full object-cover"
/>
{:else}
<div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-slate-700 text-gray-400">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-700 text-gray-400">
{char.displayValues.name?.charAt(0).toUpperCase() || '?'}
</div>
{/if}
{/if}
<div class="flex flex-col min-w-0">
{#if getFandomUrl(char.displayValues.url)}
{#if char.displayValues.url}
<a
href={getFandomUrl(char.displayValues.url)}
href="https://onepiece.fandom.com/fr/wiki/${char.displayValues.url}"
target="_blank"
rel="noopener noreferrer"
class="font-medium truncate text-white hover:text-amber-200 hover:underline"
@@ -461,7 +451,7 @@
{/if}
{#if dailyModeToast}
<div class="fixed right-6 top-6 z-[60]">
<div class="fixed right-6 top-6 z-60">
<div
class={`rounded-lg border px-4 py-3 text-sm font-medium shadow-lg backdrop-blur ${
dailyModeToast.type === 'success'
@@ -628,7 +618,7 @@
class="w-full rounded-lg border border-gray-500 bg-slate-800 px-3 py-2 text-white"
>
<option value="">None</option>
{#each data.arcs as arc}
{#each data.arcs as arc (arc.id)}
<option value={arc.id}>{arc.name}</option>
{/each}
</select>
@@ -651,7 +641,7 @@
class="w-full rounded-lg border border-gray-500 bg-slate-800 px-3 py-2 text-white"
>
<option value="">None</option>
{#each data.devilFruits as fruit}
{#each data.devilFruits as fruit (fruit.id)}
<option value={fruit.id}>{fruit.name}</option>
{/each}
</select>