refactor: enhance type safety and improve layout structure in GuessHistoryTable component
This commit is contained in:
@@ -1,257 +1,439 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { formatBounty } from '$lib';
|
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;
|
export let columnVisibility: any;
|
||||||
</script>
|
</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 gap-4">
|
||||||
<div class="flex flex-col items-center gap-4 text-center">
|
<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>
|
</div>
|
||||||
{#if selectedCharacters.length === 0}
|
{#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}
|
{: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 -->
|
<!-- 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>
|
</div>
|
||||||
{#if columnVisibility.status !== false}
|
{#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"
|
||||||
</div>
|
>
|
||||||
|
<p
|
||||||
|
class="text-[9px] font-semibold tracking-wider text-amber-100 uppercase sm:text-xs"
|
||||||
|
>
|
||||||
|
Statut
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if columnVisibility.gender !== false}
|
{#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"
|
||||||
</div>
|
>
|
||||||
|
<p
|
||||||
|
class="text-[9px] font-semibold tracking-wider text-amber-100 uppercase sm:text-xs"
|
||||||
|
>
|
||||||
|
Genre
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if columnVisibility.affiliations !== false}
|
{#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"
|
||||||
</div>
|
>
|
||||||
|
<p
|
||||||
|
class="text-[9px] font-semibold tracking-wider text-amber-100 uppercase sm:text-xs"
|
||||||
|
>
|
||||||
|
Affiliations
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if columnVisibility.devilFruitType !== false}
|
{#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"
|
||||||
</div>
|
>
|
||||||
|
<p
|
||||||
|
class="text-[9px] font-semibold tracking-wider text-amber-100 uppercase sm:text-xs"
|
||||||
|
>
|
||||||
|
Fruit
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if columnVisibility.haki !== false}
|
{#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"
|
||||||
</div>
|
>
|
||||||
|
<p
|
||||||
|
class="text-[9px] font-semibold tracking-wider text-amber-100 uppercase sm:text-xs"
|
||||||
|
>
|
||||||
|
Haki
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if columnVisibility.bounty !== false}
|
{#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"
|
||||||
</div>
|
>
|
||||||
|
<p
|
||||||
|
class="text-[9px] font-semibold tracking-wider text-amber-100 uppercase sm:text-xs"
|
||||||
|
>
|
||||||
|
Prime
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if columnVisibility.height !== false}
|
{#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"
|
||||||
</div>
|
>
|
||||||
|
<p
|
||||||
|
class="text-[9px] font-semibold tracking-wider text-amber-100 uppercase sm:text-xs"
|
||||||
|
>
|
||||||
|
Taille
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if columnVisibility.origin !== false}
|
{#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"
|
||||||
</div>
|
>
|
||||||
|
<p
|
||||||
|
class="text-[9px] font-semibold tracking-wider text-amber-100 uppercase sm:text-xs"
|
||||||
|
>
|
||||||
|
Origine
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if columnVisibility.arc !== false}
|
{#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"
|
||||||
</div>
|
>
|
||||||
|
<p
|
||||||
|
class="text-[9px] font-semibold tracking-wider text-amber-100 uppercase sm:text-xs"
|
||||||
|
>
|
||||||
|
Arc
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Rows -->
|
<!-- Rows -->
|
||||||
{#each selectedCharacters as character (character.id)}
|
{#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 -->
|
<!-- 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}
|
{#if character.pictureUrl}
|
||||||
<a
|
<a
|
||||||
href={"https://onepiece.fandom.com/fr/wiki/" + character.url}
|
href={'https://onepiece.fandom.com/fr/wiki/' + character.url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="block w-full h-full"
|
class="block h-full w-full"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={character.pictureUrl}
|
src={character.pictureUrl}
|
||||||
alt={character.name}
|
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>
|
</a>
|
||||||
{:else}
|
{: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>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Vivant / Mort -->
|
<!-- Vivant / Mort -->
|
||||||
{#if columnVisibility.status !== false}
|
{#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 ===
|
||||||
{character.status === 'Alive'
|
dailyCharacter.status
|
||||||
? 'Vivant'
|
? 'bg-emerald-600/90'
|
||||||
: character.status === 'Deceased' || character.status === 'Dead'
|
: 'bg-red-900/60'} flex items-center justify-center p-1 sm:p-2"
|
||||||
? 'Mort'
|
>
|
||||||
: character.status === 'Unknown'
|
<p class="text-center text-[10px] font-bold text-white sm:text-xs md:text-sm">
|
||||||
? 'Inconnu'
|
{character.status === 'Alive'
|
||||||
: character.status === null
|
? 'Vivant'
|
||||||
? '-'
|
: character.status === 'Dead'
|
||||||
: character.status || 'Inconnu'}
|
? 'Mort'
|
||||||
</p>
|
: character.status === 'Unknown'
|
||||||
</div>
|
? 'Inconnu'
|
||||||
|
: character.status === null
|
||||||
|
? '-'
|
||||||
|
: character.status || 'Inconnu'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Genre -->
|
<!-- Genre -->
|
||||||
{#if columnVisibility.gender !== false}
|
{#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
|
||||||
</p>
|
? 'bg-emerald-600/90'
|
||||||
</div>
|
: '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}
|
{/if}
|
||||||
|
|
||||||
<!-- Affiliations -->
|
<!-- Affiliations -->
|
||||||
{#if columnVisibility.affiliations !== false}
|
{#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
|
||||||
try {
|
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 {(() => {
|
||||||
const charAff = typeof character.affiliations === 'string'
|
try {
|
||||||
? ((character.affiliations as string).includes('[') ? JSON.parse(character.affiliations) : (character.affiliations as string).split(',').map((a: string) => a.trim()))
|
const charAff =
|
||||||
: character.affiliations;
|
typeof character.affiliations === 'string'
|
||||||
const dailyAff = typeof dailyCharacter.affiliations === 'string'
|
? (character.affiliations as string).includes('[')
|
||||||
? ((dailyCharacter.affiliations as string).includes('[') ? JSON.parse(dailyCharacter.affiliations) : (dailyCharacter.affiliations as string).split(',').map((a: string) => a.trim()))
|
? JSON.parse(character.affiliations)
|
||||||
: dailyCharacter.affiliations;
|
: (character.affiliations as string)
|
||||||
const charFirstAff = Array.isArray(charAff) ? charAff[0] : charAff;
|
.split(',')
|
||||||
const dailyFirstAff = Array.isArray(dailyAff) ? dailyAff[0] : dailyAff;
|
.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 charHasAff = charFirstAff && charFirstAff.trim() !== '';
|
||||||
const dailyHasAff = dailyFirstAff && dailyFirstAff.trim() !== '';
|
const dailyHasAff = dailyFirstAff && dailyFirstAff.trim() !== '';
|
||||||
|
|
||||||
// If both have the same affiliation status and value
|
// If both have the same affiliation status and value
|
||||||
if (charHasAff === dailyHasAff && ((!charHasAff && !dailyHasAff) || charFirstAff === dailyFirstAff)) {
|
if (
|
||||||
return 'bg-emerald-600/90';
|
charHasAff === dailyHasAff &&
|
||||||
}
|
((!charHasAff && !dailyHasAff) || charFirstAff === dailyFirstAff)
|
||||||
return 'bg-red-900/60';
|
) {
|
||||||
} catch (e) {
|
return 'bg-emerald-600/90';
|
||||||
return 'bg-slate-950/60';
|
}
|
||||||
}
|
return 'bg-red-900/60';
|
||||||
})()} p-1 sm:p-2 flex items-center justify-center overflow-hidden">
|
} catch (e) {
|
||||||
{#if character.affiliations}
|
console.error('Error parsing affiliations for character', character.name, e);
|
||||||
{@const parsedAffiliations = typeof character.affiliations === 'string'
|
return 'bg-slate-950/60';
|
||||||
? (character.affiliations.includes('[') ? JSON.parse(character.affiliations) : character.affiliations.split(',').map((a: string) => a.trim()))
|
}
|
||||||
: character.affiliations}
|
})()} flex items-center justify-center overflow-hidden p-1 sm:p-2"
|
||||||
{#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>
|
{#if 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]}
|
||||||
|
</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}
|
{: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="text-center text-xs font-bold text-slate-400 sm:text-sm md:text-base">
|
||||||
|
-
|
||||||
|
</p>
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
</div>
|
||||||
<p class="text-xs sm:text-sm md:text-base font-bold text-slate-400 text-center">-</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Fruit -->
|
<!-- Fruit -->
|
||||||
{#if columnVisibility.devilFruitType !== false}
|
{#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
|
||||||
{#if character.devilFruitType}
|
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 ===
|
||||||
<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center">{character.devilFruitType}</p>
|
dailyCharacter.devilFruitType
|
||||||
{:else}
|
? 'bg-emerald-600/90'
|
||||||
<p class="text-2xl sm:text-3xl md:text-5xl font-bold text-white text-center">✕</p>
|
: 'bg-red-900/60'} flex items-center justify-center p-1 sm:p-2"
|
||||||
{/if}
|
>
|
||||||
</div>
|
{#if character.devilFruitType}
|
||||||
|
<p class="text-center text-[10px] font-bold text-white sm:text-xs md:text-sm">
|
||||||
|
{character.devilFruitType}
|
||||||
|
</p>
|
||||||
|
{:else}
|
||||||
|
<p class="text-center text-2xl font-bold text-white sm:text-3xl md:text-5xl">
|
||||||
|
✕
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Haki -->
|
<!-- Haki -->
|
||||||
{#if columnVisibility.haki !== false}
|
{#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 {(() => {
|
||||||
return 'bg-emerald-600/90';
|
if (
|
||||||
} else if ((character.hakiObservation && dailyCharacter.hakiObservation) ||
|
character.hakiObservation === dailyCharacter.hakiObservation &&
|
||||||
(character.hakiArmament && dailyCharacter.hakiArmament) ||
|
character.hakiArmament === dailyCharacter.hakiArmament &&
|
||||||
(character.hakiConqueror && dailyCharacter.hakiConqueror)) {
|
character.hakiConqueror === dailyCharacter.hakiConqueror
|
||||||
return 'bg-yellow-600/80';
|
) {
|
||||||
} else {
|
return 'bg-emerald-600/90';
|
||||||
return 'bg-red-900/60';
|
} else if (
|
||||||
}
|
(character.hakiObservation && dailyCharacter.hakiObservation) ||
|
||||||
})()} p-1 sm:p-2 flex items-center justify-center">
|
(character.hakiArmament && dailyCharacter.hakiArmament) ||
|
||||||
<p class="text-sm sm:text-lg md:text-2xl font-bold text-white text-center">
|
(character.hakiConqueror && dailyCharacter.hakiConqueror)
|
||||||
{#if character.hakiObservation}<span title="Haki de l'Observation">👁️</span>{/if}
|
) {
|
||||||
{#if character.hakiArmament}<span title="Haki de l'Armement">🦾</span>{/if}
|
return 'bg-yellow-600/80';
|
||||||
{#if character.hakiConqueror}<span title="Haki des Rois">👑</span>{/if}
|
} else {
|
||||||
{#if !character.hakiObservation && !character.hakiArmament && !character.hakiConqueror}
|
return 'bg-red-900/60';
|
||||||
<span class="text-2xl sm:text-3xl md:text-5xl">✕</span>
|
}
|
||||||
{/if}
|
})()} flex items-center justify-center p-1 sm:p-2"
|
||||||
</p>
|
>
|
||||||
</div>
|
<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}
|
||||||
|
<span class="text-2xl sm:text-3xl md:text-5xl">✕</span>
|
||||||
|
{/if}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Prime -->
|
<!-- Prime -->
|
||||||
{#if columnVisibility.bounty !== false}
|
{#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
|
||||||
{#if character.bounty != null && dailyCharacter.bounty != null && character.bounty !== dailyCharacter.bounty}
|
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 ===
|
||||||
<div class="absolute w-full h-full opacity-30 pointer-events-none" style="
|
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="pointer-events-none absolute h-full w-full opacity-30"
|
||||||
|
style="
|
||||||
background-color: rgb(203, 213, 225);
|
background-color: rgb(203, 213, 225);
|
||||||
clip-path: {character.bounty > dailyCharacter.bounty
|
clip-path: {character.bounty > dailyCharacter.bounty
|
||||||
? 'polygon(97% 60%,80% 60%,80% 5%,20% 5%,20% 60%,3% 60%,50% 95%)'
|
? '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%)'};
|
: 'polygon(97% 40%,80% 40%,80% 95%,20% 95%,20% 40%,3% 40%,50% 5%)'};
|
||||||
"></div>
|
"
|
||||||
{/if}
|
></div>
|
||||||
{#if character.bounty != null}
|
{/if}
|
||||||
<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">{formatBounty(character.bounty)} ฿</p>
|
{#if character.bounty != null}
|
||||||
{:else}
|
<p
|
||||||
<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">Inconnue</p>
|
class="relative z-10 text-center text-[10px] font-bold text-white sm:text-xs md:text-sm"
|
||||||
{/if}
|
>
|
||||||
</div>
|
{formatBounty(character.bounty)} ฿
|
||||||
|
</p>
|
||||||
|
{:else}
|
||||||
|
<p
|
||||||
|
class="relative z-10 text-center text-[10px] font-bold text-white sm:text-xs md:text-sm"
|
||||||
|
>
|
||||||
|
Inconnue
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Taille -->
|
<!-- Taille -->
|
||||||
{#if columnVisibility.height !== false}
|
{#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
|
||||||
{#if character.height && dailyCharacter.height && character.height !== dailyCharacter.height}
|
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 ===
|
||||||
<div class="absolute w-full h-full opacity-30 pointer-events-none" style="
|
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="pointer-events-none absolute h-full w-full opacity-30"
|
||||||
|
style="
|
||||||
background-color: rgb(203, 213, 225);
|
background-color: rgb(203, 213, 225);
|
||||||
clip-path: {character.height > dailyCharacter.height
|
clip-path: {character.height > dailyCharacter.height
|
||||||
? 'polygon(97% 60%,80% 60%,80% 5%,20% 5%,20% 60%,3% 60%,50% 95%)'
|
? '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%)'};
|
: 'polygon(97% 40%,80% 40%,80% 95%,20% 95%,20% 40%,3% 40%,50% 5%)'};
|
||||||
"></div>
|
"
|
||||||
{/if}
|
></div>
|
||||||
{#if character.height}
|
{/if}
|
||||||
<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">{character.height} m</p>
|
{#if character.height}
|
||||||
|
<p
|
||||||
|
class="relative z-10 text-center text-[10px] font-bold text-white sm:text-xs md:text-sm"
|
||||||
|
>
|
||||||
|
{character.height} m
|
||||||
|
</p>
|
||||||
{:else}
|
{:else}
|
||||||
<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">Inconnue</p>
|
<p
|
||||||
{/if}
|
class="relative z-10 text-center text-[10px] font-bold text-white sm:text-xs md:text-sm"
|
||||||
</div>
|
>
|
||||||
|
Inconnue
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Origine -->
|
<!-- Origine -->
|
||||||
{#if columnVisibility.origin !== false}
|
{#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 ===
|
||||||
</div>
|
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}
|
{/if}
|
||||||
|
|
||||||
<!-- Arc -->
|
<!-- Arc -->
|
||||||
{#if columnVisibility.arc !== false}
|
{#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
|
||||||
{#if character.arcName !== dailyCharacter.arcName && character.firstAppearance && dailyCharacter.firstAppearance && character.firstAppearance !== dailyCharacter.firstAppearance}
|
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 ===
|
||||||
<div class="absolute w-full h-full opacity-30 pointer-events-none" style="
|
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="pointer-events-none absolute h-full w-full opacity-30"
|
||||||
|
style="
|
||||||
background-color: rgb(203, 213, 225);
|
background-color: rgb(203, 213, 225);
|
||||||
clip-path: {character.firstAppearance > dailyCharacter.firstAppearance
|
clip-path: {character.firstAppearance > dailyCharacter.firstAppearance
|
||||||
? 'polygon(97% 60%,80% 60%,80% 5%,20% 5%,20% 60%,3% 60%,50% 95%)'
|
? '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%)'};
|
: 'polygon(97% 40%,80% 40%,80% 95%,20% 95%,20% 40%,3% 40%,50% 5%)'};
|
||||||
"></div>
|
"
|
||||||
{/if}
|
></div>
|
||||||
<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">{character.arcName || 'Inconnu'}</p>
|
{/if}
|
||||||
</div>
|
<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}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
|||||||
Reference in New Issue
Block a user