A chess board web component
Usage
<loloof64-chessboard
size="300"
background="crimson"
coordinates_color="yellow"
white_cell_color="navajowhite"
black_cell_color="peru"
reversed="true"
origin_cell_color="red"
target_cell_color="green"
dnd_cross_color="purple"
promotion_dialog_title="Promotion piece"
white_player_human="true"
black_player_human="false"
move_highlight_color="red"
></loloof64-chessboard>| Name | Purpose | Type | Default |
|---|---|---|---|
| size | Common size (width/height) of the board in pixels | number | 100.0 |
| background | Background color of the board outside zone | string | #124589 |
| coordinatesColor | Color of the coordinates around the board | string | DarkOrange |
| whiteCellColor | Background color of the white cells of the board | string | GoldenRod |
| blackCellColor | Background color of the black cells of the board | string | brown |
| reversed | Whether black side is on top or not | boolean | false |
| origin_cell_color | Color of the origin cell of the Drag and Drop | string | crimson |
| target_cell_color | Color of the current target cell of the Drag and Drop | string | ForestGreen |
| dnd_cross_color | Color of the Drag and Drop cross indicator | string | DimGrey |
| promotion_dialog_title | Title of the promotion selection dialog | string | Select the promotion piece |
| white_player_human | True if the white player is human, false for external (1) | boolean | true |
| black_player_human | True if the black player is human, false for external (1) | boolean | true |
| move_highlight_color | Color of the last move highlight arrow | string | CadetBlue |
(1) External player means that, instead of playing its move with interaction on the board, call the method playMove in order to commit its move. A simple use case would be to let an engine play.
- isWhiteTurn : Boolean. true if it is White turn, false otherwise.
- currentPosition: String. Returns the current position in Forsyth-Edwards Notation.
- toggleSide() : Toggle the reversed state of the board: that is "Is black side at top ?"
- playMove({ startCellFile, startCellRank, endCellFile, endCellRank, promotion = 'q', }): Tries to play the given move on the component, only if the current player is defined as an external user. Returns a Promise. All coordinates, integers, start from 0 (file 0 = 'A', rank 0 = '1'). Valid promotion values are 'q', 'r', 'b' and 'n'.
- newGame(startPositionFen): Starts a new game with the given position in Forsyth-Edwards Notation. If the startPositionFen string is not given, will use the default chess start position.
- checkmate : Informs that a checkmate has just happened on the board. The property
detail.whiteTurnBeforeMoveof the event tells if the side that checkmated were White or Black. - stalemate : Informs that a stalemate has just happended on the board. No additional property.
- perpetual_draw: Informs that a 3-fold repetitions draw has just happened on the board. No additional property.
- missing_material_draw : Informs that a draw by missing material has just happened on the board. No additional property.
- fifty_moves_draw: Informs that a draw by the 50 moves rule has just happened on the board. No additional property.
You can build with the command (in the terminal) $ npm run build from the root of the project. Result will be in the dist folder.
But don't forget first to install all dependencies, with NodeJS : npm install.
Original pieces vectors definitions from CBurnett and found on Wikimedia commons.
Using ChessJS library, which is bundled in the produced script.