Chess Opening Trainer

A browser-based tool to learn and memorize chess openings through practice. Play through 40 named openings against a computer that follows book moves, with progress tracking and a mastery system.

Features

• 40 openings covering major systems for both white and black (Italian Game, Sicilian variations, Ruy Lopez, Queen's Gambit, King's Indian, French Defense, Caro-Kann, London System, and more)
• Interactive chessboard with full chess rules (castling, en passant, promotion)
• Opening highlights show valid continuation squares in green
• Mastery system - complete an opening 3 times (configurable) and the hints disappear, forcing recall from memory
• Mistake feedback - playing a non-opening move flashes red and decrements progress for reachable openings
• Computer opponent randomly plays valid book moves on its side
• Random color assignment each game
• Progress saved in localStorage
• Settings menu to adjust mastery threshold, reset individual openings, or clear all progress
• Mobile-friendly layout with responsive board and slide-out openings drawer

Getting Started

npm install
npm run dev

Open http://localhost:5173 in your browser.

Scripts

Command	Description
npm run dev	Start development server
npm run build	Type-check and production build
npm run preview	Preview production build
npm test	Run unit tests
npm run test:watch	Run tests in watch mode
npm run lint	Run ESLint

Project Structure

src/
  chess.ts              Chess rules engine (moves, check, castling, en passant)
  openingTree.ts        Trie-based opening tree with mastery filtering
  storage.ts            LocalStorage persistence
  pieces.tsx            SVG chess piece component
  App.tsx               Main game logic and state management
  App.css               Styles
  components/
    Board.tsx            Interactive chessboard with highlighting
    ProgressPanel.tsx    Opening list with mastery progress
    SettingsModal.tsx    Settings (threshold, reset, clear)
  data/
    openings.json       40 named openings in UCI notation
public/
  pieces/               Individual SVG files per piece (wK.svg, bP.svg, ...)
  favicon.svg           App icon

How It Works

1. A random color is assigned at game start
2. Green-highlighted squares show valid opening continuations
3. Click a piece, then click a highlighted square to play the opening move
4. The computer responds with a random book continuation
5. Complete an opening to increment its counter
6. Once mastered (counter reaches threshold), highlights are removed for that line
7. Playing a non-book move decrements progress for all reachable openings

Tech Stack

• React 19 + TypeScript
• Vite
• Vitest (54 unit tests)

License

MIT