https://github.com/parthasdey2304/chess-app
This is a basics chess practise application that uses `stockfish.js` and `react-chessboard` and helps you practise chess.
https://github.com/parthasdey2304/chess-app
Last synced: 4 months ago
JSON representation
This is a basics chess practise application that uses `stockfish.js` and `react-chessboard` and helps you practise chess.
- Host: GitHub
- URL: https://github.com/parthasdey2304/chess-app
- Owner: parthasdey2304
- License: mit
- Created: 2025-02-28T15:18:42.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-28T15:22:43.000Z (about 1 year ago)
- Last Synced: 2025-03-02T20:53:32.319Z (about 1 year ago)
- Language: JavaScript
- Size: 52.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Chess WebApp with React and Stockfish
A feature-rich chess web application built with React.js and Stockfish chess engine integration.
## Features
- Play against Stockfish chess engine with adjustable ELO ratings
- Game analysis with Stockfish showing multiple lines and evaluations
- Export games as PGN
- Create animated GIFs of your games
- Visual analysis with arrows showing potential variations
- Game timer with customizable time controls
- Game review section with comments
## Prerequisites
- Node.js 14.x or higher
- npm 6.x or higher
## Installation
1. Clone the repository
```bash
git clone https://github.com/yourusername/chess-webapp.git
cd chess-webapp
```
2. Install dependencies
```bash
npm install
```
3. Download Stockfish WASM
- Go to [stockfish.wasm GitHub repository](https://github.com/lichess-org/stockfish.wasm)
- Download the latest version of `stockfish.js` and `stockfish.wasm`
- Place these files in the `public` folder of the project
4. Start the development server
```bash
npm start
```
5. Open your browser and navigate to `http://localhost:3000`
## Usage
### Playing Against the Computer
1. On the main page, click "New Game"
2. Choose your preferred ELO rating and time control
3. Make your moves on the board
### Game Analysis
1. After completing a game, click "Analyze Game"
2. Use the analysis tools to review your game
3. Explore different lines shown by Stockfish
### Exporting PGN
1. After a game, click "Export PGN"
2. The PGN file will be downloaded to your computer
### Creating Game GIFs
1. After a game, click "Create Game GIF"
2. Wait for the GIF to be generated
3. The GIF will be downloaded automatically
### Game Reviews
1. Navigate to the "Reviews" section
2. View previous games
3. Add comments to games for future reference
## Project Structure
```
chess_webapp/
│
├── public/ # Public assets
│ ├── stockfish.js # Stockfish WASM engine
│ ├── index.html # HTML entry point
│ └── ...
│
├── src/ # Source files
│ ├── components/ # Reusable UI components
│ │ ├── Chessboard.jsx
│ │ ├── ELOSelector.jsx
│ │ ├── GameControls.jsx
│ │ ├── MoveHistory.jsx
│ │ └── Timer.jsx
│ │
│ ├── hooks/ # Custom React hooks
│ │ ├── useChessGame.js
│ │ ├── useStockfish.js
│ │ └── useTimer.js
│ │
│ ├── pages/ # Page components
│ │ ├── GamePage.jsx
│ │ ├── AnalysisPage.jsx
│ │ ├── ReviewPage.jsx
│ │ └── pages.css
│ │
│ ├── App.jsx # Main App component
│ ├── App.css # Main styles
│ └── index.js # Entry point
│
├── package.json # Project dependencies
└── README.md # Project documentation
```
## Technologies Used
- React.js
- Chess.js
- React Chessboard
- Stockfish Chess Engine (WASM version)
- React Router
- HTML2Canvas
- Gifshot