mirror of
https://github.com/ThisTine/Showdown.git
synced 2026-08-18 23:18:48 +07:00
54 lines
2.0 KiB
Markdown
54 lines
2.0 KiB
Markdown
# Showdown frontend
|
||
|
||
Game-like scrum poker. React + TypeScript + Vite, with the
|
||
[Motion](https://motion.dev) library for spring-physics animation.
|
||
|
||
## Run it
|
||
|
||
```sh
|
||
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`.
|