# `web/play` — browser frontend

Vanilla TypeScript + esbuild. The browser sends `Command` JSON and renders
`View` JSON; it contains no game rules, no payout math and no wire protocol.
The gateway in `webd/` owns the upstream TLS connection.

## Build

```sh
npm ci
npm run build      # writes app.js
npm run typecheck
npm test           # headless DOM smoke test (jsdom)
```

Commit the generated `app.js` so the site deploys without Node.

## Local development

Serve the repository's `web/` directory (for `/play/`) and put the gateway
behind the same origin at `/ws`. The simplest local setup is nginx with the
`web/nginx.conf.example` block pointed at a staging root and
`ZAGAN_WEB_ORIGIN=http://127.0.0.1:8899`. For the app alone:

```sh
python3 -m http.server 8900 -d web/play
```

It will load, but the WebSocket will only connect through nginx or another
proxy that routes `/ws` to `webd`.

## Screens

- Auth: login/register. The password is hashed with Web Crypto (`SHA-256`)
  before it leaves the page; the gateway and browser never store it.
- Lobby: four games, per-game bet, history.
- Slots: five reels, win cells and paylines.
- Roulette: canvas felt with straight, dozen, column and outside chips;
  left click adds, right click removes.
- Blackjack: dealer/player cards, hit/stand/double/forfeit.
- Crash: curve, live multiplier, cash-out, commit/seed verification.
- History: settled plays with net result.

## Theme

`style.css` mirrors the palette in `gui/src/theme.rs`: near-black ground,
cyan focus, green for wins, gold for chips, felt green only for roulette.
Do not introduce a second palette or hard-code colours in the render modules.

## Security

- The session cookie is HttpOnly and SameSite=Strict; JavaScript never reads
  it and never stores a credential.
- Notices are inserted with `textContent`, not HTML.
- The app is play-money only. Do not add deposits, withdrawals, KYC or
  real-money claims without a product decision and an ADR.