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

app/components/GameScreen.tsx

@@ -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>

app/components/LobbyScreen.tsx

@@ -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>

app/components/ScreenRouter.tsx

@@ -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}
     />
   );