A beautiful, responsive chess game built with React, TypeScript, and Material-UI. Play against friends or challenge the computer with Stockfish engine integration.
- Human vs Human: Play with friends locally
- Human vs Computer: Challenge the Stockfish chess engine
- Multiple Difficulty Levels: Easy, Medium, Hard AI opponents
- Flexible Timer System: Set custom time controls or play unlimited
- Live Timer Display: Real-time countdown for both players
- Visual Timer Integration: Color-coded timer components
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Material-UI Components: Clean, modern interface with smooth animations
- Theme Support: Consistent design language throughout the app
- Interactive Chess Board: Drag-and-drop piece movement with visual feedback
- Adaptive Layout: Three-section layout for desktop, stacked for mobile
- Touch-Friendly: Optimized for mobile gameplay
- Floating Action Menu: Easy access to game controls on mobile
- Computer Thinking Indicator: Visual feedback when AI is calculating moves
- Move History: Complete game notation with auto-scroll
- Captured Pieces Display: Visual representation with point values
- Material Advantage: Real-time calculation of captured piece values
- Game Controls: Undo moves, restart game, resign functionality
- Stockfish Integration: Powerful chess engine for computer play
- Real-time Updates: Live timer and game state management
- TypeScript: Type-safe development
- Modular Architecture: Clean component structure
- Performance Optimized: Efficient rendering and state management
- Frontend: React 18, TypeScript
- UI Framework: Material-UI (MUI)
- Chess Engine: Stockfish NNUE
- Chess Logic: chess.js
- Board Component: react-chessboard
- Build Tool: Vite
- Package Manager: pnpm
# Clone the repository
git clone https://github.com/yourusername/chess-app.git
# Navigate to project directory
cd chess-app
# Install dependencies
pnpm install
# Start development server
pnpm run dev- Setup Game: Choose game mode, difficulty, and time controls
- Play: Make moves by dragging pieces or clicking
- Monitor: Track time, captured pieces, and move history
- Control: Use game controls for undo, restart, or resign
src/
├── components/ # React components
│ ├── GameScreen.tsx # Main game interface
│ ├── SetupScreen.tsx # Game configuration
│ ├── WhiteTimer.tsx # White player timer
│ ├── BlackTimer.tsx # Black player timer
│ ├── GameTimer.tsx # General timer component
│ ├── MoveHistory.tsx # Move notation display
│ ├── CapturedPiecesDisplay.tsx
│ ├── GameControls.tsx
│ └── GameOverModal.tsx
├── context/ # React context providers
│ ├── GameContext.tsx # Game state management
│ └── ThemeContext.tsx # UI theme management
├── hooks/ # Custom React hooks
│ ├── useGame.ts # Game logic hook
│ └── useStockfish.ts # Chess engine integration
├── themes/ # UI theme definitions
└── types/ # TypeScript type definitions
- Dedicated Timer Components: Separate
WhiteTimerandBlackTimercomponents - Real-time Updates: Live countdown with automatic switching
- Visual Feedback: Color-coded display for active player
- Flexible Time Controls: Support for various time formats
- Stockfish NNUE: Latest neural network evaluation
- Multiple Difficulty Levels: Adjustable AI strength
- Thinking Indicator: Visual feedback during AI calculation
- Performance Optimized: Web Worker integration for smooth gameplay
- Responsive Layout: Adapts to screen size automatically
- Material Design: Modern, clean interface
- Accessibility: Keyboard navigation and screen reader support
- Touch Optimized: Mobile-friendly controls
- Responsive Design: Seamless experience across all devices
- Professional UI: Clean, modern interface with smooth animations
- Real-time Timers: Live countdown with visual feedback
- Smart AI: Powered by Stockfish for challenging gameplay
- Complete Game Management: Full feature set for serious chess play
# Development server
pnpm run dev
# Build for production
pnpm run build
# Preview production build
pnpm run preview
# Type checking
pnpm run type-check
# Linting
pnpm run lint- Install dependencies:
pnpm install - Start development server:
pnpm run dev - Open browser to
http://localhost:5173
- Modern Browsers: Chrome, Firefox, Safari, Edge
- Mobile Browsers: iOS Safari, Chrome Mobile
- Requirements: ES2015+ support, WebAssembly
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Stockfish Team: For the amazing chess engine
- chess.js: For chess game logic
- react-chessboard: For the interactive chess board component
- Material-UI: For the beautiful UI components
Built with ❤️ for chess enthusiasts