Scorebox

A live, ceremonial scoreboard for opening a Lorcana booster box with friends.

Add everyone at the table, tap a rarity when somebody pulls it, and the board updates instantly — the leader's card glows gold, ties get the "TIED FOR THE LEAD" treatment. When the box is done, hit Share results to generate a 1080-wide ceremonial recap image (PNG) with a themed QR back to the app, then share it natively (Web Share API on mobile) or copy/download on desktop.

• Live: https://scorebox.inkweave.ink
• Stack: Vite + React 19 + TypeScript, React Compiler on, localStorage persistence, html-to-image + qr-code-styling for the share artifact
• Scoring system by Inkborn Heroes — point values per rarity are env-driven (VITE_POINTS_*) so future Lorcana sets adjust without code changes
• Design by the Inkweave design system (Plus Jakarta Sans + Tinos, gold-on-dark surfaces, glow-orb backdrop, foil-rarity holo treatment)

Local development

npm install
npm run dev      # http://localhost:5173
npm run build    # TypeScript + Vite production build
npm run test     # Vitest, watch mode
npm run test:run # Vitest, single run
npm run lint     # ESLint flat config + react-compiler rule

Environment variables

All optional — every variable falls back to a sensible default when unset, so local development works out of the box. Override on Vercel as Lorcana evolves.

Variable	Default	Purpose
VITE_LORCANA_SET	Wilds Unknown	Set name in the hero eyebrow + share-recap header
VITE_POINTS_FOIL_RARE	1	Per-rarity point values
VITE_POINTS_SUPER_RARE	2
VITE_POINTS_FOIL_SUPER_RARE	3
VITE_POINTS_LEGENDARY	4
VITE_POINTS_EPIC	5
VITE_POINTS_FOIL_LEGENDARY	8
VITE_POINTS_ENCHANTED	12
VITE_POINTS_ICONIC	25

See .env.example for the full template.

Project structure

src/
├── App.tsx                 page shell + reducer wiring
├── components/             player card, modals, share UI, icons
├── data/rarities.ts        canonical rarity list (points read from env)
├── design-system/          vendored Inkweave tokens, fonts, brand assets
├── hooks/                  useBodyScrollLock
├── lib/
│   ├── recap.ts            buildRecap pure data shaping (+ tests)
│   ├── scoring.ts          per-player score and ranking
│   ├── share.ts            PNG generation, Web Share, clipboard, download
│   ├── storage.ts          localStorage persistence
│   └── env.ts              env-var parsing with defaults
├── state/reducer.ts        typed Action union for game state
├── styles/scorebox.css     page-scoped styles
└── types.ts                Player / Pull / Rarity / Recap interfaces

License

Personal project. No license declared.