cm-chessboard 5.1.9 → 5.2.0

package/README.md

@@ -14,13 +14,12 @@ aspects of chess games.
 - [Can handle moves input via click or drag](https://shaack.com/projekte/cm-chessboard/examples/validate-moves.html)
 - [Styleable via css and supports multiple piece sets](https://shaack.com/projekte/cm-chessboard/examples/different-styles.html)
 - Uses SVG for rendering
-- [Allows adding **
-  extensions** to extend the functionality](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
+- [Allows adding **extensions** to extend the functionality](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
 
 ## 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
 

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.9",
+  "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)
     }