https://github.com/hasanulmukit/checkers-game-nextjs
Checkers is a modern, interactive checkers game built with Next.js, Tailwind CSS, and React DnD. It features advanced move validation, forced captures, undo functionality, and a scrollable move history—all wrapped in a sleek, responsive UI.
https://github.com/hasanulmukit/checkers-game-nextjs
board-game checkers javascript nextjs react tailwindcss
Last synced: 3 months ago
JSON representation
Checkers is a modern, interactive checkers game built with Next.js, Tailwind CSS, and React DnD. It features advanced move validation, forced captures, undo functionality, and a scrollable move history—all wrapped in a sleek, responsive UI.
- Host: GitHub
- URL: https://github.com/hasanulmukit/checkers-game-nextjs
- Owner: hasanulmukit
- License: mit
- Created: 2025-02-15T03:30:48.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-02-15T03:34:33.000Z (3 months ago)
- Last Synced: 2025-02-15T04:23:09.464Z (3 months ago)
- Topics: board-game, checkers, javascript, nextjs, react, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Checkers
**Checkers** is a modern, interactive checkers game built with Next.js (using the App Router), Tailwind CSS, and React DnD. This project reimagines the classic board game with advanced gameplay features, an intuitive drag-and-drop interface, and a modern aesthetic.
## Features
- **Drag-and-Drop Functionality:** Move pieces by dragging them onto valid squares using React DnD.
- **Advanced Move Validation:** Enforces checkers rules including forced captures, multiple jumps, and king promotion.
- **Undo Move:** Step back through moves using the undo functionality.
- **Game Over Detection:** Automatically detects when one side runs out of pieces and displays a centered game over overlay with the winner.
- **Scrollable Move History:** View a log of all moves in a scrollable, elegantly styled panel.
- **Responsive UI:** The board and controls are optimized for a modern and accessible look.
- **Control Panel:** Positioned beside the board, featuring advanced styling for Restart, Undo, and Cancel Forced Move actions.
## Technologies Used
- **Next.js (App Router)**
- **React & JSX**
- **Tailwind CSS**
- **React DnD (HTML5 Backend)**
- **JavaScript**
## Installation
1. **Clone the Repository:**
```bash
git clone https://github.com/yourusername/acheckers.git
```
2. Navigate to the Project Directory:
```bash
cd acheckers
```
3. Install Dependencies:
```bash
npm install
```
4. Run the Development Server:
```bash
npm run dev
```
5. Open http://localhost:3000 in your browser to play the game.
## Folder Structure
- checkers/
- ├── app/
- │ ├── layout.jsx # Root layout (server component) that imports global styles and wraps the app in client providers.
- │ └── page.jsx # Main page rendering the game board and control panel.
- ├── components/
- │ ├── Board.jsx # Game board component.
- │ ├── Square.jsx # Individual square component (drop target).
- │ ├── Piece.jsx # Draggable checkers piece component.
- │ ├── ClientProviders.jsx # Client-only wrapper for GameProvider and DndProvider.
- │ └── GameContext.jsx # Context API for game state management.
- ├── styles/
- │ └── globals.css # Global CSS file (includes Tailwind CSS directives).
- └── README.md
## Usage
- Moving Pieces: Drag a piece onto a valid dark square. If a capture is available, you must capture.
- Forced Capture: When a capture move is available, the game forces the move to comply with checkers rules.
- Undo Moves: Click the Undo Move button to revert to the previous state.
- Restart Game: Click the Restart Game button to reset the game.
- Cancel Forced Move: If a forced move is causing issues, use the Cancel Forced Move button.
- Move History: The scrollable panel on the right shows a log of all moves.
- Game Over: When one side has no pieces remaining, a centered overlay appears on a blurred board displaying the winner.
### Contributing
Contributions are welcome! Please open an issue or submit a pull request if you have ideas for improvements, bug fixes, or additional features.
### License
This project is licensed under the MIT License.