503 lines
20 KiB
TypeScript
503 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import { todayISO } from "@/lib/rng";
|
|
import { GAME_META, GAMES, GameId } from "@/lib/levels";
|
|
import { allStats, GameStats } from "@/lib/progress";
|
|
import { loadStats, updateRitualStreak, getRitualStreak, RitualStats } from "@/lib/stats";
|
|
import { PlayMode, getPlayMode, savePlayMode, getSessionOrder } from "@/lib/session";
|
|
|
|
// ── Other helpers ─────────────────────────────────────────────────────────────
|
|
|
|
function fmt(s: number): string {
|
|
return `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`;
|
|
}
|
|
|
|
function isDailySolved(game: GameId, date: string): boolean {
|
|
if (typeof window === "undefined") return false;
|
|
try {
|
|
const stats = localStorage.getItem(`stats-${game}`);
|
|
if (!stats) return false;
|
|
return JSON.parse(stats)?.lastDate === date;
|
|
} catch { return false; }
|
|
}
|
|
|
|
function isNewUser(): boolean {
|
|
if (typeof window === "undefined") return true;
|
|
return GAMES.every(g => !localStorage.getItem(`stats-${g}`));
|
|
}
|
|
|
|
// ── Onboarding screen ─────────────────────────────────────────────────────────
|
|
|
|
function OnboardingScreen() {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-[70vh] gap-8 text-center px-6">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="w-20 h-20 rounded-3xl bg-gray-900 flex items-center justify-center shadow-xl">
|
|
<span className="text-4xl" aria-hidden>🧩</span>
|
|
</div>
|
|
<div>
|
|
<h1 className="text-3xl font-black text-gray-900 tracking-tight">Puzzle Trainer</h1>
|
|
<p className="text-gray-500 mt-2 text-base">5 puzzles logiques, chaque jour.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 text-sm text-gray-500 max-w-[260px]">
|
|
<div className="flex items-center gap-2.5 text-left">
|
|
<span className="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center text-base shrink-0">🔓</span>
|
|
<span>Pas de compte, pas de pub</span>
|
|
</div>
|
|
<div className="flex items-center gap-2.5 text-left">
|
|
<span className="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center text-base shrink-0">📱</span>
|
|
<span>Tout dans le navigateur</span>
|
|
</div>
|
|
<div className="flex items-center gap-2.5 text-left">
|
|
<span className="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center text-base shrink-0">⏱</span>
|
|
<span>2 à 4 minutes par puzzle</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Link
|
|
href="/tango"
|
|
className="flex items-center gap-2 px-8 py-4 rounded-2xl bg-gray-900 text-white font-bold text-base hover:bg-gray-700 transition-colors shadow-lg"
|
|
>
|
|
Commencer
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round"><polyline points="9 18 15 12 9 6"/></svg>
|
|
</Link>
|
|
|
|
<p className="text-xs text-gray-300 -mt-2">Commence avec Tango — le plus facile à apprendre</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Mode toggle ───────────────────────────────────────────────────────────────
|
|
|
|
function ModeToggle({ mode, onChange }: { mode: PlayMode; onChange: (m: PlayMode) => void }) {
|
|
return (
|
|
<div className="flex items-center gap-1 p-1 bg-gray-100 rounded-xl text-xs font-semibold">
|
|
<button
|
|
onClick={() => onChange("free")}
|
|
className={`px-3 py-1.5 rounded-lg transition-all ${
|
|
mode === "free"
|
|
? "bg-white text-gray-900 shadow-sm"
|
|
: "text-gray-400 hover:text-gray-600"
|
|
}`}
|
|
>
|
|
Libre
|
|
</button>
|
|
<button
|
|
onClick={() => onChange("session")}
|
|
className={`px-3 py-1.5 rounded-lg transition-all flex items-center gap-1 ${
|
|
mode === "session"
|
|
? "bg-white text-gray-900 shadow-sm"
|
|
: "text-gray-400 hover:text-gray-600"
|
|
}`}
|
|
>
|
|
Session
|
|
<span className="text-[10px] text-gray-400 font-normal">5 à la suite</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Streak banner ─────────────────────────────────────────────────────────────
|
|
|
|
function StreakBanner({ ritual, today }: { ritual: RitualStats; today: string }) {
|
|
if (ritual.streak === 0) return null;
|
|
const isAliveToday = ritual.lastDate === today;
|
|
return (
|
|
<div className="w-full flex items-center gap-3 px-4 py-3 bg-amber-50 border border-amber-200 rounded-2xl">
|
|
<span className="text-xl" aria-hidden>🔥</span>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-bold text-amber-800">
|
|
{ritual.streak} jour{ritual.streak > 1 ? "s" : ""} de suite
|
|
</p>
|
|
<p className="text-xs text-amber-600">
|
|
{isAliveToday
|
|
? "Tous les puzzles complétés aujourd'hui !"
|
|
: "Complète les puzzles du jour pour continuer ta série"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Free mode: simple game row ────────────────────────────────────────────────
|
|
|
|
function FreeRow({ game, solved, lastTime }: {
|
|
game: GameId;
|
|
solved: boolean;
|
|
lastTime: number;
|
|
}) {
|
|
const { name, accent, subtitle, duration, symbol } = GAME_META[game];
|
|
|
|
return (
|
|
<Link
|
|
href={`/${game}`}
|
|
className={`group flex items-center gap-4 px-4 py-3.5 bg-white rounded-2xl border transition-all ${
|
|
solved
|
|
? "border-green-200"
|
|
: "border-gray-100 hover:border-gray-200 hover:shadow-sm"
|
|
}`}
|
|
>
|
|
<span
|
|
className="w-10 h-10 rounded-xl flex items-center justify-center text-lg font-bold shrink-0"
|
|
style={{ background: solved ? "#dcfce7" : `${accent}18`, color: solved ? "#16a34a" : accent }}
|
|
aria-hidden
|
|
>
|
|
{solved ? "✓" : symbol}
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-baseline gap-2">
|
|
<span className={`text-sm font-semibold ${solved ? "text-green-800" : "text-gray-800"}`}>
|
|
{name}
|
|
</span>
|
|
{!solved && <span className="text-xs text-gray-400">{duration}</span>}
|
|
</div>
|
|
<p className="text-xs text-gray-400 truncate mt-0.5">
|
|
{solved && lastTime > 0 ? `Résolu en ${fmt(lastTime)}` : subtitle}
|
|
</p>
|
|
</div>
|
|
{solved ? (
|
|
<span className="shrink-0 text-xs text-green-600 font-semibold bg-green-50 px-2.5 py-1 rounded-full border border-green-200">
|
|
Rejouer
|
|
</span>
|
|
) : (
|
|
<span
|
|
className="shrink-0 text-xs font-semibold px-3 py-1.5 rounded-full text-white transition-opacity group-hover:opacity-90"
|
|
style={{ background: accent }}
|
|
>
|
|
Jouer
|
|
</span>
|
|
)}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
// ── Session mode: ordered list with progress ──────────────────────────────────
|
|
|
|
function SessionList({ order, solvedToday, lastTimes }: {
|
|
order: GameId[];
|
|
solvedToday: Record<GameId, boolean>;
|
|
lastTimes: Record<GameId, number>;
|
|
}) {
|
|
// Find the next game to play (first unsolved in order)
|
|
const nextIdx = order.findIndex(g => !solvedToday[g]);
|
|
const allDone = nextIdx === -1;
|
|
const solvedCount = order.filter(g => solvedToday[g]).length;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
{/* Progress bar */}
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<div className="flex-1 h-1.5 bg-gray-100 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full rounded-full bg-gray-900 transition-all duration-500"
|
|
style={{ width: `${(solvedCount / order.length) * 100}%` }}
|
|
/>
|
|
</div>
|
|
<span className="text-xs text-gray-400 shrink-0">{solvedCount}/{order.length}</span>
|
|
</div>
|
|
|
|
{order.map((game, idx) => {
|
|
const solved = solvedToday[game];
|
|
const isCurrent = !allDone && idx === nextIdx;
|
|
const isPending = !solved && !isCurrent;
|
|
const { name, accent, subtitle, duration, symbol } = GAME_META[game];
|
|
|
|
return (
|
|
<Link
|
|
key={game}
|
|
href={`/${game}`}
|
|
className={`group flex items-center gap-4 px-4 py-3.5 rounded-2xl border transition-all ${
|
|
solved
|
|
? "bg-white border-green-200"
|
|
: isCurrent
|
|
? "bg-white border-2 shadow-sm"
|
|
: "bg-white border-gray-100 opacity-50"
|
|
}`}
|
|
style={isCurrent ? { borderColor: accent } : undefined}
|
|
>
|
|
{/* Step number / status */}
|
|
<div className="relative shrink-0">
|
|
<span
|
|
className="w-10 h-10 rounded-xl flex items-center justify-center text-lg font-bold"
|
|
style={{
|
|
background: solved ? "#dcfce7" : isCurrent ? `${accent}18` : "#f1f5f9",
|
|
color: solved ? "#16a34a" : isCurrent ? accent : "#9ca3af",
|
|
}}
|
|
aria-hidden
|
|
>
|
|
{solved ? "✓" : isCurrent ? symbol : <span className="text-sm font-bold">{idx + 1}</span>}
|
|
</span>
|
|
{/* Connector line below (not last) */}
|
|
{idx < order.length - 1 && (
|
|
<div
|
|
className="absolute left-1/2 -translate-x-1/2 w-0.5 rounded-full"
|
|
style={{
|
|
top: "100%",
|
|
height: "10px",
|
|
marginTop: "2px",
|
|
background: solved ? "#bbf7d0" : "#e5e7eb",
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-baseline gap-2">
|
|
<span className={`text-sm font-semibold ${
|
|
solved ? "text-green-800" : isCurrent ? "text-gray-900" : "text-gray-500"
|
|
}`}>
|
|
{name}
|
|
</span>
|
|
{!solved && isCurrent && (
|
|
<span className="text-xs text-gray-400">{duration}</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-gray-400 truncate mt-0.5">
|
|
{solved && lastTimes[game] > 0
|
|
? `Résolu en ${fmt(lastTimes[game])}`
|
|
: isCurrent
|
|
? subtitle
|
|
: ""}
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
{solved ? (
|
|
<span className="shrink-0 text-xs text-green-600 font-semibold bg-green-50 px-2.5 py-1 rounded-full border border-green-200">
|
|
✓
|
|
</span>
|
|
) : isCurrent ? (
|
|
<span
|
|
className="shrink-0 text-sm font-bold px-4 py-2 rounded-full text-white flex items-center gap-1 transition-opacity group-hover:opacity-90"
|
|
style={{ background: accent }}
|
|
>
|
|
Jouer
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round"><polyline points="9 18 15 12 9 6"/></svg>
|
|
</span>
|
|
) : (
|
|
<span className="shrink-0 w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth={2} strokeLinecap="round"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/></svg>
|
|
</span>
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── All done banner ────────────────────────────────────────────────────────────
|
|
|
|
function AllDoneBanner({ nextPuzzleIn }: { nextPuzzleIn: string }) {
|
|
return (
|
|
<div className="w-full flex flex-col items-center gap-2 px-4 py-5 bg-green-50 border border-green-200 rounded-2xl text-center">
|
|
<span className="text-3xl" aria-hidden>🎉</span>
|
|
<p className="text-sm font-bold text-green-800">Bravo ! Tous les puzzles du jour complétés.</p>
|
|
<p className="text-xs text-green-600">Prochain puzzle dans {nextPuzzleIn}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Training row ──────────────────────────────────────────────────────────────
|
|
|
|
function TrainingRow({ game, stats }: { game: GameId; stats: GameStats | undefined }) {
|
|
const { name, accent } = GAME_META[game];
|
|
const pct = stats?.pct ?? 0;
|
|
const label = !stats || stats.completed === 0 ? "Commencer" : `Niv. ${stats.nextLevel}`;
|
|
|
|
return (
|
|
<Link
|
|
href={`/${game}/levels`}
|
|
className="group flex items-center gap-3 px-4 py-3 bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all"
|
|
>
|
|
<span className="text-xs font-semibold text-gray-600 w-14 shrink-0">{name}</span>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="h-1.5 bg-gray-100 rounded-full overflow-hidden">
|
|
<div className="h-full rounded-full transition-all" style={{ width: `${pct}%`, background: accent }} />
|
|
</div>
|
|
</div>
|
|
<span className="text-[11px] text-gray-400 shrink-0 w-14 text-right">{stats?.completed ?? 0}/100</span>
|
|
<span
|
|
className="shrink-0 text-xs font-semibold px-2.5 py-1 rounded-full whitespace-nowrap"
|
|
style={{ background: `${accent}18`, color: accent }}
|
|
>
|
|
{label}
|
|
</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
// ── Main page ─────────────────────────────────────────────────────────────────
|
|
|
|
export default function Home() {
|
|
const today = todayISO();
|
|
const [loaded, setLoaded] = useState(false);
|
|
const [newUser, setNewUser] = useState(false);
|
|
const [mode, setMode] = useState<PlayMode>("free");
|
|
const [levelStats, setLevelStats] = useState<Record<GameId, GameStats> | null>(null);
|
|
const [solvedToday, setSolvedToday] = useState<Record<GameId, boolean>>({} as Record<GameId, boolean>);
|
|
const [lastTimes, setLastTimes] = useState<Record<GameId, number>>({} as Record<GameId, number>);
|
|
const [ritual, setRitual] = useState<RitualStats>({ streak: 0, lastDate: "" });
|
|
const [showTraining, setShowTraining] = useState(false);
|
|
|
|
const handleModeChange = (m: PlayMode) => {
|
|
setMode(m);
|
|
savePlayMode(m);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const refresh = () => {
|
|
setNewUser(isNewUser());
|
|
setMode(getPlayMode());
|
|
setLevelStats(allStats());
|
|
|
|
const solved = {} as Record<GameId, boolean>;
|
|
const times = {} as Record<GameId, number>;
|
|
for (const g of GAMES) {
|
|
solved[g] = isDailySolved(g, today);
|
|
const s = loadStats(g);
|
|
times[g] = s.lastDate === today ? s.lastTime : 0;
|
|
}
|
|
setSolvedToday(solved);
|
|
setLastTimes(times);
|
|
|
|
const allSolved = GAMES.every(g => solved[g]);
|
|
const r = allSolved ? updateRitualStreak(today) : getRitualStreak();
|
|
setRitual(r);
|
|
setLoaded(true);
|
|
};
|
|
|
|
refresh();
|
|
window.addEventListener("focus", refresh);
|
|
document.addEventListener("visibilitychange", refresh);
|
|
return () => {
|
|
window.removeEventListener("focus", refresh);
|
|
document.removeEventListener("visibilitychange", refresh);
|
|
};
|
|
}, [today]);
|
|
|
|
if (!loaded) {
|
|
return (
|
|
<div className="flex flex-col gap-3 max-w-sm mx-auto py-4 px-4">
|
|
{[...Array(5)].map((_, i) => (
|
|
<div key={i} className="skeleton h-[68px] rounded-2xl" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (newUser) return <OnboardingScreen />;
|
|
|
|
const dateLabel = new Date(today + "T00:00:00").toLocaleDateString("fr-FR", {
|
|
weekday: "long", day: "numeric", month: "long",
|
|
});
|
|
|
|
const sessionOrder = getSessionOrder(today);
|
|
const totalSolvedToday = GAMES.filter(g => solvedToday[g]).length;
|
|
const allSolvedToday = totalSolvedToday === GAMES.length;
|
|
|
|
const now = new Date();
|
|
const midnight = new Date(now);
|
|
midnight.setDate(midnight.getDate() + 1);
|
|
midnight.setHours(0, 0, 0, 0);
|
|
const hoursLeft = Math.ceil((midnight.getTime() - now.getTime()) / 3600000);
|
|
const nextPuzzleIn = `${hoursLeft}h`;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6 max-w-sm mx-auto py-4 px-4">
|
|
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">Puzzle Trainer</h1>
|
|
<p className="text-gray-400 mt-0.5 text-sm capitalize">{dateLabel}</p>
|
|
</div>
|
|
<Link
|
|
href="/stats"
|
|
className="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-700 mt-1 transition-colors"
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
|
|
<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
|
|
</svg>
|
|
Stats
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Streak */}
|
|
<StreakBanner ritual={ritual} today={today} />
|
|
|
|
{/* Daily puzzles */}
|
|
<section>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h2 className="text-[11px] font-semibold text-gray-400 uppercase tracking-widest">
|
|
Puzzles du jour
|
|
</h2>
|
|
<ModeToggle mode={mode} onChange={handleModeChange} />
|
|
</div>
|
|
|
|
{mode === "session" && (
|
|
<p className="text-xs text-gray-400 mb-3 -mt-1">
|
|
Joue les 5 puzzles à la suite — l'ordre change chaque jour.
|
|
</p>
|
|
)}
|
|
|
|
{allSolvedToday ? (
|
|
<AllDoneBanner nextPuzzleIn={nextPuzzleIn} />
|
|
) : mode === "session" ? (
|
|
<SessionList
|
|
order={sessionOrder}
|
|
solvedToday={solvedToday}
|
|
lastTimes={lastTimes}
|
|
/>
|
|
) : (
|
|
<div className="flex flex-col gap-2">
|
|
{GAMES.map(game => (
|
|
<FreeRow
|
|
key={game}
|
|
game={game}
|
|
solved={solvedToday[game]}
|
|
lastTime={lastTimes[game]}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* Training */}
|
|
<section>
|
|
<button
|
|
onClick={() => setShowTraining(v => !v)}
|
|
className="w-full flex items-center justify-between text-[11px] font-semibold text-gray-400 uppercase tracking-widest mb-2 hover:text-gray-600 transition-colors"
|
|
>
|
|
<span>Entraînement</span>
|
|
<svg
|
|
width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round"
|
|
style={{ transform: showTraining ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s" }}
|
|
>
|
|
<polyline points="6 9 12 15 18 9"/>
|
|
</svg>
|
|
</button>
|
|
{showTraining && (
|
|
<div className="flex flex-col gap-2">
|
|
{GAMES.map(game => (
|
|
<TrainingRow key={game} game={game} stats={levelStats?.[game]} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center gap-4 text-xs text-gray-300 pb-2">
|
|
<Link href="/archive" className="hover:text-gray-500 transition-colors">Archives</Link>
|
|
<span>·</span>
|
|
<Link href="/stats" className="hover:text-gray-500 transition-colors">Statistiques</Link>
|
|
<span>·</span>
|
|
<Link href="/comment-jouer" className="hover:text-gray-500 transition-colors">Comment jouer</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|