focusaurus / chessground

Mobile/Web chess UI for lichess.org

Chessground is the opensource chess UI developed for lichess.org.

It targets modern browsers, as well as mobile development using Cordova.

Demos

• Chess TV
• Board editor
• Puzzle solver
• Analysis board
• Game preview
• Chess Captcha

Features

Chessground is designed to fulfill all lichess.org web and mobile apps needs, so it is pretty featureful.

• Well typed with typescript
• Fast. Uses a custom DOM diff algorithm to reduce DOM writes to the absolute minimum
• Small footprint: 10K gzipped (31K unzipped). No dependencies.
• SVG drawing of circles and arrows on the board
• Entirely configurable and reconfigurable at any time
• Styling with CSS only: board and pieces can be changed by simply switching a class
• Fluid layout: board can be resized at any time
• Support for 3D pieces and boards
• Full mobile support (touchstart, touchmove, touchend)
• Move pieces by click
• Move pieces by drag'n drop
  • minimum distance before drag
  • centralisation of the piece under the cursor
  • piece ghost element
  • square over elements
  • drop off revert or trash
• Premove by click or drag
• Drag new pieces onto the board (editor, crazyhouse)
• Animation of pieces: moving and fading away
• Display last move, check, move destinations, and premove destinations
• Import and export positions in FEN notation
• User callbacks
• No chess logic inside: can be used for chess variants

Installation

npm install --save chessground

Usage

var Chessground = require("chessground").Chessground;

var ground = Chessground(document.body, config);

Documentation

• Config documented types
• Config default values
• API documented type signatures
• Examples repo
• Base CSS

Developers

First of all, of course:

yarn install

To build the node module:

tsc -watch

To build the standalone:

gulp dev  // build once
gulp      // build and watch
gulp prod // build minified