cm-chessboard 7.5.0 → 7.6.1

package/README.md

@@ -91,7 +91,7 @@ this.props = {
     borderType: BORDER_TYPE.none, // "thin" thin border, "frame" wide border with coordinates in it, "none" no border
     aspectRatio: 1, // height/width of the board
     pieces: {
-      type: PIECES_FILE_TYPE.svgSprite, // pieces are in a SVG sprite, no other type supported for now
+      type: PIECES_FILE_TYPE.svgSprite, // pieces are in an SVG sprite, no other type supported for now
       file: "standard.svg", // the filename of the sprite in `assets/pieces/`
       tileSize: 40 // the tile size in the sprite
     },
@@ -119,7 +119,7 @@ after the animation finished.
 
 ### getPiece(square)
 
-Returns the piece on a square or `undefined` if the square is empty.
+Returns the piece on a square or `null` if the square is empty.
 
 ### movePiece(squareFrom, squareTo, animated = false)
 

package/examples/validate-moves.html

@@ -39,6 +39,8 @@
     }
 
     function inputHandler(event) {
+        console.log("inputHandler", event)
+        console.log("fen", event.chessboard.getPosition())
         event.chessboard.removeMarkers(MARKER_TYPE.dot)
         event.chessboard.removeMarkers(MARKER_TYPE.bevel)
         if (event.type === INPUT_EVENT_TYPE.moveInputStarted) {
@@ -58,7 +60,6 @@
             const move = {from: event.squareFrom, to: event.squareTo, promotion: event.promotion}
             const result = chess.move(move)
             if (result) {
-                event.chessboard.disableMoveInput()
                 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
                         makeEngineMove(event.chessboard)
@@ -74,11 +75,11 @@
                             if (result) {
                                 chess.move({from: event.squareFrom, to: event.squareTo, promotion: result.piece.charAt(1)})
                                 event.chessboard.setPosition(chess.fen(), true)
-                                event.chessboard.disableMoveInput()
                                 makeEngineMove(event.chessboard)
                             } else {
-                                event.chessboard.setPosition(chess.fen(), true)
+                                // promotion canceled
                                 event.chessboard.enableMoveInput(inputHandler, COLOR.white)
+                                event.chessboard.setPosition(chess.fen(), true)
                             }
                         })
                         return true
@@ -86,13 +87,17 @@
                 }
             }
             return result
+        } else if (event.type === INPUT_EVENT_TYPE.moveInputFinished) {
+            if(event.legalMove) {
+                event.chessboard.disableMoveInput()
+            }
         }
     }
 
     const board = new Chessboard(document.getElementById("board"), {
         position: chess.fen(),
         assetsUrl: "../assets/",
-        style: {borderType: BORDER_TYPE.none, pieces: {file: "staunty.svg"}},
+        style: {borderType: BORDER_TYPE.none, pieces: {file: "staunty.svg"}, animationDuration: 300},
         orientation: COLOR.white,
         extensions: [
             {class: Markers, props: {autoMarkers: MARKER_TYPE.square}},

package/package.json

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

package/src/Chessboard.js

@@ -19,7 +19,8 @@ export const INPUT_EVENT_TYPE = {
     moveInputStarted: "moveInputStarted",
     movingOverSquare: "movingOverSquare", // while dragging or hover after click
     validateMoveInput: "validateMoveInput",
-    moveInputCanceled: "moveInputCanceled"
+    moveInputCanceled: "moveInputCanceled",
+    moveInputFinished: "moveInputFinished"
 }
 export const SQUARE_SELECT_TYPE = {
     primary: "primary",
@@ -63,7 +64,7 @@ export class Chessboard {
                 borderType: BORDER_TYPE.none, // "thin" thin border, "frame" wide border with coordinates in it, "none" no border
                 aspectRatio: 1, // height/width of the board
                 pieces: {
-                    type: PIECES_FILE_TYPE.svgSprite, // pieces are in a SVG sprite, no other type supported for now
+                    type: PIECES_FILE_TYPE.svgSprite, // pieces are in an SVG sprite, no other type supported for now
                     file: "standard.svg", // the filename of the sprite in `assets/pieces/`
                     tileSize: 40 // the tile size in the sprite
                 },

package/src/extensions/promotion-dialog/PromotionDialog.js

@@ -25,10 +25,10 @@ export class PromotionDialog extends Extension {
         this.promotionDialogGroup = Svg.addElement(chessboard.view.interactiveTopLayer, "g", {class: "promotion-dialog-group"})
         this.state = {
             displayState: DISPLAY_STATE.hidden,
-            callback: undefined,
+            callback: null,
             dialogParams: {
-                square: undefined,
-                color: undefined
+                square: null,
+                color: null
             }
         }
     }

package/src/model/Position.js

@@ -10,23 +10,13 @@ export const FEN = {
 
 export class Position {
 
-    constructor(fen = undefined) {
+    constructor(fen = FEN.empty) {
         this.squares = new Array(64).fill(null)
         this.setFen(fen)
     }
 
     setFen(fen = FEN.empty) {
-        let fenNormalized
-        if (fen === "start") {
-            console.warn("setting the position with the strings 'start' or 'empty' is deprecated, use FEN.start or FEN.empty", "used:", fen)
-            fenNormalized = FEN.start
-        } 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", "used:", fen)
-            fenNormalized = FEN.empty
-        } else {
-            fenNormalized = fen
-        }
-        const parts = fenNormalized.replace(/^\s*/, "").replace(/\s*$/, "").split(/\/|\s/)
+        const parts = fen.replace(/^\s*/, "").replace(/\s*$/, "").split(/\/|\s/)
         for (let part = 0; part < 8; part++) {
             const row = parts[7 - part].replace(/\d/g, (str) => {
                 const numSpaces = parseInt(str)
@@ -86,29 +76,29 @@ export class Position {
         const sort = (a, b) => {
             return sortBy.indexOf(a.name) - sortBy.indexOf(b.name)
         }
-        for(let i=0; i<64; i++) {
+        for (let i = 0; i < 64; i++) {
             const piece = this.squares[i]
-            if(piece) {
+            if (piece) {
                 pieces.push({
                     name: piece.charAt(1),
-                    color:  piece.charAt(0),
+                    color: piece.charAt(0),
                     position: Position.indexToSquare(i)
                 })
             }
         }
-        if(sortBy) {
+        if (sortBy) {
             pieces.sort(sort)
         }
         return pieces
     }
 
     movePiece(squareFrom, squareTo) {
-        if(!this.squares[Position.squareToIndex(squareFrom)]) {
+        if (!this.squares[Position.squareToIndex(squareFrom)]) {
             console.warn("no piece on", squareFrom)
             return
         }
         this.squares[Position.squareToIndex(squareTo)] = this.squares[Position.squareToIndex(squareFrom)]
-        this.squares[Position.squareToIndex(squareFrom)] = undefined
+        this.squares[Position.squareToIndex(squareFrom)] = null
     }
 
     setPiece(square, piece) {

package/src/view/ChessboardView.js

@@ -13,11 +13,7 @@ import {Svg} from "../lib/Svg.js"
 export class ChessboardView {
     constructor(chessboard) {
         this.chessboard = chessboard
-        this.visualMoveInput = new VisualMoveInput(this,
-            this.moveInputStartedCallback.bind(this),
-            this.movingOverSquareCallback.bind(this),
-            this.validateMoveInputCallback.bind(this),
-            this.moveInputCanceledCallback.bind(this))
+        this.visualMoveInput = new VisualMoveInput(this)
         if (chessboard.props.assetsCache) {
             this.cacheSpriteToDiv("cm-chessboard-sprite", this.getSpriteUrl())
         }
@@ -306,7 +302,7 @@ export class ChessboardView {
 
     // enable and disable move input //
 
-    enableMoveInput(eventHandler, color = undefined) {
+    enableMoveInput(eventHandler, color = null) {
         if (this.moveInputCallback) {
             throw Error("moveInput already enabled")
         }
@@ -328,7 +324,7 @@ export class ChessboardView {
         this.chessboard.state.inputWhiteEnabled = false
         this.chessboard.state.inputBlackEnabled = false
         this.chessboard.state.inputEnabled = false
-        this.moveInputCallback = undefined
+        this.moveInputCallback = null
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputToggled, {enabled: false})
         this.visualizeInputState()
     }
@@ -395,6 +391,20 @@ export class ChessboardView {
         }
     }
 
+    moveInputFinishedCallback(squareFrom, squareTo, legalMove) {
+        const data = {
+            chessboard: this.chessboard,
+            type: INPUT_EVENT_TYPE.moveInputFinished,
+            squareFrom: squareFrom,
+            squareTo: squareTo,
+            legalMove: legalMove
+        }
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
+        if (this.moveInputCallback) {
+            this.moveInputCallback(data)
+        }
+    }
+
     // Helpers //
 
     visualizeInputState() {

package/src/view/PositionAnimationsQueue.js

@@ -110,7 +110,7 @@ export class PositionsAnimation {
         }
         appearedList.forEach((appeared) => {
             let shortestDistance = 8
-            let foundMoved = undefined
+            let foundMoved = null
             disappearedList.forEach((disappeared) => {
                 if (appeared.piece === disappeared.piece) {
                     const moveDistance = PositionsAnimation.squareDistance(appeared.index, disappeared.index)

package/src/view/VisualMoveInput.js

@@ -30,27 +30,32 @@ const DRAG_THRESHOLD = 4
 
 export class VisualMoveInput {
 
-    constructor(view, moveInputStartedCallback, movingOverSquareCallback, validateMoveInputCallback, moveInputCanceledCallback) {
+    constructor(view) {
         this.view = view
         this.chessboard = view.chessboard
         this.moveInputState = null
+        this.fromSquare = null
+        this.toSquare = null
         this.moveInputStartedCallback = (square) => {
-            const result = moveInputStartedCallback(square)
+            const result = view.moveInputStartedCallback(square)
             if (result) {
                 this.chessboard.state.moveInputProcess = Utils.createTask()
+                this.chessboard.state.moveInputProcess.then((result) => {
+                    view.moveInputFinishedCallback(this.fromSquare, this.toSquare, result)
+                })
             }
             return result
         }
         this.movingOverSquareCallback = (fromSquare, toSquare) => {
-            movingOverSquareCallback(fromSquare, toSquare)
+            view.movingOverSquareCallback(fromSquare, toSquare)
         }
         this.validateMoveInputCallback = (fromSquare, toSquare) => {
-            const result = validateMoveInputCallback(fromSquare, toSquare)
+            const result = view.validateMoveInputCallback(fromSquare, toSquare)
             this.chessboard.state.moveInputProcess.resolve(result)
             return result
         }
         this.moveInputCanceledCallback = (fromSquare, toSquare, reason) => {
-            moveInputCanceledCallback(fromSquare, toSquare, reason)
+            view.moveInputCanceledCallback(fromSquare, toSquare, reason)
             this.chessboard.state.moveInputProcess.resolve()
         }
         this.setMoveInputState(MOVE_INPUT_STATE.waitForInputStart)
@@ -74,14 +79,14 @@ export class VisualMoveInput {
                 }
                 if (this.pointerMoveListener) {
                     removeEventListener(this.pointerMoveListener.type, this.pointerMoveListener)
-                    this.pointerMoveListener = undefined
+                    this.pointerMoveListener = null
                 }
                 if (this.pointerUpListener) {
                     removeEventListener(this.pointerUpListener.type, this.pointerUpListener)
-                    this.pointerUpListener = undefined
+                    this.pointerUpListener = null
                 }
                 this.fromSquare = params.square
-                this.toSquare = undefined
+                this.toSquare = null
                 this.movedPiece = params.piece
                 this.startPoint = params.point
                 if (!this.pointerMoveListener && !this.pointerUpListener) {
@@ -114,7 +119,7 @@ export class VisualMoveInput {
             case MOVE_INPUT_STATE.clickTo:
                 if (this.draggablePiece) {
                     Svg.removeElement(this.draggablePiece)
-                    this.draggablePiece = undefined
+                    this.draggablePiece = null
                 }
                 if (prevState === MOVE_INPUT_STATE.dragTo) {
                     this.view.setPieceVisibility(params.square, true)
@@ -174,24 +179,24 @@ export class VisualMoveInput {
                 if (this.fromSquare && !this.toSquare && this.movedPiece) {
                     this.chessboard.state.position.setPiece(this.fromSquare, this.movedPiece)
                 }
-                this.fromSquare = undefined
-                this.toSquare = undefined
-                this.movedPiece = undefined
+                this.fromSquare = null
+                this.toSquare = null
+                this.movedPiece = null
                 if (this.draggablePiece) {
                     Svg.removeElement(this.draggablePiece)
-                    this.draggablePiece = undefined
+                    this.draggablePiece = null
                 }
                 if (this.pointerMoveListener) {
                     removeEventListener(this.pointerMoveListener.type, this.pointerMoveListener)
-                    this.pointerMoveListener = undefined
+                    this.pointerMoveListener = null
                 }
                 if (this.pointerUpListener) {
                     removeEventListener(this.pointerUpListener.type, this.pointerUpListener)
-                    this.pointerUpListener = undefined
+                    this.pointerUpListener = null
                 }
                 if (this.contextMenuListener) {
                     removeEventListener("contextmenu", this.contextMenuListener)
-                    this.contextMenuListener = undefined
+                    this.contextMenuListener = null
                 }
                 this.setMoveInputState(MOVE_INPUT_STATE.waitForInputStart)
                 break
@@ -235,7 +240,7 @@ export class VisualMoveInput {
                 // console.log("onPointerDown", square, pieceName)
                 let color
                 if (pieceName) {
-                    color = pieceName ? pieceName.substring(0, 1) : undefined
+                    color = pieceName ? pieceName.substring(0, 1) : null
                     // allow scrolling, if not pointed on draggable piece
                     if (color === "w" && this.chessboard.state.inputWhiteEnabled ||
                         color === "b" && this.chessboard.state.inputBlackEnabled) {
@@ -268,9 +273,9 @@ export class VisualMoveInput {
                             })
                         } else {
                             const pieceName = this.chessboard.getPiece(square)
-                            const pieceColor = pieceName ? pieceName.substring(0, 1) : undefined
+                            const pieceColor = pieceName ? pieceName.substring(0, 1) : null
                             const startPieceName = this.chessboard.getPiece(this.fromSquare)
-                            const startPieceColor = startPieceName ? startPieceName.substring(0, 1) : undefined
+                            const startPieceColor = startPieceName ? startPieceName.substring(0, 1) : null
                             if (color && startPieceColor === pieceColor) {
                                 this.moveInputCanceledCallback(this.fromSquare, square, MOVE_CANCELED_REASON.clickedAnotherPiece)
                                 if (this.moveInputStartedCallback(square)) {
@@ -325,13 +330,13 @@ export class VisualMoveInput {
                 if (square !== this.fromSquare && square !== this.toSquare) {
                     this.toSquare = square
                     this.movingOverSquareCallback(this.fromSquare, this.toSquare)
-                } else if (square === this.fromSquare && this.toSquare !== undefined) {
-                    this.toSquare = undefined
+                } else if (square === this.fromSquare && this.toSquare !== null) {
+                    this.toSquare = null
                     this.movingOverSquareCallback(this.fromSquare, null)
                 }
             } else {
-                if (this.toSquare !== undefined) {
-                    this.toSquare = undefined
+                if (this.toSquare !== null) {
+                    this.toSquare = null
                     this.movingOverSquareCallback(this.fromSquare, null)
                 }
             }