A feature-rich chess game built with React and Vite, featuring Stockfish AI integration, multiple difficulty levels, and a Progressive Web App (PWA) architecture for offline play.
- AI Opponent: Play against Stockfish chess engine with 5 difficulty levels
- Progressive Web App: Install and play offline on any device
- Multiplayer: Local two-player mode
- Visual Effects: Customizable AI move animations and themes
- Move History: Track and review game moves
- Responsive Design: Works on desktop, tablet, and mobile
- Multi-language Support: Internationalization ready
- Node.js (v16 or higher)
- npm or yarn package manager
- Git
-
Clone the repository
git clone <your-repo-url> cd chess
-
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser
Navigate to http://localhost:5173 (or the port shown in your terminal)
npm run buildThe built files will be in the dist/ directory.
npm run previewThis project is designed to be easily customizable! Here's how to make it your own:
All visual settings are centralized in src/config/visualConfig.js. You can customize:
Edit the aiMoveFlash section in src/config/visualConfig.js:
aiMoveFlash: {
duration: 2000, // Animation duration in milliseconds
primaryColor: '#00FFFF', // Main flash color (hex code)
secondaryColor: '#FF00FF', // Secondary flash color
intensity: 0.7, // Flash opacity (0-1)
glowIntensity: 0.8, // Glow effect intensity (0-1)
}Use any hex color code from design tools like:
- Color pickers (Chrome DevTools, Adobe Color, etc.)
- Design systems (Tailwind, Material UI)
- Online generators (coolors.co, etc.)
Example custom scheme:
aiMoveFlash: {
duration: 1500,
primaryColor: '#FF6B6B', // Coral
secondaryColor: '#4ECDC4', // Teal
intensity: 0.6,
glowIntensity: 0.7,
}Replace the piece images in src/assets/images/peices/ with your own designs:
- Format: PNG with transparency recommended
- Naming convention:
<color><piece>.png(e.g.,blackpawn.png,whiteking.png) - Size: 100x100px recommended for best quality
Edit src/components/ChessBoard.css to change board appearance:
/* Light squares */
.square.light {
background-color: #f0d9b5; /* Change this color */
}
/* Dark squares */
.square.dark {
background-color: #b58863; /* Change this color */
}Customize the game information display in src/components/GameInfo.jsx and GameInfo.css.
Modify the initial menu in src/components/StartMenu.jsx and StartMenu.css to change:
- Button styles
- Layout
- Difficulty level descriptions
- Game mode options
Add or modify translations in src/contexts/LanguageContext.jsx to:
- Add new languages
- Customize text and messages
- Change game terminology
Adjust AI behavior in src/game/stockfishAI.js:
// Difficulty levels (skill level 0-20)
const DIFFICULTY_LEVELS = {
1: { skill: 1, depth: 1 },
2: { skill: 5, depth: 5 },
3: { skill: 10, depth: 10 },
4: { skill: 15, depth: 15 },
5: { skill: 20, depth: 20 },
};Modify skill levels and search depth to create custom difficulty curves.
chess/
├── public/ # Static assets
│ ├── manifest.json # PWA manifest
│ ├── images/ # App icons
│ └── stockfish/ # Stockfish engine files
├── src/
│ ├── components/ # React components
│ │ ├── ChessBoard.jsx
│ │ ├── GameInfo.jsx
│ │ ├── StartMenu.jsx
│ │ └── EndGameModal.jsx
│ ├── config/ # Configuration files
│ │ └── visualConfig.js # Visual settings
│ ├── contexts/ # React contexts
│ ├── game/ # Game logic
│ │ ├── Game.js # Chess rules
│ │ ├── piece.js # Piece definitions
│ │ └── stockfishAI.js # AI integration
│ └── assets/ # Images and static files
├── service-worker.js # PWA service worker
└── vite.config.js # Vite configuration
- Create a new mode in
src/components/StartMenu.jsx - Add logic in
src/App.jsxto handle the mode - Implement mode-specific rules in
src/game/Game.js
- Add audio files to
src/assets/sounds/ - Import and play sounds on move events in
ChessBoard.jsx - Add volume controls in game settings
Add tracking to key game events:
- Game starts
- Moves made
- Games completed
- Difficulty selected
The game currently supports local multiplayer. To add online play:
- Set up a backend server (WebSocket recommended)
- Implement room/lobby system
- Sync game state between clients
- Handle disconnections gracefully
- PWA Setup: See
PWA-SETUP.md - Visual Config Guide: See
src/config/VISUAL_CONFIG_GUIDE.md - Stockfish Integration: See
STOCKFISH-INTEGRATION.md - Deployment: See
DEPLOYMENT.md
See STOCKFISH-TROUBLESHOOTING.md for common issues and solutions.
Check OFFLINE-PWA-FIX.md for PWA-related problems.
Ensure all dependencies are installed:
rm -rf node_modules package-lock.json
npm install- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the GNU General Public License v3.0.
See the LICENSE file for the full terms. In short, you are free to
copy, modify, and redistribute this project under the terms of the
GPLv3. If you redistribute the project (or a modified version), you
must also make the source available under the same license.
- React 19 - UI framework
- Vite - Build tool and dev server
- Stockfish WASM - Chess engine
- Progressive Web App - Offline capabilities
- Service Workers - Caching and offline support
- Hot Reload: Changes to components will hot-reload automatically
- Console Logs: Check browser console for Stockfish engine messages
- State Management: Game state is managed in
App.jsx- consider Redux for complex features - Performance: Use React DevTools Profiler to optimize rendering
- Testing: Add test scripts with Jest or Vitest for game logic
Happy Coding! Make this chess game your own! ♟️