web/README.md

# Chess Engine Web UI

A modern, interactive web interface for the chess engine using React and Tailwind CSS.

## 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
- Responsive design for various screen sizes
- Multiple board themes (brown and grey)

## Setup

### WSL Setup (Recommended)

If you're using Windows Subsystem for Linux (WSL):

1. Run the setup script to install all dependencies:
```bash
chmod +x setup.sh
./setup.sh
```

2. Copy the chess assets to the public folder:
```bash
chmod +x copy-assets.sh
./copy-assets.sh
```

3. Start the development server:
```bash
npm run dev
```

For detailed WSL-specific instructions, see [WSL_SETUP.md](./WSL_SETUP.md).

### Windows Setup

1. Run the setup script to install all dependencies:
```
setup.bat
```

2. Copy the chess assets to the public folder (see Asset Setup section below)

3. Start the development server:
```
npm run dev
```

### Manual Setup

1. Install dependencies:
```
npm install --save react react-dom axios
npm install --save-dev typescript @types/react @types/react-dom @vitejs/plugin-react vite tailwindcss postcss autoprefixer
```

2. Start the development server:
```
npm run dev
```

3. Build for production:
```
npm run build
```

## Troubleshooting TypeScript Errors

If you encounter TypeScript errors related to React, try these steps:

1. Make sure all dependencies are installed:
```
npm install
```

2. If you see "Cannot find module 'react'" errors, try:
```bash
# WSL/Linux
./fix-dependencies.sh

# Windows
fix-dependencies.bat
```

3. Restart your IDE or TypeScript server

4. For detailed instructions, see [TYPESCRIPT_FIXES.md](./TYPESCRIPT_FIXES.md)

## Asset Setup

Before running the application, you need to copy the chess assets to the public folder:

1. Copy all files from `frontend/assets/pieces` to `frontend/web/public/assets/pieces`
2. Copy all files from `frontend/assets/boards/brown` to `frontend/web/public/assets/boards/brown`
3. Copy all files from `frontend/assets/boards/grey` to `frontend/web/public/assets/boards/grey`

Or use the provided script:
```bash
# WSL/Linux
./copy-assets.sh
```

### High-Resolution Assets

For high-resolution displays:
1. Copy your 2x assets to the same folders, keeping the same naming convention but with "2x" instead of "1x"
2. Example: `b_bishop_1x.png` and `b_bishop_2x.png` should both be in the pieces folder

## Backend Integration

The web UI communicates with the chess engine's REST API. Make sure the backend API is running on port 8000 or update the proxy configuration in `vite.config.ts` to match your backend URL.

## Technologies Used

- React 18
- TypeScript
- Tailwind CSS
- Vite
- Axios for API communication