cm-chessboard 4.1.4 → 4.1.9

package/README.md

@@ -16,6 +16,7 @@ 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](https://shaack.com/projekte/cm-chessboard/examples/different-styles.html)
 - [Supports multiple piece sets](https://shaack.com/projekte/cm-chessboard/examples/different-styles.html)
+- [Supports an optimized usage for visually impaired people](https://shaack.com/projekte/cm-chessboard/examples/accessible-chessboard.html) 🆕
 - Uses SVG for rendering
 - Vanilla JavaScript modules in ECMAScript 6 syntax
 - **No dependencies**
@@ -53,7 +54,7 @@ The pieces animations are now smoother and less error-prone for race conditions.
 As of version 4.x, the API functions `setPosition()`, `setPiece()` and `movePiece()` are **not animated** as default.
 If you want some pieces animations you have to give the parameter `animated = true`.
 
-Also in 4.x the chessboard will become more accessible for visually impaired people but this is in alpha stage for now.
+And with 4.x the chessboard has become more accessible for visually impaired people.
 
 ## Usage
 
@@ -85,7 +86,7 @@ Below is the default configuration
 let defaultProps = {
   position: "empty", // set as fen, "start" or "empty"
   orientation: COLOR.white, // white on bottom
-  responsive: true, // resizes the board based on element size
+  responsive: true, // resize the board automatically to the size of the context element
   animationDuration: 300, // pieces animation duration in milliseconds. Disable all animation with `0`.
   language: navigator.language.substring(0,2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
   style: {

package/package.json

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

package/src/cm-chessboard/Chessboard.js

@@ -49,7 +49,7 @@ export class Chessboard {
         let defaultProps = {
             position: "empty", // set as fen, "start" or "empty"
             orientation: COLOR.white, // white on bottom
-            responsive: true, // resizes the board based on element size
+            responsive: true, // resize the board automatically to the size of the context element
             animationDuration: 300, // pieces animation duration in milliseconds. Disable all animation with `0`.
             language: navigator.language.substring(0,2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
             style: {
@@ -171,18 +171,6 @@ export class Chessboard {
         this.view.drawMarkers()
     }
 
-    destroy() {
-        this.positionAnimationsQueue.destroy()
-        this.view.destroy()
-        this.view = undefined
-        this.state = undefined
-        if (this.squareSelectListener) {
-            this.context.removeEventListener("contextmenu", this.squareSelectListener)
-            this.context.removeEventListener("mouseup", this.squareSelectListener)
-            this.context.removeEventListener("touchend", this.squareSelectListener)
-        }
-    }
-
     enableMoveInput(eventHandler, color = undefined) {
         this.view.enableMoveInput(eventHandler, color)
     }
@@ -225,4 +213,17 @@ export class Chessboard {
         this.view.visualizeInputState()
     }
 
+    destroy() {
+        this.positionAnimationsQueue.destroy()
+        this.view.destroy()
+        this.view = undefined
+        this.state = undefined
+        if (this.squareSelectListener) {
+            this.context.removeEventListener("contextmenu", this.squareSelectListener)
+            this.context.removeEventListener("mouseup", this.squareSelectListener)
+            this.context.removeEventListener("touchend", this.squareSelectListener)
+        }
+        this.destroyed = true
+    }
+
 }

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

@@ -113,12 +113,14 @@ export class ChessboardViewAccessible extends ChessboardView {
     redrawPieces(squares = this.chessboard.state.position.squares) {
         super.redrawPieces(squares)
         setTimeout(() => {
-            this.redrawPositionInAltAttribute()
-            if (this.chessboard.props.accessibility.boardAsTable) {
-                this.redrawBoardAsTable()
-            }
-            if (this.chessboard.props.accessibility.piecesAsList) {
-                this.redrawPiecesLists()
+            if(!this.chessboard.destroyed) {
+                this.redrawPositionInAltAttribute()
+                if (this.chessboard.props.accessibility.boardAsTable) {
+                    this.redrawBoardAsTable()
+                }
+                if (this.chessboard.props.accessibility.piecesAsList) {
+                    this.redrawPiecesLists()
+                }
             }
         })
     }

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

@@ -226,22 +226,26 @@ export class PositionAnimationsQueue extends PromiseQueue {
     }
 
     async enqueuePositionChange(positionFrom, positionTo, animated) {
-        return super.enqueue(() => new Promise((resolve) => {
-            let duration = animated ? this.chessboard.props.animationDuration : 0
-            if(this.queue.length > 0) {
-                duration = duration / (1 + Math.pow(this.queue.length / 5, 2))
-            }
-            // console.log("duration", duration, animated, "this.chessboard.props.animationDuration", this.chessboard.props.animationDuration)
-            new PositionsAnimation(this.chessboard.view,
-                positionFrom, positionTo, animated ? duration : 0,
-                () => {
-                    if(this.chessboard.view) { // if destroyed, no view anymore
-                        this.chessboard.view.redrawPieces(positionTo.squares)
-                    }
-                    resolve()
+        if(positionFrom.getFen() === positionTo.getFen()) {
+            return Promise.resolve()
+        } else {
+            return super.enqueue(() => new Promise((resolve) => {
+                let duration = animated ? this.chessboard.props.animationDuration : 0
+                if (this.queue.length > 0) {
+                    duration = duration / (1 + Math.pow(this.queue.length / 5, 2))
                 }
-            )
-        }))
+                // console.log("duration", duration, animated, "this.chessboard.props.animationDuration", this.chessboard.props.animationDuration)
+                new PositionsAnimation(this.chessboard.view,
+                    positionFrom, positionTo, animated ? duration : 0,
+                    () => {
+                        if (this.chessboard.view) { // if destroyed, no view anymore
+                            this.chessboard.view.redrawPieces(positionTo.squares)
+                        }
+                        resolve()
+                    }
+                )
+            }))
+        }
     }
 
     async enqueueTurnBoard(position, color, animated) {

package/docs/PositionsAnimation.md

@@ -1,11 +0,0 @@
-# Positions Queue
-
-- Extra Class
-- Holds the Queue
-- API 
-  - `isRunning(): boolean`
-  - `pushPosition(position, animated)`
-  - `run(): Promise` // starts the animation, callback when finished, if running : Promis
-  - `skip(callback): Promise` // skips all running steps, displays the last position and returns to callback
-- Positions are set immediately in the Model
-  - Then they are pushed into an Animations queue and run (if not running)

package/docs/PreMoves.md

@@ -1,3 +0,0 @@
-# Pre Moves
-
-- TODO