cm-chessboard 7.9.0 → 7.10.0

package/README.md

@@ -18,8 +18,8 @@ aspects of chess games.
 - [Can handle moves input via click or drag](https://shaack.com/projekte/cm-chessboard/examples/validate-moves.html)
 - [Styleable via css and supports multiple piece sets](https://shaack.com/projekte/cm-chessboard/examples/different-styles.html)
 - Uses SVG for rendering
-- [Allows adding **extensions
-  ** to extend the functionality](https://shaack.com/projekte/cm-chessboard/examples/extensions/arrows-extension.html)
+- [Allows adding **extensions** to extend the
+functionality](https://shaack.com/projekte/cm-chessboard/examples/extensions/arrows-extension.html)
 
 ## Extensions
 
@@ -88,25 +88,26 @@ Below is the default configuration
 
 ```javascript
 this.props = {
-    position: FEN.empty, // set position as fen, use FEN.start or FEN.empty as shortcuts
-    orientation: COLOR.white, // white on bottom
-    responsive: true, // resize the board automatically to the size of the context element
-    language: navigator.language.substring(0, 2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
-    assetsUrl: "./assets/", // put all css and sprites in this folder, will be ignored for absolute urls of assets files
-    assetsCache: true, // cache sprites
-    style: {
-        cssClass: "default", // set the css theme of the board, try "green", "blue" or "chess-club"
-        showCoordinates: true, // show ranks and files
-        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 an SVG sprite, no other type supported for now
-            file: "pieces/standard.svg", // the filename of the sprite in `assetsUrl` or an absolute url like `https://…` or `/…`
-            tileSize: 40 // the tile size in the sprite
-        },
-        animationDuration: 300 // pieces animation duration in milliseconds. Disable all animations with `0`.
+  position: FEN.empty, // set position as fen, use FEN.start or FEN.empty as shortcuts
+  orientation: COLOR.white, // white on bottom
+  responsive: true, // resize the board automatically to the size of the context element
+  language: navigator.language.substring(0, 2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
+  assetsUrl: "./assets/", // put all css and sprites in this folder, will be ignored for absolute urls of assets files
+  assetsCache: true, // cache sprites
+  style: {
+    cssClass: "default", // set the css theme of the board, try "green", "blue" or "chess-club"
+    showCoordinates: true, // show ranks and files
+    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 an SVG sprite, no other type supported for now
+      file: "pieces/standard.svg", // the filename of the sprite in `assets/pieces/` or an absolute url like `https://…` or `/…`
+      tileSize: 40 // the tile size in the sprite
     },
-    extensions: [ /* {class: ExtensionClass, props: { ... }} */] // add extensions here
+    // pieces animation duration in milliseconds. Disable all animations with `0`. Respects the operating system settings for reduced motion.
+    animationDuration: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300
+  },
+  extensions: [ /* {class: ExtensionClass, props: { ... }} */] // add extensions here
 }
 ```
 

package/package.json

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

package/src/Chessboard.js

@@ -70,7 +70,8 @@ export class Chessboard {
                     file: "pieces/standard.svg", // the filename of the sprite in `assets/pieces/` or an absolute url like `https://…` or `/…`
                     tileSize: 40 // the tile size in the sprite
                 },
-                animationDuration: 300 // pieces animation duration in milliseconds. Disable all animations with `0`.
+                // pieces animation duration in milliseconds. Disable all animations with `0`. Respects the operating system settings for reduced motion.
+                animationDuration: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300
             },
             extensions: [ /* {class: ExtensionClass, props: { ... }} */] // add extensions here
         }
@@ -122,7 +123,7 @@ export class Chessboard {
     async setOrientation(color, animated = false) {
         const position = this.state.position.clone()
         if (this.boardTurning) {
-            console.log("setOrientation is only once in queue allowed")
+            console.warn("setOrientation is only once in queue allowed")
             return
         }
         this.boardTurning = true

package/src/extensions/arrows/Arrows.js

@@ -78,10 +78,10 @@ export class Arrows extends Extension {
 
         const width = ((view.scalingX + view.scalingY) / 2) * 4
         let lineFill = Svg.addElement(arrowsGroup, "line")
-        lineFill.setAttribute('x1', x1)
-        lineFill.setAttribute('x2', x2)
-        lineFill.setAttribute('y1', y1)
-        lineFill.setAttribute('y2', y2)
+        lineFill.setAttribute('x1', x1.toString())
+        lineFill.setAttribute('x2', x2.toString())
+        lineFill.setAttribute('y1', y1.toString())
+        lineFill.setAttribute('y2', y2.toString())
         lineFill.setAttribute('class', 'arrow-line')
         lineFill.setAttribute("marker-end", "url(#" + id + ")")
         lineFill.setAttribute('stroke-width', width + "px")

package/src/model/ChessboardState.js

@@ -10,7 +10,6 @@ export class ChessboardState {
     constructor() {
         this.position = new Position()
         this.orientation = undefined
-        this.markers = []
         this.inputWhiteEnabled = false
         this.inputBlackEnabled = false
         this.inputEnabled = false

package/src/view/PositionAnimationsQueue.js

@@ -145,7 +145,6 @@ export class PositionsAnimation {
 
     createAnimation(fromSquares, toSquares) {
         const changes = PositionsAnimation.seekChanges(fromSquares, toSquares)
-        // console.log("changes", changes)
         const animatedElements = []
         changes.forEach((change) => {
             const animatedItem = {
@@ -172,7 +171,6 @@ export class PositionsAnimation {
     }
 
     animationStep(time) {
-        // console.log("animationStep", time)
         if(!this.view || !this.view.chessboard.state) { // board was destroyed
             return
         }

package/src/view/VisualMoveInput.js

@@ -36,38 +36,40 @@ export class VisualMoveInput {
         this.moveInputState = null
         this.fromSquare = null
         this.toSquare = null
-        this.moveInputStartedCallback = (square) => {
-            const result = view.moveInputStartedCallback(square)
-            if (result) {
-                this.chessboard.state.moveInputProcess = Utils.createTask()
-                this.chessboard.state.moveInputProcess.then((result) => {
-                    if (this.moveInputState === MOVE_INPUT_STATE.waitForInputStart ||
-                        this.moveInputState === MOVE_INPUT_STATE.moveDone) {
-                        view.moveInputFinishedCallback(this.fromSquare, this.toSquare, result)
-                    }
-                })
-            }
-            return result
-        }
-        this.movingOverSquareCallback = (fromSquare, toSquare) => {
-            view.movingOverSquareCallback(fromSquare, toSquare)
-        }
-        this.validateMoveInputCallback = (fromSquare, toSquare) => {
-            const result = view.validateMoveInputCallback(fromSquare, toSquare)
-            this.chessboard.state.moveInputProcess.resolve(result)
-            return result
-        }
-        this.moveInputCanceledCallback = (fromSquare, toSquare, reason) => {
-            view.moveInputCanceledCallback(fromSquare, toSquare, reason)
-            this.chessboard.state.moveInputProcess.resolve()
-        }
+
         this.setMoveInputState(MOVE_INPUT_STATE.waitForInputStart)
     }
 
-    setMoveInputState(newState, params = undefined) {
+    moveInputStartedCallback(square) {
+        const result = this.view.moveInputStartedCallback(square)
+        if (result) {
+            this.chessboard.state.moveInputProcess = Utils.createTask()
+            this.chessboard.state.moveInputProcess.then((result) => {
+                if (this.moveInputState === MOVE_INPUT_STATE.waitForInputStart ||
+                    this.moveInputState === MOVE_INPUT_STATE.moveDone) {
+                    this.view.moveInputFinishedCallback(this.fromSquare, this.toSquare, result)
+                }
+            })
+        }
+        return result
+    }
+
+    movingOverSquareCallback(fromSquare, toSquare) {
+        this.view.movingOverSquareCallback(fromSquare, toSquare)
+    }
 
-        // console.log("setMoveInputState", Object.keys(STATE)[this.moveInputState], "=>", Object.keys(STATE)[newState]);
+    validateMoveInputCallback(fromSquare, toSquare) {
+        const result = this.view.validateMoveInputCallback(fromSquare, toSquare)
+        this.chessboard.state.moveInputProcess.resolve(result)
+        return result
+    }
+
+    moveInputCanceledCallback(fromSquare, toSquare, reason) {
+            this.view.moveInputCanceledCallback(fromSquare, toSquare, reason)
+            this.chessboard.state.moveInputProcess.resolve()
+    }
 
+    setMoveInputState(newState, params = undefined) {
         const prevState = this.moveInputState
         this.moveInputState = newState
 
@@ -162,16 +164,12 @@ export class VisualMoveInput {
                 }
                 this.toSquare = params.square
                 if (this.toSquare && this.validateMoveInputCallback(this.fromSquare, this.toSquare)) {
-                    if (prevState === MOVE_INPUT_STATE.clickTo) {
-                        this.chessboard.movePiece(this.fromSquare, this.toSquare, true).then(() => {
-                            this.setMoveInputState(MOVE_INPUT_STATE.reset)
-                        })
-                    } else {
-                        this.chessboard.movePiece(this.fromSquare, this.toSquare, false).then(() => {
+                    this.chessboard.movePiece(this.fromSquare, this.toSquare, prevState === MOVE_INPUT_STATE.clickTo).then(() => {
+                        if (prevState === MOVE_INPUT_STATE.clickTo) {
                             this.view.setPieceVisibility(this.toSquare, true)
-                            this.setMoveInputState(MOVE_INPUT_STATE.reset)
-                        })
-                    }
+                        }
+                        this.setMoveInputState(MOVE_INPUT_STATE.reset)
+                    })
                 } else {
                     this.view.setPieceVisibility(this.fromSquare, true)
                     this.setMoveInputState(MOVE_INPUT_STATE.reset)
@@ -241,65 +239,68 @@ export class VisualMoveInput {
     }
 
     onPointerDown(e) {
-        if (e.type === "mousedown" && e.button === 0 || e.type === "touchstart") {
-            const square = e.target.getAttribute("data-square")
-            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) : null
-                    // 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 !== MOVE_INPUT_STATE.waitForInputStart ||
-                    this.chessboard.state.inputWhiteEnabled && color === "w" ||
-                    this.chessboard.state.inputBlackEnabled && color === "b") {
-                    let point
-                    if (e.type === "mousedown") {
-                        point = {x: e.clientX, y: e.clientY}
-                    } else if (e.type === "touchstart") {
-                        point = {x: e.touches[0].clientX, y: e.touches[0].clientY}
-                    }
-                    if (this.moveInputState === MOVE_INPUT_STATE.waitForInputStart && pieceName && this.moveInputStartedCallback(square)) {
-                        this.setMoveInputState(MOVE_INPUT_STATE.pieceClickedThreshold, {
-                            square: square,
-                            piece: pieceName,
-                            point: point,
-                            type: e.type
-                        })
-                    } else if (this.moveInputState === MOVE_INPUT_STATE.clickTo) {
-                        if (square === this.fromSquare) {
-                            this.setMoveInputState(MOVE_INPUT_STATE.secondClickThreshold, {
+        if (!(e.type === "mousedown" && e.button === 0 || e.type === "touchstart")) {
+            return;
+        }
+
+        const square = e.target.getAttribute("data-square")
+        if (!square) { // pointer on square
+            return;
+        }
+
+        const pieceName = this.chessboard.getPiece(square)
+        let color
+        if (pieceName) {
+            color = pieceName ? pieceName.substring(0, 1) : null
+            // 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 !== MOVE_INPUT_STATE.waitForInputStart ||
+            this.chessboard.state.inputWhiteEnabled && color === "w" ||
+            this.chessboard.state.inputBlackEnabled && color === "b") {
+            let point
+            if (e.type === "mousedown") {
+                point = {x: e.clientX, y: e.clientY}
+            } else if (e.type === "touchstart") {
+                point = {x: e.touches[0].clientX, y: e.touches[0].clientY}
+            }
+            if (this.moveInputState === MOVE_INPUT_STATE.waitForInputStart && pieceName && this.moveInputStartedCallback(square)) {
+                this.setMoveInputState(MOVE_INPUT_STATE.pieceClickedThreshold, {
+                    square: square,
+                    piece: pieceName,
+                    point: point,
+                    type: e.type
+                })
+            } else if (this.moveInputState === MOVE_INPUT_STATE.clickTo) {
+                if (square === this.fromSquare) {
+                    this.setMoveInputState(MOVE_INPUT_STATE.secondClickThreshold, {
+                        square: square,
+                        piece: pieceName,
+                        point: point,
+                        type: e.type
+                    })
+                } else {
+                    const pieceName = this.chessboard.getPiece(square)
+                    const pieceColor = pieceName ? pieceName.substring(0, 1) : null
+                    const startPieceName = this.chessboard.getPiece(this.fromSquare)
+                    const startPieceColor = startPieceName ? startPieceName.substring(0, 1) : null
+                    if (color && startPieceColor === pieceColor) {
+                        this.moveInputCanceledCallback(this.fromSquare, square, MOVE_CANCELED_REASON.clickedAnotherPiece)
+                        if (this.moveInputStartedCallback(square)) {
+                            this.setMoveInputState(MOVE_INPUT_STATE.pieceClickedThreshold, {
                                 square: square,
                                 piece: pieceName,
                                 point: point,
                                 type: e.type
                             })
                         } else {
-                            const pieceName = this.chessboard.getPiece(square)
-                            const pieceColor = pieceName ? pieceName.substring(0, 1) : null
-                            const startPieceName = this.chessboard.getPiece(this.fromSquare)
-                            const startPieceColor = startPieceName ? startPieceName.substring(0, 1) : null
-                            if (color && startPieceColor === pieceColor) {
-                                this.moveInputCanceledCallback(this.fromSquare, square, MOVE_CANCELED_REASON.clickedAnotherPiece)
-                                if (this.moveInputStartedCallback(square)) {
-                                    this.setMoveInputState(MOVE_INPUT_STATE.pieceClickedThreshold, {
-                                        square: square,
-                                        piece: pieceName,
-                                        point: point,
-                                        type: e.type
-                                    })
-                                } else {
-                                    this.setMoveInputState(MOVE_INPUT_STATE.reset)
-                                }
-                            } else {
-                                this.setMoveInputState(MOVE_INPUT_STATE.moveDone, {square: square})
-                            }
+                            this.setMoveInputState(MOVE_INPUT_STATE.reset)
                         }
+                    } else {
+                        this.setMoveInputState(MOVE_INPUT_STATE.moveDone, {square: square})
                     }
                 }
             }
@@ -346,12 +347,11 @@ export class VisualMoveInput {
                     this.toSquare = null
                     this.movingOverSquareCallback(this.fromSquare, null)
                 }
-            } else {
-                if (this.toSquare !== null) {
-                    this.toSquare = null
-                    this.movingOverSquareCallback(this.fromSquare, null)
-                }
+            } else if (this.toSquare !== null) {
+                this.toSquare = null
+                this.movingOverSquareCallback(this.fromSquare, null)
             }
+
             if (this.view.chessboard.state.inputEnabled && (this.moveInputState === MOVE_INPUT_STATE.dragTo || this.moveInputState === MOVE_INPUT_STATE.clickDragTo)) {
                 this.moveDraggablePiece(pageX, pageY)
             }