cascade web

Web client for the cascade server — the "falling columns" match-3 puzzle game. Plain TypeScript + Canvas 2D, no runtime dependencies.

Features:

• Register / login (bearer token in localStorage), password change, logout
• Single survival, duel by room code, duel vs server AI (easy / normal / hard)
• Canvas rendering of both wells with predicted piece movement, cut ghosts, particles, combo popups and garbage flashes
• HUD: score, combo, speed, time, round wins, live ping (net_status in duels)
• Global Hall of Fame, per-mode player statistics, player lookup
• Admin section (server totals, password reset) for is_admin accounts
• Replay download of finished matches

Quick start

npm install
npm run dev          # http://localhost:5173, proxies /api to the server

The dev server proxies /api (REST + WebSocket) to the cascade server. By default that is http://127.0.0.1:8080; point it elsewhere with:

CASCADE_API=http://127.0.0.1:8081 npm run dev

Start the game server first (see ../cascade_srv/README.md): docker compose up -d && cargo run.

Production

npm run build produces a static bundle in dist/. Serve it on the same origin as the API (reverse proxy /api to the server) — the server has no CORS layer. For a different origin set VITE_API_BASE=https://api.example.com at build time; the API side then needs its own CORS/proxy setup.

Controls

Key	Action
← / →	move column
↑	rotate
↓ / Space (hold)	soft drop — the fall accelerates the longer the key is held
P	pause (single mode)

Touch buttons appear on coarse-pointer devices.

Documentation

• AGENTS.md — implementation guide for AI agents: structure, prediction model, protocol notes, verification checklist.