cm-chessboard 7.3.3 → 7.3.5

package/README.md

@@ -356,8 +356,9 @@ 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", // to validate and/or cancel the move on start or end
+  moveInput: "moveInput", // move started, moving over a square, validating or canceled
   redrawBoard: "redrawBoard", // called after redrawing the board
+  animation: "animation", // called on animation start, end and on every animation frame
   destroy: "destroy" // called, before the board is destroyed
 }
 ```

package/examples/extensions/accessibility-extension.html

@@ -16,6 +16,10 @@
     It allows a better usage of the board for visually impaired
     people.
 </p>
+<p>
+    The <a href="../validate-moves.html">validate moves</a> example has also
+    accessibility features enabled, but visually hidden.
+</p>
 <h3>Features of the Accessibility extension</h3>
 <ul>
     <li>Enable Braille notation in the alt text of the chessboard image</li>

package/examples/simple-boards.html

@@ -19,13 +19,12 @@ new Chessboard(document.getElementById("board1"), {
 })
 new Chessboard(document.getElementById("board2"), {
     position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
-    assetsCache: false,
-    style: {pieces: {file: "staunty.svg"}},
+    style: {pieces: {file: "staunty.svg"},cssClass: "green", borderType: BORDER_TYPE.frame},
     orientation: COLOR.black
 })
 </pre>
 <script type="module">
-    import {COLOR, Chessboard} from "../src/cm-chessboard/Chessboard.js"
+    import {COLOR, Chessboard, BORDER_TYPE} from "../src/cm-chessboard/Chessboard.js"
     import {FEN} from "../src/cm-chessboard/model/Position.js"
 
     new Chessboard(document.getElementById("board1"), {
@@ -36,7 +35,7 @@ new Chessboard(document.getElementById("board2"), {
         position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
         assetsUrl: "../assets/",
         assetsCache: false,
-        style: {pieces: {file: "staunty.svg"}},
+        style: {pieces: {file: "staunty.svg"},cssClass: "green", borderType: BORDER_TYPE.frame},
         orientation: COLOR.black
     })
 </script>

package/examples/validate-moves.html

@@ -14,7 +14,7 @@
 <h2>Example: Input enabled, move validation with chess.js</h2>
 <p>Input enabled for white. <a href="https://github.com/jhlywa/chess.js">chess.js</a> does the validation and answers
     with random moves.</p>
-<h2 class="cm-visually-hidden">The Board</h2>
+<h2 class="cm-visually-hidden">Chessboard</h2>
 <div class="board board-large" id="board"></div>
 <h2 class="cm-visually-hidden">The Sourcecode of the example</h2>
 <div id="output"></div>
@@ -23,6 +23,7 @@
     import {INPUT_EVENT_TYPE, COLOR, Chessboard, BORDER_TYPE} from "../src/cm-chessboard/Chessboard.js"
     import {MARKER_TYPE, Markers} from "../src/cm-chessboard/extensions/markers/Markers.js"
     import {PromotionDialog} from "../src/cm-chessboard/extensions/promotion-dialog/PromotionDialog.js"
+    import {Accessibility} from "../src/cm-chessboard/extensions/accessibility/Accessibility.js"
 
     const chess = new Chess()
 
@@ -77,7 +78,8 @@
         orientation: COLOR.white,
         extensions: [
             {class: Markers, props: {autoMarkers: MARKER_TYPE.square}},
-            {class: PromotionDialog}
+            {class: PromotionDialog},
+            {class: Accessibility, props: {visuallyHidden: true}}
         ]
     })
     board.enableMoveInput(inputHandler, COLOR.white)

package/package.json

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

package/src/cm-chessboard/extensions/accessibility/Accessibility.js

@@ -12,9 +12,9 @@ const hlTranslations = {
         pieces_lists: "Figurenlisten",
         board_as_table: "Schachbrett als Tabelle",
         move_piece: "Figur bewegen",
-        from: "von",
-        to: "nach",
-        move: "bewegen",
+        from: "Zug von",
+        to: "Zug nach",
+        move: "Zug ausführen",
         input_white_enabled: "Eingabe Weiß aktiviert",
         input_black_enabled: "Eingabe Schwarz aktiviert",
         input_disabled: "Eingabe deaktiviert"
@@ -23,9 +23,9 @@ const hlTranslations = {
         pieces_lists: "Pieces lists",
         board_as_table: "Chessboard as table",
         move_piece: "Move piece",
-        from: "from",
-        to: "to",
-        move: "move",
+        from: "Move from",
+        to: "Move to",
+        move: "Make move",
         input_white_enabled: "Input white enabled",
         input_black_enabled: "Input black enabled",
         input_disabled: "Input disabled"
@@ -38,9 +38,9 @@ export class Accessibility extends Extension {
         super(chessboard, props)
         this.props = {
             brailleNotationInAlt: true, // show the braille notation of the position in the alt attribute of the SVG image
-            boardAsTable: false, // display the board additionally as HTML table
-            movePieceForm: false, // display a form to move a piece (from, to, move)
-            piecesAsList: false, // display the pieces additionally as List
+            boardAsTable: true, // display the board additionally as HTML table
+            movePieceForm: true, // display a form to move a piece (from, to, move)
+            piecesAsList: true, // display the pieces additionally as List
             visuallyHidden: true // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
         }
         Object.assign(this.props, props)

package/src/cm-chessboard/lib/Utils.js

@@ -38,4 +38,15 @@ export class Utils {
         return target
     }
 
+    static createTask() {
+        let resolve, reject
+        const promise = new Promise(function (_resolve, _reject) {
+            resolve = _resolve
+            reject = _reject
+        })
+        promise.resolve = resolve
+        promise.reject = reject
+        return promise
+    }
+
 }

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

@@ -5,17 +5,6 @@
  */
 import {Position} from "./Position.js"
 
-export 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 ChessboardState {
 
     constructor() {
@@ -27,30 +16,7 @@ export class ChessboardState {
         this.inputEnabled = false
         this.squareSelectEnabled = false
         this.extensionPoints = {}
-        this.moveInputProcess = createTask().resolve()
-    }
-
-    setPosition(fen, animated = false) {
-        this.position = new Position(fen, animated)
-    }
-
-    movePiece(fromSquare, toSquare, animated = false) {
-        const position = this._position.clone()
-        position.animated = animated
-        const piece = position.getPiece(fromSquare)
-        if (!piece) {
-            console.error("no piece on", fromSquare)
-        }
-        position.setPiece(fromSquare, undefined)
-        position.setPiece(toSquare, piece)
-        this._position = position
-    }
-
-    setPiece(square, piece, animated = false) {
-        const position = this._position.clone()
-        position.animated = animated
-        position.setPiece(square, piece)
-        this._position = position
+        this.moveInputProcess = Promise.resolve()
     }
 
     invokeExtensionPoints(name, data = {}) {

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

@@ -96,7 +96,7 @@ export class ChessboardView {
         this.svg.setAttribute("role", "img")
         this.updateMetrics()
         this.boardGroup = Svg.addElement(this.svg, "g", {class: "board"})
-        this.coordinatesGroup = Svg.addElement(this.svg, "g", {class: "coordinates"})
+        this.coordinatesGroup = Svg.addElement(this.svg, "g", {class: "coordinates", "aria-hidden": "true"})
         this.markersLayer = Svg.addElement(this.svg, "g", {class: "markers-layer"})
         this.piecesLayer = Svg.addElement(this.svg, "g", {class: "pieces-layer"})
         this.piecesGroup = Svg.addElement(this.piecesLayer, "g", {class: "pieces"})

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

@@ -5,7 +5,7 @@
  */
 
 import {Svg} from "../lib/Svg.js"
-import {createTask} from "../model/ChessboardState.js"
+import {Utils} from "../lib/Utils.js"
 
 const STATE = {
     waitForInputStart: 0,
@@ -36,7 +36,7 @@ export class VisualMoveInput {
         this.moveInputStartedCallback = (square) => {
             const result = moveInputStartedCallback(square)
             if (result) {
-                this.chessboard.state.moveInputProcess = createTask()
+                this.chessboard.state.moveInputProcess = Utils.createTask()
             }
             return result
         }

package/test/TestPiecesAnimation.js

@@ -7,6 +7,7 @@
 import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
 import {ChessboardState} from "../src/cm-chessboard/model/ChessboardState.js"
 import {PositionsAnimation} from "../src/cm-chessboard/view/PositionAnimationsQueue.js"
+import {Position} from "../src/cm-chessboard/model/Position.js"
 
 describe("TestPiecesAnimation", () => {
     it("should calculate square distances", () => {
@@ -22,9 +23,9 @@ describe("TestPiecesAnimation", () => {
 
     it("should seek changes", () => {
         const state1 = new ChessboardState()
-        state1.setPosition("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
+        state1.position = new Position("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
         const state2 = new ChessboardState()
-        state2.setPosition("rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR")
+        state2.position = new Position("rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR")
         const previousBoard1 = state1.position.squares
         const newBoard1 = state2.position.squares
         const changes = PositionsAnimation.seekChanges(previousBoard1, newBoard1)