refactor(page): extract screen routing into ScreenRouter component

app/components/ScreenRouter.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { Dispatch, SetStateAction } from "react";
+import { Session } from "next-auth";
+import type { Screen } from "../../lib/types";
+import type { useSoloGame } from "../../lib/useSoloGame";
+import type { useMultiGame } from "../../lib/useMultiGame";
+import type { useGameHandlers } from "../../lib/useGameHandlers";
+import { fmt } from "../../lib/utils";
+import { HomeScreen } from "./HomeScreen";
+import { LobbyScreen } from "./LobbyScreen";
+import { SoloScreen } from "./SoloScreen";
+import { GameScreen } from "./GameScreen";
+import { AuthModal } from "./AuthModal";
+import { ProfileScreen } from "./ProfileScreen";
+
+type Props = {
+  screen: Screen;
+  setScreen: Dispatch<SetStateAction<Screen>>;
+  session: Session | null;
+  solo: ReturnType<typeof useSoloGame>;
+  multi: ReturnType<typeof useMultiGame>;
+  handlers: ReturnType<typeof useGameHandlers>;
+  playerName: string;
+  setPlayerName: Dispatch<SetStateAction<string>>;
+  joinCode: string;
+  setJoinCode: Dispatch<SetStateAction<string>>;
+  error: string | null;
+  setError: Dispatch<SetStateAction<string | null>>;
+  loading: boolean;
+  showAuth: boolean;
+  setShowAuth: Dispatch<SetStateAction<boolean>>;
+};
+
+export function ScreenRouter({
+  screen, setScreen, session, solo, multi, handlers,
+  playerName, setPlayerName, joinCode, setJoinCode,
+  error, setError, loading, showAuth, setShowAuth,
+}: Props) {
+  if (screen === "profile") return (
+    <ProfileScreen userName={session?.user?.name ?? "Joueur"} onBack={() => setScreen("home")} />
+  );
+
+  if (screen === "home") return (
+    <>
+      <HomeScreen
+        playerName={playerName} setPlayerName={setPlayerName}
+        joinCode={joinCode} setJoinCode={setJoinCode}
+        error={error} setError={setError} loading={loading}
+        onCreateRoom={handlers.handleCreateRoom}
+        onJoinRoom={handlers.handleJoinRoom}
+        onSolo={handlers.handleSolo}
+        session={session}
+        onShowAuth={() => setShowAuth(true)}
+        onShowProfile={() => setScreen("profile")}
+      />
+      {showAuth && <AuthModal onClose={() => setShowAuth(false)} onSuccess={() => setShowAuth(false)} />}
+    </>
+  );
+
+  if (screen === "solo") return (
+    <SoloScreen
+      phase={solo.phase} puzzle={solo.puzzle}
+      html={solo.html} title={solo.title}
+      loading={solo.loading} loadError={solo.loadError}
+      history={solo.history} clicks={solo.clicks}
+      elapsedDisplay={fmt(solo.elapsed)}
+      canGoBack={solo.canGoBack}
+      onStart={solo.start}
+      onNavigate={solo.navigate}
+      onBack={solo.goBack}
+      onQuit={() => { solo.reset(); setScreen("home"); }}
+      onNewGame={solo.start}
+      onRetry={solo.retryLoad}
+    />
+  );
+
+  if (screen === "lobby" && multi.room && multi.playerId) return (
+    <LobbyScreen
+      room={multi.room} playerId={multi.playerId}
+      error={error} setError={setError} loading={loading}
+      onLeave={handlers.handleLeave}
+      onStart={handlers.handleStartGame}
+      onReset={handlers.handleResetGame}
+    />
+  );
+
+  if (screen === "game" && multi.room && multi.playerId) return (
+    <GameScreen
+      room={multi.room} playerId={multi.playerId}
+      html={multi.html} title={multi.title}
+      loading={multi.loading} loadError={multi.loadError}
+      history={multi.history} clicks={multi.clicks}
+      elapsed={fmt(multi.elapsed)}
+      countdown={multi.countdown}
+      onNavigate={multi.navigate}
+      onRetry={multi.retryLoad}
+      onNextRound={handlers.handleNextRound}
+      onResetGame={handlers.handleResetGame}
+    />
+  );
+
+  return null;
+}

app/page.tsx

@@ -5,14 +5,8 @@ import { useSoloGame } from "../lib/useSoloGame";
 import { useMultiGame } from "../lib/useMultiGame";
 import { useGameEffects } from "../lib/useGameEffects";
 import { useGameHandlers } from "../lib/useGameHandlers";
-import { fmt } from "../lib/utils";
+import { ScreenRouter } from "./components/ScreenRouter";
 import type { Screen } from "../lib/types";
-import { HomeScreen } from "./components/HomeScreen";
-import { LobbyScreen } from "./components/LobbyScreen";
-import { SoloScreen } from "./components/SoloScreen";
-import { GameScreen } from "./components/GameScreen";
-import { AuthModal } from "./components/AuthModal";
-import { ProfileScreen } from "./components/ProfileScreen";
 
 export default function WikiRush() {
   const [screen, setScreen] = useState<Screen>("home");
@@ -28,68 +22,14 @@ export default function WikiRush() {
   const { session } = useGameEffects({ solo, multi, screen, setScreen, setPlayerName });
   const handlers = useGameHandlers({ solo, multi, playerName, joinCode, setScreen, setError, setLoading });
 
-  if (screen === "profile") return (
+  return (
-    <ProfileScreen userName={session?.user?.name ?? "Joueur"} onBack={() => setScreen("home")} />
+    <ScreenRouter
-  );
+      screen={screen} setScreen={setScreen} session={session}
-
+      solo={solo} multi={multi} handlers={handlers}
-  if (screen === "home") return (
+      playerName={playerName} setPlayerName={setPlayerName}
-    <>
+      joinCode={joinCode} setJoinCode={setJoinCode}
-      <HomeScreen
-        playerName={playerName} setPlayerName={setPlayerName}
-        joinCode={joinCode} setJoinCode={setJoinCode}
-        error={error} setError={setError} loading={loading}
-        onCreateRoom={handlers.handleCreateRoom}
-        onJoinRoom={handlers.handleJoinRoom}
-        onSolo={handlers.handleSolo}
-        session={session}
-        onShowAuth={() => setShowAuth(true)}
-        onShowProfile={() => setScreen("profile")}
-      />
-      {showAuth && <AuthModal onClose={() => setShowAuth(false)} onSuccess={() => setShowAuth(false)} />}
-    </>
-  );
-
-  if (screen === "solo") return (
-    <SoloScreen
-      phase={solo.phase} puzzle={solo.puzzle}
-      html={solo.html} title={solo.title}
-      loading={solo.loading} loadError={solo.loadError}
-      history={solo.history} clicks={solo.clicks}
-      elapsedDisplay={fmt(solo.elapsed)}
-      canGoBack={solo.canGoBack}
-      onStart={solo.start}
-      onNavigate={solo.navigate}
-      onBack={solo.goBack}
-      onQuit={() => { solo.reset(); setScreen("home"); }}
-      onNewGame={solo.start}
-      onRetry={solo.retryLoad}
-    />
-  );
-
-  if (screen === "lobby" && multi.room && multi.playerId) return (
-    <LobbyScreen
-      room={multi.room} playerId={multi.playerId}
       error={error} setError={setError} loading={loading}
-      onLeave={handlers.handleLeave}
+      showAuth={showAuth} setShowAuth={setShowAuth}
-      onStart={handlers.handleStartGame}
-      onReset={handlers.handleResetGame}
     />
   );
-
-  if (screen === "game" && multi.room && multi.playerId) return (
-    <GameScreen
-      room={multi.room} playerId={multi.playerId}
-      html={multi.html} title={multi.title}
-      loading={multi.loading} loadError={multi.loadError}
-      history={multi.history} clicks={multi.clicks}
-      elapsed={fmt(multi.elapsed)}
-      countdown={multi.countdown}
-      onNavigate={multi.navigate}
-      onRetry={multi.retryLoad}
-      onNextRound={handlers.handleNextRound}
-      onResetGame={handlers.handleResetGame}
-    />
-  );
-
-  return null;
 }