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

• Config documented types
• Config default values

An example of playing with random opponent is provided in example