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