Modeling a React Chess Rules Engine with TypeScript

The Problem

A chess interface must make direct manipulation feel immediate without allowing the DOM interaction to become the source of truth. Dragging a piece is only a visual gesture; the move still has to be evaluated against turn ownership, legal destinations, captures, king danger, and special-rule state.

React introduces an additional challenge: the board must update through predictable state transitions rather than ad hoc mutation, while rule calculations remain efficient enough to refresh possible moves after every accepted action.

The application needed a structure that could connect pointer-driven interaction to typed chess-domain behavior without placing every rule inside the board component.

Technical Leadership

• Separated tile rendering and drag behavior from the Referee component that coordinates accepted moves and game-level UI state.
• Modeled board positions and chess pieces with TypeScript classes, cloning behavior, and piece-specific possible-move calculation.
• Used functional React state updates to clone the prior board, apply an accepted move, increment turns, and expose the next state.
• Calculated legal destinations ahead of interaction so the board can highlight valid targets and reject illegal drops immediately.
• Integrated promotion and checkmate modals without making DOM position the authoritative game state.

Constraints

• Keep interaction responsive while snapping invalid drops back to their starting square.
• Prevent the inactive team from moving and reject destinations outside the current legal-move set.
• Represent special rules without coupling all chess logic to the Chessboard component.
• Update React state without mutating the previously rendered board object.

What I Did

The UI translates a pointer gesture into a proposed domain move; the board model decides whether that proposal can change state.

The Chessboard component tracks the grabbed element and board-relative coordinates, constrains pointer movement, and resolves a drop into a destination square. It delegates the proposed action rather than changing the piece collection directly.

The Referee and Board models enforce turn ownership, clone active state, apply legal moves, recalculate future options, and surface promotion or winning-team results back to React.

• Rendered the board as reusable tiles driven by a typed collection of piece models.
• Implemented bounded drag-and-drop interaction and reset invalid moves to the original square.
• Highlighted possible destinations from each piece's calculated move set.
• Enforced alternating turns before applying a proposed action.
• Modeled positions, pieces, pawns, and the board as cloneable TypeScript objects.
• Implemented castling, en passant, promotion, king protection, and checkmate behavior.
• Used modal workflows for promotion selection and game restart after checkmate.
• Kept visual interaction, move coordination, and domain calculations in distinct modules.

Testing and Validation

The project includes the Create React App testing foundation, but the current repository does not provide meaningful automated chess-rule coverage.

A future suite should lock these behaviors down with deterministic board fixtures.

• Exercised legal and illegal drag destinations for each piece type.
• Verified inactive-team moves are rejected before board mutation.
• Checked possible-move highlighting against the active board position.
• Played targeted scenarios for en passant, promotion, king danger, castling, and checkmate.
• Restarted completed games to verify a fresh cloned board state is restored.

Outcome

• Created a repository-backed React and TypeScript chess case study.
• Demonstrated typed domain modeling alongside functional React state updates.
• Separated direct-manipulation concerns from chess-rule coordination.
• Implemented advanced rules and visible game-state feedback beyond basic piece movement.
• Established a strong candidate for future React Testing Library and rules-engine unit coverage.