React chessboard to be connected to a PHP Chess server.
Via npm:
$ npm i redux-chess
Chessboard without server-side functionality. Check out this demo.
import React from 'react';
import ReactDOM from 'react-dom';
import { Chess } from 'redux-chess';
const props = {};
ReactDOM.render(
<Chess props={props} />,
document.getElementById('redux-chess')
);Chessboard with server-side functionality such as move validation and so on.
import React from 'react';
import ReactDOM from 'react-dom';
import { Chess } from 'redux-chess';
const props = {
server: {
host: '127.0.0.1',
port: '8080'
}
};
ReactDOM.render(
<Chess props={props} />,
document.getElementById('redux-chess')
);
Thank you for your interest in this exciting project!
It may appear as if being quite challenging provided it requires this chess server up and running. redux-chess is "just a chessboard" as lightweight as it can possibly be.
The chessboard just sends messages to a WebSocket server so make sure the chess server is running on localhost:
$ php cli/ws-server.php
Welcome to PHP Chess Server
Commands available:
/accept {"id":"id"} Accepts a friend request to play a game.
/ascii Prints the ASCII representation of the game.
/castling Gets the castling status.
/captures Gets the pieces captured by both players.
/fen Prints the FEN string representation of the game.
/history The current game's history.
/ischeck Finds out if the game is in check.
/ismate Finds out if the game is over.
/piece {"position":"square"} Gets a piece by its position on the board. The "position" parameter is mandatory.
/pieces {"color":["w","b"]} Gets the pieces on the board by color. The "color" parameter is mandatory.
/playfen {"fen":"FEN"} Plays a chess move in shortened FEN format. The "fen" parameter is mandatory.
/quit Quits a game.
/start {"mode":["analysis","playfriend"],"color":["w","b"]} Starts a new game. The "color" parameter is not required in analysis mode.
/status The current game status.
Listening to commands...
The post How to Test a Local React NPM Package With Ease might be helpful to get the redux-chess package up and running. Also it is recommended to test it from within programarivm/testing-redux-chess which is a host application for testing purposes.
For further information on developing this awesome npm package, please visit:
- How to Test a Local React NPM Package With Ease
- Testing Redux Chess
- A React Chessboard with Redux and Hooks in Few Lines
- PHP Chess Server
The MIT License.
Would you help make this app better?
Happy learning!
Thank you, and keep it up.