3.0.0 • Published 5 months ago

ngx-chess-board v3.0.0

Weekly downloads
92
License
MIT
Repository
github
Last release
5 months ago

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

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.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()

InputTypeDescription
[size]numberSets size of the chess board (in pixels). Default value is 400. Size must be in range between 100-4000.
[lightTileColor]stringSets color of light tiles. Accepts predefined color names, RGB, HEX, HSL.
[darkTileColor]stringSets color of dark tiles. Accepts predefined color names, RGB, HEX, HSL.
[showCoords]booleanSets visibility of coordination bar. Default value is true
[sourcePointColor]stringSets background color for the source box from where the piece is moved.
[destinationPointColor]stringSets background color for the destination box where the piece is dropped.
[showLastMove]booleanSpecifies whether the last move should be highlighted or not.
[showLegalMoves]booleanSpecifies whether the legal moves should be highlighted or not.
[dragDisabled]booleanSpecifies whether piece dragging is disabled. Default value is false
[drawDisabled]booleanSpecifies whether drawing with right mouse button is disabled. Default value is false
[lightDisabled]booleanSpecifies whether light pieces are disabled to move. Default value is false
[darkDisabled]booleanSpecifies whether dark pieces are disabled to move. Default value is false
[pieceIcons]PieceIconInputSets custom piece icons. Accepts SVG, IMG. Default the ASCII icons are used.
[freeMode]booleanSets 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]booleanSpecifies whether active piece clicked has to be highlighted. Default value is true
[showPossibleCaptures]booleanSpecifies whether possible captures have to be highlighted. Default value is true

Outputs

NameTypeDescription
(moveChange)EventEmitter\Dispatch event when piece has moved

NgxChessBoardView methods

MethodReturn typeDescription
reset()voidResets specified chess game
reverse()voidReverse specified chess board
undo()voidUndo the last move
getMoveHistory()JSONReturns array in JSON format which contains information about every move
setFEN(fen: string)voidAllows to import specified board position by FEN
getFEN()stringReturns current board FEN position
move(coords: string)voidMakes move by specified coords. The coords parameter contains source and destination position e.g. 'd2d4'.
addPiece(pieceTypeInput: PieceTypeInput, colorInput: ColorInput, coords: string)voidAdds 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)voidImports board position in PGN notation
getPGN()stringReturns current board position in PGN notation
3.0.0

5 months ago

2.2.3

2 years ago

2.2.2

2 years ago

2.2.1

2 years ago

2.2.0

2 years ago

2.1.16

2 years ago

2.1.17

2 years ago

2.1.18

2 years ago

2.1.15

3 years ago

2.1.14

3 years ago

2.1.13

3 years ago

2.1.12

3 years ago

2.1.11

3 years ago

2.1.9

3 years ago

2.1.10

3 years ago

2.1.4

3 years ago

2.1.6

3 years ago

2.1.5

3 years ago

2.1.8

3 years ago

2.1.7

3 years ago

2.1.3

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

2.0.9

3 years ago

2.0.7

3 years ago

2.0.6

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.3

3 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.9.7

4 years ago

1.9.6

4 years ago

1.9.5

4 years ago

1.9.1

4 years ago

1.9.3

4 years ago

1.9.2

4 years ago

1.9.0

4 years ago

1.8.5

4 years ago

1.8.4

4 years ago

1.8.3

4 years ago

1.8.1

4 years ago

1.8.0

4 years ago

1.7.8

4 years ago

1.7.7

4 years ago

1.7.6

4 years ago

1.7.5

4 years ago

1.7.3

4 years ago

1.7.2

4 years ago

1.7.4

4 years ago

1.7.1

4 years ago

1.6.3

4 years ago

1.6.2

4 years ago

1.6.1

4 years ago

1.6.0

4 years ago

1.5.2

4 years ago

1.5.1

4 years ago

1.5.0

4 years ago

1.4.0

4 years ago

1.3.2

4 years ago

1.2.0

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

0.0.0

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

0.0.1

4 years ago