A browser-based chess game built with HTML, CSS, and vanilla JavaScript modules. It includes rule validation, chess clocks, local persistence, keyboard/touch/drag controls, and three computer difficulty levels.
https://maliky67.github.io/interactive-chess/
The GitHub Pages URL returned HTTP 404 during the repository audit on July 13, 2026. It is the expected deployment URL, not a verified live demo yet.
- The root HTML, CSS, and JavaScript files return HTTP 200 from a local server.
- The initial page renders an 8-by-8 board with 16 White pieces and 16 Black pieces.
- JavaScript syntax checks pass.
- 32 unit tests and 25 end-to-end browser scenarios pass locally.
- The layout includes desktop and mobile breakpoints.
- Legal move generation and king-safety filtering
- Check, checkmate, and stalemate detection
- Castling, en passant, and four-choice pawn promotion
- Chess clocks with configurable starting time
- Optional Black computer opponent with easy, medium, and hard levels
- Drag, touch/pointer, and keyboard controls with visible focus
- Captured-piece display, move history, restart, and undo
- Versioned save/load through browser
localStorage - Last-move and check highlighting, board flipping, and a focus-contained game-over dialog
- PGN download for games played in the app
Movement, special rules, game termination, undo, clocks, persistence, AI selection, drag/touch/keyboard input, orientation, settings, dialogs, PGN download, and responsive layout have automated coverage. Visual polish and broad assistive-technology compatibility still benefit from manual checks. See the acceptance coverage matrix.
- Threefold repetition, fifty-move, and insufficient-material draws
- PGN import and full standards-grade PGN/SAN export
- Stronger positional AI evaluation
- Online multiplayer
- Expanded keyboard and screen-reader support
- Broader accessibility and visual-regression tests
White moves first. Drag, tap, or focus a piece and choose a highlighted destination; arrow keys move board focus, Enter/Space selects, and Escape clears selection. Quiet moves use dots and captures use rings. Choose a local two-player game or enable the Black computer opponent.
Use Restart to begin again, Undo to restore the previous position, Flip Board to change orientation, Save Game or Load Game to persist locally, and Download PGN to export the current move list.
- HTML5
- CSS3
- Vanilla JavaScript
- Browser
localStorage - Unicode chess symbols rendered by the user's system font
The application is split into native ES modules under js/. Rule, board, AI, clock, storage, notation, and state modules are independent of the DOM. ui.js owns rendering and accessibility behavior; main.js owns game state and coordinates the modules. Candidate moves are simulated and rejected when they leave the moving side's king in check. See the architecture notes.
The computer opponent uses random legal moves on easy, depth-2 minimax on medium, and depth-3 minimax on hard, with alpha-beta pruning and material evaluation. It is a portfolio opponent rather than a full chess engine.
On the standard opening position with Black to move, a local three-run Chromium benchmark averaged 0.5 ms on easy, 37.6 ms on medium, and 66.5 ms on hard. Results vary by hardware; reproduce them with npm run benchmark:ai.
Every board square has an accessible coordinate/piece label and participates in a roving keyboard focus model. Arrow keys navigate, Enter/Space selects or moves, and Escape cancels selection. Status text communicates selection, moves, check, and game results without relying only on color. Promotion and game-over dialogs expose dialog semantics, contain focus while open, and restore focus when dismissed. Buttons and board squares have visible focus styles. Automated coverage exercises the core keyboard and focus flows; manual testing with multiple screen readers remains recommended.
interactive-chess/
|-- .github/workflows/test.yml
|-- .vscode/
| |-- launch.json
| `-- tasks.json
|-- docs/
| |-- architecture.md
| |-- asset-evaluation.md
| |-- images/README.md
| `-- testing-coverage.md
|-- js/
| |-- ai.js
| |-- board.js
| |-- check-detection.js
| |-- constants.js
| |-- game-state.js
| |-- main.js
| |-- move-generation.js
| |-- notation.js
| |-- special-moves.js
| |-- storage.js
| |-- timer.js
| |-- ui.js
| `-- utils.js
|-- tests/
| |-- helpers/
| |-- unit/
| |-- run-browser-tests.cjs
| `-- static-server.cjs
|-- .gitignore
|-- .nojekyll
|-- index.html
|-- LICENSE
|-- package-lock.json
|-- package.json
|-- README.md
|-- style.css
`-- verify-chess-app.cjs
No build step is required. From the repository root, run:
python -m http.server 8000Then open http://localhost:8000/. On Windows, the included VS Code task uses py -3 and the launch configuration opens http://127.0.0.1:8000/index.html.
Install the locked dependencies and Playwright Chromium once:
npm ci
npx playwright install chromiumRun the complete test suite:
npm testUseful focused commands:
npm run test:syntax
npm run test:unit
npm run test:browser
npm run benchmark:ai
npm run servenpm run test:browser starts the built-in static server when port 8000 is not already serving the app. The suite uses bundled Playwright Chromium, deterministic board setup, state-based waits, and stable IDs/data attributes. It does not require internet access after installation.
On failure, the browser suite writes a full-page PNG and Playwright trace ZIP to test-results/. Successful runs do not create artifacts, and the directory is ignored by Git. CI uploads that directory only when a workflow job fails.
The workflow exists at .github/workflows/test.yml and runs on pushes to main and pull requests targeting main. Its status has not been verified on GitHub yet because these changes have not been pushed.
No product screenshots are committed yet. Add only real captures using these paths:
Once the files exist, place the main gameplay image near the top of this README and expose the remaining images in a Gallery section.
The application is ready for branch-based GitHub Pages hosting without a build workflow:
- Branch:
main - Folder:
/ (root) - Expected URL: https://maliky67.github.io/interactive-chess/
In the repository, open Settings > Pages, select Deploy from a branch, choose main and / (root), then save. The existing .nojekyll file is appropriate for serving this static site as-is. All application references are relative (./style.css and ./js/main.js), and no production behavior depends on localhost. A localhost-only test bridge is intentionally excluded on deployed hosts.
- Add genuine desktop, promotion, check, and mobile screenshots
- Add the remaining chess draw rules
- Add PGN import and complete SAN/PGN edge-case support
- Improve AI strength and expand assistive-technology testing
- Add online multiplayer
Derek Gonzalez
The application source is available under the MIT License.
No third-party chess-piece image assets are bundled. The interface uses Unicode chess characters rendered by system fonts; any third-party assets added later must retain their own license documentation.