cm-chessboard 7.5.0 → 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)
@@ -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.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.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())
         }
@@ -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/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)