feat(multi): add game mode selection and surrender button for all_finish mode

2026-04-11 21:58:35 +02:00
parent 552bb17c15
commit 0401cdffe6
13 changed files with 202 additions and 26 deletions
@@ -1,5 +1,5 @@
 // Route handler pour les actions sur une room specifique
-// PATCH /api/rooms/[code] - actions: join, heartbeat, start, navigate, leave, nextRound
+// PATCH /api/rooms/[code] - actions: join, heartbeat, start, navigate, surrender, nextRound, resetGame

 import { NextRequest } from "next/server";
 import type { Room, Player } from "../route";
@@ -12,6 +12,7 @@ function dbToRoom(row: {
  round: number;
  totalRounds: number;
  maxPlayers: number;
+  gameMode: string;
  startArticle: string;
  targetArticle: string;
  roundWinner: string | null;
@@ -26,6 +27,7 @@ function dbToRoom(row: {
    round: row.round,
    totalRounds: row.totalRounds,
    maxPlayers: row.maxPlayers,
+    gameMode: (row.gameMode ?? "race") as Room["gameMode"],
    startArticle: row.startArticle,
    targetArticle: row.targetArticle,
    roundWinner: row.roundWinner,
@@ -47,6 +49,33 @@ function prunePlayers(players: Player[]): Player[] {
  return players.filter((p) => now - p.lastSeen < PLAYER_TIMEOUT_MS);
 }

+// En mode all_finish : calcule les points selon le rang d'arrivée
+// 1er = 10pts, 2ème = 7pts, 3ème = 5pts, reste = 3pts, forfait = 0pts
+const RANK_POINTS = [10, 7, 5, 3];
+function getRankPoints(rank: number): number {
+  return RANK_POINTS[rank] ?? RANK_POINTS[RANK_POINTS.length - 1];
+}
+
+// Vérifie si la manche doit se terminer en mode all_finish
+function checkAllFinished(room: Room): boolean {
+  if (room.gameMode !== "all_finish") return false;
+  return room.players.every((p) => p.hasWon || p.hasSurrendered);
+}
+
+// Attribue les points en mode all_finish selon l'ordre d'arrivée
+function assignAllFinishPoints(room: Room) {
+  const winners = room.players.filter((p) => p.hasWon);
+  // On leur attribue les points selon leur rang (ordre d'arrivée = ordre dans le tableau, déjà fixé au moment où ils ont gagné)
+  winners.forEach((p, i) => {
+    p.score += getRankPoints(i);
+  });
+  // roundWinner = premier arrivé
+  if (winners.length > 0) {
+    room.roundWinner = winners[0].id;
+  }
+  room.phase = "results";
+}
+
 // PATCH /api/rooms/[code]
 export async function PATCH(
  request: NextRequest,
@@ -105,6 +134,7 @@ export async function PATCH(
        score: 0,
        currentArticle: "",
        hasWon: false,
+        hasSurrendered: false,
        isHost: false,
        lastSeen: Date.now(),
      };
@@ -161,6 +191,7 @@ export async function PATCH(
      for (const p of room.players) {
        p.currentArticle = startArticle;
        p.hasWon = false;
+        p.hasSurrendered = false;
      }

      await saveRoom(room);
@@ -202,17 +233,61 @@ export async function PATCH(

      if (
        !player.hasWon &&
+        !player.hasSurrendered &&
        normalize(player.currentArticle) === normalize(room.targetArticle)
      ) {
        player.hasWon = true;

-        const alreadyWon = room.players.some(
-          (p) => p.hasWon && p.id !== player.id,
-        );
-        if (!alreadyWon) {
-          player.score += 10;
-          room.roundWinner = player.id;
+        if (room.gameMode === "race") {
+          // Mode course : 1er arrivé gagne la manche immédiatement
+          const alreadyWon = room.players.some(
+            (p) => p.hasWon && p.id !== player.id,
+          );
+          if (!alreadyWon) {
+            player.score += 10;
+            room.roundWinner = player.id;
+            room.phase = "results";
+          }
+        } else {
+          // Mode all_finish : on attend que tout le monde finisse ou abandonne
+          if (checkAllFinished(room)) {
+            assignAllFinishPoints(room);
+          }
+        }
+      }
+
+      await saveRoom(room);
+      return Response.json({ room });
+    }
+
+    // Forfait
+    case "surrender": {
+      if (room.phase !== "playing") {
+        return Response.json({ room });
+      }
+      const player = room.players.find((p) => p.id === playerId);
+      if (!player) {
+        return Response.json({ error: "Joueur inconnu" }, { status: 404 });
+      }
+      if (player.hasWon || player.hasSurrendered) {
+        return Response.json({ room });
+      }
+
+      player.hasSurrendered = true;
+      player.lastSeen = Date.now();
+
+      if (room.gameMode === "race") {
+        // En mode course, forfait ne termine pas la manche — on attend qu'un vrai gagnant arrive
+        // Sauf si tous ont abandonné
+        const anyoneStillPlaying = room.players.some((p) => !p.hasWon && !p.hasSurrendered);
+        if (!anyoneStillPlaying) {
          room.phase = "results";
+          // Pas de roundWinner si tout le monde a abandonné
+        }
+      } else {
+        // Mode all_finish : si tout le monde a fini ou abandonné, on termine
+        if (checkAllFinished(room)) {
+          assignAllFinishPoints(room);
        }
      }

@@ -235,6 +310,7 @@ export async function PATCH(
      room.roundStart = null;
      for (const p of room.players) {
        p.hasWon = false;
+        p.hasSurrendered = false;
        p.currentArticle = "";
      }
      await saveRoom(room);
@@ -258,6 +334,7 @@ export async function PATCH(
      for (const p of room.players) {
        p.score = 0;
        p.hasWon = false;
+        p.hasSurrendered = false;
        p.currentArticle = "";
      }
      await saveRoom(room);
@@ -278,6 +355,7 @@ async function saveRoom(room: Room) {
      round: room.round,
      totalRounds: room.totalRounds,
      maxPlayers: room.maxPlayers,
+      gameMode: room.gameMode,
      startArticle: room.startArticle,
      targetArticle: room.targetArticle,
      roundWinner: room.roundWinner,
@@ -12,6 +12,7 @@ export type Player = {
  score: number;
  currentArticle: string;
  hasWon: boolean;
+  hasSurrendered: boolean;
  isHost: boolean;
  lastSeen: number; // timestamp ms
 };
@@ -23,6 +24,7 @@ export type Room = {
  round: number;
  totalRounds: number;
  maxPlayers: number;
+  gameMode: "race" | "all_finish"; // race = 1er gagne, all_finish = tout le monde joue
  startArticle: string;
  targetArticle: string;
  roundWinner: string | null;
@@ -53,6 +55,7 @@ function dbToRoom(row: {
  round: number;
  totalRounds: number;
  maxPlayers: number;
+  gameMode: string;
  startArticle: string;
  targetArticle: string;
  roundWinner: string | null;
@@ -67,6 +70,7 @@ function dbToRoom(row: {
    round: row.round,
    totalRounds: row.totalRounds,
    maxPlayers: row.maxPlayers,
+    gameMode: (row.gameMode ?? "race") as Room["gameMode"],
    startArticle: row.startArticle,
    targetArticle: row.targetArticle,
    roundWinner: row.roundWinner,
@@ -87,10 +91,11 @@ async function pruneOldRooms() {
 // Response: { room: Room, playerId: string }
 export async function POST(request: NextRequest) {
  const body = await request.json();
-  const { playerName, maxPlayers, totalRounds } = body as {
+  const { playerName, maxPlayers, totalRounds, gameMode } = body as {
    playerName: string;
    maxPlayers?: number;
    totalRounds?: number;
+    gameMode?: string;
  };

  if (
@@ -125,6 +130,8 @@ export async function POST(request: NextRequest) {
  const playerId = generatePlayerId();
  const now = BigInt(Date.now());

+  const clampedMode: Room["gameMode"] = gameMode === "all_finish" ? "all_finish" : "race";
+
  const players: Player[] = [
    {
      id: playerId,
@@ -132,6 +139,7 @@ export async function POST(request: NextRequest) {
      score: 0,
      currentArticle: "",
      hasWon: false,
+      hasSurrendered: false,
      isHost: true,
      lastSeen: Date.now(),
    },
@@ -145,6 +153,7 @@ export async function POST(request: NextRequest) {
      round: 0,
      totalRounds: clampedRounds,
      maxPlayers: clampedMax,
+      gameMode: clampedMode,
      startArticle: "",
      targetArticle: "",
      roundWinner: null,
@@ -20,15 +20,17 @@ type GameScreenProps = {
  onRetry: () => void;
  onNextRound: () => void;
  onResetGame: () => void;
+  onSurrender: () => void;
 };

 export function GameScreen({
  room, playerId, html, title, loading, loadError, history, clicks, elapsed,
-  countdown, onNavigate, onRetry, onNextRound, onResetGame,
+  countdown, onNavigate, onRetry, onNextRound, onResetGame, onSurrender,
 }: GameScreenProps) {
  const breadcrumbEndRef = useRef<HTMLDivElement>(null);
  const myPlayer = room.players.find((p) => p.id === playerId);
  const isHost = myPlayer?.isHost ?? false;
+  const myFinished = myPlayer?.hasWon || myPlayer?.hasSurrendered;
  const sortedPlayers = [...room.players].sort((a, b) => b.score - a.score);
  const winner = room.roundWinner ? room.players.find((p) => p.id === room.roundWinner) : null;

@@ -65,7 +67,8 @@ export function GameScreen({
              <li key={p.id} className={`flex items-center gap-2 bg-[#1a1a1a] rounded-xl px-3.5 py-2.5 min-h-11 border ${p.id === playerId ? "border-[#7c3aed]" : "border-[#2e2e2e]"}`}>
                <span className="text-xs sm:text-sm font-bold text-[#888] min-w-6 sm:min-w-7">#{i + 1}</span>
                <span className="flex-1 font-semibold text-sm truncate">{p.name}</span>
-                {p.hasWon && <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-green-900/40 text-green-300 uppercase tracking-wide shrink-0">Gagnant</span>}
+                {p.hasWon && <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-green-900/40 text-green-300 uppercase tracking-wide shrink-0">✓ Trouvé</span>}
+                {p.hasSurrendered && <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-[#242424] text-[#888] uppercase tracking-wide shrink-0">Forfait</span>}
                <span className="font-bold text-[#7c3aed] text-sm shrink-0">{p.score} pts</span>
              </li>
            ))}
@@ -117,10 +120,26 @@ export function GameScreen({
          </div>
          <Breadcrumbs history={history} endRef={breadcrumbEndRef} />
        </div>
-        <div className="flex items-center gap-2 sm:gap-3 shrink-0 text-[10px] sm:text-xs font-bold text-[#888] tabular-nums">
-          <span>{elapsed}</span>
-          <span>{clicks} clics</span>
-          <span className="hidden sm:inline">{myPlayer?.score ?? 0} pts</span>
+        <div className="flex items-center gap-2 sm:gap-3 shrink-0">
+          <div className="flex items-center gap-2 sm:gap-3 text-[10px] sm:text-xs font-bold text-[#888] tabular-nums">
+            <span>{elapsed}</span>
+            <span>{clicks} clics</span>
+            <span className="hidden sm:inline">{myPlayer?.score ?? 0} pts</span>
+          </div>
+          {!myFinished && (
+            <button
+              onClick={onSurrender}
+              className="min-h-8 px-2 rounded-lg text-xs font-semibold bg-red-950/40 border border-red-900 text-red-400 hover:bg-red-900/40 cursor-pointer shrink-0"
+            >
+              Forfait
+            </button>
+          )}
+          {myFinished && myPlayer?.hasWon && (
+            <span className="text-xs font-bold text-green-400 shrink-0">✓ Trouvé !</span>
+          )}
+          {myFinished && myPlayer?.hasSurrendered && (
+            <span className="text-xs font-bold text-[#888] shrink-0">Forfait</span>
+          )}
        </div>
      </div>

@@ -156,7 +175,8 @@ export function GameScreen({
              <li key={p.id} className="flex flex-col gap-0.5">
                <span className={`text-xs font-semibold truncate ${p.id === playerId ? "text-[#7c3aed]" : "text-[#f0f0f0]"}`}>{p.name}</span>
                <span className="text-xs text-[#888]">{p.score} pts</span>
-                {p.hasWon && <span className="text-[10px] text-green-400 font-bold">Gagné !</span>}
+                {p.hasWon && <span className="text-[10px] text-green-400 font-bold">✓ Trouvé</span>}
+                {p.hasSurrendered && <span className="text-[10px] text-[#888] font-bold">Forfait</span>}
              </li>
            ))}
          </ul>
@@ -17,6 +17,8 @@ type LobbyScreenProps = {
  setMaxPlayers: (v: number) => void;
  totalRounds: number;
  setTotalRounds: (v: number) => void;
+  gameMode: Room["gameMode"];
+  setGameMode: (v: Room["gameMode"]) => void;
 };

 export function LobbyScreen({
@@ -32,6 +34,8 @@ export function LobbyScreen({
  setMaxPlayers,
  totalRounds,
  setTotalRounds,
+  gameMode,
+  setGameMode,
 }: LobbyScreenProps) {
  const isHost = room.players.find((p) => p.id === playerId)?.isHost ?? false;
  const [copied, setCopied] = useState(false);
@@ -141,6 +145,17 @@ export function LobbyScreen({
          <h3 className="text-[10px] sm:text-xs font-bold text-[#888] uppercase tracking-wider">
            Paramètres
          </h3>
+          <div className="flex flex-col gap-1.5">
+            <span className="text-xs text-[#888]">Mode de jeu</span>
+            <select
+              value={gameMode}
+              onChange={(e) => setGameMode(e.target.value as Room["gameMode"])}
+              className="w-full min-h-11 px-2 bg-[#0f0f0f] border border-[#2e2e2e] rounded-xl text-sm text-[#f0f0f0] outline-none focus:border-[#7c3aed] cursor-pointer transition-colors"
+            >
+              <option value="race">🏁 Course — le premier arrivé gagne</option>
+              <option value="all_finish">⏱ Normal — tout le monde joue jusqu&apos;au bout</option>
+            </select>
+          </div>
          <div className="flex gap-3">
            <div className="flex-1 flex flex-col gap-1.5">
              <span className="text-xs text-[#888]">Joueurs max</span>
@@ -32,6 +32,8 @@ type Props = {
  setMaxPlayers: Dispatch<SetStateAction<number>>;
  totalRounds: number;
  setTotalRounds: Dispatch<SetStateAction<number>>;
+  gameMode: "race" | "all_finish";
+  setGameMode: Dispatch<SetStateAction<"race" | "all_finish">>;
  error: string | null;
  setError: Dispatch<SetStateAction<string | null>>;
  loading: boolean;
@@ -44,6 +46,7 @@ export function ScreenRouter({
  playerName, setPlayerName, joinCode, setJoinCode,
  maxPlayers, setMaxPlayers,
  totalRounds, setTotalRounds,
+  gameMode, setGameMode,
  error, setError, loading, showAuth, setShowAuth,
 }: Props) {
  if (screen === "profile") return (
@@ -108,6 +111,7 @@ export function ScreenRouter({
      onReset={handlers.handleResetGame}
      maxPlayers={maxPlayers} setMaxPlayers={setMaxPlayers}
      totalRounds={totalRounds} setTotalRounds={setTotalRounds}
+      gameMode={gameMode} setGameMode={setGameMode}
    />
  );

@@ -123,6 +127,7 @@ export function ScreenRouter({
      onRetry={multi.retryLoad}
      onNextRound={handlers.handleNextRound}
      onResetGame={handlers.handleResetGame}
+      onSurrender={handlers.handleSurrender}
    />
  );

@@ -14,6 +14,7 @@ export default function WikiRush() {
  const [joinCode, setJoinCode] = useState("");
  const [maxPlayers, setMaxPlayers] = useState(16);
  const [totalRounds, setTotalRounds] = useState(3);
+  const [gameMode, setGameMode] = useState<"race" | "all_finish">("race");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [showAuth, setShowAuth] = useState(false);
@@ -22,7 +23,7 @@ export default function WikiRush() {
  const multi = useMultiGame();

  const { session } = useGameEffects({ solo, multi, screen, setScreen, setPlayerName });
-  const handlers = useGameHandlers({ solo, multi, playerName, joinCode, maxPlayers, totalRounds, setScreen, setError, setLoading });
+  const handlers = useGameHandlers({ solo, multi, playerName, joinCode, maxPlayers, totalRounds, gameMode, setScreen, setError, setLoading });

  return (
    <ScreenRouter
@@ -32,6 +33,7 @@ export default function WikiRush() {
      joinCode={joinCode} setJoinCode={setJoinCode}
      maxPlayers={maxPlayers} setMaxPlayers={setMaxPlayers}
      totalRounds={totalRounds} setTotalRounds={setTotalRounds}
+      gameMode={gameMode} setGameMode={setGameMode}
      error={error} setError={setError} loading={loading}
      showAuth={showAuth} setShowAuth={setShowAuth}
    />