JSPM

cm-chessboard

2.7.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 180
  • Score
    100M100P100Q103342F
  • License MIT

Chessboard for chessmail.de / chessmail.eu

Package Exports

  • cm-chessboard

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cm-chessboard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

cm-chessboard

The (upcoming) chessboard for chessmail.eu / chessmail.de

Current version is "alpha", works on desktop (current versions of Chrome, Firefox, Safari, Edge), and mobile (Android and iOS). Will not work in IE. Not planned to get it working in IE.

Lightweight, SVG, ES6 module and almost no external dependencies.

Install

npm install

Configuration

With default values

this.config = {
    position: "empty", // empty board, set as fen or "start" or "empty"
    orientation: COLOR.white, // white on bottom
    showCoordinates: true, // show ranks and files
    responsive: false, // detects window resize, if true
    inputMode: INPUT_MODE.viewOnly, // set to INPUT_MODE.dragFigure "1" or INPUT_MODE.dragMarker "2" for interactive movement
    sprite: {
        file: "../assets/sprite.svg", // figures and markers
        grid: DEFAULT_SPRITE_GRID, // one figure every 40px
    },
    events: {
        inputStart: null, // callback(square), before figure move input, return false to cancel move
        inputDone: null // callback(squareFrom, squareTo), after figure move input, return false to cancel move
    }
};

API

setSquare(square, figure) {

Set a figure on a square. Example: board.setSquare("e4", FIGURE.blackKnight) or board.setSquare("e4", "bn").

getSquare(square)

Returns the figure on a square.

setPosition(fen, animated = true)

Set the position as fen. Special values are "start", sets the chess start position and "empty", sets an empty board. When animated is set false, the new position will be shown instant.

getPosition()

Get the board position as fen.

setOrientation(color)

Set the board orientation (color at bottom). Allowed values are COLOR.white or COLOR.black or "white" or "black".

getOrientation()

Returns the the board orientation.

destroy()

Remove the board from the DOM.

enableInput(color, enable)

Enable and disable moves via user input (mouse or touch). Allowed values are COLOR.white or COLOR.black or "white" or "black" for color and boolean for enable.

addMarker(square, type = MARKER_TYPE.emphasize)

Add a marker to a square.

Default types are: MARKER_TYPE.newMove, MARKER_TYPE.lastMove, MARKER_TYPE.emphasize, exportet by Chessboard.js. You can create your own marker types: Just create an object like {slice: "marker1", opacity: 0.6}, where slice is the id in sprite.svg, opacity the opacity.

removeMarker(square = null, type = null);

Set square to null to remove type from all squares. Set type to null, to remove all types. Set both to null to remove all markers.

ToDos

  • Animation when using click move
  • Auto-animation queue
  • Create Examples for all API functions
  • Right-Click emphasize marker