Showdown/frontend/README.md

Showdown frontend

Game-like scrum poker. React + TypeScript + Vite, with the Motion library for spring-physics animation.

Run it

npm install
npm run dev

In dev there is no backend yet, so the app runs in demo mode: a local mock room where three western bots join, think, and vote — every animation and flow (deal-in, card flips, consensus confetti, deck editing) is exercisable solo. You'll see a demo chip in the top bar.

• VITE_WS=1 npm run dev — talk to a real backend on localhost:8080 (the Vite proxy forwards /ws) instead of the mock.
• npm run build — typecheck + production build to dist/. Production builds always use the real WebSocket at /ws/room/{id} on the same host.

TV display

The 📺 button in a room pops up /room/{id}/tv — a view-only big-screen spectator display (cast it to a TV): giant room code and join URL, oversized seats and cards, no controls, plus a fullscreen toggle. It connects as a watch socket in production; in demo mode it mirrors your game tab over a BroadcastChannel (or runs a self-playing bot loop if no game tab is open).

Mobile

On screens ≤700px the hand switches from the overlapping fan to a flat wrapped grid of full-size cards (~60–84px wide), so every card is a comfortable tap target.

Layout

src/
  lib/connection.ts   WsConnection (real, reconnecting) + MockConnection (bots)
  lib/session.ts      localStorage profile + stable playerId + room id words
  lib/decks.ts        presets + custom deck parsing
  lib/router.ts       30-line history router (/ and /room/:id)
  pages/Home.tsx      create room: name, avatar, deck choice
  pages/Room.tsx      the game: top bar, table, hand, deck modal, confetti
  components/         Table, PlayerSeat, Cards (face/back/flip), CardHand,
                      Results, Confetti, ProfileForm, DeckModal, Logo
  index.css           the whole "toy poker table" design system

The wire protocol the mock implements is the same one the Rust backend in ../backend speaks — see ../PROTOCOL.md.