web/WSL_SETUP.md

# Setting Up the Chess UI in WSL

This guide provides instructions for setting up and running the Chess UI in a Windows Subsystem for Linux (WSL) environment.

## Prerequisites

1. WSL installed with a Linux distribution (Ubuntu recommended)
2. Node.js and npm installed in your WSL environment

## Installation Steps

### 1. Install Node.js and npm (if not already installed)

```bash
# Update package lists
sudo apt update

# Install Node.js and npm
sudo apt install nodejs npm

# Check installation
node --version
npm --version
```

Alternatively, use nvm for better Node.js version management:

```bash
# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

# Reload shell configuration
source ~/.bashrc

# Install latest LTS version of Node.js
nvm install --lts

# Use the installed version
nvm use --lts
```

### 2. Set Up the Project

Navigate to the project directory and run the setup script:

```bash
cd frontend/web
chmod +x setup.sh
./setup.sh
```

### 3. Copy Assets

Run the asset copy script to copy chess pieces and board images to the public directory:

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

### 4. Fix TypeScript Issues (if needed)

If you encounter TypeScript errors related to React:

```bash
chmod +x fix-dependencies.sh
./fix-dependencies.sh
```

### 5. Start the Development Server

```bash
npm run dev
```

## Troubleshooting

### TypeScript Errors

If you see "Cannot find module 'react'" errors:

1. Make sure all dependencies are installed correctly
2. Check that you're using the correct import syntax in your components:
   ```typescript
   import * as React from 'react';
   import { useState, useEffect } from 'react';
   ```
3. Restart the TypeScript server in your IDE

### Path Issues

WSL uses Linux-style paths. Make sure you're using forward slashes (/) instead of backslashes (\\) in your code.

### Performance Issues

If you experience slow performance when running the development server in WSL:

1. Store your project files in the Linux filesystem (e.g., /home/username/projects) rather than the Windows filesystem (/mnt/c/...)
2. Use WSL 2 instead of WSL 1 for better performance
3. Consider using Visual Studio Code with the Remote - WSL extension for a better development experience