Skip to content

Latest commit

 

History

History
123 lines (97 loc) · 4.61 KB

README.md

File metadata and controls

123 lines (97 loc) · 4.61 KB
Raw

ngx-chess-board

npm CircleCI

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

alt scr alt scr

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