From 6fb67c502675ff2dd6cefe87f53917bcb05a1799 Mon Sep 17 00:00:00 2001
From: Joey Yakimowich-Payne <jyapayne@pm.me>
Date: Thu, 16 Apr 2026 18:01:31 -0600
Subject: [PATCH] feat(chess): add lobby UI for create/join rooms (P4.11)

---
 packages/chess/src/app/App.tsx  |  11 +-
 packages/chess/src/ui/Lobby.tsx | 187 ++++++++++++++++++++++++++++++++
 2 files changed, 189 insertions(+), 9 deletions(-)
 create mode 100644 packages/chess/src/ui/Lobby.tsx

diff --git a/packages/chess/src/app/App.tsx b/packages/chess/src/app/App.tsx
index 6ee56c1..c9ac41c 100644
--- a/packages/chess/src/app/App.tsx
+++ b/packages/chess/src/app/App.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react'
 import { Routes, Route, useNavigate } from 'react-router-dom'
+import { Lobby } from '../ui/Lobby'
 import { GameView } from '../ui/GameView'
 import { RulesView } from '../ui/RulesView'
 import { SavePanel } from '../ui/SavePanel'
@@ -26,7 +27,7 @@ export function App() {
   return (
     <div data-testid="app-root">
       <Routes>
-        <Route path="/" element={<Home />} />
+        <Route path="/" element={<Lobby />} />
         <Route path="/game" element={<GameView engineState={chessState} />} />
         <Route path="/rules" element={<RulesView />} />
         <Route path="/save" element={<SaveWrapper chessState={chessState} />} />
@@ -66,11 +67,3 @@ function SaveWrapper({ chessState }: { chessState: ReturnType<typeof useChessEng
     </div>
   )
 }
-
-function Home() {
-  return (
-    <main data-testid="page-home">
-      <h1>Home</h1>
-    </main>
-  )
-}
\ No newline at end of file
diff --git a/packages/chess/src/ui/Lobby.tsx b/packages/chess/src/ui/Lobby.tsx
new file mode 100644
index 0000000..b84dd2a
--- /dev/null
+++ b/packages/chess/src/ui/Lobby.tsx
@@ -0,0 +1,187 @@
+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";
+
+export function Lobby() {
+  const [codeInput, setCodeInput] = useState('');
+  const [roomCode, setRoomCode] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  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') {
+        await client.connectAndCreate();
+      } else {
+        // Fallback approach if connectAndCreate doesn't exist
+        const ws = new WebSocket(WS_URL);
+        ws.onopen = () => {
+          ws.send(JSON.stringify({ v: 1, seq: 1, ts: Date.now(), type: "room.create", payload: {} }));
+        };
+        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()) { 
+      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(), "");
+    } catch { 
+      setError("Could not connect"); 
+      setLoading(false); 
+    }
+  };
+
+  return (
+    <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>
+        </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>
+            <div className="bg-slate-50 rounded-lg p-4 border border-slate-100">
+              {!roomCode ? (
+                <button 
+                  data-action="create-room" 
+                  onClick={handleCreate} 
+                  disabled={loading}
+                  className="w-full bg-slate-900 text-white font-medium py-2.5 px-4 rounded-md hover:bg-slate-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  {loading && !codeInput ? 'Creating...' : 'Create Room'}
+                </button>
+              ) : (
+                <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">
+                      {roomCode}
+                    </span>
+                  </div>
+                  <button 
+                    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
+                  </button>
+                </div>
+              )}
+            </div>
+          </section>
+          
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-slate-200"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-2 bg-white text-slate-400">or</span>
+            </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>
+            <div className="space-y-3">
+              <input
+                data-testid="room-code-input"
+                type="text"
+                value={codeInput}
+                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"
+              />
+              <button 
+                data-action="join-room" 
+                onClick={handleJoin} 
+                disabled={loading || !codeInput.trim()}
+                className="w-full bg-white text-slate-900 font-medium py-2.5 px-4 rounded-md border border-slate-300 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {loading && codeInput ? 'Joining...' : 'Join Room'}
+              </button>
+            </div>
+          </section>
+        </div>
+
+        {/* Error Display */}
+        {error && (
+          <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>
+        )}
+      </div>
+    </main>
+  );
+}