417 lines
14 KiB
Svelte
417 lines
14 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { formatBounty } from '$lib';
|
|
import CharacterSearchInput from '$lib/components/CharacterSearchInput.svelte';
|
|
import GuessHistoryTable from '$lib/components/GuessHistoryTable.svelte';
|
|
|
|
export let data;
|
|
|
|
let selectedCharacters: any[] = [];
|
|
let currentCharacter: any = null;
|
|
let isLoaded = false;
|
|
let score = 0;
|
|
let columnVisibility: Record<string, boolean> = {};
|
|
const columnDisplayNames: Record<string, string> = {
|
|
status: 'Statut',
|
|
gender: 'Genre',
|
|
affiliations: 'Affiliations',
|
|
devilFruitType: 'Fruit',
|
|
haki: 'Haki',
|
|
bounty: 'Prime',
|
|
height: 'Taille',
|
|
origin: 'Origine',
|
|
arc: 'Arc'
|
|
};
|
|
|
|
let wasOriginAvailable = false;
|
|
let wasFruitAvailable = false;
|
|
let wasAffiliationAvailable = false;
|
|
let showOriginUnlock = false;
|
|
let showFruitUnlock = false;
|
|
let showAffiliationUnlock = false;
|
|
|
|
// Load from localStorage on mount
|
|
onMount(() => {
|
|
const storedScore = localStorage.getItem('infiniteScore');
|
|
if (storedScore) {
|
|
score = parseInt(storedScore, 10);
|
|
}
|
|
|
|
// Load column visibility from localStorage, fallback to server defaults
|
|
const storedColumnVisibility = localStorage.getItem('infiniteColumnVisibility');
|
|
if (storedColumnVisibility) {
|
|
try {
|
|
columnVisibility = JSON.parse(storedColumnVisibility);
|
|
} catch (e) {
|
|
columnVisibility = data.columnVisibility || {};
|
|
}
|
|
} else {
|
|
columnVisibility = data.columnVisibility || {};
|
|
}
|
|
|
|
// Load current character ID and history IDs from localStorage
|
|
const storedCharacterId = localStorage.getItem('infiniteCurrentCharacterId');
|
|
const storedHistoryIds = localStorage.getItem('infiniteSelectedCharacterIds');
|
|
|
|
if (storedCharacterId && storedHistoryIds && characters.length > 0) {
|
|
try {
|
|
const charId = JSON.parse(storedCharacterId);
|
|
const historyIds = JSON.parse(storedHistoryIds);
|
|
|
|
// Find the character object by ID
|
|
currentCharacter = characters.find((c: any) => c.id === charId);
|
|
|
|
// Find all character objects by their IDs
|
|
selectedCharacters = historyIds
|
|
.map((id: string) => characters.find((c: any) => c.id === id))
|
|
.filter((c: any) => c !== undefined);
|
|
|
|
// If character not found, generate a new one
|
|
if (!currentCharacter) {
|
|
generateNewCharacter();
|
|
}
|
|
} catch (e) {
|
|
// If parsing fails, generate a new character
|
|
generateNewCharacter();
|
|
}
|
|
} else {
|
|
generateNewCharacter();
|
|
}
|
|
|
|
isLoaded = true;
|
|
});
|
|
|
|
// Save score to localStorage whenever it changes
|
|
$: if (isLoaded) {
|
|
localStorage.setItem('infiniteScore', score.toString());
|
|
}
|
|
|
|
// Save column visibility to localStorage whenever it changes
|
|
$: if (isLoaded) {
|
|
localStorage.setItem('infiniteColumnVisibility', JSON.stringify(columnVisibility));
|
|
}
|
|
|
|
// Save current character ID to localStorage whenever it changes
|
|
$: if (isLoaded && currentCharacter) {
|
|
localStorage.setItem('infiniteCurrentCharacterId', JSON.stringify(currentCharacter.id));
|
|
}
|
|
|
|
// Save selected character IDs to localStorage whenever it changes
|
|
$: if (isLoaded) {
|
|
const selectedIds = selectedCharacters.map((c: any) => c.id);
|
|
localStorage.setItem('infiniteSelectedCharacterIds', JSON.stringify(selectedIds));
|
|
}
|
|
|
|
$: characters = data.characters || [];
|
|
$: hasWon = currentCharacter && selectedCharacters.some(char => char.id === currentCharacter.id);
|
|
|
|
// Hint availability tracking for unlock animations
|
|
$: isOriginAvailable = selectedCharacters.length >= 5;
|
|
$: isFruitAvailable = selectedCharacters.length >= 10;
|
|
$: isAffiliationAvailable = selectedCharacters.length >= 15;
|
|
|
|
// Track hint unlocks
|
|
$: if (isLoaded) {
|
|
if (isOriginAvailable && !wasOriginAvailable) {
|
|
showOriginUnlock = true;
|
|
setTimeout(() => (showOriginUnlock = false), 600);
|
|
}
|
|
wasOriginAvailable = isOriginAvailable;
|
|
|
|
if (isFruitAvailable && !wasFruitAvailable) {
|
|
showFruitUnlock = true;
|
|
setTimeout(() => (showFruitUnlock = false), 600);
|
|
}
|
|
wasFruitAvailable = isFruitAvailable;
|
|
|
|
if (isAffiliationAvailable && !wasAffiliationAvailable) {
|
|
showAffiliationUnlock = true;
|
|
setTimeout(() => (showAffiliationUnlock = false), 600);
|
|
}
|
|
wasAffiliationAvailable = isAffiliationAvailable;
|
|
}
|
|
|
|
function generateNewCharacter() {
|
|
if (characters.length === 0) return;
|
|
currentCharacter = characters[Math.floor(Math.random() * characters.length)];
|
|
selectedCharacters = [];
|
|
}
|
|
|
|
function handleCharacterSelect(event: CustomEvent) {
|
|
const character = event.detail;
|
|
selectCharacter(character);
|
|
}
|
|
|
|
function selectCharacter(character: any) {
|
|
selectedCharacters = [character, ...selectedCharacters];
|
|
|
|
// Check if player won
|
|
if (character.id === currentCharacter.id) {
|
|
// Increment score (saved to localStorage via reactive statement)
|
|
score++;
|
|
// Don't auto-generate next character - wait for user to click "Recommencer"
|
|
}
|
|
}
|
|
|
|
function nextCharacter() {
|
|
generateNewCharacter();
|
|
}
|
|
|
|
function resetScore() {
|
|
score = 0;
|
|
selectedCharacters = [];
|
|
generateNewCharacter();
|
|
// Clear localStorage for current character and history
|
|
localStorage.removeItem('infiniteCurrentCharacterId');
|
|
localStorage.removeItem('infiniteSelectedCharacterIds');
|
|
}
|
|
|
|
function toggleColumnVisibility(column: string) {
|
|
columnVisibility[column] = !columnVisibility[column];
|
|
columnVisibility = columnVisibility; // Trigger reactivity
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>OnePieceDle - Mode Infini</title>
|
|
<style>
|
|
@keyframes shadow-pulse {
|
|
0% {
|
|
text-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(50, 50, 50, 0.8);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
text-shadow: 0 0 60px rgba(0, 0, 0, 0.9), 0 0 100px rgba(30, 30, 30, 1),
|
|
inset 0 0 50px rgba(0, 0, 0, 0.7);
|
|
opacity: 0.9;
|
|
}
|
|
100% {
|
|
text-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(50, 50, 50, 0.8);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.gecko-moria-effect {
|
|
animation: shadow-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
</style>
|
|
</svelte:head>
|
|
|
|
<main
|
|
class="relative min-h-screen overflow-hidden bg-slate-950 text-slate-100"
|
|
>
|
|
<div class="absolute inset-0 bg-gradient-to-br from-slate-950/85 via-slate-900/60 to-slate-950/80"></div>
|
|
<div
|
|
class="absolute inset-0 mix-blend-screen opacity-20 bg-[radial-gradient(circle_at_top,rgba(255,215,84,0.35),transparent_55%)]"
|
|
></div>
|
|
|
|
<div class="relative mx-auto flex min-h-screen w-full max-w-6xl flex-col px-6 py-8 sm:py-10">
|
|
<header class="flex flex-col items-start gap-6 w-full">
|
|
<div class="flex w-full items-center justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-3xl font-black uppercase tracking-[0.25em] text-amber-50 sm:text-5xl">
|
|
Mode Infini
|
|
</h1>
|
|
<p class="mt-2 text-2xl font-bold text-amber-300">Score: {score}</p>
|
|
</div>
|
|
{#if score > 0}
|
|
<button
|
|
class="rounded-full border border-amber-200/40 bg-transparent px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-200 hover:text-amber-50"
|
|
onclick={resetScore}
|
|
>
|
|
Réinitialiser
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
<p class="max-w-2xl text-base text-slate-200 sm:text-lg">
|
|
Devine des personnages à l'infini ! Chaque indice se débloque après un certain nombre de
|
|
tentatives. Bonne chance !
|
|
</p>
|
|
</header>
|
|
|
|
<section class="mt-10 grid gap-6">
|
|
{#if currentCharacter}
|
|
{#if hasWon}
|
|
<div
|
|
class="rounded-3xl border border-emerald-500/50 bg-emerald-500/10 p-4 shadow-[0_24px_60px_rgba(16,185,129,0.3)] backdrop-blur"
|
|
>
|
|
<div class="text-center">
|
|
<div class="text-3xl mb-2">🎉</div>
|
|
<h2 class="text-xl font-bold text-emerald-400 mb-1">Bien joué !</h2>
|
|
<p class="text-sm text-emerald-300">
|
|
Vous avez trouvé le personnage en {selectedCharacters.length}
|
|
{selectedCharacters.length > 1 ? 'tentatives' : 'tentative'} !
|
|
</p>
|
|
<div class="mt-3">
|
|
{#if currentCharacter.pictureUrl}
|
|
<a
|
|
href={'https://onepiece.fandom.com/fr/wiki/' + currentCharacter.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-block"
|
|
>
|
|
<img
|
|
src={currentCharacter.pictureUrl}
|
|
alt={currentCharacter.name}
|
|
class="w-20 h-20 mx-auto rounded-full border-2 border-emerald-400 shadow-lg object-cover hover:border-emerald-300 transition-colors cursor-pointer"
|
|
/>
|
|
</a>
|
|
{/if}
|
|
<p class="mt-2 text-lg font-bold text-white">{currentCharacter.name}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onclick={nextCharacter}
|
|
class="mt-4 rounded-full bg-emerald-500 px-6 py-2 text-sm font-semibold text-white transition hover:bg-emerald-600"
|
|
>
|
|
Recommencer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<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-3">
|
|
<button
|
|
type="button"
|
|
class="rounded-2xl border border-white/10 px-3 py-3 flex flex-col items-center justify-center cursor-pointer hover:bg-slate-900/80 transition-colors {isOriginAvailable
|
|
? 'bg-slate-950/60'
|
|
: 'bg-slate-950/30 opacity-50 cursor-not-allowed hover:bg-slate-950/30'} {showOriginUnlock
|
|
? 'hint-unlocking'
|
|
: ''}"
|
|
disabled={!isOriginAvailable}
|
|
onclick={() => (showOriginUnlock = !showOriginUnlock)}
|
|
>
|
|
<p class="text-sm font-medium text-amber-100">Origine</p>
|
|
{#if showOriginUnlock}
|
|
<p class="mt-2 text-xs text-white font-semibold">
|
|
{currentCharacter.origin || 'Inconnue'}
|
|
</p>
|
|
{:else if Math.max(0, 5 - selectedCharacters.length) > 0}
|
|
<p class="mt-2 text-xs text-slate-400">
|
|
{Math.max(0, 5 - selectedCharacters.length)} essais avant déblocage
|
|
</p>
|
|
{:else}
|
|
<p class="mt-2 text-xs text-slate-400">Indice disponible !</p>
|
|
{/if}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-2xl border border-white/10 px-3 py-3 flex flex-col items-center justify-center cursor-pointer hover:bg-slate-900/80 transition-colors {isFruitAvailable
|
|
? 'bg-slate-950/60'
|
|
: 'bg-slate-950/30 opacity-50 cursor-not-allowed hover:bg-slate-950/30'} {showFruitUnlock
|
|
? 'hint-unlocking'
|
|
: ''}"
|
|
disabled={!isFruitAvailable}
|
|
onclick={() => (showFruitUnlock = !showFruitUnlock)}
|
|
>
|
|
<p class="text-sm font-medium text-amber-100">Fruit du démon</p>
|
|
{#if showFruitUnlock}
|
|
<p class="mt-2 text-xs text-white font-semibold">
|
|
{currentCharacter.devilFruitName || 'Aucun'}
|
|
</p>
|
|
{:else if Math.max(0, 10 - selectedCharacters.length) > 0}
|
|
<p class="mt-2 text-xs text-slate-400">
|
|
{Math.max(0, 10 - selectedCharacters.length)} essais avant déblocage
|
|
</p>
|
|
{:else}
|
|
<p class="mt-2 text-xs text-slate-400">Indice disponible !</p>
|
|
{/if}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-2xl border border-white/10 px-3 py-3 flex flex-col items-center justify-center cursor-pointer hover:bg-slate-900/80 transition-colors {isAffiliationAvailable
|
|
? 'bg-slate-950/60'
|
|
: 'bg-slate-950/30 opacity-50 cursor-not-allowed hover:bg-slate-950/30'} {showAffiliationUnlock
|
|
? 'hint-unlocking'
|
|
: ''}"
|
|
disabled={!isAffiliationAvailable}
|
|
onclick={() => (showAffiliationUnlock = !showAffiliationUnlock)}
|
|
>
|
|
<p class="text-sm font-medium text-amber-100">Affiliation</p>
|
|
{#if showAffiliationUnlock}
|
|
{@const affiliations = typeof currentCharacter.affiliations === 'string'
|
|
? currentCharacter.affiliations.includes('[')
|
|
? JSON.parse(currentCharacter.affiliations)
|
|
: currentCharacter.affiliations
|
|
.split(',')
|
|
.map((a: string) => a.trim())
|
|
: currentCharacter.affiliations}
|
|
<p class="mt-2 text-xs text-white font-semibold">
|
|
{Array.isArray(affiliations) ? affiliations[0] : affiliations || 'Inconnue'}
|
|
</p>
|
|
{:else if Math.max(0, 15 - selectedCharacters.length) > 0}
|
|
<p class="mt-2 text-xs text-slate-400">
|
|
{Math.max(0, 15 - selectedCharacters.length)} essais avant déblocage
|
|
</p>
|
|
{:else}
|
|
<p class="mt-2 text-xs text-slate-400">Indice disponible !</p>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<CharacterSearchInput
|
|
{characters}
|
|
{selectedCharacters}
|
|
on:select={handleCharacterSelect}
|
|
/>
|
|
{/if}
|
|
{:else}
|
|
<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">
|
|
<p class="text-center text-slate-300">Chargement du personnage...</p>
|
|
</div>
|
|
{/if}
|
|
</section>
|
|
|
|
{#if currentCharacter}
|
|
<GuessHistoryTable
|
|
{selectedCharacters}
|
|
dailyCharacter={currentCharacter}
|
|
{columnVisibility}
|
|
/>
|
|
|
|
<!-- Column Visibility Toggle -->
|
|
<section class="mt-6">
|
|
<div class="rounded-2xl border border-white/10 bg-white/5 p-3 sm:p-4 backdrop-blur">
|
|
<div class="mb-3 flex items-center justify-between gap-3">
|
|
<h3 class="text-xs font-semibold uppercase tracking-[0.2em] text-amber-200">Colonnes</h3>
|
|
<p class="text-xs text-slate-400">
|
|
{Object.values(columnVisibility).filter(Boolean).length}/{Object.keys(columnVisibility).length}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
{#each Object.entries(columnVisibility) as [column, isVisible] (column)}
|
|
<button
|
|
type="button"
|
|
onclick={() => toggleColumnVisibility(column)}
|
|
class="rounded-full border px-2.5 py-1 text-xs font-medium transition-colors {isVisible
|
|
? 'border-amber-300/50 bg-amber-300/10 text-amber-100 hover:bg-amber-300/20'
|
|
: 'border-white/20 bg-slate-900/40 text-slate-400 hover:bg-slate-900/60'}"
|
|
>
|
|
{columnDisplayNames[column] || column.replace(/([A-Z])/g, ' $1').trim()}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
@keyframes hint-unlock {
|
|
0% {
|
|
box-shadow: 0 0 0 rgba(251, 146, 60, 0);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 20px rgba(251, 146, 60, 0.8);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 rgba(251, 146, 60, 0);
|
|
}
|
|
}
|
|
:global(.hint-unlocking) {
|
|
animation: hint-unlock 0.6s ease-out;
|
|
}
|
|
</style>
|