cm-chessboard 4.0.8 → 4.1.1

package/examples/destroy-many-boards.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>cm-chessboard</title>
     <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
     <link rel="stylesheet" href="styles/examples.css"/>
     <link rel="stylesheet" href="../assets/styles/cm-chessboard.css"/>
     <!--suppress CssUnusedSymbol -->
@@ -29,32 +30,39 @@
 <h2>Stress Test: Create and destroy 5,000 responsive boards</h2>
 <div id="boards"></div>
 <script type="module">
-    import {COLOR, Chessboard} from "../src/cm-chessboard/Chessboard.js"
+    import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
     const boardsDiv = document.getElementById("boards")
     const boardDiv = document.createElement("div")
     boardDiv.setAttribute("class", "board1")
     boardsDiv.appendChild(boardDiv)
-    new Chessboard(boardDiv, {
+    const largeBoard = new Chessboard(boardDiv, {
         position: "start",
         sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
     })
-
+    const chess = new Chess()
     for (let i = 0; i < 5000; i++) {
         setTimeout(() => {
             const boardDiv = document.createElement("div")
             boardDiv.setAttribute("class", "board")
             boardsDiv.appendChild(boardDiv)
             const board = new Chessboard(boardDiv, {
-                position: Math.round(Math.random()) ? "start" : "empty",
-                orientation: Math.round(Math.random()) ? COLOR.white : COLOR.black,
+                position: chess.fen(),
                 sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"}
             })
+            makeRandomMove()
+            largeBoard.setPosition(chess.fen(), true)
             setTimeout(() => {
                 board.destroy()
                 boardsDiv.removeChild(boardDiv)
             }, 10000)
         }, i * 100)
     }
+    function makeRandomMove() {
+        const possibleMoves = chess.moves();
+        if (possibleMoves.length === 0) return;
+        const randomIndex = Math.floor(Math.random() * possibleMoves.length);
+        chess.move(possibleMoves[randomIndex]);
+    }
 
 </script>
 </body>

package/examples/styles/examples.css

@@ -1,3 +1,3 @@
-body{color:#fff;background-color:#222;padding:20px;margin:0;font-family:"Helvetica Neue", sans-serif;line-height:1.3;font-size:17px}body *{font-size:17px}a{color:#516CD4}a:visited{color:#929292}a:hover{color:#E2FEDE}h1,h1 a{margin-top:0;font-size:34px;color:#CD7338}h1{margin-bottom:10px}h2{margin-bottom:15px;font-size:23.8px;color:#CD7338}pre{font-family:"courier new", monospace;font-size:90%;background-color:#111;color:#eee;padding:5px;overflow:auto}div.board{float:left;max-width:500px;width:calc(100vw - 40px);margin-right:20px;margin-bottom:20px}.clearfix::after{content:"";clear:both;display:table}button{padding:4px 20px;margin-right:10px;margin-bottom:10px;background-color:#999}button:hover{background-color:#777}
+body{color:#fff;background-color:#222;padding:20px;margin:0;font-family:"Helvetica Neue", sans-serif;line-height:1.3;font-size:18px}body *{font-size:18px}a{color:#516CD4}a:visited{color:#929292}a:hover{color:#E2FEDE}h1,h1 a{margin-top:0;font-size:39.6px;color:#CD7338}h1{margin-bottom:10px}h2{margin-bottom:15px;font-size:25.2px;color:#CD7338}pre{font-family:"courier new", monospace;font-size:90%;background-color:#111;color:#eee;padding:5px;overflow:auto}div.board{float:left;max-width:500px;width:calc(100vw - 40px);margin-right:20px;margin-bottom:20px}.clearfix::after{content:"";clear:both;display:table}button{padding:4px 20px;margin-right:10px;margin-bottom:10px;background-color:#999}button:hover{background-color:#777}li{padding:0.05rem}
 
 /*# sourceMappingURL=examples.css.map */

package/examples/styles/examples.css.map

@@ -5,5 +5,5 @@
 		"examples.scss"
 	],
 	"names": [],
-	"mappings": "AASA,AAAA,IAAI,AAAC,CACH,KAAK,CAPG,IAAI,CAQZ,gBAAgB,CATL,IAAI,CAUf,OAAO,CAAE,IAAI,CACb,MAAM,CAAE,CAAC,CACT,WAAW,CAAE,4BAA4B,CACzC,WAAW,CAAE,GAAG,CAChB,SAAS,CATC,IAAI,CAaf,AAXD,AAQE,IARE,CAQF,CAAC,AAAC,CACA,SAAS,CAXD,IAAI,CAYb,AAGH,AAAA,CAAC,AAAC,CACA,KAAK,CAvBA,OAAO,CA8Bb,AARD,AAEE,CAFD,CAEG,OAAO,AAAC,CACR,KAAK,CAAE,OAAO,CACf,AAJH,AAKE,CALD,CAKG,KAAK,AAAC,CACN,KAAK,CA3BI,OAAO,CA4BjB,AAGH,AAAA,EAAE,CAAE,EAAE,CAAC,CAAC,AAAC,CACP,UAAU,CAAE,CAAC,CACb,SAAS,CAAE,IAAc,CACzB,KAAK,CA/BE,OAAO,CAgCf,AAED,AAAA,EAAE,AAAC,CACD,aAAa,CAAE,IAAI,CACpB,AAED,AAAA,EAAE,AAAC,CACD,aAAa,CAAE,IAAI,CACnB,SAAS,CAAE,MAAgB,CAC3B,KAAK,CAzCE,OAAO,CA0Cf,AAED,AAAA,GAAG,AAAC,CACF,WAAW,CAAE,wBAAwB,CACrC,SAAS,CAAE,GAAG,CACd,gBAAgB,CA9CA,IAAI,CA+CpB,KAAK,CA9CA,IAAI,CA+CT,OAAO,CAAE,GAAG,CACZ,QAAQ,CAAE,IAAI,CACf,AAED,AAAA,GAAG,AAAA,MAAM,AAAC,CACR,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,KAAK,CAChB,KAAK,CAAE,kBAAkB,CACzB,YAAY,CAAE,IAAI,CAClB,aAAa,CAAE,IAAI,CACpB,AAED,AAAA,SAAS,EAAE,KAAK,AAAC,CACf,OAAO,CAAE,EAAE,CACX,KAAK,CAAE,IAAI,CACX,OAAO,CAAE,KAAK,CACf,AAED,AAAA,MAAM,AAAC,CACL,OAAO,CAAE,QAAQ,CACjB,YAAY,CAAE,IAAI,CAClB,aAAa,CAAE,IAAI,CACnB,gBAAgB,CAAE,IAAI,CAIvB,AARD,AAKE,MALI,CAKF,KAAK,AAAC,CACN,gBAAgB,CAAE,IAAI,CACvB"
+	"mappings": "AASA,AAAA,IAAI,AAAC,CACH,KAAK,CAPG,IAAI,CAQZ,gBAAgB,CATL,IAAI,CAUf,OAAO,CAAE,IAAI,CACb,MAAM,CAAE,CAAC,CACT,WAAW,CAAE,4BAA4B,CACzC,WAAW,CAAE,GAAG,CAChB,SAAS,CATC,IAAI,CAcf,AAZD,AASE,IATE,CASF,CAAC,AAAC,CACA,SAAS,CAZD,IAAI,CAab,AAGH,AAAA,CAAC,AAAC,CACA,KAAK,CAxBA,OAAO,CAiCb,AAVD,AAGE,CAHD,CAGG,OAAO,AAAC,CACR,KAAK,CAAE,OAAO,CACf,AALH,AAOE,CAPD,CAOG,KAAK,AAAC,CACN,KAAK,CA9BI,OAAO,CA+BjB,AAGH,AAAA,EAAE,CAAE,EAAE,CAAC,CAAC,AAAC,CACP,UAAU,CAAE,CAAC,CACb,SAAS,CAAE,MAAgB,CAC3B,KAAK,CAlCE,OAAO,CAmCf,AAED,AAAA,EAAE,AAAC,CACD,aAAa,CAAE,IAAI,CACpB,AAED,AAAA,EAAE,AAAC,CACD,aAAa,CAAE,IAAI,CACnB,SAAS,CAAE,MAAgB,CAC3B,KAAK,CA5CE,OAAO,CA6Cf,AAED,AAAA,GAAG,AAAC,CACF,WAAW,CAAE,wBAAwB,CACrC,SAAS,CAAE,GAAG,CACd,gBAAgB,CAjDA,IAAI,CAkDpB,KAAK,CAjDA,IAAI,CAkDT,OAAO,CAAE,GAAG,CACZ,QAAQ,CAAE,IAAI,CACf,AAED,AAAA,GAAG,AAAA,MAAM,AAAC,CACR,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,KAAK,CAChB,KAAK,CAAE,kBAAkB,CACzB,YAAY,CAAE,IAAI,CAClB,aAAa,CAAE,IAAI,CACpB,AAED,AAAA,SAAS,EAAE,KAAK,AAAC,CACf,OAAO,CAAE,EAAE,CACX,KAAK,CAAE,IAAI,CACX,OAAO,CAAE,KAAK,CACf,AAED,AAAA,MAAM,AAAC,CACL,OAAO,CAAE,QAAQ,CACjB,YAAY,CAAE,IAAI,CAClB,aAAa,CAAE,IAAI,CACnB,gBAAgB,CAAE,IAAI,CAKvB,AATD,AAME,MANI,CAMF,KAAK,AAAC,CACN,gBAAgB,CAAE,IAAI,CACvB,AAGH,AAAA,EAAE,AAAC,CACD,OAAO,CAAE,OAAO,CAEjB"
 }

package/examples/styles/examples.scss

@@ -5,7 +5,7 @@ $default: #fff;
 $color2: #CD7338;
 $code-background: #111;
 $code: #eee;
-$font-size: 17px;
+$font-size: 18px;
 
 body {
   color: $default;
@@ -15,6 +15,7 @@ body {
   font-family: "Helvetica Neue", sans-serif;
   line-height: 1.3;
   font-size: $font-size;
+
   * {
     font-size: $font-size;
   }
@@ -22,9 +23,11 @@ body {
 
 a {
   color: $link;
+
   &:visited {
     color: #929292;
   }
+
   &:hover {
     color: $link-hover;
   }
@@ -32,7 +35,7 @@ a {
 
 h1, h1 a {
   margin-top: 0;
-  font-size: $font-size * 2;
+  font-size: $font-size * 2.2;
   color: $color2;
 }
 
@@ -74,7 +77,13 @@ button {
   margin-right: 10px;
   margin-bottom: 10px;
   background-color: #999;
+
   &:hover {
     background-color: #777;
   }
 }
+
+li {
+  padding: 0.05rem;
+
+}

package/examples/validate-moves.html

@@ -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/index.html

@@ -6,36 +6,47 @@
     <link rel="stylesheet" href="assets/styles/cm-chessboard.css"/>
     <link rel="stylesheet" href="examples/styles/examples.css"/>
     <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
 </head>
 <body>
 <h1>cm-chessboard</h1>
-<p>A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.</p>
-<p>cm-chessboard is the chessboard of <a href="https://www.chessmail.de">chessmail.de</a> and <a
-        href="https://www.chessmail.eu">chessmail.eu</a>.
-    It is used every day by thousands of players. </p>
+<p><i>A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.</i></p>
+<p>cm-chessboard is the chessboard of <a href="https://www.chessmail.de">chessmail</a> and is used every day by thousands of players.
+It works, it is cool and it is easy to use. 👍</p>
 <p><a href="https://github.com/shaack/cm-chessboard">Repository and documentation on GitHub</a></p>
-<h2>Examples</h2>
-<ul>
-    <li><a href="examples/simple-boards.html">Simple chessboards, view only</a></li>
-    <li><a href="examples/responsive-board.html">Responsive chessboard</a></li>
-    <li><a href="examples/enable-input.html">Input enabled without validation</a></li>
-    <li><a href="examples/validate-moves.html">Input enabled, move validation with chess.js</a></li>
-    <li><a href="examples/pieces-animation.html">Set different positions, with animation</a></li>
-    <li><a href="examples/input-callbacks.html">Context input, mark squares and detect clicks on fields</a></li>
-    <li><a href="examples/different-styles.html">Different styles and piece sets</a></li>
-    <li><a href="examples/many-boards.html">100 boards, in one page</a></li>
-    <li><a href="examples/destroy-many-boards.html">Stress test, 5000 boards created and destroyed</a></li>
-</ul>
+<div>
+    <h2>Examples</h2>
+    <ul>
+        <li><a href="examples/simple-boards.html">Simple chessboards, view only</a></li>
+        <li><a href="examples/responsive-board.html">Responsive chessboard</a></li>
+        <li><a href="examples/enable-input.html">Input enabled without validation</a></li>
+        <li><a href="examples/validate-moves.html">Input enabled, move validation with chess.js</a> 🥸</li>
+        <li><a href="examples/pieces-animation.html">Set different positions, with animation</a></li>
+        <li><a href="examples/input-callbacks.html">Context input, mark squares and detect clicks on fields</a></li>
+        <li><a href="examples/different-styles.html">Different styles and piece sets</a> 🎨</li>
+        <li><a href="examples/many-boards.html">100 boards, in one page</a></li>
+        <li><a href="examples/destroy-many-boards.html">Stress test, 5000 boards created and destroyed</a> 🤓 👍</li>
+    </ul>
+</div>
 <h2>Chessboard</h2>
-<pre>const board = new Chessboard(document.getElementById("board"), {position: "start"})</pre>
 <div class="board" id="board"></div>
 <script type="module">
     import {Chessboard} from "./src/cm-chessboard/Chessboard.js"
 
+    const chess = new Chess()
     const board = new Chessboard(document.getElementById("board"), {
         position: "start"
     })
-    board.enableMoveInput()
+    setInterval(() => {
+        makeRandomMove()
+        board.setPosition(chess.fen(), true)
+    }, 250)
+    function makeRandomMove() {
+        const possibleMoves = chess.moves();
+        if (possibleMoves.length === 0) return;
+        const randomIndex = Math.floor(Math.random() * possibleMoves.length);
+        chess.move(possibleMoves[randomIndex]);
+    }
 </script>
 <div class="clearfix"></div>
 <h2>Test</h2>

package/package.json

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

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

@@ -61,11 +61,9 @@ export class PromiseQueue {
     }
 
     destroy() {
-        console.log("PAQ destroy")
         this.stop = true
     }
 
-
 }
 
 

package/src/cm-chessboard/core/ViewAccessible.js

@@ -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()
             }
         })