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

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.