/testing-redux-chess

React app to test redux-chess, which is a local npm package still on development.

Primary LanguageHTML

Redux Chess Testing Application

This repository allows to test the @chesslablab/redux-chess package from within a host application outside of the package itself.

Check out this demo.

Local Installation and Setup

First things first, fork and clone the @chesslablab/redux-chess package into your projects folder as it is described in the following example:

$ git clone git@github.com:chesslablab/redux-chess.git @chesslablab/redux-chess

Notice that this package starts with @ because this is how an organization is denoted in the npm registry.

Don't forget to install the npm dependencies in the @chesslablab/redux-chess directory:

$ npm install

Then, clone the chesslablab/testing-redux-chess repository into your projects folder too:

$ git clone git@github.com:chesslablab/testing-redux-chess.git

Install the @chesslablab/redux-chess package locally in your testing-redux-chess directory:

$ install-local --save ../@chesslablab/redux-chess

As you can see, it is required to install the install-local package; for further information please visit How to Test a Local React NPM Package With Ease.

And or course, install the npm dependencies required for the testing app to run:

$ npm install

Finally you may want to install Redux DevTools Extension in your browser in order to develop and debug the @chesslablab/redux-chess package.

Figure 1 Figure 1. Debugging the @chesslablab/redux-chess package with Redux DevTools.

Run the Chess Server

Install the PHP Chess Server and make sure it is up and running on your computer:

$ 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.
/heuristicpicture Takes a balanced heuristic picture of the current 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","loadfen","playfriend"],"fen":"string","color":["w","b"],"min":"int"} Starts a new game.
/status The current game status.

Listening to commands...

A sandbox server can be used instead for testing purposes if you don't want to run the chess server locally. In this case, please update the src/index.js as it is described next.

import React from 'react';
import ReactDOM from 'react-dom';
import { Chess } from '@chesslablab/redux-chess';

const props = {
  server: {
    prot: 'wss',
    host: 'pchess.net',
    port: '8443'
  }
};

ReactDOM.render(
  <Chess props={props} />,
  document.getElementById('redux-chess')
);

Start the Testing App

cd your testing-redux-chess folder in order to start the app for the first time:

$ npm run publish:npm --prefix /home/standard/projects/@chesslablab/redux-chess && npm run update:local:redux-chess && npm start

Restart the Testing App

After making some changes in the local @chesslablab/redux-chess package you may want to restart the app to see the changes in your browser:

$ npm run publish:npm --prefix /home/standard/projects/@chesslablab/redux-chess && npm run update:local:redux-chess && npm run restart --port=3000

For further information on developing this awesome npm package, please visit: