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
    ...
   ],
   ...
})
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