npm - cm-chessboard - Versions diffs - 4.3.7 → 4.4.1 - Mend

cm-chessboard 4.3.7 → 4.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +7 -6
package/examples/accessible-chessboard.html +1 -1
package/examples/test-getPiece.html +21 -0
package/index.html +5 -2
package/package.json +1 -1
package/src/cm-chessboard/Chessboard.js +2 -2
package/src/cm-chessboard/extensions/Accessibility.js +14 -9
package/src/cm-chessboard/model/Extension.js +6 -4
package/src/cm-chessboard/view/ChessboardView.js +5 -3
package/src/cm-chessboard/view/VisualMoveInput.js +13 -35

package/README.md CHANGED Viewed

@@ -33,7 +33,7 @@ aspects of chess games.
 **Option 2:** Download the code from [GitHub](https://github.com/shaack/cm-chessboard).
-**Option 3:** Use it via CDN https://cdn.jsdelivr.net/npm/cm-chessboard@4.1/src/cm-chessboard/Chessboard.js
+**Option 3:** Use it via CDN https://cdn.jsdelivr.net/npm/cm-chessboard@4/src/cm-chessboard/Chessboard.js
 After installation, copy the sprite in `cm-chessboard/assets/images/` to your projects `assets/images/`
 folder. If you put the sprite somewhere else you have to configure the location
@@ -337,7 +337,7 @@ and have access to the chessboard and can register extension points.
 class MyCoolChessboardExtension extends Extension {
     constructor(chessboard, props) {
         super(chessboard, props)
-        this.registerExtensionPoint(EXTENSION_POINT.moveInputStateChanged, (data) => {
+        this.registerExtensionPoint(EXTENSION_POINT.moveInput, (data) => {
             // do something on move [start | cancel | done]
             console.log(data)
         })
@@ -349,10 +349,11 @@ Currently possible extension points are defined in `Extension.js`.
 ```js
 export const EXTENSION_POINT = {
-    positionChanged: "positionChanged",
-    boardChanged: "boardChanged",
-    moveInputStateChanged: "moveInputStateChanged",
-    destroy: "destroy"
+  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, cancelled or done
+  destroy: "destroy" // called, before the board is destroyed
 }
 ```

package/examples/accessible-chessboard.html CHANGED Viewed

@@ -33,7 +33,7 @@
     import {Accessibility} from "../src/cm-chessboard/extensions/Accessibility.js"
     const chessboard = new Chessboard(document.getElementById("board"), {
-        position: "start",
+        position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
         sprite: {url: "../assets/images/chessboard-sprite.svg"},
         // animationDuration: 0, // optional, set to 0 to disable animations
         style: {

package/examples/test-getPiece.html ADDED Viewed

@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+<head>
+    <link rel="stylesheet" href="../assets/styles/cm-chessboard.css">
+    <title>frame test</title>
+</head>
+<body>
+Board:
+<div id="board"></div>
+<script type="module">
+    import { Chessboard, MARKER_TYPE } from '../src/cm-chessboard/Chessboard.js'
+    const board = new Chessboard(document.getElementById('board'), {
+        position: 'start',
+        sprite: {url: '../assets/images/chessboard-sprite.svg'},
+        style: {borderType: 'frame'}
+    })
+</script>
+</body>
+</html>

package/index.html CHANGED Viewed

@@ -19,7 +19,6 @@ It works, it is cool and it is easy to use. 👍</p>
     <ul>
         <li><a href="examples/simple-boards.html">Simple chessboards, view only</a></li>
         <li><a href="examples/responsive-board.html">Responsive chessboard</a></li>
-        <li><a href="examples/accessible-chessboard.html">All accessibility features turned on</a> 🆕</li>
         <li><a href="examples/enable-input.html">Input enabled without validation</a></li>
         <li><a href="examples/validate-moves.html">Input enabled, move validation with chess.js</a> 🥸</li>
         <li><a href="examples/pieces-animation.html">Set different positions, with animation</a></li>
@@ -28,6 +27,10 @@ It works, it is cool and it is easy to use. 👍</p>
         <li><a href="examples/many-boards.html">100 boards, in one page</a></li>
         <li><a href="examples/destroy-many-boards.html">Stress test, 5000 boards created and destroyed</a> 🤓 👍</li>
     </ul>
+    <h3>Examples of extensions</h3>
+    <ul>
+        <li><a href="examples/accessible-chessboard.html">Accessibility extension</a> 🆕</li>
+    </ul>
 </div>
 <h2>Chessboard</h2>
 <div class="board" id="board"></div>
@@ -53,7 +56,7 @@ It works, it is cool and it is easy to use. 👍</p>
     }
 </script>
 <div class="clearfix"></div>
-<h2>Test</h2>
+<h2>Tests</h2>
 <ul>
     <li><a href="test/">Run the unit tests</a></li>
 </ul>

package/package.json CHANGED Viewed

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

package/src/cm-chessboard/Chessboard.js CHANGED Viewed

@@ -97,7 +97,7 @@ export class Chessboard {
         this.view.redrawPieces()
         // instantiate extensions
         for (const extensionData of this.props.extensions) {
-            new extensionData.class(this, extensionData.props)
+            this.extensions.push(new extensionData.class(this, extensionData.props))
         }
     }
@@ -131,9 +131,9 @@ export class Chessboard {
             return
         }
         this.boardTurning = true
-        this.state.invokeExtensionPoints(EXTENSION_POINT.boardChanged)
         return this.positionAnimationsQueue.enqueueTurnBoard(position, color, animated).then(() => {
             this.boardTurning = false
+            this.state.invokeExtensionPoints(EXTENSION_POINT.boardChanged)
         })
     }

package/src/cm-chessboard/extensions/Accessibility.js CHANGED Viewed

@@ -94,7 +94,10 @@ export class Accessibility extends Extension {
                 this.piecesListContainer.classList.add("visually-hidden")
             }
         }
-        this.registerExtensionPoint(EXTENSION_POINT.moveInputStateChanged, () => {
+        this.registerExtensionPoint(EXTENSION_POINT.moveInput, () => {
+            this.updateFormInputs()
+        })
+        this.registerExtensionPoint(EXTENSION_POINT.moveInputToggled, () => {
             this.updateFormInputs()
         })
         this.registerExtensionPoint(EXTENSION_POINT.positionChanged, () => {
@@ -108,17 +111,19 @@ export class Accessibility extends Extension {
                 }
             }
         })
-        setTimeout(() => { // todo replace with something like this.chessboard.initialized.then(() => { ... })
-            this.updateFormInputs()
-            this.redrawPositionInAltAttribute()
+        this.registerExtensionPoint(EXTENSION_POINT.boardChanged, () => {
+            console.log("EXTENSION_POINT.boardChanged")
             if (this.props.boardAsTable) {
                 this.redrawBoardAsTable()
             }
-            if (this.props.piecesAsList) {
-                this.redrawPiecesLists()
-            }
         })
+        this.redrawPositionInAltAttribute()
+        if (this.props.boardAsTable) {
+            this.redrawBoardAsTable()
+        }
+        if (this.props.piecesAsList) {
+            this.redrawPiecesLists()
+        }
     }
     updateFormInputs() {
@@ -173,7 +178,7 @@ ${listB}`
     redrawBoardAsTable() {
         const squares = this.chessboard.state.position.squares.slice()
         const ranks = ["a", "b", "c", "d", "e", "f", "g", "h"]
-        const files = ["1", "2", "3", "4", "5", "6", "7", "8"]
+        const files = ["8", "7", "6", "5", "4", "3", "2", "1"]
         if (this.chessboard.state.orientation === COLOR.black) {
             ranks.reverse()
             files.reverse()

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

@@ -5,10 +5,12 @@
  */
 export const EXTENSION_POINT = {
-    positionChanged: "positionChanged",
-    boardChanged: "boardChanged",
-    moveInputStateChanged: "moveInputStateChanged",
-    destroy: "destroy"
+    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, cancelled or done
+    moveInputStateChanged: "moveInput", // TODO deprecated, use `moveInput`
+    destroy: "destroy" // called, before the board is destroyed
 }
 export class Extension {

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

@@ -370,6 +370,7 @@ export class ChessboardView {
         }
         this.chessboard.state.inputEnabled = true
         this.moveInputCallback = eventHandler
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputToggled, {enabled: true, color: color})
         this.visualizeInputState()
     }
@@ -378,6 +379,7 @@ export class ChessboardView {
         this.chessboard.state.inputBlackEnabled = false
         this.chessboard.state.inputEnabled = false
         this.moveInputCallback = undefined
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputToggled, {enabled: false})
         this.visualizeInputState()
     }
@@ -389,7 +391,7 @@ export class ChessboardView {
             type: INPUT_EVENT_TYPE.moveStart,
             square: square
         }
-        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputStateChanged, data)
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
         if (this.moveInputCallback) {
             return this.moveInputCallback(data)
         } else {
@@ -404,7 +406,7 @@ export class ChessboardView {
             squareFrom: squareFrom,
             squareTo: squareTo
         }
-        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputStateChanged, data)
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
         if (this.moveInputCallback) {
             return this.moveInputCallback(data)
         } else {
@@ -420,7 +422,7 @@ export class ChessboardView {
             squareFrom: squareFrom,
             squareTo: squareTo
         }
-        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputStateChanged, data)
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
         if (this.moveInputCallback) {
             this.moveInputCallback(data)
         }

package/src/cm-chessboard/view/VisualMoveInput.js CHANGED Viewed

@@ -26,41 +26,19 @@ export const MOVE_CANCELED_REASON = {
 const DRAG_THRESHOLD = 4
-function createTask() {
-    let resolve, reject
-    const promise = new Promise(function (_resolve, _reject) {
-        resolve = _resolve
-        reject = _reject
-    })
-    promise.resolve = resolve
-    promise.reject = reject
-    return promise
-}
 export class VisualMoveInput {
     constructor(view, moveStartCallback, moveDoneCallback, moveCanceledCallback) {
         this.view = view
         this.chessboard = view.chessboard
         this.moveStartCallback = (square) => {
-            const result = moveStartCallback(square)
-            if(result) {
-                this.chessboard.moveTask = createTask()
-            }
-            return result
+            return moveStartCallback(square)
         }
         this.moveDoneCallback = (fromSquare, toSquare) => {
-            const result = moveDoneCallback(fromSquare, toSquare)
-            if(result) {
-                this.chessboard.moveTask.resolve()
-            } else {
-                this.chessboard.moveTask.reject()
-            }
-            return result
+            return moveDoneCallback(fromSquare, toSquare)
         }
         this.moveCanceledCallback = (reason, fromSquare, toSquare) => {
             moveCanceledCallback(reason, fromSquare, toSquare)
-            this.chessboard.moveTask.reject()
         }
         this.setMoveInputState(STATE.waitForInputStart)
     }
@@ -239,18 +217,18 @@ export class VisualMoveInput {
     onPointerDown(e) {
         if (e.type === "mousedown" && e.button === 0 || e.type === "touchstart") {
             const square = e.target.getAttribute("data-square")
-            const pieceName = this.chessboard.getPiece(square)
-            // console.log("onPointerDown", square, pieceName)
-            let color
-            if (pieceName) {
-                color = pieceName ? pieceName.substring(0, 1) : undefined
-                // allow scrolling, if not pointed on draggable piece
-                if (color === "w" && this.chessboard.state.inputWhiteEnabled ||
-                    color === "b" && this.chessboard.state.inputBlackEnabled) {
-                    e.preventDefault()
-                }
-            }
             if (square) { // pointer on square
+                const pieceName = this.chessboard.getPiece(square)
+                // console.log("onPointerDown", square, pieceName)
+                let color
+                if (pieceName) {
+                    color = pieceName ? pieceName.substring(0, 1) : undefined
+                    // allow scrolling, if not pointed on draggable piece
+                    if (color === "w" && this.chessboard.state.inputWhiteEnabled ||
+                        color === "b" && this.chessboard.state.inputBlackEnabled) {
+                        e.preventDefault()
+                    }
+                }
                 if (this.moveInputState !== STATE.waitForInputStart ||
                     this.chessboard.state.inputWhiteEnabled && color === "w" ||
                     this.chessboard.state.inputBlackEnabled && color === "b") {