Redesign game lobby and room creation flow

- Split chess and blackjack setup into guided creation steps
- Add chess time control presets and reusable lobby room metrics
- Improve room filtering, ordering, and live connection state

panel/src/lib/useGameRoom.ts

@@ -24,6 +24,21 @@ interface GameRoomState {
     roomOptions: { betAmount?: number; timeControl?: string };
 }
 
+function createInitialRoomState(): GameRoomState {
+    return {
+        gameState: null,
+        players: [],
+        spectators: [],
+        roomStatus: "connecting",
+        isSpectator: false,
+        gameOver: null,
+        roundResult: null,
+        error: null,
+        sessionReplaced: false,
+        roomOptions: {},
+    };
+}
+
 export function useGameRoom(roomId: string, userId: string, role?: string, preferAs: "player" | "spectator" = "player") {
     const { send, subscribe, connected } = useWebSocket();
     const navigate = useNavigate();
@@ -38,22 +53,13 @@ export function useGameRoom(roomId: string, userId: string, role?: string, prefe
         }
     }, []);
 
-    const [state, setState] = useState<GameRoomState>({
-        gameState: null,
-        players: [],
-        spectators: [],
-        roomStatus: "connecting",
-        isSpectator: false,
-        gameOver: null,
-        roundResult: null,
-        error: null,
-        sessionReplaced: false,
-        roomOptions: {},
-    });
+    const [state, setState] = useState<GameRoomState>(() => createInitialRoomState());
 
     useEffect(() => {
         if (!connected) return;
 
+        setState(createInitialRoomState());
+
         send({ type: "JOIN_ROOM", roomId, preferAs, role: role ?? "player" });
 
         const unsubscribe = subscribe((msg: any) => {
@@ -180,7 +186,7 @@ export function useGameRoom(roomId: string, userId: string, role?: string, prefe
             send({ type: "LEAVE_ROOM", roomId });
             unsubscribe();
         };
-    }, [roomId, connected, userId, send, subscribe]);
+    }, [connected, preferAs, role, roomId, send, subscribe, userId]);
 
     const sendAction = useCallback((action: unknown) => {
         const sent = send({ type: "GAME_ACTION", roomId, action });