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:

chmod +x setup.sh
./setup.sh

2. Copy the chess assets to the public folder:

chmod +x copy-assets.sh
./copy-assets.sh

3. Start the development server:

npm run dev

For detailed WSL-specific instructions, see 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:

# WSL/Linux
./fix-dependencies.sh

# Windows
fix-dependencies.bat

3. Restart your IDE or TypeScript server

4. For detailed instructions, see 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:

# 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