Checkers (Russian Draughts), made with React

A compact implementation of Russian checkers: setup, moves (men + flying kings), mandatory capture with chaining, and win detection. Core rules are unit-tested.

Live demo: Open in browser

Tech Stack

• React (Vite)
• Plain CSS for styling
• Jest for unit tests

Getting Started

Install and run in development:

npm install
npm run dev    # if using Vite
# or
npm start      # if using CRA

Open the app: http://localhost:3000

Project Structure

src/
  App.jsx            # UI + game state and orchestration
  constants.js       # BOARD_SIZE, index<->row/col helpers, isDarkCell, isMyPiece
  rules/
    moves.js         # getAvailableMoves, canMoveQueen — core rules
    makeMove.js      # apply move: remove captured, move piece, promotion
  styles.css         # styling and CSS variables
  index.js           # app entry
__tests__/
  *.test.js          # unit tests for rules and edge cases
public/
  index.html

If rules currently live inside App.jsx, that's fine; rules/ shows a possible future split.

Design Decisions

• Error on invalid input: when originIndex is null, rule functions throw; the caller decides when to compute moves. This distinguishes "no legal moves" (empty set) from "invalid request" (exception).
• King landing rule: current variant enforces landing on the first empty square after the captured piece. International draughts allow landing beyond; this can be made configurable.
• Chaining enforcement: after any capture, if the same piece can capture again, the UI restricts to capture-only moves until the chain ends.

Difficulties during development

• "React is not defined" in tests: if a test renders JSX, ensure import React from 'react' or enable the automatic JSX runtime in your test runner.
• Vertical gaps between rows: add .board { line-height: 0; } and render each row with display: flex.
• Error: originIndex ... cannot be null: by design, the caller must guard against null before invoking rules.

License

MIT (LICENSE.txt)