Spaces:
Sleeping
Sleeping
| # 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 |