ruilisi/react-chessground

React wrapper of Chessground

React Chessground

react-chessground is a react wrapper of the awesome Chessground

Installation

npm install --save react-chessground

Example

• An example of playing with random opponent is provided in example

Usage

import Chessground from 'react-chessground'
import 'react-chessground/dist/styles/chessground.css'

class Demo extends React.Component {
  render () {
    return <Chessground />
  }
}

Properties

• onMove - function Function is called when user moves a piece to a new position. Receives two parameters:
  • from - string Previous square position
  • to - string New square position
• randomMove - function Function is called when computer moves a piece to a new position. Contains two objects:
  • moves - object Stores all valid moves
  • move - object Generates a move chosen from moves randomly
• promotion - function Provides choices for pawn's promotion. Receive one parameter:
  • e - string Stores pieces user might want to choose upon promotion
• reset - function Function is called when reset button clicked
• undo - function Function is called when undo button clicked. Disabled when game is over

Reset: Reset the board to the initial starting position.

reset = () => {
    this.chess.reset()
    this.setState({ fen: this.chess.fen() })
  }

Undo: Take back the last half-move.

undo = () => {
    this.chess.undo()
    this.setState({ fen: this.chess.fen() })
  }

Promotion: Provides choices for pawn's promotion.

promotion(e) {
   const { chess } = this
   const from = this.pendingMove[0]
   const to = this.pendingMove[1]
   chess.move({ from, to, promotion: e })
   this.setState({
     fen: chess.fen(),
     lastMove: [from, to],
     selectVisible: false
   })
   setTimeout(this.randomMove, 500)
 }

Features

• Display last move and check

• Display move destinations, and premove destinations (hover effects possible)

It's available to see more features in Chessground

Documentation

Options of Chessground are mapped to properties of react-chessground

You can refer to documentation of Chessground for detailed configuration

• Config documented types
• Config default values

An example of playing with random opponent is provided in example

react-chessground's Issues

Clearing autoShapes by passing an empty array not working

The issue is when setting autoShapes to an empty array like so after it is set to an array of length > 0, the change is not reflected in the underlying chessground module

The crux of the problem is the merge function in config.ts in the chessground package merges the previous state and the current config (props). for const key in extend where extend is an empty array does nothing

I was able to hack around this problem by patching the render function in react-chessground/chessground.js to include

if (this.cg && this.props.drawable && this.props.drawable.autoShapes) {
  this.cg.setAutoShapes(this.props.drawable.autoShapes);
}

I think there is probably a better way to fix this, but I am not that familiar with React. I think cg.setAutoShapes needs to be leveraged somehow

Promotion handling

How to render the promotion prompt and handle promotion/cancellation events?

Board and piece options

Hello everyone!

Would it be of interest to change the board color or the chess pieces set?
I was thinking of some extra props for this component, like <Chessground board="green" pieces="alpha" />

I can write a PR if the answer is yes 👍

Copy default theme and assets to the chessground

Hey,

I've recently started working with Chessground and I've missed the default theme and assets to get it working.

It would be very useful to have your defaults there as well.

I want to check with you if it's OK to copy your assets there?

Thanks

CSS doesn't apply to chessboard

I have to use the package.lock.json file from the example in order to get the display to work. If you delete it and reinstall the dependencies, the chessboard won't show up.

Exception when using latest version of chessground

This exception started happening with version 7.8.0 of chessground. For a temporary fix, I have hardcoded my yarn.lock file to version [email protected].

Most likely cased by this change. lichess-org/chessground@c190c18#diff-a2fcebf1963fad0da40a844a8d67da83R48

Creating an issue on react-chessground because I am not sure if the root cause is the react component not sending some info to the chessground component.

Thanks.

PS: this is reproducible in the demos if you try to rebuild the demo projects by deleting yarn.lock. I tried it with the example/demo project.

TypeError: _a.get is not a function
computeSquareClasses
src/render.ts:221
render
src/render.ts:16
  13 | if (isPieceNode(el)) {
  14 |     pieceAtKey = pieces.get(k);
  15 |     anim = anims.get(k);
> 16 |     fading = fadings.get(k);
     | ^  17 |     elPieceName = el.cgPiece;
  18 |     if (el.cgDragging && (!curDrag || curDrag.orig !== k)) {
  19 |         el.classList.remove('dragging');
View compiled
redrawNow
src/chessground.ts:25
  22 |     bounds.clear();
  23 |     render_1.updateBounds(state);
  24 |     if (elements.svg)
> 25 |         svg.renderSvg(state, elements.svg);
     | ^  26 | };
  27 | state.dom = {
  28 |     elements,

Difficulty on start up

I first want to say I love the project and the work you did here and believe that it can be useful for many projects. The one concern I have is launching the project for new coders and people new to the repo. I honestly just came across the repo today and spent a while trying to get the board to display properly. The main issue is that the class names are all wrapped in a div with a class name .merida, meaning that if you don't add the Chessground React compoenent within a div with that class name, the pieces won't render.

I am unsure of the reason for this, maybe there is a good reason or not, but I would either change the documentation or change the CSS provided. Either way, if this is something that interests you I have no problem doing it myself and created a merge request.

Thanks again for the great project!

Coordinates won't update until position updates

I have a checkbox that toggles whether or not coordinates are shown, but the coordinates only update after a new position is loaded. Is there any way to force the board to update when the coordinates boolean is toggled?

Demo example doesn't work

I thought that was mistake in my code, but then I try to run example from this repository and got same error, problem with "movable" props, something wrong with dests key

Example using react hooks

Can this be implemented using react-hooks and can the moves be transmitted using socket.io ?

coordinates: false doesn't work

It's not possible to remove coordinates with Props.
And there is also question: how to put coordinates inside the board? (pic from lichess.org)

Typescript support

any plans to add typescript support?

I can do a PR too if needed.

Question on registering move in logic

Hello, I was wondering if someone can speak to onMove in this snippet is being invoked instead of called with parenthesis. I wrote my own validation for this and not understanding how the move that is played on chessground gets passed into the validator such as () => onMove(from, to, promoteTo), I see this example is using chess.js. Let me know if I can clarify anything. Thanks for your time.

Ryan

<Chessground
  width="38vw"
  height="38vw"
  turnColor={turnColor()}
  movable={calcMovable()}
  lastMove={lastMove}
  fen={fen}
  onMove={onMove}
  style={{ margin: "auto" }}
/>

Large amount of dependencies

+ [email protected]
added 1752 packages from 643 contributors and audited 2055 packages in 362.916s

Why are there so many packages installed?

Publish 1.6.0?

package.json has had some dependency issues resolved, for instance, react-scripts isn't a dependency anymore.
See also: 57f6257

Can we publish v1.6.0 to npm now?

Package dependencies

Hello everyone!

I was browsing package.json and found some possible tweaks:

• move react-scripts to devDependencies (from dependencies)
• move react to peerDependencies (from devDependencies)
• add prop-types (used in the project) to peerDependencies

What do you think? I've tested in on my machine and it did not break the build process.
I can write a PR with these changes, if you think they are all right.

Chessboard doesn't render at all.

Using a default, unejected, CRA project, I'm unable to get this to render. To reproduce simply get a CRA project and copy/paste the code under installation. My App.js:

import Chessground from 'react-chessground'
import 'react-chessground/dist/styles/chessground.css'
import React from 'react';

export default class App extends React.Component {
  render () {
    return <Chessground />
  }
}

my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

This is how the page looks like:

TypeError: _a.get is not a function

Cannot read property 'color' of undefined

Hi,

I'm tried to use the component with typescript, so I created my own typings but got the error :

render.js?0b07:formatted:166 Uncaught TypeError: Cannot read property 'color' of undefined
at pieceNameOf (render.js?0b07:formatted:166)
at Object.render [as default] (render.js?0b07:formatted:107)
at redrawNow (chessground.js?0a8e:17)
at redrawAll (chessground.js?0a8e:30)
at Chessground (chessground.js?0a8e:36)
at Chessground.componentDidMount (chessground.js?e2a5:43)
at commitLifeCycles (react-dom.development.js:19949)
at commitLayoutEffects (react-dom.development.js:22938)
at HTMLUnknownElement.callCallback (react-dom.development.js:182)
at Object.invokeGuardedCallbackDev (react-dom.development.js:231)

I have the same error when I try the demo without typescript or when i just use the component without any params.

npm package broken!?

Hi,
when I run npm install --save react-chessground, the folder node_modules/react-chessground does not contain the code. Refer to the attached screenshot. I assume that the published npm package is somehow broken.

Using in yarn react project causes pre-flight check warning.

I'm given a long list of things to do when trying to start a fresh app and add react-chessground to it, none of which resolve my issue. I've found that removing this project as a dependency fixes the problem. If I run yarn start, this error prints:

To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
   This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if C:\Users\null\repos\yarn-cw2\chess-wager-yarn-v2\node_modules\babel-jest is outside your project directory.
   For example, you might have accidentally installed something in your home folder.

7. Try running npm ls babel-jest in your project folder.
   This will tell you which other package (apart from the expected react-scripts) installed babel-jest.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

When I run npm ls babel-jest, I see the following.

├─┬ [email protected]
│ └─┬ [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ ├── [email protected] deduped
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
├── [email protected]
└─┬ [email protected]
└─┬ [email protected]
└─┬ [email protected]
└── [email protected]

I'm pretty sure the issue is just outdated dependencies.

Typescrit support

Can you please include typescript support (types declarations)?

Here's the index.d.ts declared in my project that worked well for your library.
index.d.ts.txt

Props might be missing.