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

promotion

Features

  • Display last move and check

chess

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

premove

It's available to see more features in Chessground

GitHub