cm-chessboard 8.12.15 → 8.12.17

package/README.md

@@ -207,6 +207,9 @@ The event has the following **`event.type`**:
   Return `true` or `false` to validate the start square. `false` cancels the move.
 - **`INPUT_EVENT_TYPE.validateMoveInput`**: To validate the users move input. `event.squareFrom` and `event.squareTo`
   contain the coordinates. Return `true` or `false` to validate the move. `false` cancels the move.
+  `event.probe` is `true` when the target square still holds one of the mover's own pieces (e.g. clicking another own
+  piece, or a chess960 castling target). A falsy result then means "re-select that piece" rather than an illegal move,
+  so you can suppress illegal-move feedback when `event.probe` is set.
 - **`INPUT_EVENT_TYPE.moveInputCanceled`**: The user canceled the move with clicking again on the start square, clicking
   outside the board or right click.
 - **`INPUT_EVENT_TYPE.moveInputFinished`**: Fired after the move was made, also when canceled.

package/package.json

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

package/src/view/ChessboardView.js

@@ -68,6 +68,10 @@ export class ChessboardView {
         this.pointerDownListener = this.pointerDownHandler.bind(this)
         this.container.addEventListener("mousedown", this.pointerDownListener)
         this.container.addEventListener("touchstart", this.pointerDownListener, {passive: false})
+        // Suppress the native context menu on the whole board
+        // VisualMoveInput triggers a move cancel with a transient listener on right click
+        this.contextMenuListener = (e) => e.preventDefault()
+        this.container.addEventListener("contextmenu", this.contextMenuListener)
         this.createSvgAndGroups()
         this.handleResize()
     }
@@ -91,8 +95,9 @@ export class ChessboardView {
         if (this.resizeListener) {
             window.removeEventListener("resize", this.resizeListener)
         }
-        this.chessboard.context.removeEventListener("mousedown", this.pointerDownListener)
-        this.chessboard.context.removeEventListener("touchstart", this.pointerDownListener)
+        this.container.removeEventListener("mousedown", this.pointerDownListener)
+        this.container.removeEventListener("touchstart", this.pointerDownListener)
+        this.container.removeEventListener("contextmenu", this.contextMenuListener)
         Svg.removeElement(this.svg)
         this.container.remove()
     }
@@ -405,13 +410,18 @@ export class ChessboardView {
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
     }
 
-    validateMoveInputCallback(squareFrom, squareTo) {
+    validateMoveInputCallback(squareFrom, squareTo, probe = false) {
         const data = {
             chessboard: this.chessboard,
             type: INPUT_EVENT_TYPE.validateMoveInput,
             squareFrom: squareFrom,
             squareTo: squareTo,
-            piece: this.chessboard.getPiece(squareFrom)
+            piece: this.chessboard.getPiece(squareFrom),
+            // true when this is only a speculative check whether the clicked
+            // same-color piece is a legal target (e.g. chess960 castling). A
+            // falsy result then means "re-select this piece", not an illegal
+            // move, so consumers can suppress illegal-move feedback.
+            probe: probe
         }
         if (this.chessboard.state.moveInputCallback) {
             data.moveInputCallbackResult = this.chessboard.state.moveInputCallback(data)

package/src/view/VisualMoveInput.js

@@ -59,8 +59,8 @@ export class VisualMoveInput {
         this.view.movingOverSquareCallback(fromSquare, toSquare)
     }
 
-    validateMoveInputCallback(fromSquare, toSquare) {
-        const result = this.view.validateMoveInputCallback(fromSquare, toSquare)
+    validateMoveInputCallback(fromSquare, toSquare, probe = false) {
+        const result = this.view.validateMoveInputCallback(fromSquare, toSquare, probe)
         this.chessboard.state.moveInputProcess.resolve(result)
         return result
     }
@@ -208,7 +208,7 @@ export class VisualMoveInput {
                     this.pointerCancelListener = null
                 }
                 if (this.contextMenuListener) {
-                    removeEventListener("contextmenu", this.contextMenuListener)
+                    this.chessboard.view.svg.removeEventListener("contextmenu", this.contextMenuListener)
                     this.contextMenuListener = null
                 }
                 this.setMoveInputState(MOVE_INPUT_STATE.waitForInputStart)
@@ -298,8 +298,10 @@ export class VisualMoveInput {
                     const startPieceName = this.chessboard.getPiece(this.fromSquare)
                     const startPieceColor = startPieceName ? startPieceName.substring(0, 1) : null
                     if (color && startPieceColor === pieceColor) {
-                        // added to allow chess960 castling
-                        const result = this.validateMoveInputCallback(this.fromSquare, square)
+                        // added to allow chess960 castling. This is only a probe:
+                        // a falsy result means the user re-selected another own
+                        // piece, not that an illegal move was attempted.
+                        const result = this.validateMoveInputCallback(this.fromSquare, square, true)
                         if(!result) {
                             this.moveInputCanceledCallback(this.fromSquare, square, MOVE_CANCELED_REASON.clickedAnotherPiece)
                             if (this.moveInputStartedCallback(square)) {
@@ -384,14 +386,10 @@ export class VisualMoveInput {
             if (square) {
                 if (this.moveInputState === MOVE_INPUT_STATE.dragTo || this.moveInputState === MOVE_INPUT_STATE.clickDragTo) {
                     if (this.fromSquare === square) {
-                        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(MOVE_INPUT_STATE.reset)
-                        } else {
-                            this.setMoveInputState(MOVE_INPUT_STATE.clickTo, {square: square})
-                        }
+                        this.chessboard.state.position.setPiece(this.fromSquare, this.movedPiece)
+                        this.view.setPieceVisibility(this.fromSquare)
+                        this.moveInputCanceledCallback(square, null, MOVE_CANCELED_REASON.draggedBack)
+                        this.setMoveInputState(MOVE_INPUT_STATE.reset)
                     } else {
                         this.setMoveInputState(MOVE_INPUT_STATE.moveDone, {square: square})
                     }

package/test/TestVisualMoveInput.js

@@ -6,10 +6,12 @@
 
 import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
 import {Chessboard} from "../src/Chessboard.js"
+import {COLOR, INPUT_EVENT_TYPE} from "../src/view/ChessboardView.js"
 import {FEN} from "../src/model/Position.js"
 
 const STATE_WAIT_FOR_INPUT_START = "waitForInputStart"
 const STATE_PIECE_CLICKED_THRESHOLD = "pieceClickedThreshold"
+const STATE_CLICK_TO = "clickTo"
 
 describe("TestVisualMoveInput", () => {
 
@@ -37,4 +39,39 @@ describe("TestVisualMoveInput", () => {
         chessboard.destroy()
     })
 
+    it("should mark the same-color reselect validation as a probe", async () => {
+        const chessboard = new Chessboard(document.getElementById("TestBoard"), {
+            assetsUrl: "../assets/",
+            position: FEN.start
+        })
+        let probeSeen
+        chessboard.enableMoveInput((event) => {
+            if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
+                probeSeen = event.probe
+                return false // reject -> this is a re-selection, not a real move
+            }
+            return true
+        }, COLOR.white)
+        const visualMoveInput = chessboard.view.visualMoveInput
+
+        // simulate an existing click-to-move selection of the white e2 pawn
+        // (moveInputStartedCallback sets up the internal moveInputProcess task)
+        visualMoveInput.moveInputStartedCallback("e2")
+        visualMoveInput.moveInputState = STATE_CLICK_TO
+        visualMoveInput.fromSquare = "e2"
+
+        // click another own (white) piece, the d1 queen -> chess960 probe branch
+        visualMoveInput.onPointerDown({
+            type: "touchstart",
+            target: {getAttribute: (name) => (name === "data-square" ? "d1" : null)},
+            touches: [{clientX: 100, clientY: 100}],
+            preventDefault: () => {}
+        })
+
+        assert.equal(probeSeen, true)
+
+        await new Promise((resolve) => setTimeout(resolve))
+        chessboard.destroy()
+    })
+
 })