Chesslang Board

Chesslang Board is a powerful, customizable chessboard component for your applications. It provides a wide range of properties for customization, including board size, colors, coordinates, orientation, and more.

Installation

npm i chesslang-board

Usage

Here is a basic usage example:

import { Chessboard } from "chesslang-board";
     <Chessboard
      fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
      mode="move"
      enableAssist={true}
      size={600} />

API

The Chessboard component accepts the following props:

| Property | Description | Type | Required | Default | | ------------------ | -------------------------------- | ------------------------------------------ | -------- | --------------- | | fen | Board fen | string | start | required | - | | size | Size of the board | number | required | - | | enableAssist | Enable move assist | boolean | optional | false | | lightSquareColor | Color for white side | string | optional | #F0D9B5 | | darkSquareColor | Color for black side | string | optional | #b58862 | | coordsType | Coordinates | inside | outside | hide | optional | inside | | orientation | Orientation | w | b | optional | w | | mode | Mode | move | highlight | optional | move | | blindfold | Blindfold | boolean | optional | false | | free | Free | boolean | optional | false | | sound | Sound | boolean | optional | false | | showPawns | Show Pawns | boolean | optional | true | | showPieces | Show Pieces | boolean | optional | true | | dests | Show dest for Pieces | Dests | optional | - | | lastMove | Last move | [Square, Square] | optional | - | | highlights | Show highligts | Array<HighlightType> | optional | - | | onHighlightsChange | Fires when highligts are changed | (highlights: Array) => void | optional | - | | arrows | Show arrows | Array<ArrowType> | optional | - | | onArrowsChange | Fires when arrows are changed | (arrows: Array) => void | optional | - | | showSquareCoords | Show Square Coordinates | boolean | optional | false | | onPieceDrop | On Piece Drop | (halfMove: HalfMove) => void | optional | - | | onMove | On move | (move: Move) => void | optional | - | | pieceSet | Piece Set | BoardPieces | optional | defaultPieces |

Types

Here are the types used in the properties:

| Property | Description | | ------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | Dests | { [S in Square]?: Array<Square> } | | Square | 'a1' | 'b1' | 'c1' | | HighlightType | {color: HighlightColor; square: Square } | | ArrowType | {fromSquare: Square; toSquare: Square; color: HighlightColor} | | BoardPieces | defaultPieces | minion | spider |lego |animal | kidStandard | customNMC1 |customNMC2 | | HighlightType | {color: HighlightColor; square: Square } |

Development

To run the storybook for development, use the following commands:

yarn install
yarn storybook

License

This project is licensed under the MIT License.