fix(chess): repair lobby create/join flow and connectAndCreate default

packages/chess/src/net/client.ts

@@ -203,14 +203,15 @@ export class GameClient {
    * `room.created` event will carry the server-issued token; consumers should
    * listen for that to capture it (or use `connect()` once they have one).
    */
-  async connectAndCreate(rulesetIds?: string[]): Promise<void> {
+  async connectAndCreate(rulesetIds: string[] = []): Promise<void> {
     this.code = null;
     this.token = null;
     this.closed = false;
     this.reconnectAttempts = 0;
     // Use a one-shot bootstrap that fires room.create instead of room.join
     // after the socket opens. We keep the bootstrap local to avoid leaking
-    // create-only state onto the instance.
+    // create-only state onto the instance. Default to [] (not undefined) so
+    // `openConnection`'s `autoCreate !== undefined` gate fires on empty-args.
     return this.openConnection({ autoCreate: rulesetIds });
   }
 

packages/chess/src/ui/Lobby.tsx

@@ -1,8 +1,88 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { GameClient } from '../net/client.js';
 
-const WS_URL = (import.meta as { env?: Record<string,string> }).env?.["VITE_WS_URL"] ?? "ws://localhost:7357/ws";
+const WS_URL =
+  (import.meta as { env?: Record<string, string> }).env?.['VITE_WS_URL'] ??
+  'ws://localhost:7357/ws';
+
+interface RoomPayload {
+  code?: string;
+  token?: string;
+  color?: string;
+  message?: string;
+}
+
+interface ServerMsg {
+  type: string;
+  payload: RoomPayload;
+}
+
+/**
+ * Opens a fresh WebSocket, sends one envelope, then returns a promise that
+ * resolves on the first room.created / room.joined reply or rejects on error.
+ *
+ * We use a raw WebSocket (not GameClient) because the Lobby's create/join
+ * flow is a single request/response pair — no reconnect, no persistent state.
+ * GameClient is wired up downstream by the game view once we have a token.
+ */
+function oneShotRoomRequest(
+  type: 'room.create' | 'room.join',
+  extraPayload: Record<string, unknown>,
+): Promise<{ code: string; token: string; color: string }> {
+  return new Promise((resolve, reject) => {
+    const ws = new WebSocket(WS_URL);
+    const timeout = window.setTimeout(() => {
+      ws.close();
+      reject(new Error('Could not connect to server'));
+    }, 5000);
+
+    ws.onopen = () => {
+      ws.send(
+        JSON.stringify({
+          v: 1,
+          seq: 1,
+          ts: Date.now(),
+          type,
+          payload: extraPayload,
+        }),
+      );
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data as string) as ServerMsg;
+        if (
+          (msg.type === 'room.created' || msg.type === 'room.joined') &&
+          typeof msg.payload.code === 'string' &&
+          typeof msg.payload.token === 'string' &&
+          typeof msg.payload.color === 'string'
+        ) {
+          clearTimeout(timeout);
+          ws.close();
+          resolve({
+            code: msg.payload.code,
+            token: msg.payload.token,
+            color: msg.payload.color,
+          });
+        } else if (msg.type === 'error') {
+          clearTimeout(timeout);
+          ws.close();
+          reject(new Error(msg.payload.message ?? 'Server error'));
+        }
+      } catch {
+        /* ignore malformed frames */
+      }
+    };
+
+    ws.onerror = () => {
+      clearTimeout(timeout);
+      reject(new Error('Could not connect to server'));
+    };
+    ws.onclose = () => {
+      clearTimeout(timeout);
+    };
+  });
+}
 
 export function Lobby() {
   const [codeInput, setCodeInput] = useState('');
@@ -14,104 +94,62 @@ export function Lobby() {
   const handleCreate = async () => {
     setLoading(true);
     setError(null);
-    const client = new GameClient(WS_URL);
-    
-    client.on("room.created", (e) => {
-      setRoomCode(e.payload.code);
-      sessionStorage.setItem("room-code", e.payload.code);
-      sessionStorage.setItem("room-token", e.payload.token);
-      sessionStorage.setItem("player-color", e.payload.color);
-      setLoading(false);
-    });
-    
-    client.on("error", (e) => { 
-      setError(e.payload.message); 
-      setLoading(false); 
-    });
-    
     try {
-      if (typeof client.connectAndCreate === 'function') {
+      const { code, token, color } = await oneShotRoomRequest('room.create', {});
-        await client.connectAndCreate();
+      sessionStorage.setItem('room-code', code);
-      } else {
+      sessionStorage.setItem('room-token', token);
-        // Fallback approach if connectAndCreate doesn't exist
+      sessionStorage.setItem('player-color', color);
-        const ws = new WebSocket(WS_URL);
+      setRoomCode(code);
-        ws.onopen = () => {
+    } catch (err) {
-          ws.send(JSON.stringify({ v: 1, seq: 1, ts: Date.now(), type: "room.create", payload: {} }));
+      setError(err instanceof Error ? err.message : 'Could not connect to server');
-        };
+    } finally {
-        ws.onmessage = (e) => {
-          const msg = JSON.parse(e.data);
-          if (msg.type === "room.created") {
-            setRoomCode(msg.payload.code);
-            sessionStorage.setItem("room-code", msg.payload.code);
-            sessionStorage.setItem("room-token", msg.payload.token);
-            sessionStorage.setItem("player-color", msg.payload.color);
-            setLoading(false);
-          }
-          if (msg.type === "error") {
-            setError(msg.payload.message);
-            setLoading(false);
-          }
-        };
-        ws.onerror = (e) => {
-          console.error("WebSocket error:", e);
-          setError("Could not connect to server");
-          setLoading(false);
-        };
-        ws.onclose = (e) => {
-          console.error("WebSocket closed:", e.code, e.reason);
-          if (loading) {
-            setError("Could not connect to server");
-            setLoading(false);
-          }
-        };
-      }
-    } catch { 
-      setError("Could not connect to server"); 
       setLoading(false);
     }
   };
 
   const handleJoin = async () => {
-    if (!codeInput.trim()) { 
+    const code = codeInput.trim().toUpperCase();
-      setError("Enter a room code"); 
+    if (!code) {
+      setError('Enter a room code');
       return;
     }
     setLoading(true);
     setError(null);
-    
-    const client = new GameClient(WS_URL);
-    client.on("room.joined", (e) => {
-      sessionStorage.setItem("room-code", e.payload.code);
-      sessionStorage.setItem("room-token", e.payload.token);
-      sessionStorage.setItem("player-color", e.payload.color);
-      navigate("/game");
-    });
-    
-    client.on("error", (e) => { 
-      setError(e.payload.message || "Invalid room code"); 
-      setLoading(false); 
-    });
-    
     try {
-      await client.connect(codeInput.trim().toUpperCase(), "");
+      const result = await oneShotRoomRequest('room.join', { code });
-    } catch { 
+      sessionStorage.setItem('room-code', result.code);
-      setError("Could not connect"); 
+      sessionStorage.setItem('room-token', result.token);
+      sessionStorage.setItem('player-color', result.color);
+      navigate('/game');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Invalid room code');
+    } finally {
       setLoading(false);
     }
   };
 
   return (
-    <main data-testid="page-home" className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
+    <main
+      data-testid="page-home"
+      className="min-h-screen bg-slate-50 flex items-center justify-center p-4"
+    >
       <div className="w-full max-w-md bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
         <div className="p-6 text-center border-b border-slate-100 bg-slate-50/50">
           <h1 className="text-2xl font-bold text-slate-900 tracking-tight">Chess</h1>
           <p className="text-slate-500 text-sm mt-1">Play realtime multiplayer</p>
+          <button
+            onClick={() => navigate('/game')}
+            className="mt-3 text-xs text-slate-500 hover:text-slate-900 underline underline-offset-2"
+          >
+            or play solo (local)
+          </button>
         </div>
 
         <div className="p-6 space-y-8">
-          {/* Create Room Section */}
           <section className="space-y-4">
-            <h2 className="text-sm font-semibold text-slate-900 uppercase tracking-wider">New Game</h2>
+            <h2 className="text-sm font-semibold text-slate-900 uppercase tracking-wider">
+              New Game
+            </h2>
             <div className="bg-slate-50 rounded-lg p-4 border border-slate-100">
               {!roomCode ? (
                 <button
@@ -126,12 +164,15 @@ export function Lobby() {
                 <div className="space-y-4">
                   <div className="text-center">
                     <span className="text-sm text-slate-500 block mb-1">Room code:</span>
-                    <span data-testid="room-code" className="text-2xl font-mono font-bold tracking-widest text-slate-900 bg-white border border-slate-200 rounded px-4 py-2 inline-block">
+                    <span
+                      data-testid="room-code"
+                      className="text-2xl font-mono font-bold tracking-widest text-slate-900 bg-white border border-slate-200 rounded px-4 py-2 inline-block"
+                    >
                       {roomCode}
                     </span>
                   </div>
                   <button
-                    onClick={() => navigate("/game")}
+                    onClick={() => navigate('/game')}
                     className="w-full bg-blue-600 text-white font-medium py-2.5 px-4 rounded-md hover:bg-blue-700 transition-colors"
                   >
                     Enter Room
@@ -150,15 +191,16 @@ export function Lobby() {
             </div>
           </div>
 
-          {/* Join Room Section */}
           <section className="space-y-4">
-            <h2 className="text-sm font-semibold text-slate-900 uppercase tracking-wider">Join Game</h2>
+            <h2 className="text-sm font-semibold text-slate-900 uppercase tracking-wider">
+              Join Game
+            </h2>
             <div className="space-y-3">
               <input
                 data-testid="room-code-input"
                 type="text"
                 value={codeInput}
-                onChange={e => setCodeInput(e.target.value.toUpperCase())}
+                onChange={(e) => setCodeInput(e.target.value.toUpperCase())}
                 placeholder="Enter 6-letter code"
                 maxLength={6}
                 className="w-full font-mono text-center text-lg py-2.5 px-4 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent placeholder:text-slate-400"
@@ -175,9 +217,11 @@ export function Lobby() {
           </section>
         </div>
 
-        {/* Error Display */}
         {error && (
-          <div data-testid="lobby-error" className="bg-red-50 border-t border-red-100 p-4 text-center">
+          <div
+            data-testid="lobby-error"
+            className="bg-red-50 border-t border-red-100 p-4 text-center"
+          >
             <p className="text-sm text-red-600 font-medium">{error}</p>
           </div>
         )}