Spaces:
Sleeping
Sleeping
File size: 3,227 Bytes
100a6dd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | # Chess UI Setup Guide
This guide will help you set up and run the Chess UI web application.
## Prerequisites
- Node.js (v14 or later)
- npm (v6 or later)
- Python with the chess engine backend running
## Setup Steps
### 1. Install Dependencies
Navigate to the web UI directory and install the required dependencies:
```bash
cd frontend/web
npm install
```
### 2. Copy Chess Assets
The UI requires chess piece and board images. Copy them from the assets directory:
```bash
# Create the necessary directories if they don't exist
mkdir -p public/assets/pieces
mkdir -p public/assets/boards/brown
mkdir -p public/assets/boards/grey
mkdir -p public/assets/sounds
# Copy the assets
cp ../../frontend/assets/pieces/*.png public/assets/pieces/
cp ../../frontend/assets/boards/brown/*.png public/assets/boards/brown/
cp ../../frontend/assets/boards/grey/*.png public/assets/boards/grey/
```
### 3. Add Sound Files (Optional)
For a better experience, add sound effects to the `public/assets/sounds` directory:
- move.mp3 - Sound for regular piece movement
- capture.mp3 - Sound for capturing a piece
- check.mp3 - Sound for when a king is in check
- castle.mp3 - Sound for castling
- promote.mp3 - Sound for pawn promotion
- game-start.mp3 - Sound for starting a new game
- game-end.mp3 - Sound for game ending
### 4. Configure Backend URL
The UI is configured to connect to the backend at `http://localhost:8000`. If your backend is running on a different URL, update the `vite.config.ts` file:
```typescript
server: {
proxy: {
'/api': {
target: 'http://your-backend-url:port',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
```
### 5. Start the Development Server
Run the development server:
```bash
npm run dev
```
The UI will be available at `http://localhost:5173` (or another port if 5173 is in use).
### 6. Build for Production
To create a production build:
```bash
npm run build
```
The build output will be in the `dist` directory, which you can serve using any static file server.
## Troubleshooting
### TypeScript Errors
If you encounter TypeScript errors related to React:
1. Run the fix-dependencies script:
```bash
./fix-dependencies.bat
```
2. Or manually reinstall React dependencies:
```bash
npm uninstall react react-dom @types/react @types/react-dom
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom
```
### Backend Connection Issues
If the UI can't connect to the backend:
1. Make sure the backend server is running
2. Check that the proxy configuration in `vite.config.ts` points to the correct URL
3. Look for CORS errors in the browser console and update the backend to allow requests from the UI's origin
## Features
- Interactive chess board with piece movement
- Visual indicators for legal moves (green dots)
- Hint system with highlighted squares
- Game controls (new game, undo, resign)
- Position analysis display
- Move history tracking
- Captured pieces display
- Chess timer
- Sound effects for moves and captures
- Multiple board themes (brown and grey) |