Hugging Face's logo

Spaces:
electro-sb
/
Chess_Engine
Sleeping

App Files Community
Chess_Engine
File size: 2,984 Bytes 
100a6dd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
# 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