npm - cm-chessboard - Versions diffs - 4.0.10 → 4.1.2 - Mend

cm-chessboard 4.0.10 → 4.1.2

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 (11) hide show

package/examples/validate-moves.html CHANGED Viewed

@@ -19,8 +19,8 @@
     </style>
 </head>
 <body>
-<h1>Example: Input enabled, move validation with chess.js</h1>
-<a href="../">Back to the cm-chessboard overview</a>
+<h1><a href="../">cm-chessboard</a></h1>
+<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="visually-hidden">The Board</h2>
@@ -82,11 +82,9 @@ board.enableMoveInput(inputHandler, COLOR.white)
     function inputHandler(event) {
         console.log("event", event)
         event.chessboard.removeMarkers(undefined, MARKER_TYPE.dot)
-        event.chessboard.removeMarkers(undefined, MARKER_TYPE.square)
         if (event.type === INPUT_EVENT_TYPE.moveStart) {
             const moves = chess.moves({square: event.square, verbose: true});
-            event.chessboard.addMarker(event.square, MARKER_TYPE.square)
-            for (const move of moves) { // draw dots on possible moves
+            for (const move of moves) { // draw dots on possible squares
                 event.chessboard.addMarker(move.to, MARKER_TYPE.dot)
             }
             return moves.length > 0
@@ -115,9 +113,15 @@ board.enableMoveInput(inputHandler, COLOR.white)
     const board = new Chessboard(document.getElementById("board"), {
         position: chess.fen(),
         sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
-        style: {moveFromMarker: undefined, moveToMarker: undefined}, // disable standard markers
+        style: {moveFromMarker: MARKER_TYPE.square, moveToMarker: MARKER_TYPE.square},
         orientation: COLOR.white,
-        animationDuration: 500
+        accessibility: {
+            brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the svg
+            movePieceForm: true, // display a form to move a piece (from, to, move)
+            boardAsTable: true, // display the board additionally as HTML table
+            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
+        }
     })
     board.enableMoveInput(inputHandler, COLOR.white)
 </script>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "4.0.10",
+  "version": "4.1.2",
   "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

@@ -4,10 +4,10 @@
  * License: MIT, see file 'LICENSE'
  */
-import {State} from "./core/State.js"
-import {ViewAccessible} from "./core/ViewAccessible.js"
-import {PositionAnimationsQueue} from "./core/PositionAnimationsQueue.js"
-import {Position} from "./core/Position.js"
+import {ChessboardState} from "./model/ChessboardState.js"
+import {Position} from "./model/Position.js"
+import {ChessboardViewAccessible} from "./view/ChessboardViewAccessible.js"
+import {PositionAnimationsQueue} from "./view/PositionAnimationsQueue.js"
 export const COLOR = {
     white: "w",
@@ -88,8 +88,8 @@ export class Chessboard {
             Object.assign(this.props.accessibility, props.accessibility)
         }
-        this.state = new State()
-        this.view = new ViewAccessible(this)
+        this.state = new ChessboardState()
+        this.view = new ChessboardViewAccessible(this)
         this.positionAnimationsQueue = new PositionAnimationsQueue(this)
         this.state.orientation = this.props.orientation
         this.view.redraw()

package/src/cm-chessboard/{core/State.js → model/ChessboardState.js} RENAMED Viewed

@@ -5,7 +5,7 @@
  */
 import {Position} from "./Position.js"
-export class State {
+export class ChessboardState {
     constructor() {
         this.position = new Position()

package/src/cm-chessboard/{core → model}/Position.js RENAMED Viewed

File without changes

package/src/cm-chessboard/{core/View.js → view/ChessboardView.js} RENAMED Viewed

@@ -4,9 +4,9 @@
  * License: MIT, see file 'LICENSE'
  */
-import {MoveInput} from "./MoveInput.js"
+import {VisualMoveInput} from "./VisualMoveInput.js"
 import {COLOR, INPUT_EVENT_TYPE, BORDER_TYPE} from "../Chessboard.js"
-import {Position} from "./Position.js"
+import {Position} from "../model/Position.js"
 export const piecesTranslations = {
     en: {
@@ -47,11 +47,11 @@ export function renderPieceTitle(lang, name, color = undefined) {
     return title
 }
-export class View {
+export class ChessboardView {
     constructor(chessboard) {
         this.chessboard = chessboard
-        this.moveInput = new MoveInput(this,
+        this.moveInput = new VisualMoveInput(this,
             this.moveStartCallback.bind(this),
             this.moveDoneCallback.bind(this),
             this.moveCanceledCallback.bind(this)

package/src/cm-chessboard/{core/ViewAccessible.js → view/ChessboardViewAccessible.js} RENAMED Viewed

@@ -3,9 +3,9 @@
  * Repository: https://github.com/shaack/cm-chessboard
  * License: MIT, see file 'LICENSE'
  */
-import {View, renderPieceTitle} from "./View.js"
+import {ChessboardView, renderPieceTitle} from "./ChessboardView.js"
 import {COLOR, INPUT_EVENT_TYPE} from "../Chessboard.js"
-import {piecesTranslations} from "./View.js"
+import {piecesTranslations} from "./ChessboardView.js"
 const hlTranslations = {
     de: {
@@ -32,7 +32,7 @@ const hlTranslations = {
     }
 }
-export class ViewAccessible extends View {
+export class ChessboardViewAccessible extends ChessboardView {
     constructor(chessboard, callbackAfterCreation) {
         super(chessboard, callbackAfterCreation)
@@ -45,41 +45,52 @@ export class ViewAccessible extends View {
         this.th = hlTranslations[this.lang]
         const accessibilityProps = chessboard.props.accessibility
-        if(accessibilityProps.movePieceForm) {
+        if (accessibilityProps.movePieceForm) {
             this.movePieceFormContainer = this.createElement(`<div><h3>${this.th.move_piece}</h3><form>
             <label for="move_piece_input_from_${chessboard.id}">${this.th.from}</label><input class="input-from" type="text" size="2" id="move_piece_input_from_${chessboard.id}"/>
             <label for="move_piece_input_to_${chessboard.id}">${this.th.to}</label><input class="input-to" type="text" size="2" id="move_piece_input_to_${chessboard.id}"/>
-            <button type="button" class="button-move">${this.th.move}</button>
+            <button type="submit" class="button-move">${this.th.move}</button>
             </form><div class="input-status" aria-live="polite"></div></div>`)
-            this.inputFrom = this.movePieceFormContainer.querySelector(".input-from")
-            this.inputTo = this.movePieceFormContainer.querySelector(".input-to")
-            this.moveButton = this.movePieceFormContainer.querySelector(".button-move")
-            if(accessibilityProps.visuallyHidden) {
+            this.form = this.movePieceFormContainer.querySelector("form")
+            this.inputFrom = this.form.querySelector(".input-from")
+            this.inputTo = this.form.querySelector(".input-to")
+            this.moveButton = this.form.querySelector(".button-move")
+            if (accessibilityProps.visuallyHidden) {
                 this.movePieceFormContainer.classList.add("visually-hidden")
             }
-            this.moveButton.addEventListener("click", () => {
+            this.form.addEventListener("submit", (evt) => {
+                evt.preventDefault()
                 if (this.moveInputCallback({
                     chessboard: this.chessboard,
                     type: INPUT_EVENT_TYPE.moveDone,
                     squareFrom: this.inputFrom.value,
                     squareTo: this.inputTo.value
                 })) {
-                    this.inputFrom.value = ""
-                    this.inputTo.value = ""
+                    this.chessboard.movePiece(this.inputFrom.value, this.inputTo.value,
+                        true).then(() => {
+                        this.inputFrom.value = ""
+                        this.inputTo.value = ""
+                    })
                 }
             })
             this.chessboard.context.appendChild(this.movePieceFormContainer)
         }
-        if(accessibilityProps.boardAsTable) {
+        if (accessibilityProps.boardAsTable) {
             this.boardAsTableContainer = this.createElement(`<div><h3>${this.th.board_as_table}</h3><div class="table"></div></div>`)
             this.boardAsTable = this.boardAsTableContainer.querySelector(".table")
             this.chessboard.context.appendChild(this.boardAsTableContainer)
+            if (accessibilityProps.visuallyHidden) {
+                this.boardAsTableContainer.classList.add("visually-hidden")
+            }
         }
-        if(accessibilityProps.piecesListContainer) {
+        if (accessibilityProps.piecesListContainer) {
             this.piecesListContainer = this.createElement(`<div><h3>${this.th.pieces_lists}</h3><div class="list"></div></div>`)
             this.piecesList = this.piecesListContainer.querySelector(".list")
             this.chessboard.context.appendChild(this.piecesListContainer)
+            if (accessibilityProps.visuallyHidden) {
+                this.piecesListContainer.classList.add("visually-hidden")
+            }
         }
         this.updateFormInputs()
     }
@@ -106,10 +117,10 @@ export class ViewAccessible extends View {
     redrawPieces(squares = this.chessboard.state.position.squares) {
         super.redrawPieces(squares)
         setTimeout(() => {
-            if(this.chessboard.props.accessibility.boardAsTable) {
+            if (this.chessboard.props.accessibility.boardAsTable) {
                 this.redrawBoardAsTable()
             }
-            if(this.chessboard.props.accessibility.piecesAsList) {
+            if (this.chessboard.props.accessibility.piecesAsList) {
                 this.redrawPiecesLists()
             }
         })

package/src/cm-chessboard/{core → view}/PositionAnimationsQueue.js RENAMED Viewed

@@ -3,8 +3,8 @@
  * Repository: https://github.com/shaack/cm-chessboard
  * License: MIT, see file 'LICENSE'
  */
-import {FEN_EMPTY_POSITION, Position} from "./Position.js"
-import {Svg} from "./View.js"
+import {FEN_EMPTY_POSITION, Position} from "../model/Position.js"
+import {Svg} from "./ChessboardView.js"
 /*
 * Thanks to markosyan for the idea to the PromiseQueue

package/src/cm-chessboard/{core/MoveInput.js → view/VisualMoveInput.js} RENAMED Viewed

@@ -4,7 +4,7 @@
  * License: MIT, see file 'LICENSE'
  */
-import {Svg} from "./View.js"
+import {Svg} from "./ChessboardView.js"
 const STATE = {
     waitForInputStart: 0,
@@ -26,7 +26,7 @@ export const MOVE_CANCELED_REASON = {
 const DRAG_THRESHOLD = 4
-export class MoveInput {
+export class VisualMoveInput {
     constructor(view, moveStartCallback, moveDoneCallback, moveCanceledCallback) {
         this.view = view

package/test/TestPiecesAnimation.js CHANGED Viewed

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

package/test/TestPosition.js CHANGED Viewed

@@ -5,7 +5,7 @@
  */
 import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
-import {Position} from "../src/cm-chessboard/core/Position.js"
+import {Position} from "../src/cm-chessboard/model/Position.js"
 describe("TestPosition", () => {
     it("should convert square to index", () => {