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
`[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.

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'.

gmolaire/ngx-chess-board