React chessboard to be connected to a PHP Chess server.
Via npm:
$ npm i redux-chess
Basic initialization:
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":"string"} Gets a piece by its position on the board.
/pieces {"color":["w","b"]} Gets the pieces on the board by color.
/playfen {"fen":"string"} Plays a chess move in shortened FEN format.
/quit Quits a game.
/start {"mode":["analysis","playfriend"],"color":["w","b"],"min":"int"} Starts a new game.
/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
- TDDing a React App With Jest the Easy Way
- 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent