chesslablab/spablab

A single-page app (SPA) to learn and play chess online.

spablab's Issues

Add a 'Teach a student' button to the main nav bar

This will allow a chess instructor to send an invitation token to a student to play a game of chess.

Add a user-friendly breadcrumb

Add a breadcrumb above the PGN movetext section to just remind users whether they're playing in Analysis board mode or Invite a friend mode.

Figure 1. 1.e4 e5 in Analysis board mode

Figure 2. 1.e4 e5 in Invite a friend mode

This issue is meant to be a usability improvement.

Display an informative message after inviting a friend to play

At this moment, nothing is displayed after clicking on the Play button, which is a little confusing for the user sending the invite.

Figure 1. Invite a friend to play

Figure 2. This is the screen displayed after clicking on the Play button

However, an informative message should be displayed:

• Waiting for friend to accept the invite...

Allow to deselect a piece by clicking on any other of the player's pieces

For example, at this moment e2 can only be deselected by clicking on it again, as it is shown in the images attached.

Style buttons with CSS

Allow to test the package without involving a chess server

At this moment, redux-chess can only be tested if a chess server is running on localhost. For further information on testing the package, please visit:

• How to Test a Local React NPM Package With Ease

Add a 'Board editor' button in the main navigation bar

This new functionality should be similar to Lichess's Board editor.

Disallow to select your own pieces in the opponent's turn in 'Analysis' mode

This will fix impossible chess positions as in the following example.

Display the king's square in red when in check

The king's square should be displayed in red color, or something similarly threatening, when in check.

Implement fromFen() method in utils/Ascii.js

The new method is intended to convert a FEN string into its ASCII representation counterpart.

Chessboard not being displayed on several different browsers

The chessboard gets displayed on Chrome but the following ones will throw an error instead:

• Falcon
• Abrowser
• Midori

×
TypeError: b is undefined
compose/</<
node_modules/redux/es/redux.js:621

  618 | 
  619 |   return funcs.reduce(function (a, b) {
  620 |     return function () {
> 621 |       return a(b.apply(void 0, arguments));
  622 |     };
  623 |   });
  624 | }

createStore
http://localhost:3000/static/js/vendors~main.chunk.js:39696:12

  39693 |     throw new Error( false ? undefined : "Expected the enhancer to be a function. Instead, received: '" + kindOf(enhancer) + "'");
  39694 |   }
  39695 | 
> 39696 |   return enhancer(createStore)(reducer, preloadedState);
        |          ^  39697 | }
  39698 | 
  39699 | if (typeof reducer !== 'function') {

./node_modules/redux-chess/dist/store.js
node_modules/redux-chess/dist/store.js:19

  16 | 
  17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  18 | 
> 19 | var store = (0, _redux.createStore)(_rootReducer2.default, (0, _redux.compose)((0, _redux.applyMiddleware)(_reduxThunk2.default), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));
  20 | 
  21 | // const store = createStore(rootReducer, applyMiddleware(thunk));
  22 | 

__webpack_require__
/home/standard/projects/testing-redux-chess/webpack/bootstrap:851

  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }

fn
/home/standard/projects/testing-redux-chess/webpack/bootstrap:150

  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {

./node_modules/redux-chess/dist/components/Chess.js
node_modules/redux-chess/dist/components/Chess.js:13
__webpack_require__
/home/standard/projects/testing-redux-chess/webpack/bootstrap:851

  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }

fn
/home/standard/projects/testing-redux-chess/webpack/bootstrap:150

  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {

./node_modules/redux-chess/dist/index.js
node_modules/redux-chess/dist/index.js:8
__webpack_require__
/home/standard/projects/testing-redux-chess/webpack/bootstrap:851

  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }

fn
/home/standard/projects/testing-redux-chess/webpack/bootstrap:150

  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {

__webpack_require__
/home/standard/projects/testing-redux-chess/webpack/bootstrap:851

  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }

fn
/home/standard/projects/testing-redux-chess/webpack/bootstrap:150

  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {

1
http://localhost:3000/static/js/main.chunk.js:127:18
__webpack_require__
/home/standard/projects/testing-redux-chess/webpack/bootstrap:851

  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }

checkDeferredModules
/home/standard/projects/testing-redux-chess/webpack/bootstrap:45

  42 | 	}
  43 | 	if(fulfilled) {
  44 | 		deferredModules.splice(i--, 1);
> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 | 	}
  47 | }
  48 | 

webpackJsonpCallback
/home/standard/projects/testing-redux-chess/webpack/bootstrap:32

  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 | 	// run deferred modules when all chunks ready
> 32 | 	return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 | 	var result;

(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:91
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

Display a chess timer in 'Play with a friend' mode

The start time should be read from state.mode.playfriend.jwt_decoded.min and displayed once the invitation has been accepted.

Display the game being played in PGN notation

See chesslablab/chess-server#3

Replace undoing illegal moves with highlighting possible moves

Fix the highlighting of squares when the board is flipped

If the board is flipped to the black side, then the highlighted squares won't be displayed correctly when clicking on a black piece as it is shown in the examples attached.

Fix the browsing through history in 'Play with a friend' mode

When going back to the previous position the chessboard will go back two moves instead, as shown in the images below.

Improve the display of the buttons

A new button group is intended to provide functionality such as 'Flip board', 'Download PGN' as well as a few more impressive features, so the SecondaryButtons component was added to the Chess component.

Probably a Material-UI Grid should be used now to create this layout.

Sync White with Black in playfriend mode

See chesslablab/chess-server#10

Hide the 'Connect' button

The chessboard should connect to the server automatically after loading.

Instead, display the 'Connect' button if the connection is lost -- or alternatively display an informative message asking the user to reload the page.

Fix bug happening when the two knights can occupy the same square

There's a bug that prevents a knight from moving to a square when the two knights can occupy that same square, as it is shown in the example attached.

This bug will require some fine tuning on the server. See chesslablab/php-chess#20

Fix the en passant capture

Display two chess timers instead of one

At this moment only one chess timer is being displayed, as it is shown in the image attached. However two chess timers should be displayed instead, one per player.

Add a Cancel button in the 'Invite a friend' dialog

There should be a button to allow cancelling the invitation to play a chess game.

Publish a demo on GitHub Pages

Implement 'Play a friend' functionality

Add some necessary options to the 'Invite a friend' dialog such as color and time, and send a request to the chess server accordingly to display the invitation link.

See https://github.com/programarivm/chess-server

Allow to initialize the Chess component with the given protocol: ws or wss

The prot property should be added to the props of the Chess component as shown in the examples below.

ws protocol:

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

const props = {
  server: {
    prot: 'ws',
    host: '127.0.0.1',
    port: '8080'
  }
};

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

wss protocol:

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

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

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

Wording cleanup

The following menu options should be renamed as it is described next.

• Create invitation to Create invite code
• Enter code to Enter invite code

Remove the square click event when browsing the history

At this moment the chessboard squares can be clicked when browsing the history, which seems quite confusing.

Also, the chessboard should be styled accordingly with CSS.

Highlighting possible moves after a piece is clicked

Disallow to make illegal moves while in check

At this moment, illegal moves can be made while in check as shown in the example below.

Send time to the chess server when inviting a friend to play

At this moment, the time selected by the user (10 minutes) is not attached to the /start playfriend b command as shown in the following example. This issue will probably require some fine-tuning on the server side too.

Add 'Play a friend' button

When clicking the button, a popup should be displayed showing the user a link to be shared with a friend.

For further information please visit:

• chesslablab/chess-server#1

• chesslablab/chess-server#3

Use the optional chaining operator whenever possible

Make the chessboard responsive for mobile devices

At this moment the demo is not being displayed properly on mobile devices.

Remove unused constants in utils/Pgn.js

Write a few more tests

For further information, please visit:

• How to Test a Local React NPM Package With Ease
• TDDing a React App With Jest the Easy Way
• How to Test React Components With Joy
• My First Integration Test in a Redux Hooked App

Sync the chess timer in 'Play with a friend' mode

At this moment a timer is just being displayed, however it should also be synced.

Remove the initialization of the chessboard with no chess server

After all it won't make a lot of sense to use this chessboard with no chess server.

if statements like these ones should be removed:

if (props.server) {
  ... 
}

See chesslablab/chess-server#2

Display an informative message when the chess game is over

A message similar to the shown below should be displayed when the game is over.

• White wins
• Black wins

In this example, the time has expired and the message should be displayed.

Review JWT tokens in 'Play with a friend' mode

Atm the browser is not storing the JWT token, so no session management is actually being used.

So for example, until now time has been hard-coded throughout the entire app as shown in the following WebSocket message listener.

export const onPlayfriend = (data) => dispatch => {
  dispatch({
    type: createInvitationDialogActionTypes.CREATE_CODE,
    payload: {
      color: data['/start'].color,
      time: 10, // TODO
      code: data['/start'].hash
    }
  });
};

Session tokens should be reviewed.

Secure the WebSocket connections

Now that a sandbox chess server has been setup for testing purposes, it seems as if the WebSocket connections should be secured in order for this demo to run without security issues.

Chrome:

Mixed Content: The page at 'https://programarivm.com/demo-redux-chess/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://3.121.169.246:8080/'. This request has been blocked; this endpoint must be available over WSS.

Firefox:

Uncaught (in promise) DOMException: The operation is insecure.

See chesslablab/chess-server#2

Add a button that will allow to flip the board

Install and set up Enzyme to allow testing components

Also, a simple test should be written and run in order to test the framework set up.

For further information please visit:

• Using enzyme with Jest

Fix the warnings thrown when running the 'is rendered' test in Chess.test.js

Even though the test pass in __tests__/components/Chess.test.js, the following warnings are displayed when running npm test

 PASS  src/__tests__/utils/Ascii.test.js
 PASS  src/__tests__/utils/Piece.test.js
 PASS  src/__tests__/components/Chess.test.js
  ● Console

    console.error
      Warning: Failed prop type: Invalid prop `variant` of value `text` supplied to `ForwardRef(Menu)`, expected one of ["menu","selectedMenu"].
          at Menu (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Menu/Menu.js:67:32)
          at WithStyles(ForwardRef(Menu)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at div
          at ButtonGroup (/home/standard/projects/redux-chess/node_modules/@material-ui/core/ButtonGroup/ButtonGroup.js:207:24)
          at WithStyles(ForwardRef(ButtonGroup)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at Settings (/home/standard/projects/redux-chess/src/components/Buttons.js:14:20)
          at Provider (/home/standard/projects/redux-chess/node_modules/react-redux/lib/components/Provider.js:21:20)
          at Chess (/home/standard/projects/redux-chess/src/components/Chess.js:12:17)
          at WrapperComponent (/home/standard/projects/redux-chess/node_modules/enzyme-adapter-utils/src/createMountWrapper.jsx:49:26)

      at printWarning (node_modules/react/cjs/react.development.js:220:30)
      at error (node_modules/react/cjs/react.development.js:196:5)
      at checkPropTypes (node_modules/react/cjs/react.development.js:1935:11)
      at validatePropTypes (node_modules/react/cjs/react.development.js:2136:7)
      at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:2240:5)
      at WithStyles(ForwardRef(Menu)) (node_modules/@material-ui/styles/withStyles/withStyles.js:97:42)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
      at updateForwardRef (node_modules/react-dom/cjs/react-dom.development.js:17044:20)

    console.error
      Warning: Failed prop type: Invalid prop `variant` of value `text` supplied to `ForwardRef(MenuList)`, expected one of ["menu","selectedMenu"].
          at MenuList (/home/standard/projects/redux-chess/node_modules/@material-ui/core/MenuList/MenuList.js:117:23)
          at Menu (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Menu/Menu.js:67:32)
          at WithStyles(ForwardRef(Menu)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at div
          at ButtonGroup (/home/standard/projects/redux-chess/node_modules/@material-ui/core/ButtonGroup/ButtonGroup.js:207:24)
          at WithStyles(ForwardRef(ButtonGroup)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at Settings (/home/standard/projects/redux-chess/src/components/Buttons.js:14:20)
          at Provider (/home/standard/projects/redux-chess/node_modules/react-redux/lib/components/Provider.js:21:20)
          at Chess (/home/standard/projects/redux-chess/src/components/Chess.js:12:17)
          at WrapperComponent (/home/standard/projects/redux-chess/node_modules/enzyme-adapter-utils/src/createMountWrapper.jsx:49:26)

      at printWarning (node_modules/react/cjs/react.development.js:220:30)
      at error (node_modules/react/cjs/react.development.js:196:5)
      at checkPropTypes (node_modules/react/cjs/react.development.js:1935:11)
      at validatePropTypes (node_modules/react/cjs/react.development.js:2136:7)
      at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:2240:5)
      at Menu (node_modules/@material-ui/core/Menu/Menu.js:182:33)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
      at updateForwardRef (node_modules/react-dom/cjs/react-dom.development.js:17044:20)

    console.error
      Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?
          at span
          at div
          at div
          at div
          at div
          at Board (/home/standard/projects/redux-chess/src/components/Board.js:13:17)
          at Provider (/home/standard/projects/redux-chess/node_modules/react-redux/lib/components/Provider.js:21:20)
          at Chess (/home/standard/projects/redux-chess/src/components/Chess.js:12:17)
          at WrapperComponent (/home/standard/projects/redux-chess/node_modules/enzyme-adapter-utils/src/createMountWrapper.jsx:49:26)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:3505:9)
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:3559:21)
      at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:3583:3)
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:8765:5)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:9041:5)
      at finalizeInitialChildren (node_modules/react-dom/cjs/react-dom.development.js:10201:3)

    console.error
      Warning: React does not recognize the `disableElevation` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disableelevation` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
          at div
          at Portal (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Portal/Portal.js:39:24)
          at Modal (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Modal/Modal.js:94:36)
          at Popover (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Popover/Popover.js:118:22)
          at WithStyles(ForwardRef(Popover)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at Menu (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Menu/Menu.js:67:32)
          at WithStyles(ForwardRef(Menu)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at div
          at ButtonGroup (/home/standard/projects/redux-chess/node_modules/@material-ui/core/ButtonGroup/ButtonGroup.js:207:24)
          at WithStyles(ForwardRef(ButtonGroup)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at Settings (/home/standard/projects/redux-chess/src/components/Buttons.js:14:20)
          at Provider (/home/standard/projects/redux-chess/node_modules/react-redux/lib/components/Provider.js:21:20)
          at Chess (/home/standard/projects/redux-chess/src/components/Chess.js:12:17)
          at WrapperComponent (/home/standard/projects/redux-chess/node_modules/enzyme-adapter-utils/src/createMountWrapper.jsx:49:26)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:3513:7)
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:3559:21)
      at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:3583:3)
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:8765:5)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:9041:5)
      at finalizeInitialChildren (node_modules/react-dom/cjs/react-dom.development.js:10201:3)

    console.error
      Warning: React does not recognize the `disableFocusRipple` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disablefocusripple` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
          at div
          at Portal (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Portal/Portal.js:39:24)
          at Modal (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Modal/Modal.js:94:36)
          at Popover (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Popover/Popover.js:118:22)
          at WithStyles(ForwardRef(Popover)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at Menu (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Menu/Menu.js:67:32)
          at WithStyles(ForwardRef(Menu)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at div
          at ButtonGroup (/home/standard/projects/redux-chess/node_modules/@material-ui/core/ButtonGroup/ButtonGroup.js:207:24)
          at WithStyles(ForwardRef(ButtonGroup)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at Settings (/home/standard/projects/redux-chess/src/components/Buttons.js:14:20)
          at Provider (/home/standard/projects/redux-chess/node_modules/react-redux/lib/components/Provider.js:21:20)
          at Chess (/home/standard/projects/redux-chess/src/components/Chess.js:12:17)
          at WrapperComponent (/home/standard/projects/redux-chess/node_modules/enzyme-adapter-utils/src/createMountWrapper.jsx:49:26)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:3513:7)
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:3559:21)
      at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:3583:3)
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:8765:5)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:9041:5)
      at finalizeInitialChildren (node_modules/react-dom/cjs/react-dom.development.js:10201:3)

    console.error
      Warning: React does not recognize the `disableRipple` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disableripple` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
          at div
          at Portal (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Portal/Portal.js:39:24)
          at Modal (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Modal/Modal.js:94:36)
          at Popover (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Popover/Popover.js:118:22)
          at WithStyles(ForwardRef(Popover)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at Menu (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Menu/Menu.js:67:32)
          at WithStyles(ForwardRef(Menu)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at div
          at ButtonGroup (/home/standard/projects/redux-chess/node_modules/@material-ui/core/ButtonGroup/ButtonGroup.js:207:24)
          at WithStyles(ForwardRef(ButtonGroup)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at Settings (/home/standard/projects/redux-chess/src/components/Buttons.js:14:20)
          at Provider (/home/standard/projects/redux-chess/node_modules/react-redux/lib/components/Provider.js:21:20)
          at Chess (/home/standard/projects/redux-chess/src/components/Chess.js:12:17)
          at WrapperComponent (/home/standard/projects/redux-chess/node_modules/enzyme-adapter-utils/src/createMountWrapper.jsx:49:26)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:3513:7)
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:3559:21)
      at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:3583:3)
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:8765:5)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:9041:5)
      at finalizeInitialChildren (node_modules/react-dom/cjs/react-dom.development.js:10201:3)

    console.error
      Warning: React does not recognize the `fullWidth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fullwidth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
          at div
          at Portal (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Portal/Portal.js:39:24)
          at Modal (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Modal/Modal.js:94:36)
          at Popover (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Popover/Popover.js:118:22)
          at WithStyles(ForwardRef(Popover)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at Menu (/home/standard/projects/redux-chess/node_modules/@material-ui/core/Menu/Menu.js:67:32)
          at WithStyles(ForwardRef(Menu)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at div
          at ButtonGroup (/home/standard/projects/redux-chess/node_modules/@material-ui/core/ButtonGroup/ButtonGroup.js:207:24)
          at WithStyles(ForwardRef(ButtonGroup)) (/home/standard/projects/redux-chess/node_modules/@material-ui/styles/withStyles/withStyles.js:67:31)
          at Settings (/home/standard/projects/redux-chess/src/components/Buttons.js:14:20)
          at Provider (/home/standard/projects/redux-chess/node_modules/react-redux/lib/components/Provider.js:21:20)
          at Chess (/home/standard/projects/redux-chess/src/components/Chess.js:12:17)
          at WrapperComponent (/home/standard/projects/redux-chess/node_modules/enzyme-adapter-utils/src/createMountWrapper.jsx:49:26)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:3513:7)
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:3559:21)
      at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:3583:3)
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:8765:5)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:9041:5)
      at finalizeInitialChildren (node_modules/react-dom/cjs/react-dom.development.js:10201:3)


Test Suites: 3 passed, 3 total
Tests:       20 passed, 20 total
Snapshots:   0 total
Time:        5.249 s
Ran all test suites.

Watch Usage: Press w to show more.

Remove the square click event if picking an opponent's piece

At this moment the opponent's pieces can be clicked in 'Play with a friend' mode which seems quite confusing, as it is shown in the image attached. Instead, each player should be allowed to click on their own pieces only.

Split the Invite a friend form into two separate forms

At this moment, the 'Invite a friend' form is displayed as described next.

However, the 'Invite a friend' button should provide with two different options instead:

• Create invitation
• Accept invitation

Close the existing WSS connection when connecting to the server

The existing WSS connection, if any, should be closed when selecting the Connect option from the Settings menu in order to open a new one. Please note that at this moment, a web browser can open multiple connections as it is shown in the example attached.

Here is how a storage/pchess.log file would look like in the chess server when a browser is opening multiple connections.

...
[2021-07-30T09:23:48.140937+00:00] pchess.net.INFO: New connection {"id":309} []
[2021-07-30T09:23:48.314296+00:00] pchess.net.INFO: Sent message {"id":309,"res":{"/start":{"mode":"analysis"}}} []
[2021-07-30T09:23:50.282301+00:00] pchess.net.INFO: New connection {"id":313} []
[2021-07-30T09:23:50.442348+00:00] pchess.net.INFO: Sent message {"id":313,"res":{"/start":{"mode":"analysis"}}} []
[2021-07-30T09:24:58.076394+00:00] pchess.net.INFO: New connection {"id":317} []
[2021-07-30T09:24:58.267724+00:00] pchess.net.INFO: Sent message {"id":317,"res":{"/start":{"mode":"analysis"}}} []
[2021-07-30T09:24:59.943299+00:00] pchess.net.INFO: New connection {"id":321} []
[2021-07-30T09:25:00.107025+00:00] pchess.net.INFO: Sent message {"id":321,"res":{"/start":{"mode":"analysis"}}} []
[2021-07-30T09:25:01.498512+00:00] pchess.net.INFO: New connection {"id":325} []
[2021-07-30T09:25:01.660591+00:00] pchess.net.INFO: Sent message {"id":325,"res":{"/start":{"mode":"analysis"}}} []
[2021-07-30T09:25:02.934983+00:00] pchess.net.INFO: New connection {"id":329} []
[2021-07-30T09:25:03.093671+00:00] pchess.net.INFO: Sent message {"id":329,"res":{"/start":{"mode":"analysis"}}} []
[2021-07-30T09:25:44.930207+00:00] pchess.net.INFO: New connection {"id":333} []
[2021-07-30T09:25:45.118214+00:00] pchess.net.INFO: Sent message {"id":333,"res":{"/start":{"mode":"analysis"}}} []
[2021-07-30T09:25:46.847560+00:00] pchess.net.INFO: New connection {"id":337} []
[2021-07-30T09:25:47.009816+00:00] pchess.net.INFO: Sent message {"id":337,"res":{"/start":{"mode":"analysis"}}} []
[2021-07-30T09:26:00.435722+00:00] pchess.net.INFO: Closed connection {"id":325} []
[2021-07-30T09:26:00.436104+00:00] pchess.net.INFO: Closed connection {"id":317} []
[2021-07-30T09:26:00.436279+00:00] pchess.net.INFO: Closed connection {"id":329} []
[2021-07-30T09:26:00.436602+00:00] pchess.net.INFO: Closed connection {"id":333} []
[2021-07-30T09:26:00.436903+00:00] pchess.net.INFO: Closed connection {"id":153} []
[2021-07-30T09:26:00.437068+00:00] pchess.net.INFO: Closed connection {"id":321} []
[2021-07-30T09:26:00.437325+00:00] pchess.net.INFO: Closed connection {"id":337} []

Highlight the square of the piece selected

Allow to deselect a piece already selected

At this moment a selected piece cannot be deselected, so players are forced to move the current piece that has been clicked on. Instead, players should be allowed to deselect the piece by clicking on it again.

Fix PGN disambiguation

After fixing this bug on the server, now all PGN moves look like disambiguated when displayed on the frontend, as it is shown in the image attached.

This would need some fine-tuning: 1.Ng1f3 Ng8f6 2.d3 d6 3.Nf3d2

See chesslablab/php-chess#22