Hugging Face's logo

Spaces:
electro-sb
/
Chess_Engine
Sleeping

App Files Community
Chess_Engine / web /SETUP_INSTRUCTIONS.md
electro-sb's picture
electro-sb
first commit
100a6dd
preview code
|
raw
history blame contribute delete
2.63 kB

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:

cd frontend/web
npm install

2. Copy Assets

Copy the chess assets to the public directory:

# 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:

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:

cd frontend/web
npm run dev

The UI will be available at http://localhost:5173

Building for Production

To create a production build:

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:

    ./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