React wrapper of Chessground
react-chessground is a react wrapper of the awesome Chessground
npm install --save react-chessground
import Chessground from 'react-chessground'
import 'react-chessground/dist/styles/chessground.css'
class Demo extends React.Component {
render () {
return <Chessground />
}
}
onMove
- function Function is called when user moves a piece to a new position. Receives two parameters:
from
- string Previous square positionto
- string New square positionrandomMove
- function Function is called when computer moves a piece to a new position. Contains two objects:
moves
- object Stores all valid movesmove
- object Generates a move chosen from moves
randomlypromotion
- function Provides choices for pawn's promotion. Receive one parameter:
e
- string Stores pieces user might want to choose upon promotionreset
- function Function is called when reset button clickedundo
- function Function is called when undo button clicked. Disabled when game is overReset: 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)
}
It's available to see more features in Chessground
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