A fully interactive chess board application with complete piece movement logic, real-time check/checkmate detection, and a modern responsive UI. Play a complete game of chess right in your browser!
- Complete Chess Rules: All standard piece movements including castling (king-side & queen-side), en passant captures, and pawn promotion
- Check & Checkmate Detection: Real-time detection of check, checkmate, stalemate, and insufficient material draw conditions
- Visual Move Feedback: Highlighted valid moves with gray dots, capture indicators, last move highlights, and pulsing check warnings
- Move History: Full algebraic notation log for all moves played, grouped by move number
- Captured Pieces Tracker: Visual display of captured pieces for both sides, sorted by piece value
- Pawn Promotion Modal: Elegant modal picker for choosing promotion piece (Queen, Rook, Bishop, Knight)
- Responsive Design: Fully responsive layout that works seamlessly on desktop and mobile devices
- Accessibility: ARIA attributes, semantic HTML, focus rings, and keyboard-friendly interactions
The main game screen features an 8x8 chess board with file/rank coordinate labels, a sidebar displaying game status, move history, and captured pieces for both sides.
When a piece is selected, valid moves are highlighted with animated gray dots on empty squares and rings on capturable squares. The selected piece gets a sky-blue ring with a subtle scale effect.
When a pawn reaches the last rank, a modal overlay appears with a backdrop blur effect, allowing the player to choose between Queen, Rook, Bishop, or Knight.
- React 19: Modern UI components with hooks and memoization for optimal rendering
- TypeScript 5: Full type safety with dedicated type definitions for pieces, positions, moves, and game state
- Vite 7: Lightning-fast build tool with HMR for rapid development
- Zustand 5: Lightweight global state management for the entire game state
- React Router 7: Client-side routing infrastructure
- Tailwind CSS 4: Utility-first CSS framework with responsive design utilities and custom animations
- Clone the repository:
git clone https://github.com/Serkanbyx/basic-chess-board-logic.git
cd basic-chess-board-logic- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run build
npm run preview- Open the application in your browser
- Select a piece by clicking on it — valid moves will be highlighted on the board
- Make a move by clicking on any highlighted square
- The game automatically alternates turns between White and Black
- Special moves like castling, en passant, and pawn promotion are fully supported
- Monitor the game through the sidebar which shows current turn, game status, move history, and captured pieces
- When the game ends (checkmate, stalemate, or draw), click Play Again to start a new game
The core move validation logic is implemented as a pure utility module, completely decoupled from UI and state management:
// Raw move generation for each piece type
generatePawnMoves(position, board, enPassantTarget)
generateKnightMoves(position, board)
generateSlidingMoves(position, board, directions) // Rook, Bishop, Queen
generateKingMoves(position, board, gameState) // Includes castlingEvery pseudo-legal move is validated by simulating the move and checking if it leaves the own king in check:
// Filters out moves that would leave the king in check
const legalMoves = pseudoLegalMoves.filter(move => {
const simulatedBoard = applyMove(board, move);
return !isInCheck(simulatedBoard, currentColor);
});isInCheck(board, color) // King under attack?
hasLegalMoves(board, color) // Any legal moves available?
isInsufficientMaterial(board) // K vs K, K+B vs K, K+N vs K- Checkmate: In check + no legal moves
- Stalemate: Not in check + no legal moves
- Draw: Insufficient material to force checkmate
Moves are converted to standard algebraic notation including special annotations:
e4, Nf3, Bxe5, O-O, O-O-O, exd6 e.p., e8=Q, Qh4#, Rfe1+
src/
├── components/ # Reusable UI components
│ ├── Board.tsx # 8x8 chess board grid with memoization
│ ├── Square.tsx # Individual square with visual states
│ ├── ChessPiece.tsx # Piece rendering with Unicode symbols
│ ├── GameInfo.tsx # Turn indicator & game status badges
│ ├── MoveHistory.tsx # Algebraic notation move log
│ ├── CapturedPieces.tsx # Captured pieces display sorted by value
│ └── PromotionModal.tsx # Accessible pawn promotion picker
├── constants/
│ └── board.ts # Initial board setup & piece symbols
├── pages/
│ └── GamePage.tsx # Main game layout with responsive grid
├── store/
│ └── useGameStore.ts # Zustand store with all game actions
├── types/
│ └── chess.ts # TypeScript type definitions
├── utils/
│ ├── moveValidation.ts # Pure move generation & validation
│ └── notation.ts # Algebraic notation converter
├── App.tsx # Root component with routing
├── main.tsx # Application entry point
└── index.css # Global styles, Tailwind imports & animations
You can modify piece animations in index.css:
/* Custom piece hover effect */
.piece-hover:hover {
transform: scale(1.15);
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}
/* Custom check warning animation */
@keyframes king-in-check {
0%, 100% { box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.6); }
50% { box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.9); }
}Modify square colors in the Square.tsx component by updating the Tailwind classes:
// Light square: bg-amber-100 → your color
// Dark square: bg-amber-800 → your colorUpdate the responsive board sizing in Board.tsx:
// Default: w-[min(85vw,480px)] md:w-[480px]
// Larger: w-[min(90vw,600px)] md:w-[600px]- ✅ Full piece movement validation for all 6 piece types
- ✅ King-side and queen-side castling with all prerequisite checks
- ✅ En passant capture detection and execution
- ✅ Pawn promotion with modal picker (Queen, Rook, Bishop, Knight)
- ✅ Real-time check detection with visual king highlight
- ✅ Checkmate and stalemate detection
- ✅ Insufficient material draw detection (K vs K, K+B vs K, K+N vs K)
- ✅ Algebraic notation move history
- ✅ Captured pieces tracking and display
- ✅ Last move highlighting
- ✅ Responsive design for mobile and desktop
- ✅ Accessibility with ARIA attributes and semantic HTML
- ✅ Memoized components for optimized rendering
- 🔮 50-move rule draw detection
- 🔮 Threefold repetition detection
- 🔮 Move timer / clock for each player
- 🔮 Undo / redo move functionality
- 🔮 PGN import and export
- 🔮 AI opponent integration
- 🔮 Sound effects for moves and captures
- 🔮 Dark / light theme toggle
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feat/amazing-feature) - Commit your changes with clear messages:
feat:for new featuresfix:for bug fixesrefactor:for code refactoringdocs:for documentation updateschore:for maintenance tasks
- Push to the branch (
git push origin feat/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License — see the LICENSE file for details.
Serkan Bayraktar
- Website: serkanbayraktar.com
- GitHub: @Serkanbyx
- Email: serkanbyx1@gmail.com
- React Team for the powerful UI framework
- Zustand for simple and effective state management
- Tailwind CSS for rapid UI development
- Vite for the blazing-fast development experience
- Unicode Chess Symbols for beautiful piece rendering without external assets
- Issues: GitHub Issues
- Email: serkanbyx1@gmail.com
- Website: serkanbayraktar.com
⭐ If you like this project, don't forget to give it a star!