# 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