ngx-chess-board is a project which allows to add chess game for two players on your site.
npm i ngx-chess-board
See demo version
ngx-chess-board
exports following components:
NgxChessBoardModule
NgxChessBoardService
NgxChessBoardView
To start, you have to import the NgxChessBoardModule
:
import { NgxChessBoardModule } from "ngx-chess-board";
...
@NgModule({
...
imports: [
...
NgxChessBoardModule.forRoot()
...
],
...
})
export class AppModule { }
Next, add following tag in your component's view to render the chess board:
<ngx-chess-board></ngx-chess-board>
Then you can inject NgxChessBoardService into your component:
import {NgxChessBoardService} from 'ngx-chess-board';
...
constructor(private ngxChessBoardService: NgxChessBoardService) { }
You can add reference to NgxChessBoardView
to interact with specified chess board:
HTML file:
<ngx-chess-board #board></ngx-chess-board>
.ts file:
import {NgxChessBoardView} from 'ngx-chess-board';
...
@ViewChild('board', {static: false}) board: NgxChessBoardView;
...
reset() {
this.board.reset();
}
...
Input | Type | Description |
---|---|---|
[size] |
number | Sets size of the chess board (in pixels). Default value is 400. Size must be in range between 100-4000. |
[lightTileColor] |
string | Sets color of light tiles. Accepts predefined color names, RGB, HEX, HSL. |
[darkTileColor] |
string | Sets color of dark tiles. Accepts predefined color names, RGB, HEX, HSL. |
[showCoords] |
boolean | Sets visibility of coordination bar. Default value is true |
[dragDisabled] |
boolean | Specifies whether piece dragging is disabled. Default value is false |
[drawDisabled] |
boolean | Specifies whether drawing with right mouse button is disabled. Default value is false |
[lightDisabled] |
boolean | Specifies whether light pieces are disabled to move. Default value is false |
[darkDisabled] |
boolean | Specifies whether dark pieces are disabled to move. Default value is false |
[pieceIcons] |
PieceIconInput | Sets custom piece icons. Accepts SVG, IMG. Default the ASCII icons are used. |
Name | Type | Description |
---|---|---|
(moveChange) |
EventEmitter<any> | Dispatch event when piece has moved |
Method | Return type | Description |
---|---|---|
reset() | void | Resets specified chess game |
reverse() | void | Reverse specified chess board |
undo() | void | Undo the last move |
getMoveHistory() | JSON | Returns array in JSON format which contains information about every move |
setFEN(fen: string) | void | Allows to import specified board position by FEN |
getFEN() | string | Returns current board FEN position |
move(coords: string) | void | Makes move by specified coords. The coords parameter contains source and destination position e.g. 'd2d4'. |