jyapayne/houserules
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-04-16 21:32:21 -06:00
commit dbf3b4551d
No known key found for this signature in database
2 changed files with 145 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

5
packages/chess/src/net/client.ts
View file

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

240
packages/chess/src/ui/Lobby.tsx
View file

@ -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('');
@ -12,111 +92,69 @@ export function Lobby() {
const navigate = useNavigate();
const handleCreate = async () => {
setLoading(true);
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 { code, token, color } = await oneShotRoomRequest('room.create', {});
sessionStorage.setItem('room-code', code);
sessionStorage.setItem('room-token', token);
sessionStorage.setItem('player-color', color);
setRoomCode(code);
} catch (err) {
setError(err instanceof Error ? err.message : 'Could not connect to server');
} finally {
setLoading(false);
}
};
const handleJoin = async () => {
if (!codeInput.trim()) {
setError("Enter a room code");
return;
const code = codeInput.trim().toUpperCase();
if (!code) {
setError('Enter a room code');
return;
}
setLoading(true);
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);
const result = await oneShotRoomRequest('room.join', { code });
sessionStorage.setItem('room-code', result.code);
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
data-action="create-room"
onClick={handleCreate}
<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"
>
@ -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")}
<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
@ -140,7 +181,7 @@ export function Lobby() {
)}
</div>
</section>
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-slate-200"></div>
@ -149,23 +190,24 @@ export function Lobby() {
<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>
<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"
/>
<button
data-action="join-room"
onClick={handleJoin}
<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"
>
@ -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>
)}