Create/Join Game UI

[eshaffer321]

Parent Issue

Part of #885 (Online Networked Multiplayer)

Overview

Rework the setup screen to support two flows: creating a new multiplayer game and joining an existing one via a shared link. Replace the current local-only setup with a networked lobby experience.

Current State

• SetupScreen exists with player count selector and hero selection grid
• All hero selections happen on one screen for all players (local setup)
• No concept of game IDs, links, or joining
• App.tsx shows SetupScreen → GameProvider with complete config

Acceptance Criteria

Main Menu

• Landing screen with options: "Solo Game", "Create Game", "Join Game"
• Solo Game: existing flow (1 player, pick hero, start immediately with embedded server)

Create Game Flow

• Pick number of players (2-4)
• Pick your own hero
• Show a game link/code to share (e.g., http://localhost:5173/game/abc123)
• Copy link button
• Transition to lobby waiting screen

Join Game Flow

• Opening a game link (URL with game ID) goes directly to join flow
• OR: manual entry of game code on Join Game screen
• See which heroes are already taken
• Pick your hero from remaining options
• Transition to lobby waiting screen

Lobby Waiting Screen

• Show all player slots (filled and empty)
• Show selected heroes for each player
• "Waiting for X more player(s)..." message
• Game starts automatically when all slots filled (server sends game_started)
• Transition to game view

Key Files

Modify:

• packages/client/src/components/Setup/SetupScreen.tsx — rework for create/join flows
• packages/client/src/App.tsx — URL routing for game links, mode selection

Create:

• packages/client/src/components/Setup/MainMenu.tsx — Solo / Create / Join options
• packages/client/src/components/Setup/LobbyScreen.tsx — waiting room with player slots
• packages/client/src/components/Setup/JoinGame.tsx — join via link or code

Dependencies

• Depends on: Pre-Game Lobby State (Pre-Game Lobby State #887)
• Depends on: Client WebSocket Connection (Client WebSocket Connection #888)

Test Plan

Manual

1. Open app → see main menu with Solo / Create / Join
2. Solo: works like before (no regression)
3. Create: pick 2 players, pick hero, get link, see lobby with 1/2 filled
4. Open link in second tab → see join screen with taken hero grayed out
5. Pick hero → lobby shows 2/2 → game starts in both tabs
6. Test with 3 and 4 players