Chess User Interface for chess ai
The web-based user interface for my chess bot that allows users to interact seamlessly with the bot, setting up chess positions, making moves, and tracking game history..
Technologies Used
- Visuals: React.js, chessboardjsx
- Game Logic: chess.js
- Communication: Axios (HTTP requests)
User Interface Creation
The graphical user interface is built as a web application using React.js and chessboardjsx. It provides an intuitive interface for players to interact with the chessboard, make moves, and receive move recommendations.
Features
- Move Highlighting: Highlights valid moves for selected pieces.
- Undo Move: Allows players to undo their last move.
- Flip Board: Option to flip the orientation of the chessboard.
- Apply FEN: Set the game state using FEN notation.
- Move Prediction: Receive move recommendations from the chess bot.
- History Tracking: View and navigate through the game's move history.
Communication with Chess Bot
The prediction of chess moves is handled by a separate Python script. To enable communication between the frontend and the chess bot, the Axios library is used to make HTTP requests. The application sends the current game state in FEN format to the local URL http://localhost:5000/predict_move when the "Show Move" or "Make Move" button is pressed. Upon successful processing by the chess bot, a recommended move in text format is returned. This move is then parsed to create the necessary Move object.