Frontend: lobby browser + create/join lobby #39

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

Players need a way to find, create, and join game lobbies.

Files to create

apps/web/src/routes/multiplayer.tsx — main multiplayer page.
apps/web/src/components/multiplayer/LobbyBrowser.tsx — public lobby list.
apps/web/src/components/multiplayer/CreateLobby.tsx — form: game mode, public/private.
apps/web/src/components/multiplayer/JoinByCode.tsx — code input for private lobbies.

Behavior

Page loads: fetch public lobbies from GET /api/v1/lobbies.
Create: POST /api/v1/lobbies, navigate to lobby view.
Join by code: POST /api/v1/lobbies/:code/join, navigate to lobby view.
Join from list: click public lobby, POST join, navigate.

Acceptance criteria

Public lobbies displayed with: code, game mode, player count, host name
Creating/joining navigates to lobby view
Error handling: full, not found, already in a lobby
Requires authentication
Mobile-friendly (Tailwind + shadcn/ui)

Notes

Use TanStack Query for fetching. API URL from import.meta.env.VITE_API_URL. credentials: 'include' on all fetches. Game mode names from @lila/shared constants.

## Context Players need a way to find, create, and join game lobbies. ## Files to create - `apps/web/src/routes/multiplayer.tsx` — main multiplayer page. - `apps/web/src/components/multiplayer/LobbyBrowser.tsx` — public lobby list. - `apps/web/src/components/multiplayer/CreateLobby.tsx` — form: game mode, public/private. - `apps/web/src/components/multiplayer/JoinByCode.tsx` — code input for private lobbies. ## Behavior - Page loads: fetch public lobbies from `GET /api/v1/lobbies`. - Create: POST `/api/v1/lobbies`, navigate to lobby view. - Join by code: POST `/api/v1/lobbies/:code/join`, navigate to lobby view. - Join from list: click public lobby, POST join, navigate. ## Acceptance criteria - Public lobbies displayed with: code, game mode, player count, host name - Creating/joining navigates to lobby view - Error handling: full, not found, already in a lobby - Requires authentication - Mobile-friendly (Tailwind + shadcn/ui) ## Notes Use TanStack Query for fetching. API URL from `import.meta.env.VITE_API_URL`. `credentials: 'include'` on all fetches. Game mode names from `@lila/shared` constants.