Spaces:
Sleeping
Sleeping
File size: 2,628 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 |
# Chess UI Setup Instructions
This document provides detailed instructions for setting up and running the Chess UI.
## Prerequisites
- Node.js (v14 or later)
- npm (v6 or later)
- Python backend with FastAPI (for the chess engine)
## Setup Steps
### 1. Install Dependencies
Navigate to the web UI directory and install the required dependencies:
```bash
cd frontend/web
npm install
```
### 2. Copy Assets
Copy the chess assets to the public directory:
```bash
# Create 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 assets
cp ../../assets/pieces/*.png public/assets/pieces/
cp ../../assets/boards/brown/*.png public/assets/boards/brown/
cp ../../assets/boards/grey/*.png public/assets/boards/grey/
```
### 3. Add Sound Effects (Optional)
For a better user experience, add sound effects to the `public/assets/sounds` directory:
- `move.mp3` - Sound when a piece moves
- `capture.mp3` - Sound when a piece is captured
- `check.mp3` - Sound when a king is in check
- `castle.mp3` - Sound when castling
- `promote.mp3` - Sound when a pawn is promoted
- `game-end.mp3` - Sound when the game ends
- `illegal.mp3` - Sound when an illegal move is attempted
### 4. Start the Backend
Make sure your chess engine backend is running:
```bash
cd ../.. # Return to project root
python -m uvicorn chess_engine.api.rest_api:app --reload
```
### 5. Start the Web UI
In a separate terminal, start the web UI development server:
```bash
cd frontend/web
npm run dev
```
The UI will be available at http://localhost:5173
## Building for Production
To create a production build:
```bash
npm run build
```
The built files will be in the `dist` directory, which can be served by 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. Restart your IDE or TypeScript server
### API Connection Issues
If the UI can't connect to the backend:
1. Check that the backend is running on port 8000
2. Verify the proxy settings in `vite.config.ts`
3. Check browser console for CORS or network errors
### Missing Assets
If chess pieces or board squares don't appear:
1. Verify that all assets are correctly copied to the public directory
2. Check browser console for 404 errors
3. Ensure the file paths in the code match your asset directory structure |