feat: add user accounts, authentication, and game history with Prisma 7

- Implement user registration and login with NextAuth v5 (email/password, JWT) - Add authentication modal in UI with login/register tabs - Create user profile screen showing game statistics and history - Integrate Prisma 7 ORM with SQLite database for data persistence - Store game results (mode, path, clicks, time) in database - Auto-save completed games only when user is authenticated - Separate business logic into reusable hooks (useSoloGame, useMultiGame) - Organize UI into composable screen components (HomeScreen, SoloScreen, ProfileScreen, etc) - Add session persistence across F5 refresh for solo and multiplayer - Style auth modal, account button, and profile stats dashboard
2026-04-10 15:43:07 +02:00
parent 6a75e80e6c
commit dc09658fdb
44 changed files with 12371 additions and 91 deletions
@@ -0,0 +1,253 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { fetchArticle, pickTwoArticles, prefetchArticle, POLL_INTERVAL, COUNTDOWN_DURATION } from "./wiki";
+import { useTimer } from "./useTimer";
+import { saveSession, clearSession } from "./session";
+import type { Room } from "../app/api/rooms/route";
+
+export function useMultiGame() {
+  const timer = useTimer();
+
+  const [room, setRoom] = useState<Room | null>(null);
+  const [playerId, setPlayerId] = useState<string | null>(null);
+
+  const clicksRef = useRef(0);
+  const [clicksDisplay, setClicksDisplay] = useState(0);
+  const [history, setHistory] = useState<string[]>([]);
+  const historyRef = useRef<string[]>([]);
+  const [html, setHtml] = useState("");
+  const [title, setTitle] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const loadingRef = useRef(false);
+  const timerStartedRef = useRef(false);
+
+  const [countdown, setCountdown] = useState<number | null>(null);
+  const countdownRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const prevPhaseRef = useRef<string | null>(null);
+  const prevRoundRef = useRef(0);
+
+  // Article loading
+
+  async function loadArticle(t: string): Promise<string | null> {
+    setLoading(true); loadingRef.current = true; setLoadError(null);
+    const art = await fetchArticle(t);
+    setLoading(false); loadingRef.current = false;
+    if (!art) { setLoadError(`Impossible de charger "${t}".`); return null; }
+    setHtml(art.html); setTitle(art.title);
+    return art.title;
+  }
+
+  // Countdown
+
+  function startCountdown(start: number) {
+    if (countdownRef.current) clearInterval(countdownRef.current);
+    const tick = () => {
+      const rem = Math.ceil((COUNTDOWN_DURATION - (Date.now() - start)) / 1000);
+      setCountdown(rem <= 0 ? 0 : rem);
+    };
+    tick();
+    countdownRef.current = setInterval(tick, 200);
+  }
+
+  function stopCountdown() {
+    if (countdownRef.current) { clearInterval(countdownRef.current); countdownRef.current = null; }
+    setCountdown(null);
+  }
+
+  // Polling
+
+  function stopPolling() {
+    if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
+  }
+
+  async function poll(code: string, pid: string) {
+    try {
+      const res = await fetch(`/api/rooms/${code}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "heartbeat", playerId: pid }),
+      });
+      if (res.ok) setRoom((await res.json() as { room: Room }).room);
+    } catch { /* ignore */ }
+  }
+
+  function startPolling(code: string, pid: string) {
+    stopPolling();
+    pollRef.current = setInterval(() => poll(code, pid), POLL_INTERVAL);
+  }
+
+  // Phase sync
+
+  useEffect(() => {
+    if (!room) return;
+    const prevPhase = prevPhaseRef.current;
+    const prevRound = prevRoundRef.current;
+    prevPhaseRef.current = room.phase;
+    prevRoundRef.current = room.round;
+
+    if (room.phase === "countdown" && prevPhase !== "countdown") {
+      setHtml(""); setLoadError(null);
+      clicksRef.current = 0; setClicksDisplay(0);
+      timerStartedRef.current = false;
+      timer.reset();
+      startCountdown(room.countdownStart ?? Date.now());
+    }
+    if (room.phase === "playing" && prevPhase !== "playing") {
+      stopCountdown();
+      historyRef.current = [room.startArticle];
+      setHistory([room.startArticle]);
+      loadArticle(room.startArticle);
+    }
+    if (room.phase === "results" && prevPhase !== "results") {
+      timer.stop();
+    }
+    if (room.round !== prevRound && room.phase === "playing") {
+      loadArticle(room.startArticle);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [room]);
+
+  // Countdown -> playing transition
+  useEffect(() => {
+    if (!room || room.phase !== "countdown" || !playerId) return;
+    if (Date.now() - (room.countdownStart ?? 0) >= COUNTDOWN_DURATION) {
+      fetch(`/api/rooms/${room.code}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "play", playerId }),
+      }).then((r) => r.json()).then((d) => {
+        if ((d as { room: Room }).room) setRoom((d as { room: Room }).room);
+      }).catch(() => {});
+    }
+  }, [countdown, room, playerId]);
+
+  // Navigation
+
+  const navigate = useCallback(async (t: string) => {
+    if (!room || !playerId || loadingRef.current || room.phase !== "playing") return;
+    clicksRef.current += 1; setClicksDisplay(clicksRef.current);
+    if (!timerStartedRef.current) { timer.start(); timerStartedRef.current = true; }
+
+    const canonical = await loadArticle(t);
+    if (!canonical) return;
+
+    const newHistory = [...historyRef.current, canonical];
+    historyRef.current = newHistory;
+    setHistory(newHistory);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+
+    try {
+      const res = await fetch(`/api/rooms/${room.code}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "navigate", playerId, article: canonical }),
+      });
+      if (res.ok) setRoom((await res.json() as { room: Room }).room);
+    } catch { /* on continue localement */ }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [room, playerId]);
+
+  // Room actions
+
+  async function createRoom(playerName: string): Promise<{ error?: string }> {
+    const res = await fetch("/api/rooms", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ playerName }),
+    });
+    const data = await res.json() as { room?: Room; playerId?: string; error?: string };
+    if (!res.ok) return { error: data.error ?? "Erreur" };
+    setRoom(data.room!); setPlayerId(data.playerId!);
+    startPolling(data.room!.code, data.playerId!);
+    saveSession({ screen: "lobby", multiRoomCode: data.room!.code, multiPlayerId: data.playerId!, playerName });
+    return {};
+  }
+
+  async function joinRoom(playerName: string, code: string): Promise<{ error?: string }> {
+    const res = await fetch(`/api/rooms/${code}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ action: "join", playerName }),
+    });
+    const data = await res.json() as { room?: Room; playerId?: string; error?: string };
+    if (!res.ok) return { error: data.error ?? "Impossible de rejoindre" };
+    setRoom(data.room!); setPlayerId(data.playerId!);
+    startPolling(data.room!.code, data.playerId!);
+    saveSession({ screen: "lobby", multiRoomCode: data.room!.code, multiPlayerId: data.playerId!, playerName });
+    return {};
+  }
+
+  async function startGame(): Promise<{ error?: string }> {
+    if (!room || !playerId) return {};
+    const puzzle = await pickTwoArticles();
+    const res = await fetch(`/api/rooms/${room.code}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ action: "start", playerId, startArticle: puzzle.start, targetArticle: puzzle.target }),
+    });
+    const data = await res.json() as { room?: Room; error?: string };
+    if (!res.ok) return { error: data.error ?? "Erreur" };
+    prefetchArticle(puzzle.start);
+    setRoom(data.room!);
+    return {};
+  }
+
+  async function nextRound() {
+    if (!room || !playerId) return;
+    const res = await fetch(`/api/rooms/${room.code}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ action: "nextRound", playerId }),
+    });
+    if (res.ok) setRoom((await res.json() as { room: Room }).room);
+  }
+
+  async function resetGame() {
+    if (!room || !playerId) return;
+    const res = await fetch(`/api/rooms/${room.code}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ action: "resetGame", playerId }),
+    });
+    if (res.ok) setRoom((await res.json() as { room: Room }).room);
+  }
+
+  function leave() {
+    stopPolling(); stopCountdown(); timer.stop();
+    setRoom(null); setPlayerId(null);
+    setHtml(""); setTitle("");
+    setHistory([]); historyRef.current = [];
+    clicksRef.current = 0; setClicksDisplay(0);
+    timerStartedRef.current = false;
+    clearSession();
+  }
+
+  // Restore session depuis sessionStorage (F5)
+  async function restore(code: string, pid: string): Promise<boolean> {
+    try {
+      const res = await fetch(`/api/rooms/${code}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "heartbeat", playerId: pid }),
+      });
+      if (!res.ok) return false;
+      const data = await res.json() as { room: Room };
+      setRoom(data.room);
+      setPlayerId(pid);
+      startPolling(code, pid);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  return {
+    room, playerId, html, title, loading, loadError,
+    history, clicks: clicksDisplay, elapsed: timer.elapsed, countdown,
+    createRoom, joinRoom, startGame, nextRound, resetGame, leave, navigate, restore,
+    retryLoad: () => title && loadArticle(title),
+  };
+}