cm-chessboard 5.1.9 → 5.2.2

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
 
@@ -73,23 +72,23 @@ Below is the default configuration
 
 ```javascript
 let defaultProps = {
-    position: "empty", // set as fen, "start" or "empty"
+    position: FEN.empty, // set as fen, can use FEN.start or 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`.
     language: navigator.language.substring(0, 2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
     style: {
-        cssClass: "default", // set the css theme of the board, try "green", "blue" or "chess-club"
-        showCoordinates: true, // show ranks and files
-        borderType: BORDER_TYPE.none, // "thin" thin border, "frame" wide border with coordinates in it, "none" no border
-        aspectRatio: 1, // height/width of the board
-        moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
-        moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
+      cssClass: "default", // set the css theme of the board, try "green", "blue" or "chess-club"
+      showCoordinates: true, // show ranks and files
+      borderType: BORDER_TYPE.none, // "thin" thin border, "frame" wide border with coordinates in it, "none" no border
+      aspectRatio: 1, // height/width of the board
+      moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
+      moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
     },
     sprite: {
-        url: "./assets/images/chessboard-sprite.svg", // pieces and markers are stored in a sprite file
-        size: 40, // the sprite tiles size, defaults to 40x40px
-        cache: true // cache the sprite
+      url: "./assets/images/chessboard-sprite.svg", // pieces and markers are stored in a sprite file
+      size: 40, // the sprite tiles size, defaults to 40x40px
+      cache: true // cache the sprite
     },
     extensions: [ /* {class: ExtensionClass, props: { ... }} */] // add extensions here
 }
@@ -123,8 +122,7 @@ Move a piece from `squareFrom` to `squareTo`. Returns a **Promise**, which is re
 
 ### setPosition(fen, animated = false)
 
-Sets the position as `fen`. Special values are "start", sets the chess start position and
-"empty", sets an empty board. Returns a **Promise**, which is resolved, after the animation finished.
+Sets the position as `fen`. Returns a **Promise**, which is resolved, after the animation finished.
 
 [Example for **setPosition**](https://shaack.com/projekte/cm-chessboard/examples/pieces-animation.html)
 
@@ -203,26 +201,24 @@ board.enableMoveInput((event) => {
 
 The event has the following **`event.type`**:
 
-- **`INPUT_EVENT_TYPE.moveStart`**: User started the move input, `event.square` contains the coordinates
-- **`INPUT_EVENT_TYPE.moveDone`**: User finished the move input, `event.squareFrom` and `event.squareTo` contain the
-  coordinates
-- **`INPUT_EVENT_TYPE.moveCanceled`**: User canceled the move with clicking again on the start square or clicking
-  outside of the board
+- **`INPUT_EVENT_TYPE.moveInputStarted`**: User started the move input, `event.square` contains the coordinates. Return true or false to validate the start square.
+- **`INPUT_EVENT_TYPE.validateMoveInput`**: User finished the move input, `event.squareFrom` and `event.squareTo` contain the coordinates. Return true or false to validate the move input.
+- **`INPUT_EVENT_TYPE.moveInputCanceled`**: User canceled the move with clicking again on the start square or clicking outside the board.
 
 ```javascript
 chessboard.enableMoveInput((event) => {
-    switch (event.type) {
-        case INPUT_EVENT_TYPE.moveStart:
-            console.log(`moveStart: ${event.square}`)
-            // return `true`, if input is accepted/valid, `false` aborts the interaction, the piece will not move
-            return true
-        case INPUT_EVENT_TYPE.moveDone:
-            console.log(`moveDone: ${event.squareFrom}-${event.squareTo}`)
-            // return true, if input is accepted/valid, `false` takes the move back
-            return true
-        case INPUT_EVENT_TYPE.moveCanceled:
-            console.log(`moveCanceled`)
-    }
+  switch (event.type) {
+    case INPUT_EVENT_TYPE.moveInputStarted:
+      console.log(`moveInputStarted: ${event.square}`)
+      // return `true`, if input is accepted/valid, `false` aborts the interaction, the piece will not move
+      return true
+    case INPUT_EVENT_TYPE.validateMoveInput:
+      console.log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
+      // return true, if input is accepted/valid, `false` takes the move back
+      return true
+    case INPUT_EVENT_TYPE.moveInputCanceled:
+      console.log(`moveInputCanceled`)
+  }
 }, COLOR.white)
 ```
 
@@ -351,7 +347,7 @@ export const EXTENSION_POINT = {
     positionChanged: "positionChanged", // the positions of the pieces was changed
     boardChanged: "boardChanged", // the board (orientation) was changed
     moveInputToggled: "moveInputToggled", // move input was enabled or disabled
-    moveInput: "moveInput", // move started, cancelled or done
+    moveInput: "moveInput", // move started, canceled or validation // TODO validation in extensions is not awailable for now
     destroy: "destroy" // called, before the board is destroyed
 }
 ```
@@ -360,7 +356,7 @@ Enable extensions via the chessboard props.
 
 ```js
 const chessboard = new Chessboard(document.getElementById("board"), {
-    position: "start",
+    position: FEN.start,
     extensions: // list of used extensions
         [{
             class: MyCoolChessboardExtension, // the class of the extension
@@ -398,7 +394,7 @@ example [Accessibility extension](https://shaack.com/projekte/cm-chessboard/exam
 
 ```js
 const chessboard = new Chessboard(document.getElementById("board"), {
-    position: "start",
+    position: FEN.start,
     sprite: {url: "../assets/images/chessboard-sprite.svg"},
     // animationDuration: 0, // optional, set to 0 to disable animations
     style: {

package/examples/destroy-many-boards.html

@@ -31,12 +31,13 @@
 <div id="boards"></div>
 <script type="module">
     import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
+    import {FEN} from "../src/cm-chessboard/model/Position.js"
     const boardsDiv = document.getElementById("boards")
     const boardDiv = document.createElement("div")
     boardDiv.setAttribute("class", "board1")
     boardsDiv.appendChild(boardDiv)
     const largeBoard = new Chessboard(boardDiv, {
-        position: "start",
+        position: FEN.start,
         sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
     })
     const chess = new Chess()

package/examples/different-styles.html

@@ -21,9 +21,10 @@
 <div class="board" id="board9"></div>
 <script type="module">
     import {Chessboard, BORDER_TYPE} from "../src/cm-chessboard/Chessboard.js"
+    import {FEN} from "../src/cm-chessboard/model/Position.js"
 
     new Chessboard(document.getElementById("board1"), {
-        position: "start",
+        position: FEN.start,
         style: {
             cssClass: "green",
             borderType: BORDER_TYPE.frame
@@ -31,7 +32,7 @@
         sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
     })
     new Chessboard(document.getElementById("board2"), {
-        position: "start",
+        position: FEN.start,
         style: {
             cssClass: "chessboard-js",
             borderType: BORDER_TYPE.thin
@@ -39,7 +40,7 @@
         sprite: {url: "../assets/images/chessboard-sprite.svg", cache: false}
     })
     new Chessboard(document.getElementById("board3"), {
-        position: "start",
+        position: FEN.start,
         style: {
             cssClass: "chess-club",
             borderType: BORDER_TYPE.frame
@@ -47,7 +48,7 @@
         sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"}
     })
     new Chessboard(document.getElementById("board4"), {
-        position: "start",
+        position: FEN.start,
         style: {
             cssClass: "blue",
             borderType: BORDER_TYPE.thin,
@@ -56,14 +57,14 @@
         sprite: {url: "../assets/images/chessboard-sprite.svg", cache: false}
     })
     new Chessboard(document.getElementById("board5"), {
-        position: "start",
+        position: FEN.start,
         style: {
             borderType: BORDER_TYPE.none
         },
         sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
     })
     new Chessboard(document.getElementById("board6"), {
-        position: "start",
+        position: FEN.start,
         style: {
             cssClass: "blue",
             borderType: BORDER_TYPE.frame
@@ -71,21 +72,21 @@
         sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
     })
     new Chessboard(document.getElementById("board7"), {
-        position: "start",
+        position: FEN.start,
         style: {
             cssClass: "green"
         },
         sprite: {url: "../assets/images/chessboard-sprite.svg", cache: false},
     })
     new Chessboard(document.getElementById("board8"), {
-        position: "start",
+        position: FEN.start,
         style: {
             cssClass: "black-and-white"
         },
         sprite: {url: "../assets/images/chessboard-sprite.svg", cache: false},
     })
     new Chessboard(document.getElementById("board9"), {
-        position: "start",
+        position: FEN.start,
         style: {
             cssClass: "chessboard-js",
             borderType: BORDER_TYPE.frame

package/examples/enable-input.html

@@ -14,21 +14,21 @@
 <div class="board" id="board"></div>
 <pre>
 const board = new Chessboard(document.getElementById("board"), {
-    position: "start",
+    position: FEN.start,
     sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"}
 })
 
 board.enableMoveInput(inputHandler)
 function inputHandler(event) {
     switch (event.type) {
-        case INPUT_EVENT_TYPE.moveStart:
-            log(`moveStart: ${event.square}`)
+        case INPUT_EVENT_TYPE.moveInputStarted:
+            log(`moveInputStarted: ${event.square}`)
             return true
-        case INPUT_EVENT_TYPE.moveDone:
-            log(`moveDone: ${event.squareFrom}-${event.squareTo}`)
+        case INPUT_EVENT_TYPE.validateMoveInput:
+            log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
             return true
-        case INPUT_EVENT_TYPE.moveCanceled:
-            log(`moveCanceled`)
+        case INPUT_EVENT_TYPE.moveInputCanceled:
+            log(`moveInputCanceled`)
     }
 }
 </pre>
@@ -38,9 +38,10 @@ function inputHandler(event) {
 <div id="output" style="width: 100%; overflow: hidden"></div>
 <script type="module">
     import {INPUT_EVENT_TYPE, Chessboard} from "../src/cm-chessboard/Chessboard.js"
+    import {FEN} from "../src/cm-chessboard/model/Position.js"
 
     window.board = new Chessboard(document.getElementById("board"), {
-        position: "start",
+        position: FEN.start,
         sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"}
     })
 
@@ -48,14 +49,14 @@ function inputHandler(event) {
     function inputHandler(event) {
         console.log(event)
         switch (event.type) {
-            case INPUT_EVENT_TYPE.moveStart:
-                log(`moveStart: ${event.square}`)
+            case INPUT_EVENT_TYPE.moveInputStarted:
+                log(`moveInputStarted: ${event.square}`)
                 return true
-            case INPUT_EVENT_TYPE.moveDone:
-                log(`moveDone: ${event.squareFrom}-${event.squareTo}`)
+            case INPUT_EVENT_TYPE.validateMoveInput:
+                log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
                 return true
-            case INPUT_EVENT_TYPE.moveCanceled:
-                log(`moveCanceled`)
+            case INPUT_EVENT_TYPE.moveInputCanceled:
+                log(`moveInputCanceled`)
         }
     }
 

package/examples/input-callbacks.html

@@ -32,9 +32,10 @@
 </pre>
 <script type="module">
     import {Chessboard, MARKER_TYPE, SQUARE_SELECT_TYPE} from "../src/cm-chessboard/Chessboard.js"
+    import {FEN} from "../src/cm-chessboard/model/Position.js"
 
     const board1 = new Chessboard(document.getElementById("board1"), {
-        position: "start",
+        position: FEN.start,
         sprite: {url: "../assets/images/chessboard-sprite.svg", cache: false}
     })
     board1.enableSquareSelect((event) => {

package/examples/pieces-animation.html

@@ -45,10 +45,11 @@ await board.movePiece("d5", "f4")
 </pre>
 <script type="module">
     import {Chessboard, PIECE} from "../src/cm-chessboard/Chessboard.js"
+    import {FEN} from "../src/cm-chessboard/model/Position.js"
 
     const board = new Chessboard(document.getElementById("board"),
         {
-            position: "start",
+            position: FEN.start,
             sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
             animationDuration: 500
         })

package/examples/responsive-board.html

@@ -13,15 +13,16 @@
 <div id="board"></div>
 <pre>
 new Chessboard(document.getElementById("board"), {
-        position: "start",
+        position: FEN.start,
         style: {aspectRatio: 0.9}
     })
 </pre>
 <script type="module">
     import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
+    import {FEN} from "../src/cm-chessboard/model/Position.js"
 
     new Chessboard(document.getElementById("board"), {
-        position: "start",
+        position: FEN.start,
         sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
         style: {
             aspectRatio: 0.9
@@ -29,4 +30,4 @@ new Chessboard(document.getElementById("board"), {
     })
 </script>
 </body>
-</html>
+</html>

package/examples/simple-boards.html

@@ -15,7 +15,7 @@
 <br style="clear: both"/>
 <pre>
 new Chessboard(document.getElementById("board1"), {
-    position: "start"
+    position: FEN.start
 })
 new Chessboard(document.getElementById("board2"), {
     position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
@@ -24,9 +24,10 @@ new Chessboard(document.getElementById("board2"), {
 </pre>
 <script type="module">
     import {COLOR, Chessboard} from "../src/cm-chessboard/Chessboard.js"
+    import {FEN} from "../src/cm-chessboard/model/Position.js"
 
     new Chessboard(document.getElementById("board1"), {
-        position: "start",
+        position: FEN.start,
         sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
     })
     new Chessboard(document.getElementById("board2"), {
@@ -36,4 +37,4 @@ new Chessboard(document.getElementById("board2"), {
     })
 </script>
 </body>
-</html>
+</html>

package/examples/validate-moves.html

@@ -24,29 +24,31 @@ 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
-    } else if (event.type === INPUT_EVENT_TYPE.moveDone) {
+    } else if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
         const move = {from: event.squareFrom, to: event.squareTo}
         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(() => { // update position, maybe castled and 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)
+                    }
+                })
+            })
         } else {
             console.warn("invalid move", move)
         }
@@ -72,27 +74,31 @@ board.enableMoveInput(inputHandler, COLOR.white)
     function inputHandler(event) {
         console.log("event", event)
         event.chessboard.removeMarkers(MARKER_TYPE.dot)
-        if (event.type === INPUT_EVENT_TYPE.moveStart) {
+        if (event.type === INPUT_EVENT_TYPE.moveInputStarted) {
             const moves = chess.moves({square: event.square, verbose: true});
             for (const move of moves) { // draw dots on possible squares
                 event.chessboard.addMarker(MARKER_TYPE.dot, move.to)
             }
             return moves.length > 0
-        } else if (event.type === INPUT_EVENT_TYPE.moveDone) {
+        } else if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
             const move = {from: event.squareFrom, to: event.squareTo}
             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(() => { // update position, maybe castled and 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)
+                        }
+                    })
+                })
             } else {
                 console.warn("invalid move", move)
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "5.1.9",
+  "version": "5.2.2",
   "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"
@@ -15,9 +15,12 @@ export const COLOR = {
     black: "b"
 }
 export const INPUT_EVENT_TYPE = {
-    moveStart: "moveStart",
-    moveDone: "moveDone",
-    moveCanceled: "moveCanceled"
+    moveStart: "moveInputStarted", // TODO deprecated 2022-08-24, use `moveInputStarted`
+    moveInputStarted: "moveInputStarted",
+    moveDone: "validateMoveInput", // TODO deprecated 2022-08-24, use `validateMoveInput` https://github.com/shaack/cm-chessboard/issues/83
+    validateMoveInput: "validateMoveInput",
+    moveCanceled: "moveInputCanceled", // TODO deprecated 2022-08-24, use `moveInputCanceled`
+    moveInputCanceled: "moveInputCanceled",
 }
 export const SQUARE_SELECT_TYPE = {
     primary: "primary",
@@ -49,7 +52,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
             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 +122,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/extensions/accessibility/Accessibility.js

@@ -65,7 +65,7 @@ export class Accessibility extends Extension {
                 evt.preventDefault()
                 if (this.chessboard.view.moveInputCallback({
                     chessboard: this.chessboard,
-                    type: INPUT_EVENT_TYPE.moveDone,
+                    type: INPUT_EVENT_TYPE.validateMoveInput,
                     squareFrom: this.inputFrom.value,
                     squareTo: this.inputTo.value
                 })) {

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/Extension.js

@@ -8,7 +8,7 @@ export const EXTENSION_POINT = {
     positionChanged: "positionChanged", // the positions of the pieces was changed
     boardChanged: "boardChanged", // the board (orientation) was changed
     moveInputToggled: "moveInputToggled", // move input was enabled or disabled
-    moveInput: "moveInput", // move started, cancelled or done
+    moveInput: "moveInput", // move started, to validate or canceled // TODO validation not possible for now, see https://github.com/shaack/cm-chessboard/issues/82
     moveInputStateChanged: "moveInput", // TODO deprecated, use `moveInput`
     destroy: "destroy", // called, before the board is destroyed
     redrawBoard: "redrawBoard" // called while redrawing the board

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 {
 
@@ -13,12 +17,14 @@ export class Position {
         this.setFen(fen)
     }
 
-    setFen(fen = FEN_EMPTY_POSITION) {
+    setFen(fen = FEN.empty) {
         let fenNormalized
         if (fen === "start") {
-            fenNormalized = FEN_START_POSITION
+            console.warn("setting the position with the strings 'start' or 'empty' is deprecated, use FEN.start or FEN.empty")
+            fenNormalized = FEN.start
         } else if (fen === "empty" || fen === undefined) {
-            fenNormalized = FEN_EMPTY_POSITION
+            console.warn("setting the position with the strings 'start' or 'empty' is deprecated, use FEN.start or FEN.empty")
+            fenNormalized = FEN.empty
         } else {
             fenNormalized = fen
         }

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

@@ -53,9 +53,9 @@ export class ChessboardView {
     constructor(chessboard) {
         this.chessboard = chessboard
         this.moveInput = new VisualMoveInput(this,
-            this.moveStartCallback.bind(this),
-            this.moveDoneCallback.bind(this),
-            this.moveCanceledCallback.bind(this)
+            this.moveInputStartedCallback.bind(this),
+            this.validateMoveInputCallback.bind(this),
+            this.moveInputCanceledCallback.bind(this)
         )
         if (chessboard.props.sprite.cache) {
             this.cacheSpriteToDiv("chessboardSpriteCache", this.chessboard.props.sprite.url)
@@ -391,13 +391,13 @@ export class ChessboardView {
 
     // callbacks //
 
-    moveStartCallback(square) {
+    moveInputStartedCallback(square) {
         const data = {
             chessboard: this.chessboard,
-            type: INPUT_EVENT_TYPE.moveStart,
+            type: INPUT_EVENT_TYPE.moveInputStarted,
             square: square
         }
-        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data) // TODO use the return value of this EP
         if (this.moveInputCallback) {
             return this.moveInputCallback(data)
         } else {
@@ -405,14 +405,14 @@ export class ChessboardView {
         }
     }
 
-    moveDoneCallback(squareFrom, squareTo) {
+    validateMoveInputCallback(squareFrom, squareTo) {
         const data = {
             chessboard: this.chessboard,
-            type: INPUT_EVENT_TYPE.moveDone,
+            type: INPUT_EVENT_TYPE.validateMoveInput,
             squareFrom: squareFrom,
             squareTo: squareTo
         }
-        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data) // TODO use the return value of this EP
         if (this.moveInputCallback) {
             return this.moveInputCallback(data)
         } else {
@@ -420,10 +420,10 @@ export class ChessboardView {
         }
     }
 
-    moveCanceledCallback(reason, squareFrom, squareTo) {
+    moveInputCanceledCallback(reason, squareFrom, squareTo) {
         const data = {
             chessboard: this.chessboard,
-            type: INPUT_EVENT_TYPE.moveCanceled,
+            type: INPUT_EVENT_TYPE.moveInputCanceled,
             reason: reason,
             squareFrom: squareFrom,
             squareTo: squareTo

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,
@@ -28,17 +29,24 @@ const DRAG_THRESHOLD = 4
 
 export class VisualMoveInput {
 
-    constructor(view, moveStartCallback, moveDoneCallback, moveCanceledCallback) {
+    constructor(view, moveInputStartedCallback, validateMoveInputCallback, moveInputCanceledCallback) {
         this.view = view
         this.chessboard = view.chessboard
-        this.moveStartCallback = (square) => {
-            return moveStartCallback(square)
+        this.moveInputStartedCallback = (square) => {
+            const result = moveInputStartedCallback(square)
+            if(result) {
+                this.chessboard.state.moveInputProcess = createTask()
+            }
+            return result
         }
-        this.moveDoneCallback = (fromSquare, toSquare) => {
-            return moveDoneCallback(fromSquare, toSquare)
+        this.validateMoveInputCallback = (fromSquare, toSquare) => {
+            const result = validateMoveInputCallback(fromSquare, toSquare)
+            this.chessboard.state.moveInputProcess.resolve(result)
+            return result
         }
-        this.moveCanceledCallback = (reason, fromSquare, toSquare) => {
-            moveCanceledCallback(reason, fromSquare, toSquare)
+        this.moveInputCanceledCallback = (reason, fromSquare, toSquare) => {
+            moveInputCanceledCallback(reason, fromSquare, toSquare)
+            this.chessboard.state.moveInputProcess.resolve()
         }
         this.setMoveInputState(STATE.waitForInputStart)
     }
@@ -143,7 +151,7 @@ export class VisualMoveInput {
                     throw new Error("moveInputState")
                 }
                 this.toSquare = params.square
-                if (this.toSquare && this.moveDoneCallback(this.fromSquare, this.toSquare)) {
+                if (this.toSquare && this.validateMoveInputCallback(this.fromSquare, this.toSquare)) {
                     if (prevState === STATE.clickTo) {
                         this.chessboard.movePiece(this.fromSquare, this.toSquare, true).then(() => {
                             this.setMoveInputState(STATE.reset)
@@ -238,7 +246,7 @@ export class VisualMoveInput {
                     } else if (e.type === "touchstart") {
                         point = {x: e.touches[0].clientX, y: e.touches[0].clientY}
                     }
-                    if (this.moveInputState === STATE.waitForInputStart && pieceName && this.moveStartCallback(square)) {
+                    if (this.moveInputState === STATE.waitForInputStart && pieceName && this.moveInputStartedCallback(square)) {
                         this.setMoveInputState(STATE.pieceClickedThreshold, {
                             square: square,
                             piece: pieceName,
@@ -259,8 +267,8 @@ export class VisualMoveInput {
                             const startPieceName = this.chessboard.getPiece(this.fromSquare)
                             const startPieceColor = startPieceName ? startPieceName.substring(0, 1) : undefined
                             if (color && startPieceColor === pieceColor) {
-                                this.moveCanceledCallback(MOVE_CANCELED_REASON.clickedAnotherPiece, this.fromSquare, square)
-                                if (this.moveStartCallback(square)) {
+                                this.moveInputCanceledCallback(MOVE_CANCELED_REASON.clickedAnotherPiece, this.fromSquare, square)
+                                if (this.moveInputStartedCallback(square)) {
                                     this.setMoveInputState(STATE.pieceClickedThreshold, {
                                         square: square,
                                         piece: pieceName,
@@ -344,7 +352,7 @@ export class VisualMoveInput {
                         if (this.moveInputState === STATE.clickDragTo) {
                             this.chessboard.state.position.setPiece(this.fromSquare, this.movedPiece)
                             this.view.setPieceVisibility(this.fromSquare)
-                            this.moveCanceledCallback(MOVE_CANCELED_REASON.draggedBack, square, square)
+                            this.moveInputCanceledCallback(MOVE_CANCELED_REASON.draggedBack, square, square)
                             this.setMoveInputState(STATE.reset)
                         } else {
                             this.setMoveInputState(STATE.clickTo, {square: square})
@@ -356,13 +364,13 @@ export class VisualMoveInput {
                     this.setMoveInputState(STATE.clickTo, {square: square})
                 } else if (this.moveInputState === STATE.secondClickThreshold) {
                     this.setMoveInputState(STATE.reset)
-                    this.moveCanceledCallback(MOVE_CANCELED_REASON.secondClick, square, square)
+                    this.moveInputCanceledCallback(MOVE_CANCELED_REASON.secondClick, square, square)
                 }
             } else {
                 this.view.redrawPieces()
                 const moveStartSquare = this.fromSquare
                 this.setMoveInputState(STATE.reset)
-                this.moveCanceledCallback(MOVE_CANCELED_REASON.movedOutOfBoard, moveStartSquare, undefined)
+                this.moveInputCanceledCallback(MOVE_CANCELED_REASON.movedOutOfBoard, moveStartSquare, undefined)
             }
         } else {
             this.view.redrawPieces()

package/test/TestBoard.js

@@ -6,6 +6,7 @@
 
 import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
 import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
+import {FEN} from "../src/cm-chessboard/model/Position.js"
 
 describe("TestBoard", () => {
 
@@ -13,7 +14,7 @@ describe("TestBoard", () => {
     it("should create and immediately destroy a board without failure", () => {
         const chessboard = new Chessboard(document.getElementById("TestBoard"), {
             sprite: {url: "../assets/images/chessboard-sprite.svg"},
-            position: "start"
+            position: FEN.start
         })
         chessboard.destroy()
     })
@@ -21,7 +22,7 @@ describe("TestBoard", () => {
     it("should create and destroy a board", () => {
         const chessboard = new Chessboard(document.getElementById("TestBoard"), {
             sprite: {url: "../assets/images/chessboard-sprite.svg"},
-            position: "start"
+            position: FEN.start
         })
         assert.equal(chessboard.view.context.childNodes.length, 1)
         chessboard.destroy()

package/test/TestChessboard.js

@@ -6,13 +6,14 @@
 
 import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
 import {PIECE, Chessboard} from "../src/cm-chessboard/Chessboard.js"
+import {FEN} from "../src/cm-chessboard/model/Position.js"
 
 describe("TestChessboard", () => {
 
     it("should create and destroy a chessboard", () => {
         const chessboard = new Chessboard(document.getElementById("TestPosition"), {
             sprite: {url: "../assets/images/chessboard-sprite.svg"},
-            position: "start"
+            position: FEN.start
         })
         assert.equal(chessboard.getPosition(), "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
         chessboard.destroy()
@@ -30,7 +31,7 @@ describe("TestChessboard", () => {
     it("should get pieces on squares", () => {
         const chessboard = new Chessboard(document.getElementById("TestPosition"), {
             sprite: {url: "../assets/images/chessboard-sprite.svg"},
-            position: "start"
+            position: FEN.start
         })
         assert.equal(chessboard.getPiece("d1"), "wq")
         assert.equal(chessboard.getPiece("d8"), "bq")
@@ -40,7 +41,6 @@ describe("TestChessboard", () => {
 
     it("should set pieces on squares", () => {
         const chessboard = new Chessboard(document.getElementById("TestPosition"), {
-            position: "empty",
             sprite: {url: "../assets/images/chessboard-sprite.svg"},
         })
         chessboard.setPiece("a1", PIECE.bk)

package/test/TestMarkers.js

@@ -11,8 +11,7 @@ describe("TestMarkers", () => {
 
     it("should set and get markers", () => {
         const chessboard = new Chessboard(document.getElementById("TestMarkers"), {
-            sprite: {url: "../assets/images/chessboard-sprite.svg"},
-            position: "empty"
+            sprite: {url: "../assets/images/chessboard-sprite.svg"}
         })
         chessboard.addMarker(MARKER_TYPE.square, "e5")
         chessboard.addMarker(MARKER_TYPE.frame, "b6")