dicechess-analytics-ui

Frontend interface, interactive game visualizer, and openings explorer for the Dice Chess Analytics platform.

📖 Read the Developer Documentation

---

🚀 Quick Start

1. Registry Authentication

The project depends on @rabestro/dicechess-engine hosted in the GitHub Packages npm registry. Export your GitHub CLI auth token before installing dependencies:

export NODE_AUTH_TOKEN=$(gh auth token)

2. Development commands

We use Mise as our primary task runner. You can run tasks via mise run <task> or use standard npm scripts:

Task / Lifecycle	Mise Command	Raw NPM Command	Description
Setup	mise run setup	npm install	Install workspace and docs dependencies
Dev Server	mise run dev	npm run dev	Start Vite dev server on :5173
Linter / Format	mise run check	npm run check	Run eslint, format checks, and svelte-check
Tests	mise run test	npm run test	Run Vitest unit tests
Build SPA	mise run compile	npm run build	Build static SPA into dist/
Docs Dev	mise run docs:dev	npm --prefix docs run dev	Start documentation hot-reload server
Docs Build	mise run docs:build	npm --prefix docs run build	Build static documentation assets

---

🧠 Core Architecture

The frontend is a SvelteKit Single-Page Application (SPA) utilizing:

• Svelte 5 Runes ($state, $derived, $effect) for reactive state management stores.
• Chessground for rendering the interactive chess boards.
• WASM Engine Integration: src/lib/engine.ts serves as the thin adapter wrapping the @rabestro/dicechess-engine rules validator.

For detailed guidelines on codebase architecture, please refer to:

• State Management & Stores
• Engine Integration & DFEN
• Themes & Styling System