cm-chessboard 8.0.2 → 8.1.0

package/examples/extensions/markers-extension.html

@@ -23,6 +23,7 @@
 
     const board1 = new Chessboard(document.getElementById("board1"), {
         position: FEN.start,
+        assetsCache: false,
         assetsUrl: "../../assets/",
         extensions: [{class: Markers}]
     })
@@ -50,7 +51,6 @@
     }
     const board2 = new Chessboard(document.getElementById("board2"), {
         position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR",
-        assetsCache: false,
         assetsUrl: "../../assets/",
         style: {pieces: {file: "pieces/staunty.svg"}},
         extensions: [{class: Markers, autoMarkers: MARKER_TYPE.frame}]

package/examples/validate-moves.html

@@ -25,10 +25,15 @@
 
     const chess = new Chess()
 
+    let seed = 71;
+    function random() {
+        const x = Math.sin(seed++) * 10000;
+        return x - Math.floor(x);
+    }
     function makeEngineMove(chessboard) {
         const possibleMoves = chess.moves({verbose: true})
         if (possibleMoves.length > 0) {
-            const randomIndex = Math.floor(Math.random() * possibleMoves.length)
+            const randomIndex = Math.floor(random() * possibleMoves.length)
             const randomMove = possibleMoves[randomIndex]
             setTimeout(() => { // smoother with 500ms delay
                 chess.move({from: randomMove.from, to: randomMove.to})

package/package.json

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

package/src/Chessboard.js

@@ -46,7 +46,6 @@ export {FEN}
 export class Chessboard {
 
     constructor(context, props = {}) {
-        this.initialized = Promise.resolve()
         if (!context) {
             throw new Error("container element is " + context)
         }

package/src/extensions/arrows/Arrows.js

@@ -19,7 +19,7 @@ export class Arrows extends Extension {
     /** @constructor */
     constructor(chessboard, props = {}) {
         super(chessboard)
-        this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, () => {
+        this.registerExtensionPoint(EXTENSION_POINT.afterRedrawBoard, () => {
             this.onRedrawBoard()
         })
         this.props = {

package/src/extensions/markers/Markers.js

@@ -26,7 +26,7 @@ export class Markers extends Extension {
     /** @constructor */
     constructor(chessboard, props = {}) {
         super(chessboard)
-        this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, () => {
+        this.registerExtensionPoint(EXTENSION_POINT.afterRedrawBoard, () => {
             this.onRedrawBoard()
         })
         this.props = {

package/src/extensions/promotion-dialog/PromotionDialog.js

@@ -24,7 +24,7 @@ export class PromotionDialog extends Extension {
     /** @constructor */
     constructor(chessboard) {
         super(chessboard)
-        this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, this.extensionPointRedrawBoard.bind(this))
+        this.registerExtensionPoint(EXTENSION_POINT.afterRedrawBoard, this.extensionPointRedrawBoard.bind(this))
         chessboard.showPromotionDialog = this.showPromotionDialog.bind(this)
         chessboard.isPromotionDialogShown = this.isPromotionDialogShown.bind(this)
         this.promotionDialogGroup = Svg.addElement(chessboard.view.interactiveTopLayer, "g", {class: "promotion-dialog-group"})

package/src/model/Extension.js

@@ -9,7 +9,9 @@ export const EXTENSION_POINT = {
     boardChanged: "boardChanged", // the board (orientation) was changed
     moveInputToggled: "moveInputToggled", // move input was enabled or disabled
     moveInput: "moveInput", // move started, moving over a square, validating or canceled
-    redrawBoard: "redrawBoard", // called after redrawing the board
+    beforeRedrawBoard: "beforeRedrawBoard", // called before redrawing the board
+    afterRedrawBoard: "afterRedrawBoard", // called after redrawing the board
+    redrawBoard: "redrawBoard", // called after redrawing the board, DEPRECATED, use afterRedrawBoard
     animation: "animation", // called on animation start, end and on every animation frame
     destroy: "destroy" // called, before the board is destroyed
 }
@@ -21,6 +23,10 @@ export class Extension {
     }
 
     registerExtensionPoint(name, callback) {
+        if(name === EXTENSION_POINT.redrawBoard) {
+            console.warn("EXTENSION_POINT.redrawBoard is deprecated, use EXTENSION_POINT.afterRedrawBoard")
+            name = EXTENSION_POINT.afterRedrawBoard
+        }
         if (!this.chessboard.state.extensionPoints[name]) {
             this.chessboard.state.extensionPoints[name] = []
         }

package/src/view/ChessboardView.js

@@ -18,8 +18,8 @@ export class ChessboardView {
         if (chessboard.props.assetsCache) {
             this.cacheSpriteToDiv("cm-chessboard-sprite", this.getSpriteUrl())
         }
-        this.context = document.createElement("div")
-        this.chessboard.context.appendChild(this.context)
+        this.container = document.createElement("div")
+        this.chessboard.context.appendChild(this.container)
         if (chessboard.props.responsive) {
             if (typeof ResizeObserver !== "undefined") {
                 this.resizeObserver = new ResizeObserver(() => {
@@ -34,8 +34,8 @@ export class ChessboardView {
         this.positionsAnimationTask = Promise.resolve()
         this.pointerDownListener = this.pointerDownHandler.bind(this)
         this.pointerDownListener = this.pointerDownHandler.bind(this)
-        this.context.addEventListener("mousedown", this.pointerDownListener)
-        this.context.addEventListener("touchstart", this.pointerDownListener, {passive: false})
+        this.container.addEventListener("mousedown", this.pointerDownListener)
+        this.container.addEventListener("touchstart", this.pointerDownListener, {passive: false})
 
         this.createSvgAndGroups()
         this.updateMetrics()
@@ -80,7 +80,7 @@ export class ChessboardView {
     }
 
     createSvgAndGroups() {
-        this.svg = Svg.createSvg(this.context)
+        this.svg = Svg.createSvg(this.container)
         // let description = document.createElement("description")
         // description.innerText = "Chessboard"
         // description.id = "svg-description"
@@ -101,8 +101,8 @@ export class ChessboardView {
 
     updateMetrics() {
         const piecesTileSize = this.chessboard.props.style.pieces.tileSize
-        this.width = this.context.clientWidth
-        this.height = this.context.clientWidth * (this.chessboard.props.style.aspectRatio || 1)
+        this.width = this.container.clientWidth
+        this.height = this.container.clientWidth * (this.chessboard.props.style.aspectRatio || 1)
         if (this.chessboard.props.style.borderType === BORDER_TYPE.frame) {
             this.borderSize = this.width / 25
         } else if (this.chessboard.props.style.borderType === BORDER_TYPE.thin) {
@@ -120,9 +120,9 @@ export class ChessboardView {
     }
 
     handleResize() {
-        this.context.style.width = this.chessboard.context.clientWidth + "px"
-        this.context.style.height = (this.chessboard.context.clientWidth * this.chessboard.props.style.aspectRatio) + "px"
-        if (this.context.clientWidth !== this.width || this.context.clientHeight !== this.height) {
+        this.container.style.width = this.chessboard.context.clientWidth + "px"
+        this.container.style.height = (this.chessboard.context.clientWidth * this.chessboard.props.style.aspectRatio) + "px"
+        if (this.container.clientWidth !== this.width || this.container.clientHeight !== this.height) {
             this.updateMetrics()
             this.redrawBoard()
             this.redrawPieces()
@@ -132,9 +132,10 @@ export class ChessboardView {
     }
 
     redrawBoard() {
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.beforeRedrawBoard)
         this.redrawSquares()
         this.drawCoordinates()
-        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.redrawBoard)
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.afterRedrawBoard)
         this.visualizeInputState()
     }
 

package/test/TestBoard.js

@@ -24,7 +24,7 @@ describe("TestBoard", () => {
             assetsUrl: "../assets/",
             position: FEN.start
         })
-        assert.equal(chessboard.view.context.childNodes.length, 1)
+        assert.equal(chessboard.view.container.childNodes.length, 1)
         chessboard.destroy()
         assert.equal(chessboard.state, undefined)
     })