cm-chessboard 5.1.6 → 5.2.0

package/README.md

@@ -19,7 +19,7 @@ aspects of chess games.
 ## Extensions 🆕
 
 - [Accessibility Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-accessibility-extension.html)
-- [Arrows Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
+- [Arrows Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html) (by [@barakmich](https://github.com/barakmich))
 
 ## Demo and repository
 
@@ -54,6 +54,7 @@ Preconditions for using cm-chessboard in a web page:
 Example, showing a FEN:
 
 ```html
+
 <script type="module">
     import {Chessboard} from "./src/cm-chessboard/Chessboard.js"
 
@@ -130,7 +131,7 @@ Sets the position as `fen`. Special values are "start", sets the chess start pos
 
 Returns the board position as `fen`.
 
-### addMarker(type, square) 
+### addMarker(type, square)
 
 > signature changed with V5.1 from (square, type) to (type, square)
 
@@ -155,7 +156,8 @@ below.
 
 Returns the board's markers as an array.
 
-Only set type, to get all markers of a type on the board. Set type to `undefined`, to get markers of all types on a square.
+Only set type, to get all markers of a type on the board. Set type to `undefined`, to get markers of all types on a
+square.
 Set `both` to `undefined` to get all markers on the board.
 
 ### removeMarkers(type = undefined, square = undefined)
@@ -418,10 +420,26 @@ const chessboard = new Chessboard(document.getElementById("board"), {
 
 #### Arrows extension
 
-To draw arrows on the board.
+Draw arrows on the board.
 
-See
-example [Arrows extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
+Example: [Arrows extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
+
+##### Methods
+
+###### addArrow(type, fromSquare, toSquare)
+
+Add an arrow.
+
+###### removeArrows(type, from, to)
+
+To remove all arrows, call `chessboard.removeArrows()` without parameters. To remove all arrows of a specific
+type (type "danger"), call `chessboard.removeArrows(ARROW_TYPE.danger)`. To remove all arrows starting at "
+e2"
+you can call `chessboard.removeArrows(undefined, "e2")` and so on...
+
+###### getArrows(type, from, to)
+
+To get all arrows, call `chessboard.getArrows()` without parameters, as with `removeArrows(type, from, to)`.
 
 ## Usage with React
 

package/examples/extensions/chessboard-arrows-extension.html

@@ -13,6 +13,7 @@
 <h2>Example: Arrows extension</h2>
 <div class="board" id="board"></div>
 <br style="clear: both"/>
+<h2>Example code</h2>
 <pre>
 import {ARROW_TYPE, Arrows} from "../../src/cm-chessboard/extensions/arrows/Arrows.js"
 import {Chessboard} from "../../src/cm-chessboard/Chessboard.js"
@@ -36,6 +37,18 @@ chessboard.addArrow(ARROW_TYPE.default, "b8", "c6");
 chessboard.addArrow(ARROW_TYPE.pointy, "d2", "d3");
 chessboard.addArrow(ARROW_TYPE.danger, "g5", "e6");
 </pre>
+<h2>Methods</h2>
+<h3><code>addArrow(type, from, to)</code></h3>
+<h3><code>removeArrows(type, from, to)</code></h3>
+<p>
+    To remove all arrows, call <code>chessboard.removeArrows()</code> without parameters. To remove all arrows of a specific
+    type (type "danger"), call <code>chessboard.removeArrows(ARROW_TYPE.danger)</code>. To remove all arrows starting at "e2"
+    you can call <code>chessboard.removeArrows(undefined, "e2")</code> and so on...
+</p>
+<h3><code>getArrows(type, from, to)</code></h3>
+<p>
+    To get all arrows, call <code>chessboard.getArrows()</code> without parameters, as with <code>removeArrows(type, from, to)</code>.
+</p>
 
 <script type="module">
     import {ARROW_TYPE, Arrows} from "../../src/cm-chessboard/extensions/arrows/Arrows.js"
@@ -55,10 +68,10 @@ chessboard.addArrow(ARROW_TYPE.danger, "g5", "e6");
 
             }]
     })
-    chessboard.addArrow(ARROW_TYPE.default, "f3", "d5");
-    chessboard.addArrow(ARROW_TYPE.default, "b8", "c6");
-    chessboard.addArrow(ARROW_TYPE.pointy, "d2", "d3");
-    chessboard.addArrow(ARROW_TYPE.danger, "g5", "e6");
+    chessboard.addArrow(ARROW_TYPE.default, "f3", "d5")
+    chessboard.addArrow(ARROW_TYPE.default, "b8", "c6")
+    chessboard.addArrow(ARROW_TYPE.pointy, "d2", "d3")
+    chessboard.addArrow(ARROW_TYPE.danger, "g5", "e6")
 </script>
 </body>
-</html>
+</html>

package/examples/validate-moves.html

@@ -24,11 +24,9 @@ const chess = new Chess()
 function inputHandler(event) {
     console.log("event", event)
     event.chessboard.removeMarkers(MARKER_TYPE.dot)
-    event.chessboard.removeMarkers(MARKER_TYPE.square)
     if (event.type === INPUT_EVENT_TYPE.moveStart) {
         const moves = chess.moves({square: event.square, verbose: true});
-        event.chessboard.addMarker(MARKER_TYPE.square, event.square)
-        for (const move of moves) { // draw dots on possible moves
+        for (const move of moves) { // draw dots on possible squares
             event.chessboard.addMarker(MARKER_TYPE.dot, move.to)
         }
         return moves.length > 0
@@ -37,16 +35,20 @@ function inputHandler(event) {
         const result = chess.move(move)
         if (result) {
             event.chessboard.disableMoveInput()
-            const possibleMoves = chess.moves({verbose: true})
-            if (possibleMoves.length > 0) {
-                const randomIndex = Math.floor(Math.random() * possibleMoves.length)
-                const randomMove = possibleMoves[randomIndex]
-                setTimeout(() => { // smoother with 500ms delay
-                    chess.move({from: randomMove.from, to: randomMove.to})
-                    event.chessboard.enableMoveInput(inputHandler, COLOR.white)
-                    event.chessboard.setPosition(chess.fen(), true)
-                }, 500)
-            }
+            this.chessboard.state.moveInputProcess.then(() => { // wait for the move input process has finished
+                this.chessboard.setPosition(chess.fen(), true).then(() => { // wait for animation has finished
+                    const possibleMoves = chess.moves({verbose: true})
+                    if (possibleMoves.length > 0) {
+                        const randomIndex = Math.floor(Math.random() * possibleMoves.length)
+                        const randomMove = possibleMoves[randomIndex]
+                        setTimeout(() => { // smoother with 500ms delay
+                            chess.move({from: randomMove.from, to: randomMove.to})
+                            event.chessboard.enableMoveInput(inputHandler, COLOR.white)
+                            event.chessboard.setPosition(chess.fen(), true)
+                        }, 500)
+                    }
+                }) // update position, maybe castled
+            })
         } else {
             console.warn("invalid move", move)
         }
@@ -83,16 +85,20 @@ board.enableMoveInput(inputHandler, COLOR.white)
             const result = chess.move(move)
             if (result) {
                 event.chessboard.disableMoveInput()
-                const possibleMoves = chess.moves({verbose: true})
-                if (possibleMoves.length > 0) {
-                    const randomIndex = Math.floor(Math.random() * possibleMoves.length)
-                    const randomMove = possibleMoves[randomIndex]
-                    setTimeout(() => { // smoother with 500ms delay
-                        chess.move({from: randomMove.from, to: randomMove.to})
-                        event.chessboard.enableMoveInput(inputHandler, COLOR.white)
-                        event.chessboard.setPosition(chess.fen(), true)
-                    }, 500)
-                }
+                this.chessboard.state.moveInputProcess.then(() => { // wait for the move input process has finished
+                    this.chessboard.setPosition(chess.fen(), true).then(() => { // wait for animation has finished
+                        const possibleMoves = chess.moves({verbose: true})
+                        if (possibleMoves.length > 0) {
+                            const randomIndex = Math.floor(Math.random() * possibleMoves.length)
+                            const randomMove = possibleMoves[randomIndex]
+                            setTimeout(() => { // smoother with 500ms delay
+                                chess.move({from: randomMove.from, to: randomMove.to})
+                                event.chessboard.enableMoveInput(inputHandler, COLOR.white)
+                                event.chessboard.setPosition(chess.fen(), true)
+                            }, 500)
+                        }
+                    }) // update position, maybe castled
+                })
             } else {
                 console.warn("invalid move", move)
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "5.1.6",
+  "version": "5.2.0",
   "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
   "keywords": [
     "chess",

package/src/cm-chessboard/Chessboard.js

@@ -5,7 +5,7 @@
  */
 
 import {ChessboardState} from "./model/ChessboardState.js"
-import {Position} from "./model/Position.js"
+import {FEN, Position} from "./model/Position.js"
 import {PositionAnimationsQueue} from "./view/PositionAnimationsQueue.js"
 import {EXTENSION_POINT} from "./model/Extension.js"
 import {ChessboardView} from "./view/ChessboardView.js"
@@ -49,7 +49,7 @@ export class Chessboard {
         this.id = (Math.random() + 1).toString(36).substring(2, 8)
         this.extensions = []
         let defaultProps = {
-            position: "empty", // set as fen, "start" or "empty"
+            position: FEN.empty, // set as fen, can use FEN.start or FEN.empty // TODO remove those strings in favour of FEN.start and FEN.empty
             orientation: COLOR.white, // white on bottom
             responsive: true, // resize the board automatically to the size of the context element
             animationDuration: 300, // pieces animation duration in milliseconds. Disable all animation with `0`.
@@ -119,8 +119,11 @@ export class Chessboard {
 
     async setPosition(fen, animated = false) {
         const positionFrom = this.state.position.clone()
-        this.state.position.setFen(fen)
-        this.state.invokeExtensionPoints(EXTENSION_POINT.positionChanged)
+        const positionTo = new Position(fen)
+        if(positionFrom.getFen() !== positionTo.getFen()) {
+            this.state.position.setFen(fen)
+            this.state.invokeExtensionPoints(EXTENSION_POINT.positionChanged)
+        }
         return this.positionAnimationsQueue.enqueuePositionChange(positionFrom, this.state.position.clone(), animated)
     }
 

package/src/cm-chessboard/model/ChessboardState.js

@@ -5,6 +5,17 @@
  */
 import {Position} from "./Position.js"
 
+export function createTask() {
+    let resolve, reject
+    const promise = new Promise(function (_resolve, _reject) {
+        resolve = _resolve
+        reject = _reject
+    })
+    promise.resolve = resolve
+    promise.reject = reject
+    return promise
+}
+
 export class ChessboardState {
 
     constructor() {
@@ -16,6 +27,7 @@ export class ChessboardState {
         this.inputEnabled = false
         this.squareSelectEnabled = false
         this.extensionPoints = {}
+        this.moveInputProcess = createTask().resolve()
     }
 
     setPosition(fen, animated = false) {

package/src/cm-chessboard/model/Position.js

@@ -3,8 +3,12 @@
  * Repository: https://github.com/shaack/cm-chessboard
  * License: MIT, see file 'LICENSE'
  */
-export const FEN_START_POSITION = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
-export const FEN_EMPTY_POSITION = "8/8/8/8/8/8/8/8"
+export const FEN_START_POSITION = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1" // TODO deprecated, use FEN
+export const FEN_EMPTY_POSITION = "8/8/8/8/8/8/8/8" // TODO deprecated, use FEN
+export const FEN = {
+    start: FEN_START_POSITION,
+    empty: FEN_EMPTY_POSITION
+}
 
 export class Position {
 
@@ -16,8 +20,10 @@ export class Position {
     setFen(fen = FEN_EMPTY_POSITION) {
         let fenNormalized
         if (fen === "start") {
+            console.warn("setting the position with the strings 'start' or 'empty' is deprecated, use FEN.start or FEN.empty")
             fenNormalized = FEN_START_POSITION
         } else if (fen === "empty" || fen === undefined) {
+            console.warn("setting the position with the strings 'start' or 'empty' is deprecated, use FEN.start or FEN.empty")
             fenNormalized = FEN_EMPTY_POSITION
         } else {
             fenNormalized = fen

package/src/cm-chessboard/view/PositionAnimationsQueue.js

@@ -3,11 +3,11 @@
  * Repository: https://github.com/shaack/cm-chessboard
  * License: MIT, see file 'LICENSE'
  */
-import {FEN_EMPTY_POSITION, Position} from "../model/Position.js"
+import {FEN, Position} from "../model/Position.js"
 import {Svg} from "./ChessboardView.js"
 
 /*
-* Thanks to markosyan for the idea to the PromiseQueue
+* Thanks to markosyan for the idea of the PromiseQueue
 * https://medium.com/@karenmarkosyan/how-to-manage-promises-into-dynamic-queue-with-vanilla-javascript-9d0d1f8d4df5
 */
 
@@ -250,7 +250,7 @@ export class PositionAnimationsQueue extends PromiseQueue {
 
     async enqueueTurnBoard(position, color, animated) {
         return super.enqueue(() => new Promise((resolve) => {
-            const emptyPosition = new Position(FEN_EMPTY_POSITION)
+            const emptyPosition = new Position(FEN.empty)
             let duration = animated ? this.chessboard.props.animationDuration : 0
             if(this.queue.length > 0) {
                 duration = duration / (1 + Math.pow(this.queue.length / 5, 2))

package/src/cm-chessboard/view/VisualMoveInput.js

@@ -5,6 +5,7 @@
  */
 
 import {Svg} from "./ChessboardView.js"
+import {createTask} from "../model/ChessboardState.js"
 
 const STATE = {
     waitForInputStart: 0,
@@ -32,13 +33,20 @@ export class VisualMoveInput {
         this.view = view
         this.chessboard = view.chessboard
         this.moveStartCallback = (square) => {
-            return moveStartCallback(square)
+            const result = moveStartCallback(square)
+            if(result) {
+                this.chessboard.state.moveInputProcess = createTask()
+            }
+            return result
         }
         this.moveDoneCallback = (fromSquare, toSquare) => {
-            return moveDoneCallback(fromSquare, toSquare)
+            const result = moveDoneCallback(fromSquare, toSquare)
+            this.chessboard.state.moveInputProcess.resolve(result)
+            return result
         }
         this.moveCanceledCallback = (reason, fromSquare, toSquare) => {
             moveCanceledCallback(reason, fromSquare, toSquare)
+            this.chessboard.state.moveInputProcess.resolve()
         }
         this.setMoveInputState(STATE.waitForInputStart)
     }