ngx-chess-board

ngx-chess-board is a project which allows to add chess game for two players on your site.

Instalation

npm i ngx-chess-board

Demo

See demo version

Screenshots

Use example

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

   ...

API

@Inputs()

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 [sourcePointColor] | string | Sets background color for the source box from where the piece is moved. [destinationPointColor] | string | Sets background color for the destination box where the piece is dropped. [showLastMove] | boolean | Specifies whether the last move should be highlighted or not. [showLegalMoves] | boolean | Specifies whether the legal moves should be highlighted or not. [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. [freeMode] | boolean | Sets the board in free mode. In this mode pieces can be moved freely, even to tiles that aren't in possible moves or possible captures. [showActivePiece] | boolean | Specifies whether active piece clicked has to be highlighted. Default value is true [showPossibleCaptures] | boolean | Specifies whether possible captures have to be highlighted. Default value is true

Outputs

Name | Type | Description
| :---: | :---: | :---: | (moveChange) | EventEmitter<any> | Dispatch event when piece has moved

NgxChessBoardView methods

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'. addPiece(pieceTypeInput: PieceTypeInput, colorInput: ColorInput, coords: string) | void | Adds new piece to the board at specified square, e.g. 'd4'. Left click on a piece with control removes piece. Free mode must be enabled first. setPGN(coords:string) | void | Imports board position in PGN notation getPGN() | string | Returns current board position in PGN notation