Interactive frontend · Live
Local Matchroom
Accessible local chess built on a replayable move-log architecture.
A local two-player chess interface with complete legal-move integration, SAN history, keyboard interaction, responsive geometry, and original SVG pieces.
- Role
- State architecture, chess.js integration, accessible interaction design, original SVG system, testing, and responsive implementation.
- Year
- 2026
- Status
- Live
- Stack
- React · TypeScript · chess.js · Vite · Tailwind CSS · Vitest · Playwright · axe-core
Overview
Local Matchroom is a frontend-only chess application for two players sharing one screen.
Problem
Chess interfaces must coordinate board state, legal moves, captures, history, turn, status, promotion, selection, and focus. Storing all of those independently creates synchronization risks.
Solution
Local Matchroom stores only a minimal played-move log and reconstructs the chess.js game from that canonical state.
Feature evidence
Complete local play
chess.js handles legal moves, castling, en passant, promotion, checkmate, and draw states.
Replayable state
SAN history, captures, status, and board position derive from one serializable move log.
Keyboard board
A roving-tabindex ARIA grid supports selection and movement without a pointer.
Responsive geometry
The board and supporting panels remain usable across desktop and mobile layouts.
System layers
A React reducer manages interaction state while the canonical played-move log reconstructs chess.js before render and transition. All secondary game data is derived.
- 01
Pointer + keyboard
Click, roving focus, selection, and promotion input.
- 02
Interaction reducer
Selection, focus, and dialog state.
- 03
Canonical move log
Minimal serializable state for the local session.
- 04
chess.js
Legal-move integration and reconstructed game state.
- 05
Derived interface
Board, SAN history, captures, turn, and status.
Where the engineering concentrates.
One source of chess truth
Reconstruction prevents board, history, captures, and status from drifting across separately stored values.
Board accessibility
Grid semantics, roving focus, announcements, and focus-managed promotion make dense interaction keyboard operable.
Choices and tradeoffs.
Move log as canonical state
The application stores played moves and derives the rest.
Rules library integration
chess.js supplies legal rules instead of claiming a custom engine.
Native modal promotion
Focus containment and return behavior build on browser dialog semantics.
Real-browser geometry checks
Playwright verifies responsive board sizing where a DOM-only test cannot.
Security, accessibility, and testing.
Security
- Frontend-only local-session scope
- No accounts, networked state, or server trust boundary
- Rules delegated to a maintained library
Accessibility
- Roving-tabindex ARIA grid
- Live move and game-state announcements
- Focus-managed promotion dialog
- Forced-colors and reduced-motion support
Testing
- Vitest and React Testing Library for reducer and interaction behavior
- Playwright coverage for game flows and responsive geometry
- axe-core accessibility scans
- Reduced-motion and forced-colors checks
Current boundaries
The current product has a deliberate scope. These boundaries define what it does not claim.
- No persistence
- No online multiplayer
- No AI opponent
- No accounts
- No clocks
- No PGN
- No backend
- Fixed local-session scope
The next credible steps.
- 01Add optional local persistence with explicit reset controls
- 02Support PGN import and export after validating parser behavior
- 03Extend assistive announcements through user testing
Verified product views
Genuine captures from the implemented product across core workflows and responsive layouts.
Original Rose Court piece system Desktop local-match interface 
Responsive local match on mobile
What the implementation clarified.
- 01
A replayable move log keeps the board, SAN history, captures, turn, and result derived from one serializable source.
- 02
A chessboard can remain pointer-friendly while using grid semantics, roving focus, and explicit announcements for keyboard play.
- 03
Responsive geometry and focus behavior require real-browser verification beyond reducer and DOM-only tests.