shogiground

Shogiground

Shogiground is a free/libre open source shogi UI forked from Chessground rewritten for lishogi.org. It targets modern browsers, as well as mobile development using Cordova.

License

Shogiground is distributed under the GPL-3.0 license (or any later version, at your option). When you use Shogiground 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

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

Features

Shogiground is designed to fulfill all lishogi.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: cca 40K unzipped. No dependencies.
• SVG drawing of circles and arrows on the board and hands
• Individual square elements for styling
• Entirely configurable and reconfigurable at any time
• Styling with CSS only: board, pieces and drawn shapes can be changed by simply switching a class
• Fluid layout: board can be resized at any time
• Full mobile support (touchstart, touchmove, touchend)
• Move or drop pieces by click
• Move or drop pieces by drag & drop
  • Minimum distance before drag
  • Centralisation of the piece under the cursor
  • Piece ghost element
  • Drop off revert or trash
• Supports shogi-like promotions
• Premove or predrop by click or drag
• Animation of pieces: moving and fading away both on board and from hands
• Display last move, check, move destinations, and premove destinations (hover effects possible)
• Import and export positions in SFEN notation, custom sfen parser/renderer
• User callbacks
• Supports board dimensions up to 16x16
• No shogi logic inside: can be used for shogi variants

Installation

npm install --save shogiground

Usage

import { Shogiground } from 'shogiground';

const config = {
  sfen: {
    board: 'lnsgkgsnl/1r5b1/ppppppppp/9/9/9/PPPPPPPPP/1B5R1/LNSGKGSNL',
  },
};
const ground = Shogiground(config, { board: document.body });

Non-module environments

Or you can simply pull the latest version from jsdelivr.

<script src="https://cdn.jsdelivr.net/npm/shogiground@latest/dist/shogiground.min.js"></script>

CSS

To actually see and use the board you need some CSS. You can use the CSS in examples/assets as a starting point. But it will take some work to get it exactly how you want it.

Documentation

• Config types
• Default config values
• API type signatures
• Quick examples
• Base CSS

Development

Install build dependencies:

npm install

To build the node module:

npm run compile -- --watch

To build the standalone:

npm run dist -- --watch