Mind-Sports-Games/chessground

Chessground

Chessground is a free/libre open source chess UI developed for lichess.org. It targets modern browsers, as well as mobile development using Cordova.

License

Chessground is distributed under the GPL-3.0 license (or any later version, at your option). When you use Chessground for your website, your combined work may be distributed only under the GPL. You must release your source code to the users of your website.

Please read more about GPL for JavaScript on greendrake.info/#nfy0.

Demos

• Chess TV
• Board editor
• Puzzles
• Analysis board
• Game preview

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, arrows, and custom user shapes on the board
• Arrows snap to valid moves. Freehand arrows can be drawn by dragging the mouse off the board and back while drawing an arrow.
• 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 & drop
  • Minimum distance before drag
  • Centralisation of the piece under the cursor
  • Piece ghost element
  • 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 (hover effects possible)
• Import and export positions in FEN notation
• User callbacks
• No chess logic inside: can be used for chess variants

Installation

pnpm install --save chessground

Usage

const Chessground = require('chessground').Chessground;

const config = {};
const ground = Chessground(document.body, config);

Wrappers

• React: ruilisi/react-chessground
• Vue.js: vitogit/vue-chessboard
• Angular: topce/ngx-chessground

More? Please make a pull request to include it here.

Documentation

• Config types
• Default config values
• API type signatures
• Examples repo
• Base CSS

Development

Commands are listed in package.json. In case you want to see the possibilities from the console, run pnpm run

Install build dependencies:s

pnpm install

Update deps:

rm -rf node_modules pnpm-lock.yaml && pnpm store prune && pnpm install

Build the node module:

pnpm prepare --watch

Build the minified bundled dist files: (NOTE: from lila you will likely then need to restart the build as it does not watch for changes on the minified file):

pnpm dist

Run tests:

pnpm run test --watch
pnpm run test fen --watch

Before committing:

pnpm run lint
pnpm run format

Watch chessground changes from another project:

In other project:

• declare the link towards chessground (from project's package.json)

  "dependencies": {
    ...
    "chessground": "link:/path/to/chessground",
    ...
  }

In chessground:

• create .env.local file based on .env.local.default
• link back:

    pnpm run link

• trigger compilation and generate minified file:

  pnpm run local-dist