WandererXII
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 shogigroundUsage
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
Development
Install build dependencies:
npm installTo build the node module:
npm run compile -- --watchTo build the standalone:
npm run dist -- --watch