Minimalistic Javascript implementation of a chess board UI.
It just provides an API to visualize a chess board. If you are after validating chess rules, consider using chess.js.
None! (doesn't require jQuery)
- Latest Chrome
- Latest Firefox
- Latest Safari
- PhoneGap
-
Include
chessboard.css
andchessboard.js
, and make sure thatchesspieces.png
is in the same location aschessboard.css
. -
Add a board element in your HTML, e.g.:
<div id="myBoard"></div>
-
Initialize the chess board:
var board = new ChessBoard('myBoard', options)
, whereoptions
is an object.
Defines the initial position on the board. Defaults to the initial chess position.
Defined the orientation of the board. Should be 'w'
or 'b'
. Defaults to 'w'
.
Whether the board will be resizable automatically on window resize. Defaults to true
.
Function that will be called when square is clicked. This function will have the following arguments:
clickedSquare
- The clicked square (e.g.'a4'
,'h7'
)selectedSquares
- Array of squares that were selected prior to click (e.g.[]
,['a7']
,['e2', 'e4']
)
Selects the given square by adding the 'selected'
class to it.
Does nothing if the given square was already selected.
board.selectSquare('e6');
Unselects the given square by removing the 'selected'
class from it.
Does nothing if the given square wasn't selected.
board.unselectSquare('e6');
Unselects all the selected squares by removing the 'selected'
class from them.
board.unselectAllSquares();
Sets the given position. fenString
must be in one of the following formats:
rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1
rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR
Presents a small dialog asking the user to choose a promotion piece (of a specified color, 'w'
or 'b'
). User has to click on a piece, and then on the "Promote" button, in order to close the dialog.
If a callback
function is specified, it is will be called once the dialog is closed, and will have the following argument:
shortPiece
- The selected piece in the following format:'q'
,'r'
,'n'
,'b'
. It can be useful when integrating with other libraries such as chess.js (see thepromotion
option inmove()
).
board.askPromotion('w', function(shortPiece) {
// Now we know which piece user selected.
});