8828edf647
Replace prop drilling with React context providers. App.tsx shrinks from 427 lines to ~80 lines of pure layout. Components consume shared state directly via 7 context providers instead of threading 50+ props. Key changes: - 7 context providers wrapping existing hooks (encounter, bestiary, player characters, side panel, theme, bulk import, initiative rolls) - 2 coordinating hooks extracted from App.tsx (useInitiativeRolls, useAutoStatBlock) - All 9 affected components refactored from prop-based to context-based - 6 test files updated to use providers or context mocks - Prop count enforcement script (max 8 per component interface) - Constitution principle II-A added (context-based state flow) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Encounter Console
A local-first initiative tracker and encounter manager for tabletop RPGs (D&D 5e / 2024). Runs entirely in the browser — no server, no account, no data leaves your machine.
What it does
- Initiative tracking — add combatants (batch-add from bestiary, custom creatures with optional stats), roll initiative (manual or d20), cycle turns and rounds
- Encounter state — HP, AC, conditions, concentration tracking with visual status indicators
- Bestiary integration — import bestiary JSON sources, search creatures, and view full stat blocks
- Player characters — create reusable player character templates with name, AC, HP, color, and icon; search and add them to encounters with pre-filled stats; manage (edit/delete) from a dedicated panel
- Persistent — encounters survive page reloads via localStorage; bestiary data cached in IndexedDB; player characters stored independently
Prerequisites
- Node.js 22+
- pnpm 10.6+
Getting Started
pnpm install
pnpm --filter web dev
Open http://localhost:5173.
Scripts
| Command | Description |
|---|---|
pnpm --filter web dev |
Start the dev server |
pnpm --filter web build |
Production build |
pnpm test |
Run all tests (Vitest) |
pnpm check |
Full merge gate (knip, biome, typecheck, test, jscpd) |
Project Structure
apps/web/ React 19 + Vite — UI components, hooks, adapters
packages/domain/ Pure functions — state transitions, types, validation
packages/app/ Use cases — orchestrates domain via port interfaces
data/bestiary/ Bestiary index for creature search
scripts/ Build tooling (layer boundary checks, index generation)
specs/ Feature specifications (spec → plan → tasks)
Architecture
Strict layered architecture with enforced dependency direction:
apps/web (adapters) → packages/application (use cases) → packages/domain (pure logic)
Domain is pure — no I/O, no randomness, no framework imports. Layer boundaries are enforced by automated import checks that run as part of the test suite. See CLAUDE.md for full conventions.