Frontend: lobby view (player list, code, start game) #40

New issue

Open

opened 2026-04-19 07:23:38 +00:00 by forgejo-lila · 0 comments

forgejo-lila commented

2026-04-19 07:23:38 +00:00

Owner

Context

After creating or joining a lobby, players see a waiting room.

Files to create

apps/web/src/routes/multiplayer/lobby.$code.tsx — lobby view route.
apps/web/src/components/multiplayer/LobbyView.tsx — main lobby component.
apps/web/src/components/multiplayer/PlayerList.tsx — connected players.

Behavior

On mount: establish WebSocket, send lobby:join.
Receive lobby:state: update player list in real time.
Host sees 'Start Game' button (enabled when >= 2 players).
Non-host sees 'Waiting for host...'
Display: lobby code (large, copyable), game mode, player list.
On lobby:start received: navigate to game route.
On unmount: send lobby:leave.

Acceptance criteria

Player list updates in real time
Lobby code prominently displayed and copyable
Only host sees Start Game button
Leaving the page sends leave event
Handles: host leaving, connection drop
Mobile-friendly

## Context After creating or joining a lobby, players see a waiting room. ## Files to create - `apps/web/src/routes/multiplayer/lobby.$code.tsx` — lobby view route. - `apps/web/src/components/multiplayer/LobbyView.tsx` — main lobby component. - `apps/web/src/components/multiplayer/PlayerList.tsx` — connected players. ## Behavior - On mount: establish WebSocket, send `lobby:join`. - Receive `lobby:state`: update player list in real time. - Host sees 'Start Game' button (enabled when >= 2 players). - Non-host sees 'Waiting for host...' - Display: lobby code (large, copyable), game mode, player list. - On `lobby:start` received: navigate to game route. - On unmount: send `lobby:leave`. ## Acceptance criteria - Player list updates in real time - Lobby code prominently displayed and copyable - Only host sees Start Game button - Leaving the page sends leave event - Handles: host leaving, connection drop - Mobile-friendly