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