jc-chess-board

chess-board

Installation

To install this library, run:

$ npm install chess-board-test --save

Consuming library

Import module in any Angular application AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { ChessBoardModule } from 'chess-board-test';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    ChessBoardModule
  ],
  providers: [],
  bootstrap: [ChessBoardComponent]
})
export class AppModule {}

Once module is imported, you can use it in your Angular application:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<chessBoardComponent #chessBoard [configurations] = "configurations" (boardResized)="resize()"></chessBoardComponent>

and then from your Angular AppComponent:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('chessBoard') chessBoard: ChessBoardComponent;

   configurations = {
    figureImageRenderer: (piece: string, position) => {
      return 'piece img url';
    },
    onMouseoverSquare: (sq) => {
      /* handling event */
    },
    onDragStart: (sours: string): boolean => {
      return true;
    },
    onDrop: (event) => {
      return false;
    }
  };

  render() {
    this.chessField.drawBoard();  
    this.chessField.highlightFillSquares(['a1', 'b3'], 'yellow');
    this.chessField.highlightStrokeSquares(['a2', 'b4'], 'green');
    this.chessField.drawPieces('r1bqkb1r/ppp1pppp/2n2n2/3p4/5PPP/7N/PPPPP3/RNBQKB1R');
  }

  move() {
    this.chessBoard.move('a2', 'a4');
  }

  clearHighlight() {
    this.chessField.clearFillHighlights();
    this.chessField.clearStrokeHighlights();
  }

  resize () {
    this.chessField.highlightFillSquares(['a1', 'b3'], 'yellow');
    this.chessField.highlightStrokeSquares(['a2', 'b4'], 'green');
  }

  ngAfterViewInit(): void {
    this.chessBoard.drawBoard();
  }


}

Module API:

• drawBoard() Draw board layout;

• move(startSquare, endSquare) Animated move from startSquare - 'a2' to endSquare - 'a4';

• highlightFillSquares(['a1', 'b3'], 'yellow') Highlight squares on board;

• highlightStrokeSquares(['a2', 'b4'], 'green'); Highlight squares on board

• clearFillHighlights() Remove all 'fill' highlights;

• clearStrokeHighlights() Remove all 'stroke' highlights;

Development

To generate all *.js, *.d.ts files:

$ npm run build

To lint all *.ts files:

$ npm run lint