jniemann66 / react-chessdiagram

Chess Diagram React Component

react-chessdiagram

Chess Diagram React Component

LIVE DEMO: http://chessdiagram.juddn.com updated 24-apr-2017

Knight's Tour Demo: http://knightstour.juddn.com

NPM: https://www.npmjs.com/package/react-chessdiagram

A react component that can display chess positions from FEN strings, PGN Strings, or a form of algebraic notation (P@a5 R@h8 etc)

It is almost entirely stateless. (some state is maintained to keep track of mouse / touch events, and an internal list of moves when displaying a game)

A callback facility is provided to report dragged pieces back to the host application.

API documentation: ./api.md

sample usage

import React, { Component } from 'react';
import ReactDOM from 'react-dom';	
import Chessdiagram from 'react-chessdiagram';

const lightSquareColor = '#2492FF'; // light blue
const darkSquareColor = '#005EBB'; // dark blue
const currentPosition =  'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'; // starting position
const flip = false;
const squareSize = 30;

ReactDOM.render(
	<Chessdiagram flip={flip} fen={currentPosition} squareSize={squareSize} 
    	lightSquareColor={lightSquareColor} darkSquareColor={darkSquareColor} onMovePiece={onMovePiece}/>,
	document.getElementById('root')
);

function onMovePiece(piece, fromSquare, toSquare) {
	let message = 'You moved ' + piece + fromSquare + ' to ' + toSquare + ' !';
	console.log(message);
}

build commands:

dev: npm run dev - (output to ./build/dev.chessdiagram.js and served on http://localhost:8080 by dev server)

dist: npm run build - (output to ./build/dist.chessdiagram.js)

lint: npm run lint - runs ESLint

generate API documentation: npm run generate-docs

testing: npm test (testing is implemented with Jest, Enzyme, and sinon)

to-do:

• add a prop for optionally hiding labels etc.
• show side to move, castling rights and other info
• show arrows etc
• handle remaining 5 FEN fields etc

recently completed:

• Added PGN viewer to show games (Thanks Stephen !). (Refer to API Documentation for details.)
• Ability to define custom piece types and their corresponding FEN characters
• Test suite
• deal with Scrolling properly !
• publish to npm (Yippee - it's up there !!)
• auto API-doc (api.md)
• webpack setup for distributing as component with demo.

Contributors:

Judd Niemann

Stephen Van Gordon

Graham Kaemmer

react-chessdiagram's Issues

Handling pawn promotion

The library at present does not handle pawn promotions. I'm planning to put up a PR for this. What would be an ideal way to provide APIs for this? My suggestion would be,

1 - Update onMovePiece to also pass the promotedToPiece param in case of promotion.
2 - Add a promotion prompt as soon as we recognize white/black pawn on 8/1 rank. (not API but displayed on the board)
3 - Cancel the promotion prompt if new props come in or if the user clicks outside.

A good start?

error in start position of courier chess

pawn on l4 should be white, not black.

react warning

got following error when rendering Chessdiagram

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Demo: change from chess to draughts not initializing correctly

To replicate this issue,

1.Change Game Type from Chess to Draughts
2.Change Game Type back to Chess
3.Change Game Type from Chess to Draughts again.

Attempting to call onMovePiece callback even when it isn't defined

In chessdiagram.js, the introduction 'allowMoves' was a good idea.
However, there should be an additional safeguard against the case where allowMoves is true, but onMovePiece is undefined.

I propose the following change to Chessdiagram.js, line 64:

_onMovePiece(pieceType, from, to) {
	if (this.props.allowMoves && this.props.onMovePiece) {
		this.props.onMovePiece(pieceType, from, to);
	}
}

Positional notation (piece@square) broken

In the absence of fen and pgn props, chessdiagram should simply draw a blank board, or otherwise accept an array of piece@square values via the pieces prop.

However, internal movelist is being populated in the constructor (via the getFensFromPgn() function).

proposed fix (chessdiagram.js, starting line 38):

	        // If FEN is present, and it is an array, use it for moves
		// If FEN is present, and it is a string, make it the first element of the moves array.
		// If FEN is NOT present, and PGN is present, call getFensFromPgn() to generate an array of FENs 
		// If FEN is NOT present, and PGN is NOT present, make first element of moves array an empty string
		const moves = props.fen ?
			Array.isArray(props.fen) ? props.fen : [props.fen]
			: props.pgn ? props.getFensFromPgn(props.pgn) : '';

		// If there is a PGN, set currentMove to this.startMove, otherwise zero.	
		const currentMove = props.pgn ? this.startMove : 0;