cm-chessboard 7.4.4 → 7.6.0

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
     },

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)
@@ -76,8 +77,9 @@
                                 event.chessboard.setPosition(chess.fen(), true)
                                 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
@@ -85,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.4.4",
+  "version": "7.6.0",
   "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/view/ChessboardView.js

@@ -13,11 +13,7 @@ import {Svg} from "../lib/Svg.js"
 export class ChessboardView {
     constructor(chessboard) {
         this.chessboard = chessboard
-        this.moveInput = 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())
         }
@@ -47,11 +43,11 @@ export class ChessboardView {
     }
 
     pointerDownHandler(e) {
-        this.moveInput.onPointerDown(e)
+        this.visualMoveInput.onPointerDown(e)
     }
 
     destroy() {
-        this.moveInput.destroy()
+        this.visualMoveInput.destroy()
         if (this.resizeObserver) {
             this.resizeObserver.unobserve(this.chessboard.context)
         }
@@ -223,10 +219,12 @@ export class ChessboardView {
 
     redrawPieces(squares = this.chessboard.state.position.squares) {
         const childNodes = Array.from(this.piecesGroup.childNodes)
+        const isDragging = this.visualMoveInput.isDragging()
         for (let i = 0; i < 64; i++) {
             const pieceName = squares[i]
             if (pieceName) {
-                this.drawPieceOnSquare(Position.indexToSquare(i), pieceName)
+                const square = Position.indexToSquare(i)
+                this.drawPieceOnSquare(square, pieceName, isDragging && square === this.visualMoveInput.fromSquare)
             }
         }
         for (const childNode of childNodes) {
@@ -250,10 +248,13 @@ export class ChessboardView {
         return pieceGroup
     }
 
-    drawPieceOnSquare(square, pieceName) {
+    drawPieceOnSquare(square, pieceName, hidden = false) {
         const pieceGroup = Svg.addElement(this.piecesGroup, "g", {})
         pieceGroup.setAttribute("data-piece", pieceName)
         pieceGroup.setAttribute("data-square", square)
+        if(hidden) {
+            pieceGroup.setAttribute("visibility","hidden")
+        }
         const point = this.squareToPoint(square)
         const transform = (this.svg.createSVGTransform())
         transform.setTranslate(point.x, point.y)
@@ -302,7 +303,7 @@ export class ChessboardView {
     // enable and disable move input //
 
     enableMoveInput(eventHandler, color = undefined) {
-        if(this.moveInputCallback) {
+        if (this.moveInputCallback) {
             throw Error("moveInput already enabled")
         }
         if (color === COLOR.white) {
@@ -390,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/VisualMoveInput.js

@@ -7,7 +7,7 @@
 import {Svg} from "../lib/Svg.js"
 import {Utils} from "../lib/Utils.js"
 
-const STATE = {
+const MOVE_INPUT_STATE = {
     waitForInputStart: 0,
     pieceClickedThreshold: 1,
     clickTo: 2,
@@ -30,29 +30,35 @@ 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(STATE.waitForInputStart)
+        this.setMoveInputState(MOVE_INPUT_STATE.waitForInputStart)
     }
 
     setMoveInputState(newState, params = undefined) {
@@ -64,11 +70,11 @@ export class VisualMoveInput {
 
         switch (newState) {
 
-            case STATE.waitForInputStart:
+            case MOVE_INPUT_STATE.waitForInputStart:
                 break
 
-            case STATE.pieceClickedThreshold:
-                if (STATE.waitForInputStart !== prevState && STATE.clickTo !== prevState) {
+            case MOVE_INPUT_STATE.pieceClickedThreshold:
+                if (MOVE_INPUT_STATE.waitForInputStart !== prevState && MOVE_INPUT_STATE.clickTo !== prevState) {
                     throw new Error("moveInputState")
                 }
                 if (this.pointerMoveListener) {
@@ -110,25 +116,25 @@ export class VisualMoveInput {
                 }
                 break
 
-            case STATE.clickTo:
+            case MOVE_INPUT_STATE.clickTo:
                 if (this.draggablePiece) {
                     Svg.removeElement(this.draggablePiece)
                     this.draggablePiece = undefined
                 }
-                if (prevState === STATE.dragTo) {
+                if (prevState === MOVE_INPUT_STATE.dragTo) {
                     this.view.setPieceVisibility(params.square, true)
                 }
                 break
 
-            case STATE.secondClickThreshold:
-                if (STATE.clickTo !== prevState) {
+            case MOVE_INPUT_STATE.secondClickThreshold:
+                if (MOVE_INPUT_STATE.clickTo !== prevState) {
                     throw new Error("moveInputState")
                 }
                 this.startPoint = params.point
                 break
 
-            case STATE.dragTo:
-                if (STATE.pieceClickedThreshold !== prevState) {
+            case MOVE_INPUT_STATE.dragTo:
+                if (MOVE_INPUT_STATE.pieceClickedThreshold !== prevState) {
                     throw new Error("moveInputState")
                 }
                 if (this.view.chessboard.state.inputEnabled) {
@@ -137,8 +143,8 @@ export class VisualMoveInput {
                 }
                 break
 
-            case STATE.clickDragTo:
-                if (STATE.secondClickThreshold !== prevState) {
+            case MOVE_INPUT_STATE.clickDragTo:
+                if (MOVE_INPUT_STATE.secondClickThreshold !== prevState) {
                     throw new Error("moveInputState")
                 }
                 if (this.view.chessboard.state.inputEnabled) {
@@ -147,29 +153,29 @@ export class VisualMoveInput {
                 }
                 break
 
-            case STATE.moveDone:
-                if ([STATE.dragTo, STATE.clickTo, STATE.clickDragTo].indexOf(prevState) === -1) {
+            case MOVE_INPUT_STATE.moveDone:
+                if ([MOVE_INPUT_STATE.dragTo, MOVE_INPUT_STATE.clickTo, MOVE_INPUT_STATE.clickDragTo].indexOf(prevState) === -1) {
                     throw new Error("moveInputState")
                 }
                 this.toSquare = params.square
                 if (this.toSquare && this.validateMoveInputCallback(this.fromSquare, this.toSquare)) {
-                    if (prevState === STATE.clickTo) {
+                    if (prevState === MOVE_INPUT_STATE.clickTo) {
                         this.chessboard.movePiece(this.fromSquare, this.toSquare, true).then(() => {
-                            this.setMoveInputState(STATE.reset)
+                            this.setMoveInputState(MOVE_INPUT_STATE.reset)
                         })
                     } else {
                         this.chessboard.movePiece(this.fromSquare, this.toSquare, false).then(() => {
                             this.view.setPieceVisibility(this.toSquare, true)
-                            this.setMoveInputState(STATE.reset)
+                            this.setMoveInputState(MOVE_INPUT_STATE.reset)
                         })
                     }
                 } else {
                     this.view.setPieceVisibility(this.fromSquare, true)
-                    this.setMoveInputState(STATE.reset)
+                    this.setMoveInputState(MOVE_INPUT_STATE.reset)
                 }
                 break
 
-            case STATE.reset:
+            case MOVE_INPUT_STATE.reset:
                 if (this.fromSquare && !this.toSquare && this.movedPiece) {
                     this.chessboard.state.position.setPiece(this.fromSquare, this.movedPiece)
                 }
@@ -192,7 +198,7 @@ export class VisualMoveInput {
                     removeEventListener("contextmenu", this.contextMenuListener)
                     this.contextMenuListener = undefined
                 }
-                this.setMoveInputState(STATE.waitForInputStart)
+                this.setMoveInputState(MOVE_INPUT_STATE.waitForInputStart)
                 break
 
             default:
@@ -203,7 +209,7 @@ export class VisualMoveInput {
     createDraggablePiece(pieceName) {
         // maybe I should use the existing piece from the board and don't create a new one
         if (this.draggablePiece) {
-            throw Error("59c195")
+            throw Error("draggablePiece already exists")
         }
         this.draggablePiece = Svg.createSvg(document.body)
         this.draggablePiece.classList.add("cm-chessboard-draggable-piece")
@@ -241,7 +247,7 @@ export class VisualMoveInput {
                         e.preventDefault()
                     }
                 }
-                if (this.moveInputState !== STATE.waitForInputStart ||
+                if (this.moveInputState !== MOVE_INPUT_STATE.waitForInputStart ||
                     this.chessboard.state.inputWhiteEnabled && color === "w" ||
                     this.chessboard.state.inputBlackEnabled && color === "b") {
                     let point
@@ -250,16 +256,16 @@ 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.moveInputStartedCallback(square)) {
-                        this.setMoveInputState(STATE.pieceClickedThreshold, {
+                    if (this.moveInputState === MOVE_INPUT_STATE.waitForInputStart && pieceName && this.moveInputStartedCallback(square)) {
+                        this.setMoveInputState(MOVE_INPUT_STATE.pieceClickedThreshold, {
                             square: square,
                             piece: pieceName,
                             point: point,
                             type: e.type
                         })
-                    } else if (this.moveInputState === STATE.clickTo) {
+                    } else if (this.moveInputState === MOVE_INPUT_STATE.clickTo) {
                         if (square === this.fromSquare) {
-                            this.setMoveInputState(STATE.secondClickThreshold, {
+                            this.setMoveInputState(MOVE_INPUT_STATE.secondClickThreshold, {
                                 square: square,
                                 piece: pieceName,
                                 point: point,
@@ -273,17 +279,17 @@ export class VisualMoveInput {
                             if (color && startPieceColor === pieceColor) {
                                 this.moveInputCanceledCallback(this.fromSquare, square, MOVE_CANCELED_REASON.clickedAnotherPiece)
                                 if (this.moveInputStartedCallback(square)) {
-                                    this.setMoveInputState(STATE.pieceClickedThreshold, {
+                                    this.setMoveInputState(MOVE_INPUT_STATE.pieceClickedThreshold, {
                                         square: square,
                                         piece: pieceName,
                                         point: point,
                                         type: e.type
                                     })
                                 } else {
-                                    this.setMoveInputState(STATE.reset)
+                                    this.setMoveInputState(MOVE_INPUT_STATE.reset)
                                 }
                             } else {
-                                this.setMoveInputState(STATE.moveDone, {square: square})
+                                this.setMoveInputState(MOVE_INPUT_STATE.moveDone, {square: square})
                             }
                         }
                     }
@@ -307,18 +313,18 @@ export class VisualMoveInput {
             pageY = e.touches[0].pageY
             target = document.elementFromPoint(clientX, clientY)
         }
-        if (this.moveInputState === STATE.pieceClickedThreshold || this.moveInputState === STATE.secondClickThreshold) {
+        if (this.moveInputState === MOVE_INPUT_STATE.pieceClickedThreshold || this.moveInputState === MOVE_INPUT_STATE.secondClickThreshold) {
             if (Math.abs(this.startPoint.x - clientX) > DRAG_THRESHOLD || Math.abs(this.startPoint.y - clientY) > DRAG_THRESHOLD) {
-                if (this.moveInputState === STATE.secondClickThreshold) {
-                    this.setMoveInputState(STATE.clickDragTo, {square: this.fromSquare, piece: this.movedPiece})
+                if (this.moveInputState === MOVE_INPUT_STATE.secondClickThreshold) {
+                    this.setMoveInputState(MOVE_INPUT_STATE.clickDragTo, {square: this.fromSquare, piece: this.movedPiece})
                 } else {
-                    this.setMoveInputState(STATE.dragTo, {square: this.fromSquare, piece: this.movedPiece})
+                    this.setMoveInputState(MOVE_INPUT_STATE.dragTo, {square: this.fromSquare, piece: this.movedPiece})
                 }
                 if (this.view.chessboard.state.inputEnabled) {
                     this.moveDraggablePiece(pageX, pageY)
                 }
             }
-        } else if (this.moveInputState === STATE.dragTo || this.moveInputState === STATE.clickDragTo || this.moveInputState === STATE.clickTo) {
+        } else if (this.moveInputState === MOVE_INPUT_STATE.dragTo || this.moveInputState === MOVE_INPUT_STATE.clickDragTo || this.moveInputState === MOVE_INPUT_STATE.clickTo) {
             if (target && target.getAttribute && target.parentElement === this.view.boardGroup) {
                 const square = target.getAttribute("data-square")
                 if (square !== this.fromSquare && square !== this.toSquare) {
@@ -334,7 +340,7 @@ export class VisualMoveInput {
                     this.movingOverSquareCallback(this.fromSquare, null)
                 }
             }
-            if (this.view.chessboard.state.inputEnabled && (this.moveInputState === STATE.dragTo || this.moveInputState === STATE.clickDragTo)) {
+            if (this.view.chessboard.state.inputEnabled && (this.moveInputState === MOVE_INPUT_STATE.dragTo || this.moveInputState === MOVE_INPUT_STATE.clickDragTo)) {
                 this.moveDraggablePiece(pageX, pageY)
             }
         }
@@ -351,46 +357,50 @@ export class VisualMoveInput {
             const square = target.getAttribute("data-square")
 
             if (square) {
-                if (this.moveInputState === STATE.dragTo || this.moveInputState === STATE.clickDragTo) {
+                if (this.moveInputState === MOVE_INPUT_STATE.dragTo || this.moveInputState === MOVE_INPUT_STATE.clickDragTo) {
                     if (this.fromSquare === square) {
-                        if (this.moveInputState === STATE.clickDragTo) {
+                        if (this.moveInputState === MOVE_INPUT_STATE.clickDragTo) {
                             this.chessboard.state.position.setPiece(this.fromSquare, this.movedPiece)
                             this.view.setPieceVisibility(this.fromSquare)
                             this.moveInputCanceledCallback(square, null, MOVE_CANCELED_REASON.draggedBack)
-                            this.setMoveInputState(STATE.reset)
+                            this.setMoveInputState(MOVE_INPUT_STATE.reset)
                         } else {
-                            this.setMoveInputState(STATE.clickTo, {square: square})
+                            this.setMoveInputState(MOVE_INPUT_STATE.clickTo, {square: square})
                         }
                     } else {
-                        this.setMoveInputState(STATE.moveDone, {square: square})
+                        this.setMoveInputState(MOVE_INPUT_STATE.moveDone, {square: square})
                     }
-                } else if (this.moveInputState === STATE.pieceClickedThreshold) {
-                    this.setMoveInputState(STATE.clickTo, {square: square})
-                } else if (this.moveInputState === STATE.secondClickThreshold) {
-                    this.setMoveInputState(STATE.reset)
+                } else if (this.moveInputState === MOVE_INPUT_STATE.pieceClickedThreshold) {
+                    this.setMoveInputState(MOVE_INPUT_STATE.clickTo, {square: square})
+                } else if (this.moveInputState === MOVE_INPUT_STATE.secondClickThreshold) {
+                    this.setMoveInputState(MOVE_INPUT_STATE.reset)
                     this.moveInputCanceledCallback(square, null, MOVE_CANCELED_REASON.secondClick)
                 }
             } else {
                 this.view.redrawPieces()
                 const moveStartSquare = this.fromSquare
-                this.setMoveInputState(STATE.reset)
+                this.setMoveInputState(MOVE_INPUT_STATE.reset)
                 this.moveInputCanceledCallback(moveStartSquare, null, MOVE_CANCELED_REASON.movedOutOfBoard)
             }
         } else {
             this.view.redrawPieces()
-            this.setMoveInputState(STATE.reset)
+            this.setMoveInputState(MOVE_INPUT_STATE.reset)
         }
     }
 
     onContextMenu(e) { // while moving
         e.preventDefault()
         this.view.redrawPieces()
-        this.setMoveInputState(STATE.reset)
+        this.setMoveInputState(MOVE_INPUT_STATE.reset)
         this.moveInputCanceledCallback(this.fromSquare, null, MOVE_CANCELED_REASON.secondaryClick)
     }
 
+    isDragging() {
+        return this.moveInputState === MOVE_INPUT_STATE.dragTo || this.moveInputState === MOVE_INPUT_STATE.clickDragTo
+    }
+
     destroy() {
-        this.setMoveInputState(STATE.reset)
+        this.setMoveInputState(MOVE_INPUT_STATE.reset)
     }
 
 }