cm-chessboard 5.3.0 → 5.3.2

package/index.html

@@ -28,8 +28,9 @@ It works, it is cool and it is easy to use. 👍</p>
     </ul>
     <h3>Examples of extensions</h3>
     <ul>
-        <li><a href="examples/extensions/chessboard-accessibility-extension.html">Accessibility extension</a> 🆕</li>
-        <li><a href="examples/extensions/chessboard-arrows-extension.html">Arrows extension</a> 🆕</li>
+        <li><a href="examples/extensions/chessboard-accessibility-extension.html">Accessibility extension</a></li>
+        <li><a href="examples/extensions/chessboard-arrows-extension.html">Arrows extension</a></li>
+        <li><a href="examples/extensions/chessboard-promotion-extension.html">Promotion extension</a> 🆕</li>
     </ul>
 </div>
 <h2>Chessboard</h2>

package/package.json

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

package/src/cm-chessboard/extensions/promotion/Promotion.js

@@ -4,19 +4,33 @@
  * License: MIT, see file 'LICENSE'
  */
 import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
-import {INPUT_EVENT_TYPE} from "../../Chessboard.js"
+import {INPUT_EVENT_TYPE, PIECE} from "../../Chessboard.js"
 
 export class Promotion extends Extension {
 
     constructor(chessboard, props) {
         super(chessboard, props)
-        this.registerExtensionPoint(EXTENSION_POINT.moveInput, this.onMoveInput)
+        this.registerExtensionPoint(EXTENSION_POINT.moveInput, this.onMoveInput.bind(this))
     }
 
     onMoveInput(event) {
         if(event.type === INPUT_EVENT_TYPE.validateMoveInput) {
-            console.log("976000", event)
-            return false // todo show flashing marker and return move
+            console.log(this)
+            console.log("976000", event,
+                this.chessboard.getPiece(event.squareFrom),
+                this.chessboard.getPiece(event.squareTo))
+            if(event.piece === PIECE.wp && event.squareTo.charAt(1) === "8") {
+                return false
+            }
         }
     }
+
+    showPromotionDialog(event) {
+        this.promotionDialog = document.createElement("div")
+        this.promotionDialog.style.width = "50px"
+        this.promotionDialog.style.height = "50px"
+        this.promotionDialog.style.backgroundColor = "white"
+        // this.chessboard.view.
+    }
+
 }

package/src/cm-chessboard/model/ChessboardState.js

@@ -82,11 +82,15 @@ export class ChessboardState {
         const extensionPoints = this.extensionPoints[name]
         const dataCloned = Object.assign({}, data)
         dataCloned.extensionPoint = name
+        let returnValue = true
         if (extensionPoints) {
             for (const extensionPoint of extensionPoints) {
-                extensionPoint(dataCloned)
+                if(extensionPoint(dataCloned) === false) {
+                    returnValue = false
+                }
             }
         }
+        return returnValue
     }
 
 }

package/src/cm-chessboard/model/Extension.js

@@ -8,8 +8,8 @@ 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, 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`
+    moveInput: "moveInput", // move started, to validate or canceled
+    // moveInputStateChanged: "moveInput", // TODO deprecated, use `moveInput`
     redrawBoard: "redrawBoard", // called after redrawing the board
     destroy: "destroy" // called, before the board is destroyed
 }

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

@@ -5,7 +5,7 @@
  */
 
 import {VisualMoveInput} from "./VisualMoveInput.js"
-import {COLOR, INPUT_EVENT_TYPE, BORDER_TYPE} from "../Chessboard.js"
+import {BORDER_TYPE, COLOR, INPUT_EVENT_TYPE} from "../Chessboard.js"
 import {Position} from "../model/Position.js"
 import {EXTENSION_POINT} from "../model/Extension.js"
 
@@ -410,14 +410,18 @@ export class ChessboardView {
             chessboard: this.chessboard,
             type: INPUT_EVENT_TYPE.validateMoveInput,
             squareFrom: squareFrom,
-            squareTo: squareTo
+            squareTo: squareTo,
+            piece: this.chessboard.getPiece(squareFrom)
         }
-        const result = this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data) // TODO use the return value of this EP
         if (this.moveInputCallback) {
-            return this.moveInputCallback(data)
-        } else {
-            return true
-        }
+            // the "oldschool" move input validator
+            data.moveInputCallbackResult = this.moveInputCallback(data)
+        }
+        // the new extension points
+        const extensionPointsResult = this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
+        console.log("5b0d1f", extensionPointsResult, data.moveInputCallbackResult)
+        // validates, when moveInputCallbackResult and extensionPointsResult are true
+        return !(extensionPointsResult === false || !data.moveInputCallbackResult);
     }
 
     moveInputCanceledCallback(reason, squareFrom, squareTo) {