feat(chess): add lobby UI for create/join rooms (P4.11)
This commit is contained in:
parent
721cc5484d
commit
6fb67c5026
2 changed files with 189 additions and 9 deletions
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
187
packages/chess/src/ui/Lobby.tsx
Normal file
187
packages/chess/src/ui/Lobby.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue