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.
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.
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
npm install --save shogigroundimport { Shogiground } from 'shogiground';
const config = {
sfen: {
board: 'lnsgkgsnl/1r5b1/ppppppppp/9/9/9/PPPPPPPPP/1B5R1/LNSGKGSNL',
},
};
const ground = Shogiground(config, { board: document.body });Or you can simply pull the latest version from jsdelivr.
<script src="https://cdn.jsdelivr.net/npm/shogiground@latest/dist/shogiground.min.js"></script>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.
Install build dependencies:
npm installTo build the node module:
npm run compile -- --watchTo build the standalone:
npm run dist -- --watch