9 |
10 |
11 |
12 | 'start' as the second argument to initialize
9 | the board to the start position.
10 |
11 | ===== HTML
12 |
13 |
14 | ===== JS
15 | const board = Xiangqiboard('myBoard', 'start');
16 |
--------------------------------------------------------------------------------
/templates/_footer.mustache:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # This file is for unifying the coding style for different editors and IDEs.
2 | # More information at http://EditorConfig.org
3 |
4 | # Do not check for any .editorconfig files above this directory
5 | root = true
6 |
7 | # All files
8 | [*]
9 | charset = utf-8
10 | end_of_line = lf
11 | indent_size = 2
12 | indent_style = space
13 | insert_final_newline = true
14 | trim_trailing_whitespace = true
15 |
16 | [*.{html,mustache}]
17 | indent_size = 4
18 |
--------------------------------------------------------------------------------
/docs/img/link.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/templates/examples/2001-config-orientation.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 2001
3 |
4 | ===== Name
5 | Orientation
6 |
7 | ===== Description
8 | Use the orientation property to set board orientation.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | const config = {
15 | orientation: 'black',
16 | position: 'start'
17 | };
18 | const board = Xiangqiboard('myBoard', config);
19 |
--------------------------------------------------------------------------------
/templates/examples/2002-config-notation.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 2002
3 |
4 | ===== Name
5 | Notation
6 |
7 | ===== Description
8 | Use the showNotation property to turn board notation on or off.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | const config = {
15 | showNotation: true,
16 | position: 'start'
17 | };
18 | const board = Xiangqiboard('myBoard', config);
19 |
--------------------------------------------------------------------------------
/templates/examples/1003-position-object.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 1003
3 |
4 | ===== Name
5 | Position Object
6 |
7 | ===== Description
8 | Pass a Position Object as the second argument to initialize the board to a specific position.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | const position = {
15 | f9: 'bK',
16 | e8: 'rP',
17 | d1: 'rK'
18 | };
19 | const board = Xiangqiboard('myBoard', position);
20 |
--------------------------------------------------------------------------------
/templates/examples/2000-config-position.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 2000
3 |
4 | ===== Name
5 | Start Position
6 |
7 | ===== Description
8 | Set the position property to 'start' to initialize the board to the start position.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | const config = {
15 | position: 'start'
16 | };
17 | const board = Xiangqiboard('myBoard', config);
18 |
--------------------------------------------------------------------------------
/templates/examples/3006-destroy.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 3006
3 |
4 | ===== Name
5 | Destroy Board
6 |
7 | ===== Description
8 | Use the destroy method to kill the board and remove it from the DOM.
9 |
10 | ===== HTML
11 |
12 |
13 |
14 | ===== JS
15 | const board = Xiangqiboard('myBoard', 'start');
16 |
17 | $('#destroyBtn').on('click', board.destroy);
18 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/bN.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/rA.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/rC.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/rK.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/rN.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/rP.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/rR.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/bA.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/bB.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/bC.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/bK.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/bP.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/bR.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikipedia/rB.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/templates/examples/2004-piece-theme-string.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 2004
3 |
4 | ===== Name
5 | Piece Theme String
6 |
7 | ===== Description
8 | Use the pieceTheme property to set the source of piece images.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | const config = {
15 | pieceTheme: 'img/xiangqipieces/graphic/{piece}.svg',
16 | position: 'start'
17 | };
18 | const board = Xiangqiboard('myBoard', config);
19 |
--------------------------------------------------------------------------------
/templates/examples/2082-draggable-trash.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 2082
3 |
4 | ===== Name
5 | Draggable Trash
6 |
7 | ===== Description
8 | Set dropOffBoard to 'trash' to remove pieces when they are dropped outside the board.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | const config = {
15 | draggable: true,
16 | dropOffBoard: 'trash',
17 | position: 'start'
18 | };
19 | const board = Xiangqiboard('myBoard', config);
20 |
--------------------------------------------------------------------------------
/templates/examples/2063-position-object.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 2063
3 |
4 | ===== Name
5 | Position Object
6 |
7 | ===== Description
8 | You can set the position property with a Position Object.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | const config = {
15 | showNotation: true,
16 | position: {
17 | e8: 'rP',
18 | f9: 'bK',
19 | d1: 'rK'
20 | }
21 | };
22 | const board = Xiangqiboard('myBoard', config);
23 |
--------------------------------------------------------------------------------
/templates/examples/1002-fen.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 1002
3 |
4 | ===== Name
5 | FEN String
6 |
7 | ===== Description
8 | Pass a FEN String as the second argument to
9 | initialize the board to a specific position.
10 |
11 | ===== HTML
12 |
13 |
14 | ===== JS
15 | // ref: http://www.xqbase.com/ecco/ecco_intro.htm
16 | // B31(Encyclopedia of Chinese Chess Openings, ECCO), 中炮对反宫马
17 | const B31 = 'r1bakab1r/9/1cn2cn2/p1p1p1p1p/9/9/P1P1P1P1P/1C2C1N2/9/RNBAKABR1';
18 | const board = Xiangqiboard('myBoard', B31);
19 |
--------------------------------------------------------------------------------
/templates/_head.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | position property to a FEN string.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | const config = {
15 | showNotation: true,
16 | position: 'r1bakab1r/9/1cn2cn2/p1p1p1p1p/9/9/P1P1P1P1P/1C2C1N2/9/RNBAKABR1'
17 | };
18 | const board = Xiangqiboard('myBoard', config);
19 |
--------------------------------------------------------------------------------
/templates/examples/3007-resize.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 3007
3 |
4 | ===== Name
5 | Resize
6 |
7 | ===== Description
8 | Use the resize method to recalculate and redraw the board based on the size of it's parent element. See the full effect of this example in a new window.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | // NOTE: click "View example in new window." to see the full effect of this example
15 | const board = Xiangqiboard('myBoard', 'start');
16 | $(window).resize(board.resize);
17 |
--------------------------------------------------------------------------------
/templates/examples.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{{head}}}
4 |
5 | {{{header}}}
6 |
7 | sparePieces to true to show spare pieces that can be dropped onto the board.
9 |
10 | ===== HTML
11 |
12 |
13 |
14 |
15 | ===== JS
16 | const board = Xiangqiboard('myBoard', {
17 | draggable: true,
18 | dropOffBoard: 'trash',
19 | sparePieces: true,
20 | showNotation: true
21 | });
22 |
23 | $('#startBtn').on('click', board.start);
24 | $('#clearBtn').on('click', board.clear);
25 |
--------------------------------------------------------------------------------
/templates/examples/4006-ondrop-trash.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 4006
3 |
4 | ===== Name
5 | onDrop Trash
6 |
7 | ===== Description
8 | If 'trash' is returned from the onDrop function, the dragged piece will be removed.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | // trash black pieces when they are dropped
15 | function onDrop (source, target, piece, newPos, oldPos, orientation) {
16 | if (piece.search(/b/) !== -1) {
17 | return 'trash';
18 | }
19 | }
20 |
21 | const config = {
22 | draggable: true,
23 | position: 'start',
24 | onDrop: onDrop
25 | };
26 | const board = Xiangqiboard('myBoard', config);
27 |
--------------------------------------------------------------------------------
/templates/examples/2030-piece-theme-function.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 2030
3 |
4 | ===== Name
5 | Piece Theme Function
6 |
7 | ===== Description
8 | pieceTheme can be a function.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | function pieceTheme (piece) {
15 | // graphic theme for red pieces
16 | if (piece.search(/r/) !== -1) {
17 | return 'img/xiangqipieces/wikipedia/' + piece + '.svg';
18 | }
19 |
20 | // traditional theme for black pieces
21 | return 'img/xiangqipieces/traditional/' + piece + '.svg';
22 | }
23 |
24 | const config = {
25 | pieceTheme: pieceTheme,
26 | position: 'start'
27 | };
28 | const board = Xiangqiboard('myBoard', config);
29 |
--------------------------------------------------------------------------------
/templates/examples/3003-clear.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 3003
3 |
4 | ===== Name
5 | Clear Board
6 |
7 | ===== Description
8 | Use the clear method to remove all the pieces from the board.
9 |
10 | ===== HTML
11 |
12 |
13 |
14 |
15 |
16 | ===== JS
17 | const board = Xiangqiboard('myBoard', 'start');
18 |
19 | $('#startPositionBtn').on('click', board.start);
20 |
21 | $('#clearBoardBtn').on('click', board.clear);
22 |
23 | $('#clearBoardInstantBtn').on('click', function () {
24 | board.clear(false);
25 | });
26 |
--------------------------------------------------------------------------------
/templates/examples/3004-move-pieces.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 3004
3 |
4 | ===== Name
5 | Move Pieces
6 |
7 | ===== Description
8 | Use the move method to make one or more moves on the board.
9 |
10 | ===== HTML
11 |
12 |
13 |
14 |
15 |
16 | ===== JS
17 | const board = Xiangqiboard('myBoard', 'start');
18 |
19 | $('#move1Btn').on('click', function () {
20 | board.move('c3-c4');
21 | });
22 |
23 | $('#move2Btn').on('click', function () {
24 | board.move('h2-e2', 'h7-e7');
25 | });
26 |
27 | $('#startPositionBtn').on('click', board.start);
28 |
--------------------------------------------------------------------------------
/templates/examples/4005-ondrop-snapback.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 4005
3 |
4 | ===== Name
5 | onDrop Snapback
6 |
7 | ===== Description
8 | If 'snapback' is returned from the onDrop function, the dragged piece will return to it's source square.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | // snapback black pieces when they are dropped
15 | function onDrop (source, target, piece, newPos, oldPos, orientation) {
16 | if (piece.search(/b/) !== -1) {
17 | return 'snapback';
18 | }
19 | }
20 |
21 | const config = {
22 | draggable: true,
23 | position: 'start',
24 | onDrop: onDrop
25 | };
26 | const board = Xiangqiboard('myBoard', config);
27 |
--------------------------------------------------------------------------------
/templates/examples/2003-draggable-snapback.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 2003
3 |
4 | ===== Name
5 | Draggable Snapback
6 |
7 | ===== Description
8 | Set draggable to true to allow drag and drop of pieces. Pieces will return to their original square when dropped off the board (ie: the default for dropOffBoard is 'snapback').
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | const config = {
15 | draggable: true,
16 | dropOffBoard: 'snapback', // this is the default
17 | position: 'start'
18 | };
19 | const board = Xiangqiboard('myBoard', config);
20 |
--------------------------------------------------------------------------------
/docs/css/xiangqiboard.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * xiangqiboard.js 0.3.3
3 | *
4 | * Copyright 2013 Chris Oakman
5 | * Copyright 2018-2020 @lengyanyu258
6 | * Released under the MIT license
7 | * https://github.com/lengyanyu258/xiangqiboardjs/blob/master/LICENSE
8 | *
9 | * Date: 4/23/2020
10 | */
11 | .clearfix-5f3b5{clear:both}.board-1ef78{border:2px solid #404040;box-sizing:content-box}.square-2b8ce{float:left;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.highlight1-e13fc,.highlight2-e0a03{box-shadow:inset 0 0 3px 3px #ff0}.notation-8c7a2{cursor:default;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;position:absolute}.alpha-f4ef2{bottom:1px;right:40%}.numeric-fe76e{top:40%;left:1px}
--------------------------------------------------------------------------------
/templates/examples/1004-multiple-boards.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 1004
3 |
4 | ===== Name
5 | Multiple Boards
6 |
7 | ===== Description
8 | You can have multiple boards on the same page.
9 |
10 | ===== CSS
11 | .small-board {
12 | display: inline-block;
13 | margin-right: 5px;
14 | width: 225px;
15 | }
16 |
17 | ===== HTML
18 |
19 |
20 |
21 |
22 | ===== JS
23 | const board1 = Xiangqiboard('board1', 'start');
24 |
25 | const B31 = 'r1bakab1r/9/1cn2cn2/p1p1p1p1p/9/9/P1P1P1P1P/1C2C1N2/9/RNBAKABR1';
26 | const board2 = Xiangqiboard('board2', B31);
27 |
28 | const C0 = 'r1bakab1r/9/1cn3nc1/p1p1p1p1p/9/9/P1P1P1P1P/1C2C1N2/9/RNBAKAB1R';
29 | const board3 = Xiangqiboard('board3', C0);
30 |
--------------------------------------------------------------------------------
/templates/examples/4011-onsnapbackend.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 4011
3 |
4 | ===== Name
5 | onSnapbackEnd
6 |
7 | ===== Description
8 | The onSnapbackEnd event fires after a piece has snapped back to it's original square.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | function onSnapbackEnd (piece, square, position, orientation) {
15 | console.log('Piece: ' + piece);
16 | console.log('Square: ' + square);
17 | console.log('Position: ' + Xiangqiboard.objToFen(position));
18 | console.log('Orientation: ' + orientation);
19 | console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');
20 | }
21 |
22 | const config = {
23 | draggable: true,
24 | position: 'start',
25 | onSnapbackEnd: onSnapbackEnd
26 | };
27 | const board = Xiangqiboard('myBoard', config);
28 |
--------------------------------------------------------------------------------
/templates/examples/4001-ondragstart.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 4001
3 |
4 | ===== Name
5 | onDragStart
6 |
7 | ===== Description
8 | The onDragStart event fires every time a piece is picked up.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | function onDragStart (source, piece, position, orientation) {
15 | console.log('Drag started:');
16 | console.log('Source: ' + source);
17 | console.log('Piece: ' + piece);
18 | console.log('Position: ' + Xiangqiboard.objToFen(position));
19 | console.log('Orientation: ' + orientation);
20 | console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');
21 | }
22 |
23 | const config = {
24 | draggable: true,
25 | position: 'start',
26 | onDragStart: onDragStart,
27 | sparePieces: true
28 | };
29 | const board = Xiangqiboard('myBoard', config);
30 |
--------------------------------------------------------------------------------
/templates/examples/3000-get-position.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 3000
3 |
4 | ===== Name
5 | Get Position
6 |
7 | ===== Description
8 | Use the position and fen methods to retrieve the current position of the board.
9 |
10 | ===== HTML
11 |
12 |
13 |
14 | ===== JS
15 | const config = {
16 | draggable: true,
17 | position: 'start'
18 | };
19 | const board = Xiangqiboard('myBoard', config);
20 |
21 | function clickShowPositionBtn () {
22 | console.log('Current position as an Object:');
23 | console.log(board.position());
24 |
25 | console.log('Current position as a FEN string:');
26 | console.log(board.fen());
27 | }
28 |
29 | $('#showPositionBtn').on('click', clickShowPositionBtn);
30 |
--------------------------------------------------------------------------------
/templates/examples/4004-ondrop.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 4004
3 |
4 | ===== Name
5 | onDrop
6 |
7 | ===== Description
8 | The onDrop event fires every time a piece is dropped.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | function onDrop (source, target, piece, newPos, oldPos, orientation) {
15 | console.log('Source: ' + source);
16 | console.log('Target: ' + target);
17 | console.log('Piece: ' + piece);
18 | console.log('New position: ' + Xiangqiboard.objToFen(newPos));
19 | console.log('Old position: ' + Xiangqiboard.objToFen(oldPos));
20 | console.log('Orientation: ' + orientation);
21 | console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');
22 | }
23 |
24 | const config = {
25 | draggable: true,
26 | position: 'start',
27 | onDrop: onDrop,
28 | sparePieces: true
29 | };
30 | const board = Xiangqiboard('myBoard', config);
31 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/wikimedia/bA.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/templates/examples/3001-set-position.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 3001
3 |
4 | ===== Name
5 | Set Position
6 |
7 | ===== Description
8 | Use the start and position methods to set the board position.
9 |
10 | ===== HTML
11 |
12 |
13 |
14 |
15 |
16 | ===== JS
17 | const board = Xiangqiboard('myBoard');
18 |
19 | $('#setStartBtn').on('click', board.start);
20 |
21 | $('#setB31Btn').on('click', function () {
22 | board.position('r1bakab1r/9/1cn2cn2/p1p1p1p1p/9/9/P1P1P1P1P/1C2C1N2/9/RNBAKABR1');
23 | });
24 |
25 | $('#setRookCheckmateBtn').on('click', function () {
26 | board.position({
27 | d8: 'bK',
28 | e2: 'rK',
29 | d4: 'rR'
30 | });
31 | });
32 |
--------------------------------------------------------------------------------
/templates/examples/5002-random-vs-random.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 5002
3 |
4 | ===== Name
5 | Random vs Random
6 |
7 | ===== Description
8 | Who will win in this riveting game of Math.random() vs Math.random()?
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | // NOTE: this example uses the xiangqi.js library:
15 | // https://github.com/lengyanyu258/xiangqi.js
16 |
17 | let board = null;
18 | let game = new Xiangqi();
19 |
20 | function makeRandomMove () {
21 | let possibleMoves = game.moves();
22 |
23 | // exit if the game is over
24 | if (game.game_over()) return;
25 |
26 | let randomIdx = Math.floor(Math.random() * possibleMoves.length);
27 | game.move(possibleMoves[randomIdx]);
28 | board.position(game.fen());
29 |
30 | window.setTimeout(makeRandomMove, 500);
31 | }
32 |
33 | board = Xiangqiboard('myBoard', 'start');
34 |
35 | window.setTimeout(makeRandomMove, 500);
36 |
--------------------------------------------------------------------------------
/templates/examples/4003-ondragmove.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 4003
3 |
4 | ===== Name
5 | onDragMove
6 |
7 | ===== Description
8 | The onDragMove event fires every time a piece changes location.
9 |
10 | ===== HTML
11 |
12 |
13 | ===== JS
14 | function onDragMove (newLocation, oldLocation, source,
15 | piece, position, orientation) {
16 | console.log('New location: ' + newLocation);
17 | console.log('Old location: ' + oldLocation);
18 | console.log('Source: ' + source);
19 | console.log('Piece: ' + piece);
20 | console.log('Position: ' + Xiangqiboard.objToFen(position));
21 | console.log('Orientation: ' + orientation);
22 | console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');
23 | }
24 |
25 | const config = {
26 | draggable: true,
27 | position: 'start',
28 | onDragMove: onDragMove,
29 | sparePieces: true
30 | };
31 | const board = Xiangqiboard('myBoard', config);
32 |
--------------------------------------------------------------------------------
/templates/examples/4002-ondragstart-prevent-drag.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 4002
3 |
4 | ===== Name
5 | onDragStart Prevent Drag
6 |
7 | ===== Description
8 | Prevent the drag action by returning false from the onDragStart function.
9 |
10 | ===== HTML
11 |
12 |
13 |
14 | ===== JS
15 | // only allow pieces to be dragged when the board is oriented
16 | // in their direction
17 | function onDragStart (source, piece, position, orientation) {
18 | if ((orientation === 'red' && piece.search(/^r/) === -1) ||
19 | (orientation === 'black' && piece.search(/^b/) === -1)) {
20 | return false;
21 | }
22 | }
23 |
24 | const config = {
25 | draggable: true,
26 | position: 'start',
27 | onDragStart: onDragStart
28 | };
29 | const board = Xiangqiboard('myBoard', config);
30 |
31 | $('#flipOrientationBtn').on('click', board.flip);
32 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@lengyanyu258/xiangqiboardjs",
3 | "author": "@lengyanyu258 moveSpeed, snapbackSpeed, snapSpeed, and trashSpeed properties.
9 |
10 | ===== HTML
11 |
12 |
13 |
14 |
15 | ===== JS
16 | const board = Xiangqiboard('myBoard', {
17 | draggable: true,
18 | moveSpeed: 'slow',
19 | snapbackSpeed: 500,
20 | snapSpeed: 100,
21 | position: 'start'
22 | });
23 |
24 | $('#startBtn').on('click', board.start);
25 | $('#B31Btn').on('click', function () {
26 | board.position('r1bakab1r/9/1cn2cn2/p1p1p1p1p/9/9/P1P1P1P1P/1C2C1N2/9/RNBAKABR1');
27 | });
28 |
--------------------------------------------------------------------------------
/templates/examples/4000-onchange.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 4000
3 |
4 | ===== Name
5 | onChange
6 |
7 | ===== Description
8 | The onChange event fires when the board position changes.
9 |
10 | ===== HTML
11 |
12 |
13 |
14 |
15 | ===== JS
16 | function onChange (oldPos, newPos) {
17 | console.log('Position changed:');
18 | console.log('Old position: ' + Xiangqiboard.objToFen(oldPos));
19 | console.log('New position: ' + Xiangqiboard.objToFen(newPos));
20 | console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');
21 | }
22 |
23 | const config = {
24 | draggable: true,
25 | position: 'start',
26 | onChange: onChange
27 | };
28 | const board = Xiangqiboard('myBoard', config);
29 |
30 | $('#B31Btn').on('click', function () {
31 | const B31 = 'r1bakab1r/9/1cn2cn2/p1p1p1p1p/9/9/P1P1P1P1P/1C2C1N2/9/RNBAKABR1';
32 | board.position(B31);
33 | });
34 |
35 | $('#startPositionBtn').on('click', board.start);
36 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/graphic/bP.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/graphic/rP.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/templates/examples/3002-set-position-instant.example:
--------------------------------------------------------------------------------
1 | ===== id
2 | 3002
3 |
4 | ===== Name
5 | Set Position Instantly
6 |
7 | ===== Description
8 | Pass false as the second argument to the start and position methods to set the board position instantly.
9 |
10 | ===== HTML
11 |
12 |
13 |
14 |
15 |
16 | ===== JS
17 | const board = Xiangqiboard('myBoard');
18 |
19 | $('#setStartBtn').on('click', function () {
20 | board.start(false);
21 | });
22 |
23 | $('#setB31Btn').on('click', function () {
24 | const B31 = 'r1bakab1r/9/1cn2cn2/p1p1p1p1p/9/9/P1P1P1P1P/1C2C1N2/9/RNBAKABR1';
25 | board.position(B31, false);
26 | });
27 |
28 | $('#setRookCheckmateBtn').on('click', function () {
29 | const rookCheckmate = {
30 | d8: 'bK',
31 | e2: 'rK',
32 | d4: 'rR'
33 | };
34 | board.position(rookCheckmate, false);
35 | });
36 |
--------------------------------------------------------------------------------
/docs/examples/1000.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | xiangqiboard.js initializes to an empty board with no second argument.
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/xiangqiboard.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * xiangqiboard.js $version$ 3 | * 4 | * Copyright 2013 Chris Oakman 5 | * Copyright 2018-2020 @lengyanyu258 6 | * Released under the MIT license 7 | * https://github.com/lengyanyu258/xiangqiboardjs/blob/master/LICENSE 8 | * 9 | * Date: $date$ 10 | */ 11 | 12 | .clearfix-5f3b5 { 13 | clear: both; 14 | } 15 | 16 | .board-1ef78 { 17 | border: 2px solid #404040; 18 | box-sizing: content-box; 19 | } 20 | 21 | .square-2b8ce { 22 | float: left; 23 | position: relative; 24 | 25 | /* disable any native browser highlighting */ 26 | -webkit-touch-callout: none; 27 | -webkit-user-select: none; 28 | -khtml-user-select: none; 29 | -moz-user-select: none; 30 | -ms-user-select: none; 31 | user-select: none; 32 | } 33 | 34 | .highlight1-e13fc, .highlight2-e0a03 { 35 | box-shadow: inset 0 0 3px 3px yellow; 36 | } 37 | 38 | .notation-8c7a2 { 39 | cursor: default; 40 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 41 | font-size: 14px; 42 | position: absolute; 43 | } 44 | 45 | .alpha-f4ef2 { 46 | bottom: 1px; 47 | right: 40%; 48 | } 49 | 50 | .numeric-fe76e { 51 | top: 40%; 52 | left: 1px; 53 | } 54 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright 2013 Chris Oakman 2 | 3 | Copyright 2018-2020 [@lengyanyu258](https://github.com/lengyanyu258) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /docs/img/xiangqipieces/graphic/bC.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/1001.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |Pass 'start' as the second argument to initialize
15 | the board to the start position.
orientation method to retrieve and set the orientation. Use the flip method to flip orientation.
9 |
10 | ===== HTML
11 |
12 |
13 |
14 | onMoveEnd event fires at the end of animations when the board position changes.
9 |
10 | ===== HTML
11 |
12 |
13 |
14 |
15 |
16 |
17 | ===== JS
18 | function onMoveEnd (oldPos, newPos) {
19 | console.log('Move animation complete:');
20 | console.log('Old position: ' + Xiangqiboard.objToFen(oldPos));
21 | console.log('New position: ' + Xiangqiboard.objToFen(newPos));
22 | console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');
23 | }
24 |
25 | const config = {
26 | position: 'start',
27 | onMoveEnd: onMoveEnd
28 | };
29 | const board = Xiangqiboard('myBoard', config);
30 |
31 | $('#B31Btn').on('click', function () {
32 | board.position('r1bakab1r/9/1cn2cn2/p1p1p1p1p/9/9/P1P1P1P1P/1C2C1N2/9/RNBAKABR1');
33 | });
34 | $('#moveBtn').on('click', function () {
35 | board.move('c3-c4', 'g6-g5');
36 | });
37 | $('#startBtn').on('click', board.start);
38 | $('#clearBtn').on('click', board.clear);
39 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/wikimedia/rA.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/docs/examples/2001.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Use the orientation property to set board orientation.
Use the showNotation property to turn board notation on or off.
Pass a Position Object as the second argument to initialize the board to a specific position.
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /docs/examples/2000.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |Set the position property to 'start' to initialize the board to the start position.
Use the destroy method to kill the board and remove it from the DOM.
Use the pieceTheme property to set the source of piece images.
Set dropOffBoard to 'trash' to remove pieces when they are dropped outside the board.
You can set the position property with a Position Object.
Pass a FEN String as the second argument to 15 | initialize the board to a specific position.
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/img/xiangqipieces/graphic/bB.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/2044.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |You can set the position property to a FEN string.
{{{description}}}
21 | 22 | 23 | {{{html}}} 24 | 25 | 26 | 27 | 28 | {{#includeXiangqiJS}} 29 | 30 | {{/includeXiangqiJS}} 31 | 32 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /docs/img/xiangqipieces/graphic/rB.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/img/xiangqipieces/traditional/rA.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/img/xiangqipieces/graphic/bR.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/img/xiangqipieces/graphic/rK.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/3007.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |Use the resize method to recalculate and redraw the board based on the size of it's parent element. See the full effect of this example in a new window.
Set sparePieces to true to show spare pieces that can be dropped onto the board.
If 'trash' is returned from the onDrop function, the dragged piece will be removed.
pieceTheme can be a function.
Use the move method to make one or more moves on the board.
Set draggable to true to allow drag and drop of pieces. Pieces will return to their original square when dropped off the board (ie: the default for dropOffBoard is 'snapback').
Use the clear method to remove all the pieces from the board.
If 'snapback' is returned from the onDrop function, the dragged piece will return to it's source square.
The onSnapbackEnd event fires after a piece has snapped back to it's original square.
The onDragStart event fires every time a piece is picked up.
Use the position and fen methods to retrieve the current position of the board.
The onDrop event fires every time a piece is dropped.
Use the start and position methods to set the board position.
You can have multiple boards on the same page.
24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /docs/examples/4003.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |The onDragMove event fires every time a piece changes location.
Prevent the drag action by returning false from the onDragStart function.
Who will win in this riveting game of Math.random() vs Math.random()?
You can control animation speeds with the moveSpeed, snapbackSpeed, snapSpeed, and trashSpeed properties.
The onChange event fires when the board position changes.
Pass false as the second argument to the start and position methods to set the board position instantly.
Use the orientation method to retrieve and set the orientation. Use the flip method to flip orientation.
The onMoveEnd event fires at the end of animations when the board position changes.
onMouseoverSquare and onMouseoutSquare events to highlight legal squares.
9 |
10 | ===== CSS
11 | .highlight {
12 | box-shadow: inset 0 0 3px 3px white;
13 | }
14 |
15 | ===== HTML
16 |
17 |
18 | ===== JS
19 | // NOTE: this example uses the xiangqi.js library:
20 | // https://github.com/lengyanyu258/xiangqi.js
21 |
22 | let board = null;
23 | let game = new Xiangqi();
24 |
25 | function removeGreySquares () {
26 | $('#myBoard .square-2b8ce').removeClass('highlight');
27 | }
28 |
29 | function greySquare (square) {
30 | let $square = $('#myBoard .square-' + square);
31 |
32 | $square.addClass('highlight');
33 | }
34 |
35 | function onDragStart (source, piece) {
36 | // do not pick up pieces if the game is over
37 | if (game.game_over()) return false;
38 |
39 | // or if it's not that side's turn
40 | if ((game.turn() === 'r' && piece.search(/^b/) !== -1) ||
41 | (game.turn() === 'b' && piece.search(/^r/) !== -1)) {
42 | return false;
43 | }
44 | }
45 |
46 | function onDrop (source, target) {
47 | removeGreySquares();
48 |
49 | // see if the move is legal
50 | let move = game.move({
51 | from: source,
52 | to: target
53 | });
54 |
55 | // illegal move
56 | if (move === null) return 'snapback';
57 | }
58 |
59 | function onMouseoverSquare (square, piece) {
60 | // get list of possible moves for this square
61 | let moves = game.moves({
62 | square: square,
63 | verbose: true
64 | });
65 |
66 | // exit if there are no moves available for this square
67 | if (moves.length === 0) return;
68 |
69 | // highlight the square they moused over
70 | greySquare(square);
71 |
72 | // highlight the possible squares for this piece
73 | for (let i = 0; i < moves.length; i++) {
74 | greySquare(moves[i].to);
75 | }
76 | }
77 |
78 | function onMouseoutSquare (square, piece) {
79 | removeGreySquares();
80 | }
81 |
82 | function onSnapEnd () {
83 | board.position(game.fen());
84 | }
85 |
86 | let config = {
87 | draggable: true,
88 | position: 'start',
89 | onDragStart: onDragStart,
90 | onDrop: onDrop,
91 | onMouseoutSquare: onMouseoutSquare,
92 | onMouseoverSquare: onMouseoverSquare,
93 | onSnapEnd: onSnapEnd
94 | };
95 | board = Xiangqiboard('myBoard', config);
96 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikimedia/rC.svg:
--------------------------------------------------------------------------------
1 |
2 |
39 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/traditional/rC.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikimedia/rR.svg:
--------------------------------------------------------------------------------
1 |
2 |
39 |
--------------------------------------------------------------------------------
/docs/img/xiangqipieces/original/wikimedia/bC.svg:
--------------------------------------------------------------------------------
1 |
2 |
41 |
--------------------------------------------------------------------------------