Development

Development

Scripts

npm install
npm run fetch-data      # snapshots everything into public/data/ (≈3 min, ~16 MB, rate-limit aware)
npm run dev             # http://localhost:5173 – works offline after the fetch
npm run build           # production build in dist/
npm run generate [id]   # CLI: print the build and the panel validation for a hero
npx tsx scripts/tune.ts # sweep the generator parameters against the panel (a few minutes)
npx tsx scripts/ceiling.ts # the best any build could score on this panel (oracle from the panel's own core sets)
npm run verify          # acceptance checks that don't need a browser
npm run brawl -- …      # Street Brawl draft advisor CLI (see "Street Brawl")
npm run brawl:see -- …  # Street Brawl screen recogniser: fixture test / read a screenshot
npm run icon-index      # rebuild public/data/brawl-icons.json from the item icons
npm run verify:browser  # headless 390×844 check with network blocked (needs a Playwright chromium)

Layout

src/generator (scoring), src/validation (panel report), src/components (BuildView, ItemCard bottom sheet), scripts/ (fetch, CLI, verify, tune). Vite + React 19 + TypeScript, no backend.

Visual design

The build screen mirrors the in-game shop: a parchment build board with Early / Mid / Late Game panels, slot-tinted item tiles (orange weapon, green vitality, purple spirit) with a roman tier tab in the corner, and a navy Ability Point Order board with one track per ability where each marker shows the ability points that step costs (unlock free, then 1 / 2 / 5). Buy order is the small number on each tile. Nunito is self-hosted from public/fonts so the app still makes no network requests after fetch-data.

Desktop: from 900 px wide the page fills the window, the hero strip wraps, and the board sits left of a sticky column with the ability order and the reports; tiles go to 6 per row (8 from 1400 px). The phone layout below 900 px is unchanged. The browser check screenshots both (screenshots/desktop.png).

Sharing a build

The share button on a build board renders the board and ability order to a PNG and opens the phone share sheet where available, otherwise downloads the image. The game has no build import: builds only reach the client through the Steam game coordinator, so a build still has to be entered by hand in the in-game editor.