Development

Development

React 19 + Vite 8 + TypeScript, no backend. Needs Node 20 or newer.

Scripts

npm install
npm run dev             # http://localhost:5173, works offline off the committed snapshot
npm run build           # tsc -b, then a production build in dist/
npm run lint            # oxlint
npm run fetch-data      # refresh the Street Brawl snapshot (~1400 requests, slow)
npm run fetch-data -- --brawl-tierlist   # rebuild the tier list from the files already on disk
npm run brawl -- …      # draft advisor CLI (see Street Brawl Advisor)
npm run brawl:see -- …  # screen recogniser: fixture test, or read a screenshot (see Screen Reader)
npm run icon-index      # rebuild public/data/brawl-icons.json from the item icons and hero portraits

Layout

path	what it holds
src/brawl/engine.ts	the card scoring function and the re-roll maths
src/brawl/recognise.ts	pure pixel code for the draft screen, shared by the browser and the fixture test
src/brawl/worker.ts	the Web Worker that paces the capture and runs the recogniser off the main thread
src/brawl/tierlist.ts	S/A/B/C grading of heroes and items
src/generator/	kit profile and stat valuation, reused for the advisor's kit term
src/components/	BrawlView (capture, overlay, the ranked cards), TierList, ItemTile
src/data/load.ts	fetches the JSON snapshot from public/data/
scripts/	the data pipeline, the two CLIs, the icon index builder, and the fixtures

Checks

There is no test runner. What guards the code is the two fixture commands plus the compiler:

npm run brawl:see -- --fixtures   # 27/27 cards, exits non-zero below 95 %
npm run brawl:see -- --screens    # 96/99 labels, exits non-zero below 95 %
npm run build                     # tsc -b
npm run lint

The screenshots the fixtures were cut from stay out of git. Only the card crops and the blanked screen fixtures under scripts/fixtures/ are committed.

Visual design

Nunito is self-hosted from public/fonts, so the app makes no network requests at all once loaded. Item tiles are tinted by slot (orange weapon, green vitality, purple spirit) with a roman tier tab in the corner, mirroring the in-game shop. The advice window is a small dark panel sized for a corner of the screen rather than a page.