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/assets/chessground.css'
import 'react-chessground/dist/assets/theme.css' // Or your own chess theme
 
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
myColor - string Color for user.(default: white)

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() })
  }

userPlaytime: The total amount of time a player in current game.

userPlaytime = setInterval(() => {
   const { isPaused, time } = this.state
   let min = Math.floor(time / 60)
   let sec = time - min * 60
   if (min < 10) {
     min = `0${min}`
   }
   if (sec < 10) {
     sec = `0${sec}`
   }
   const message = `${min}:${sec}`
   if (!isPaused && time > 0) {
     this.setState({ time: time - 1 })
   }
   this.setState({ mytime: message })
   return message
 }, 1000)

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)
 }

History: Returns a list containing the moves of the current game.

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

An example of playing with random opponent is provided in example