feat: implement daily character guessing game with local storage and hint system
- Added character selection and history management using local storage. - Implemented hint system that unlocks based on the number of guesses. - Enhanced UI with animations for hint unlocks and special win conditions. - Created a server endpoint to record wins in the database.
This commit is contained in:
9
src/routes/+page.server.ts
Normal file
9
src/routes/+page.server.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { getYesterdayCharacter } from '$lib/server/daily-character';
|
||||
|
||||
export async function load() {
|
||||
const yesterdayCharacter = await getYesterdayCharacter();
|
||||
|
||||
return {
|
||||
yesterdayCharacter: yesterdayCharacter || null
|
||||
};
|
||||
}
|
||||
@@ -1,19 +1,21 @@
|
||||
<script lang="ts">
|
||||
export let data;
|
||||
|
||||
$: yesterdayCharacter = data.yesterdayCharacter;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>OnePieceDle</title>
|
||||
</svelte:head>
|
||||
|
||||
<main
|
||||
class="relative min-h-screen overflow-hidden bg-slate-950 text-slate-100"
|
||||
style="background-image: url('/one-piece-bg.jpg');"
|
||||
>
|
||||
<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 items-center justify-between px-6 py-24 sm:py-28">
|
||||
<div class="relative mx-auto flex min-h-screen w-full max-w-6xl flex-col items-center justify-between px-6 py-10">
|
||||
<div class="flex w-full flex-1 flex-col items-center justify-between gap-12">
|
||||
<div class="rounded-full border border-amber-200/30 bg-amber-100/10 px-5 py-2 text-xs font-semibold uppercase tracking-[0.35em] text-amber-100">
|
||||
Jeu de devinettes Grand Line
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl font-black uppercase tracking-[0.3em] text-amber-50 sm:text-6xl">
|
||||
OnePieceDle
|
||||
@@ -24,7 +26,7 @@
|
||||
</div>
|
||||
<div class="grid w-full gap-4 sm:grid-cols-2">
|
||||
<div class="rounded-2xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
|
||||
<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">Voyage du jour</h2>
|
||||
<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">Personnage du jour</h2>
|
||||
<p class="mt-3 text-lg font-semibold text-white">Nouveau mystere toutes les 24 heures</p>
|
||||
<p class="mt-2 text-sm text-slate-200">Compare tes essais, debloque des indices et garde ta serie.</p>
|
||||
<a
|
||||
@@ -39,24 +41,56 @@
|
||||
<p class="mt-3 text-lg font-semibold text-white">Entraine-toi avec des pirates legendaires</p>
|
||||
<p class="mt-2 text-sm text-slate-200">Choisis une epoque, regle la difficulte et vogue a ton rythme.</p>
|
||||
<button class="mt-5 w-full 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">
|
||||
Choisir un voyage
|
||||
En construction
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur sm:p-8">
|
||||
{#if yesterdayCharacter}
|
||||
<div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:text-left">
|
||||
{#if yesterdayCharacter.pictureUrl}
|
||||
<img
|
||||
src={yesterdayCharacter.pictureUrl}
|
||||
alt={yesterdayCharacter.name}
|
||||
class="h-20 w-20 rounded-full border border-amber-200/40 object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<div class="flex h-20 w-20 items-center justify-center rounded-full border border-amber-200/40 bg-slate-900/70 text-xs uppercase tracking-[0.25em] text-amber-100">
|
||||
Photo
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">Personnage d'hier</p>
|
||||
<p class="mt-2 text-lg font-semibold text-white">{yesterdayCharacter.name}</p>
|
||||
{#if yesterdayCharacter.epithets}
|
||||
<p class="mt-1 text-sm text-slate-400">
|
||||
{typeof yesterdayCharacter.epithets === 'string'
|
||||
? JSON.parse(yesterdayCharacter.epithets).join(', ')
|
||||
: (yesterdayCharacter.epithets as string[]).join(', ')}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
<a
|
||||
href={"https://onepiece.fandom.com/fr/wiki/" + yesterdayCharacter.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="w-full 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 sm:w-auto"
|
||||
>
|
||||
Voir la page
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:text-left">
|
||||
<div class="flex h-20 w-20 items-center justify-center rounded-full border border-amber-200/40 bg-slate-900/70 text-xs uppercase tracking-[0.25em] text-amber-100">
|
||||
Photo
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">Personnage de la veille</p>
|
||||
<p class="mt-2 text-lg font-semibold text-white">Placeholder</p>
|
||||
<p class="mt-1 text-sm text-slate-200">Le revele sera visible apres la partie du jour.</p>
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">Personnage d'hier</p>
|
||||
<p class="mt-2 text-lg font-semibold text-white">Aucun personnage</p>
|
||||
<p class="mt-1 text-sm text-slate-200">Aucun personnage d'hier disponible</p>
|
||||
</div>
|
||||
<button class="w-full 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 sm:w-auto">
|
||||
Voir l'archive
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
38
src/routes/daily/+page.server.ts
Normal file
38
src/routes/daily/+page.server.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
import { db } from '$lib/server/db';
|
||||
import { config } from '$lib/server/db/schema';
|
||||
import { getDailyModeCharacters, getOrCreateTodayCharacter, getYesterdayCharacter } from '$lib/server/daily-character';
|
||||
import { like } from 'drizzle-orm';
|
||||
|
||||
export async function load() {
|
||||
const characters = await getDailyModeCharacters();
|
||||
const dailyCharacter = await getOrCreateTodayCharacter(characters);
|
||||
|
||||
if (!dailyCharacter) {
|
||||
throw error(404, 'No daily character available. Please check if characters are configured in daily mode.');
|
||||
}
|
||||
|
||||
const yesterdayCharacter = await getYesterdayCharacter(new Date(), characters);
|
||||
|
||||
// Load column visibility config
|
||||
const columnConfig = await db
|
||||
.select()
|
||||
.from(config)
|
||||
.where(like(config.key, 'characterHistory.column.%.visible'));
|
||||
|
||||
// Convert to object for easier access
|
||||
const columnVisibility: Record<string, boolean> = {};
|
||||
columnConfig.forEach(row => {
|
||||
const match = row.key.match(/characterHistory\.column\.(.+)\.visible/);
|
||||
if (match) {
|
||||
columnVisibility[match[1]] = row.value === 'true';
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
characters,
|
||||
dailyCharacter,
|
||||
yesterdayCharacter,
|
||||
columnVisibility
|
||||
};
|
||||
}
|
||||
@@ -1,87 +1,772 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let data;
|
||||
|
||||
let searchInput = '';
|
||||
let selectedCharacters: any[] = [];
|
||||
let highlightedIndex = 0;
|
||||
let isLoaded = false;
|
||||
let isGeckoMoriaWin = false;
|
||||
let dropdownContainer: HTMLDivElement;
|
||||
let showHintOrigin = false;
|
||||
let showHintFruit = false;
|
||||
let showHintAffiliation = false;
|
||||
|
||||
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 stored = localStorage.getItem('dailyCharacterHistory');
|
||||
if (stored) {
|
||||
try {
|
||||
const storedIds = JSON.parse(stored);
|
||||
// Reconstruct character objects from IDs
|
||||
if (Array.isArray(storedIds)) {
|
||||
selectedCharacters = storedIds
|
||||
.map((id: string) => data.characters.find((c: any) => c.id === id))
|
||||
.filter((c: any) => c !== undefined);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to parse stored history', e);
|
||||
}
|
||||
}
|
||||
isLoaded = true;
|
||||
});
|
||||
|
||||
// Save to localStorage whenever selectedCharacters changes (only store IDs)
|
||||
$: if (isLoaded && selectedCharacters) {
|
||||
const ids = selectedCharacters.map(char => char.id);
|
||||
localStorage.setItem('dailyCharacterHistory', JSON.stringify(ids));
|
||||
}
|
||||
|
||||
$: characters = data.characters || [];
|
||||
$: dailyCharacter = data.dailyCharacter;
|
||||
$: yesterdayCharacter = data.yesterdayCharacter;
|
||||
$: columnVisibility = data.columnVisibility || {};
|
||||
$: hasWon = selectedCharacters.some(char => char.id === dailyCharacter.id);
|
||||
|
||||
// Hint availability - indices are available after a certain number of guesses
|
||||
$: isOriginAvailable = selectedCharacters.length >= 5; // Always available
|
||||
$: isFruitAvailable = selectedCharacters.length >= 10; // Available after 5 guesses
|
||||
$: isAffiliationAvailable = selectedCharacters.length >= 15; // Available after 10 guesses
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
$: filteredCharacters = characters.filter(char => {
|
||||
const searchTerm = searchInput.toLowerCase();
|
||||
const nameMatches = char.name.toLowerCase().includes(searchTerm);
|
||||
|
||||
let epithetsMatches = false;
|
||||
if (char.epithets) {
|
||||
try {
|
||||
const parsedEpithets = typeof char.epithets === 'string'
|
||||
? JSON.parse(char.epithets)
|
||||
: char.epithets;
|
||||
|
||||
if (Array.isArray(parsedEpithets)) {
|
||||
epithetsMatches = parsedEpithets.some((epithet: string) =>
|
||||
epithet.toLowerCase().includes(searchTerm)
|
||||
);
|
||||
} else if (typeof parsedEpithets === 'string') {
|
||||
epithetsMatches = parsedEpithets.toLowerCase().includes(searchTerm);
|
||||
}
|
||||
} catch {
|
||||
epithetsMatches = String(char.epithets).toLowerCase().includes(searchTerm);
|
||||
}
|
||||
}
|
||||
|
||||
return (nameMatches || epithetsMatches) &&
|
||||
!selectedCharacters.some(selected => selected.id === char.id);
|
||||
});
|
||||
|
||||
// Reset highlighted index when filtered list changes
|
||||
$: if (filteredCharacters) {
|
||||
highlightedIndex = 0;
|
||||
}
|
||||
|
||||
// Scroll highlighted item into view
|
||||
$: if (dropdownContainer && highlightedIndex >= 0) {
|
||||
const highlightedButton = dropdownContainer.querySelector(
|
||||
`button:nth-child(${highlightedIndex + 1})`
|
||||
) as HTMLElement;
|
||||
if (highlightedButton) {
|
||||
highlightedButton.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
function selectCharacter(character: any) {
|
||||
selectedCharacters = [character, ...selectedCharacters];
|
||||
searchInput = '';
|
||||
highlightedIndex = 0;
|
||||
|
||||
// Check if player won
|
||||
if (character.id === dailyCharacter.id) {
|
||||
// Send request to record win in database
|
||||
fetch('/daily', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
characterId: dailyCharacter.id
|
||||
})
|
||||
}).catch(err => console.error('Failed to record win:', err));
|
||||
|
||||
// Check if it's gecko_moria for special animation
|
||||
if (dailyCharacter.id === 'gecko_moria') {
|
||||
isGeckoMoriaWin = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resetHistory() {
|
||||
selectedCharacters = [];
|
||||
localStorage.removeItem('dailyCharacterHistory');
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (filteredCharacters.length === 0) return;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowDown':
|
||||
event.preventDefault();
|
||||
highlightedIndex = Math.min(highlightedIndex + 1, filteredCharacters.length - 1);
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
event.preventDefault();
|
||||
highlightedIndex = Math.max(highlightedIndex - 1, 0);
|
||||
break;
|
||||
case 'Enter':
|
||||
event.preventDefault();
|
||||
if (filteredCharacters[highlightedIndex]) {
|
||||
selectCharacter(filteredCharacters[highlightedIndex]);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function submitGuess() {
|
||||
if (filteredCharacters.length === 0) return;
|
||||
const characterToSelect =
|
||||
filteredCharacters[highlightedIndex] ?? filteredCharacters[0];
|
||||
if (characterToSelect) {
|
||||
selectCharacter(characterToSelect);
|
||||
}
|
||||
}
|
||||
|
||||
function formatBounty(bounty: number): string {
|
||||
if (bounty >= 1_000_000_000) {
|
||||
const billions = bounty / 1_000_000_000;
|
||||
return `${billions}B`;
|
||||
} else if (bounty >= 1_000_000) {
|
||||
const millions = bounty / 1_000_000;
|
||||
return `${millions}M`;
|
||||
} else if (bounty >= 1_000) {
|
||||
const thousands = bounty / 1_000;
|
||||
return `${thousands}K`;
|
||||
}
|
||||
return bounty.toString();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>OnePieceDle - Mode du jour</title>
|
||||
<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);
|
||||
}
|
||||
}
|
||||
.hint-unlocking {
|
||||
animation: hint-unlock 0.6s ease-out;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@keyframes moria-chaos {
|
||||
0% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
filter: invert(0%) hue-rotate(0deg) blur(0px);
|
||||
}
|
||||
10% {
|
||||
transform: rotate(15deg) scale(1.02);
|
||||
filter: invert(30%) hue-rotate(45deg) blur(2px);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(-10deg) scale(0.98);
|
||||
filter: invert(60%) hue-rotate(90deg) blur(1px);
|
||||
}
|
||||
30% {
|
||||
transform: rotate(25deg) scale(1.05);
|
||||
filter: invert(100%) hue-rotate(180deg) blur(3px);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(-20deg) scale(0.95);
|
||||
filter: invert(80%) hue-rotate(270deg) blur(2px);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(30deg) scale(1.08);
|
||||
filter: invert(100%) hue-rotate(0deg) blur(4px);
|
||||
}
|
||||
60% {
|
||||
transform: rotate(-25deg) scale(0.92);
|
||||
filter: invert(70%) hue-rotate(90deg) blur(2px);
|
||||
}
|
||||
70% {
|
||||
transform: rotate(20deg) scale(1.03);
|
||||
filter: invert(50%) hue-rotate(180deg) blur(3px);
|
||||
}
|
||||
80% {
|
||||
transform: rotate(-15deg) scale(1.01);
|
||||
filter: invert(80%) hue-rotate(270deg) blur(1px);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg) scale(1);
|
||||
filter: invert(0%) hue-rotate(360deg) blur(0px);
|
||||
}
|
||||
}
|
||||
.gecko-moria-effect {
|
||||
animation: shadow-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
.moria-screen-chaos {
|
||||
animation: moria-chaos 4s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</svelte:head>
|
||||
|
||||
<main
|
||||
class="relative min-h-screen overflow-hidden bg-slate-950 text-slate-100"
|
||||
style="background-image: url('/one-piece-bg.jpg');"
|
||||
class="relative min-h-screen overflow-hidden bg-slate-950 text-slate-100 {isGeckoMoriaWin ? 'moria-screen-chaos' : ''}"
|
||||
>
|
||||
<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-16 sm:py-20">
|
||||
<header class="flex flex-col items-start gap-6">
|
||||
<div class="rounded-full border border-amber-200/30 bg-amber-100/10 px-5 py-2 text-xs font-semibold uppercase tracking-[0.35em] text-amber-100">
|
||||
Mode du jour
|
||||
<nav class="absolute left-6 top-6 sm:left-8 sm:top-8">
|
||||
<a
|
||||
href="/"
|
||||
class="text-xl font-black uppercase tracking-[0.25em] text-amber-50 transition hover:text-amber-100"
|
||||
>
|
||||
OnePieceDle
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<header class="flex flex-col items-start gap-6 w-full">
|
||||
<div class="flex w-full items-center justify-between gap-4">
|
||||
<h1 class="text-3xl font-black uppercase tracking-[0.25em] text-amber-50 sm:text-5xl">
|
||||
Personnage du jour
|
||||
</h1>
|
||||
{#if hasWon}
|
||||
<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={resetHistory}
|
||||
>
|
||||
Recommencer
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<h1 class="text-3xl font-black uppercase tracking-[0.25em] text-amber-50 sm:text-5xl">
|
||||
Mystere du jour
|
||||
</h1>
|
||||
<p class="max-w-2xl text-base text-slate-200 sm:text-lg">
|
||||
Devine le personnage. Chaque indice deblocque une nouvelle piste.
|
||||
Devine le personnage. Chaque indice se débloque après un certain nombre de tentatives. Bonne chance !
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section class="mt-10 grid gap-6">
|
||||
<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">
|
||||
<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">Indices du jour</h2>
|
||||
<div class="mt-4 grid gap-3 sm:grid-cols-3">
|
||||
<div class="rounded-2xl border border-white/10 bg-slate-950/60 px-3 py-3">
|
||||
<p class="text-xs uppercase tracking-[0.25em] text-amber-100">Indice 1</p>
|
||||
<p class="mt-2 text-sm text-slate-200">Origine: ???</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-white/10 bg-slate-950/60 px-3 py-3">
|
||||
<p class="text-xs uppercase tracking-[0.25em] text-amber-100">Indice 2</p>
|
||||
<p class="mt-2 text-sm text-slate-200">Fruit du demon: ???</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-white/10 bg-slate-950/60 px-3 py-3">
|
||||
<p class="text-xs uppercase tracking-[0.25em] text-amber-100">Indice 3</p>
|
||||
<p class="mt-2 text-sm text-slate-200">Affiliation: ???</p>
|
||||
{#if selectedCharacters.length > 0 && !hasWon}
|
||||
<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={() => showHintOrigin = !showHintOrigin}
|
||||
>
|
||||
<p class="text-sm font-medium text-amber-100">Origine</p>
|
||||
{#if showHintOrigin}
|
||||
<p class="mt-2 text-xs text-white font-semibold">{dailyCharacter.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={() => showHintFruit = !showHintFruit}
|
||||
>
|
||||
<p class="text-sm font-medium text-amber-100">Fruit du démon</p>
|
||||
{#if showHintFruit}
|
||||
<p class="mt-2 text-xs text-white font-semibold">{dailyCharacter.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={() => showHintAffiliation = !showHintAffiliation}
|
||||
>
|
||||
<p class="text-sm font-medium text-amber-100">Affiliation</p>
|
||||
{#if showHintAffiliation}
|
||||
{@const affiliations = typeof dailyCharacter.affiliations === 'string'
|
||||
? (dailyCharacter.affiliations.includes('[') ? JSON.parse(dailyCharacter.affiliations) : dailyCharacter.affiliations.split(',').map((a: string) => a.trim()))
|
||||
: dailyCharacter.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>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<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">
|
||||
{#if hasWon}
|
||||
{#if isGeckoMoriaWin}
|
||||
<div class="rounded-3xl border border-slate-700/80 bg-slate-950/80 p-4 shadow-[0_24px_60px_rgba(0,0,0,0.8)] backdrop-blur gecko-moria-effect">
|
||||
<div class="text-center">
|
||||
<div class="text-3xl mb-2">🌑</div>
|
||||
<h2 class="text-xl font-bold text-slate-300 mb-1">Moria vous contrôle...</h2>
|
||||
<p class="text-sm text-slate-400">Vous avez succombé à l'ombre en {selectedCharacters.length} {selectedCharacters.length > 1 ? 'tentatives' : 'tentative'} !</p>
|
||||
<div class="mt-3">
|
||||
{#if dailyCharacter.pictureUrl}
|
||||
<a
|
||||
href={"https://onepiece.fandom.com/fr/wiki/" + dailyCharacter.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-block"
|
||||
>
|
||||
<img
|
||||
src={dailyCharacter.pictureUrl}
|
||||
alt={dailyCharacter.name}
|
||||
class="w-20 h-20 mx-auto rounded-full border-2 border-slate-600 shadow-lg object-cover hover:border-slate-500 transition-colors cursor-pointer opacity-80"
|
||||
/>
|
||||
</a>
|
||||
{/if}
|
||||
<p class="mt-2 text-lg font-bold text-slate-200">{dailyCharacter.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<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">Félicitations !</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 dailyCharacter.pictureUrl}
|
||||
<a
|
||||
href={"https://onepiece.fandom.com/fr/wiki/" + dailyCharacter.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-block"
|
||||
>
|
||||
<img
|
||||
src={dailyCharacter.pictureUrl}
|
||||
alt={dailyCharacter.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">{dailyCharacter.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/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 z-10">
|
||||
<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">Entrer une supposition</h2>
|
||||
<div class="mt-4 flex flex-col gap-3 sm:flex-row">
|
||||
<input
|
||||
class="w-full rounded-full border border-amber-200/30 bg-slate-900/60 px-5 py-3 text-sm text-slate-100 placeholder:text-slate-400 focus:border-amber-200/70 focus:outline-none"
|
||||
placeholder="Nom du personnage"
|
||||
type="text"
|
||||
/>
|
||||
<button class="rounded-full bg-amber-300 px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-amber-200">
|
||||
<div class="relative w-full">
|
||||
<input
|
||||
bind:value={searchInput}
|
||||
class="w-full rounded-full border border-amber-200/30 bg-slate-900/60 px-5 py-3 text-sm text-slate-100 placeholder:text-slate-400 focus:border-amber-200/70 focus:outline-none"
|
||||
placeholder="Nom du personnage"
|
||||
type="text"
|
||||
onkeydown={handleKeydown}
|
||||
/>
|
||||
{#if searchInput.length > 0 && filteredCharacters.length > 0}
|
||||
<div bind:this={dropdownContainer} class="absolute top-full left-0 right-0 mt-2 max-h-96 overflow-y-auto rounded-2xl border border-amber-200/30 bg-slate-900/90 backdrop-blur z-10">
|
||||
{#each filteredCharacters as character, index (character.id)}
|
||||
<button
|
||||
class="w-full px-5 py-4 text-left text-base text-slate-100 transition border-b border-slate-800/50 last:border-b-0 flex items-center gap-4 {index === highlightedIndex ? 'bg-slate-700' : 'hover:bg-slate-800/70'}"
|
||||
type="button"
|
||||
onmouseenter={() => highlightedIndex = index}
|
||||
onclick={() => selectCharacter(character)}
|
||||
>
|
||||
{#if character.pictureUrl}
|
||||
<img
|
||||
src={character.pictureUrl}
|
||||
alt={character.name}
|
||||
class="w-12 h-12 rounded-full object-cover border border-amber-200/30"
|
||||
/>
|
||||
{:else}
|
||||
<div class="w-12 h-12 rounded-full bg-slate-800 border border-amber-200/30 flex items-center justify-center">
|
||||
<span class="text-xs text-slate-400">?</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex-1">
|
||||
<span class="font-semibold text-amber-100">{character.name}</span>
|
||||
{#if character.epithets}
|
||||
{@const parsedEpithets = typeof character.epithets === 'string'
|
||||
? JSON.parse(character.epithets)
|
||||
: character.epithets}
|
||||
{#if Array.isArray(parsedEpithets) && parsedEpithets.length > 0}
|
||||
<span class="ml-2 text-xs text-slate-400">
|
||||
• {parsedEpithets.join(', ')}
|
||||
</span>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={submitGuess}
|
||||
disabled={filteredCharacters.length === 0}
|
||||
class="rounded-full bg-amber-300 px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-amber-200 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Valider
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<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 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<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="mt-2 text-sm text-slate-200">Aucune tentative pour le moment.</p>
|
||||
</div>
|
||||
<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">
|
||||
Recommencer
|
||||
</button>
|
||||
{#if selectedCharacters.length === 0}
|
||||
<p class="text-sm text-slate-200 text-center">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="w-max min-w-max mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="flex gap-2 mb-2">
|
||||
<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Personnage</p>
|
||||
</div>
|
||||
{#if columnVisibility.status !== false}
|
||||
<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Statut</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if columnVisibility.gender !== false}
|
||||
<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Genre</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if columnVisibility.affiliations !== false}
|
||||
<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Affiliations</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if columnVisibility.haki !== false}
|
||||
<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Haki</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if columnVisibility.bounty !== false}
|
||||
<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Prime</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if columnVisibility.height !== false}
|
||||
<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Taille</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if columnVisibility.origin !== false}
|
||||
<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Origine</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if columnVisibility.arc !== false}
|
||||
<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Arc</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if columnVisibility.devilFruitType !== false}
|
||||
<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Fruit</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Rows -->
|
||||
{#each selectedCharacters as character (character.id)}
|
||||
<div class="flex gap-2 mb-2">
|
||||
<!-- Personnage -->
|
||||
<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 bg-slate-950/60 overflow-hidden">
|
||||
{#if character.pictureUrl}
|
||||
<a
|
||||
href={"https://onepiece.fandom.com/fr/wiki/" + character.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="block w-full h-full"
|
||||
>
|
||||
<img
|
||||
src={character.pictureUrl}
|
||||
alt={character.name}
|
||||
class="w-full h-full object-cover hover:opacity-80 transition-opacity cursor-pointer"
|
||||
/>
|
||||
</a>
|
||||
{:else}
|
||||
<div class="w-full h-full bg-slate-800 flex items-center justify-center p-2">
|
||||
<span class="text-xl text-center font-semibold line-clamp-3">{character.name}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Vivant / Mort -->
|
||||
{#if columnVisibility.status !== false}
|
||||
<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.status === dailyCharacter.status ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center">
|
||||
<p class="text-sm font-bold text-white text-center">
|
||||
{character.status === 'Alive' ? 'Vivant' : character.status === 'Deceased' || character.status === 'Dead' ? 'Mort' : character.status || 'Inconnu'}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Genre -->
|
||||
{#if columnVisibility.gender !== false}
|
||||
<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.gender === dailyCharacter.gender ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center">
|
||||
<p class="text-base font-bold text-white text-center">
|
||||
{character.gender === 'Male' ? 'Homme' : character.gender === 'Female' ? 'Femme' : character.gender || 'Inconnu'}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Affiliations -->
|
||||
{#if columnVisibility.affiliations !== false}
|
||||
<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {(() => {
|
||||
try {
|
||||
const charAff = 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;
|
||||
return charFirstAff && dailyFirstAff && charFirstAff === dailyFirstAff ? 'bg-emerald-600/90' : 'bg-red-900/60';
|
||||
} catch (e) {
|
||||
return 'bg-slate-950/60';
|
||||
}
|
||||
})()} p-2 flex items-center justify-center overflow-hidden">
|
||||
{#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-sm font-bold text-white text-center whitespace-normal break-words leading-tight">{parsedAffiliations[0]}</p>
|
||||
{:else}
|
||||
<p class="w-full text-sm font-bold text-white text-center whitespace-normal break-words leading-tight">{parsedAffiliations}</p>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="text-base font-bold text-slate-400 text-center">-</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Haki -->
|
||||
{#if columnVisibility.haki !== false}
|
||||
<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {(() => {
|
||||
if (character.hakiObservation === dailyCharacter.hakiObservation && character.hakiArmament === dailyCharacter.hakiArmament && character.hakiConqueror === dailyCharacter.hakiConqueror) {
|
||||
return 'bg-emerald-600/90';
|
||||
} else if ((character.hakiObservation && dailyCharacter.hakiObservation) ||
|
||||
(character.hakiArmament && dailyCharacter.hakiArmament) ||
|
||||
(character.hakiConqueror && dailyCharacter.hakiConqueror)) {
|
||||
return 'bg-yellow-600/80';
|
||||
} else {
|
||||
return 'bg-red-900/60';
|
||||
}
|
||||
})()} p-2 flex items-center justify-center">
|
||||
<p class="text-2xl font-bold text-white text-center">
|
||||
{#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-5xl">✕</span>
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Prime -->
|
||||
{#if columnVisibility.bounty !== false}
|
||||
<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.bounty === dailyCharacter.bounty ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center relative overflow-hidden">
|
||||
{#if character.bounty != null && dailyCharacter.bounty != null && character.bounty !== dailyCharacter.bounty}
|
||||
<div class="absolute w-full h-full opacity-30 pointer-events-none" 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>
|
||||
{/if}
|
||||
{#if character.bounty != null}
|
||||
<p class="text-sm font-bold text-white text-center relative z-10">{formatBounty(character.bounty)} ฿</p>
|
||||
{:else}
|
||||
<p class="text-sm font-bold text-white text-center relative z-10">Inconnue</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Taille -->
|
||||
{#if columnVisibility.height !== false}
|
||||
<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.height === dailyCharacter.height ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center relative overflow-hidden">
|
||||
{#if character.height && dailyCharacter.height && character.height !== dailyCharacter.height}
|
||||
<div class="absolute w-full h-full opacity-30 pointer-events-none" 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>
|
||||
{/if}
|
||||
{#if character.height}
|
||||
<p class="text-sm font-bold text-white text-center relative z-10">{character.height} m</p>
|
||||
{:else}
|
||||
<p class="text-sm font-bold text-white text-center relative z-10">Inconnue</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Origine -->
|
||||
{#if columnVisibility.origin !== false}
|
||||
<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.origin === dailyCharacter.origin ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center">
|
||||
<p class="text-sm font-bold text-white text-center">{character.origin || 'Inconnue'}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Arc -->
|
||||
{#if columnVisibility.arc !== false}
|
||||
<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.arcName === dailyCharacter.arcName ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center relative overflow-hidden">
|
||||
{#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="
|
||||
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>
|
||||
{/if}
|
||||
<p class="text-sm font-bold text-white text-center relative z-10">{character.arcName || 'Inconnu'}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Fruit -->
|
||||
{#if columnVisibility.devilFruitType !== false}
|
||||
<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.devilFruitType === dailyCharacter.devilFruitType ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center">
|
||||
{#if character.devilFruitType}
|
||||
<p class="text-sm font-bold text-white text-center">{character.devilFruitType}</p>
|
||||
{:else}
|
||||
<p class="text-5xl font-bold text-white text-center">✕</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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">
|
||||
{#if yesterdayCharacter}
|
||||
<div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:text-left">
|
||||
{#if yesterdayCharacter.pictureUrl}
|
||||
<img
|
||||
src={yesterdayCharacter.pictureUrl}
|
||||
alt={yesterdayCharacter.name}
|
||||
class="h-20 w-20 rounded-full border border-amber-200/40 object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<div class="flex h-20 w-20 items-center justify-center rounded-full border border-amber-200/40 bg-slate-900/70 text-xs uppercase tracking-[0.25em] text-amber-100">
|
||||
Photo
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">Personnage d'hier</p>
|
||||
<p class="mt-2 text-lg font-semibold text-white">{yesterdayCharacter.name}</p>
|
||||
{#if yesterdayCharacter.epithets}
|
||||
<p class="mt-1 text-sm text-slate-400">
|
||||
{typeof yesterdayCharacter.epithets === 'string'
|
||||
? JSON.parse(yesterdayCharacter.epithets).join(', ')
|
||||
: (yesterdayCharacter.epithets as string[]).join(', ')}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
<a
|
||||
href={"https://onepiece.fandom.com/fr/wiki/" + yesterdayCharacter.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="w-full 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 sm:w-auto"
|
||||
>
|
||||
Voir la page
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:text-left">
|
||||
<div class="flex h-20 w-20 items-center justify-center rounded-full border border-amber-200/40 bg-slate-900/70 text-xs uppercase tracking-[0.25em] text-amber-100">
|
||||
Photo
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">Personnage d'hier</p>
|
||||
<p class="mt-2 text-lg font-semibold text-white">Placeholder</p>
|
||||
<p class="mt-1 text-sm text-slate-200">Revele apres validation de ta tentative.</p>
|
||||
<p class="mt-2 text-lg font-semibold text-white">Aucun personnage</p>
|
||||
<p class="mt-1 text-sm text-slate-200">Aucun personnage d'hier disponible</p>
|
||||
</div>
|
||||
<button class="w-full 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 sm:w-auto">
|
||||
Voir l'archive
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
33
src/routes/daily/+server.ts
Normal file
33
src/routes/daily/+server.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { json } from '@sveltejs/kit';
|
||||
import { db } from '$lib/server/db';
|
||||
import { characterHistory } from '$lib/server/db/schema';
|
||||
import { eq } from 'drizzle-orm';
|
||||
import { sql } from 'drizzle-orm';
|
||||
|
||||
export async function POST({ request }) {
|
||||
try {
|
||||
const { characterId } = await request.json();
|
||||
|
||||
if (!characterId) {
|
||||
return json({ error: 'Missing characterId' }, { status: 400 });
|
||||
}
|
||||
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const todayDate = today.toISOString().split('T')[0];
|
||||
|
||||
// Increment the won counter for today's entry
|
||||
await db
|
||||
.update(characterHistory)
|
||||
.set({
|
||||
won: sql`${characterHistory.won} + 1`,
|
||||
updatedAt: Date.now()
|
||||
})
|
||||
.where(eq(characterHistory.date, todayDate));
|
||||
|
||||
return json({ success: true });
|
||||
} catch (error) {
|
||||
console.error('Error recording win:', error);
|
||||
return json({ error: 'Failed to record win' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user