cm-chessboard 8.14.3 → 8.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "8.14.3",
+  "version": "8.15.0",
   "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
   "keywords": [
     "chess",
@@ -15,9 +15,16 @@
   "type": "module",
   "module": "./src/Chessboard.js",
   "browser": "./src/Chessboard.js",
+  "files": [
+    "src",
+    "assets",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "test": "tput setaf 4;echo 'Run test/index.html in your browser for unit testing, or `npm run test:headless` (needs a global puppeteer).'; echo ''; exit 0",
-    "test:headless": "node test/headless.mjs"
+    "test:headless": "node test/headless.mjs",
+    "test:package": "node test/package.mjs"
   },
   "repository": {
     "type": "git",

package/src/extensions/promotion-dialog/PromotionDialog.js

@@ -167,41 +167,15 @@ export class PromotionDialog extends Extension {
                     class: "promotion-dialog"
                 })
             const dialogParams = this.state.dialogParams
-            if (turned) {
-                this.drawPieceButton(PIECE[dialogParams.color + "q"], {
+            // The buttons share their order with `this.pieceOrder`, which `focusButton()`
+            // uses for the screen reader announcement, so both must stay in sync.
+            this.pieceOrder.forEach((pieceType, index) => {
+                const rowOffset = turned ? -(index + 1) : index
+                this.drawPieceButton(PIECE[dialogParams.color + pieceType], {
                     x: squareCenterPoint.x + offsetX,
-                    y: squareCenterPoint.y - squareHeight
-                }, 0)
-                this.drawPieceButton(PIECE[dialogParams.color + "r"], {
-                    x: squareCenterPoint.x + offsetX,
-                    y: squareCenterPoint.y - squareHeight * 2
-                }, 1)
-                this.drawPieceButton(PIECE[dialogParams.color + "b"], {
-                    x: squareCenterPoint.x + offsetX,
-                    y: squareCenterPoint.y - squareHeight * 3
-                }, 2)
-                this.drawPieceButton(PIECE[dialogParams.color + "n"], {
-                    x: squareCenterPoint.x + offsetX,
-                    y: squareCenterPoint.y - squareHeight * 4
-                }, 3)
-            } else {
-                this.drawPieceButton(PIECE[dialogParams.color + "q"], {
-                    x: squareCenterPoint.x + offsetX,
-                    y: squareCenterPoint.y
-                }, 0)
-                this.drawPieceButton(PIECE[dialogParams.color + "r"], {
-                    x: squareCenterPoint.x + offsetX,
-                    y: squareCenterPoint.y + squareHeight
-                }, 1)
-                this.drawPieceButton(PIECE[dialogParams.color + "b"], {
-                    x: squareCenterPoint.x + offsetX,
-                    y: squareCenterPoint.y + squareHeight * 2
-                }, 2)
-                this.drawPieceButton(PIECE[dialogParams.color + "n"], {
-                    x: squareCenterPoint.x + offsetX,
-                    y: squareCenterPoint.y + squareHeight * 3
-                }, 3)
-            }
+                    y: squareCenterPoint.y + rowOffset * squareHeight
+                }, index)
+            })
         }
     }
 

package/.claude/settings.local.json

@@ -1,28 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(tree:*)",
-      "Bash(gh pr:*)",
-      "Bash(gh issue:*)",
-      "Bash(npm version:*)",
-      "Bash(npm publish:*)",
-      "Bash(gh search:*)",
-      "Skill(schedule)",
-      "Bash(npm whoami *)",
-      "Bash(cat)",
-      "Bash(rm /tmp/pr165-comment.md)",
-      "Read(//Users/shaack/Development/repositories/MyProjects/**)",
-      "Bash(gh release *)",
-      "Bash(gh api *)",
-      "Bash(pkill -f \"http.server 8731\")",
-      "Bash(rm -f /tmp/bis-server.log)",
-      "Bash(rm /tmp/issue56.md)",
-      "Bash([ -d \"$d\" ])",
-      "Bash(pkill -f \"http.server 8732\")",
-      "Bash(rm -f /tmp/bsm-server.log)",
-      "Bash(rm -f c26.md c19.md)"
-    ],
-    "deny": [],
-    "ask": []
-  }
-}

package/examples/destroy-many-boards.html

@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>cm-chessboard</title>
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
-    <link rel="stylesheet" href="styles/examples.css"/>
-    <link rel="stylesheet" href="../assets/chessboard.css"/>
-    <!--suppress CssUnusedSymbol -->
-    <style>
-        div.board {
-            float: left;
-            width: 4.2vw;
-            height: 4.2vw;
-            margin-right: 0.2vw;
-            margin-bottom: 0.2vw;
-        }
-
-        div.board1 {
-            float: left;
-            width: 43.1vw;
-            margin-right: 0.9vw;
-            margin-bottom: 0.5vw;
-        }
-    </style>
-</head>
-<body>
-<h1><a href="../">cm-chessboard</a></h1>
-<h2>Stress Test: Create and destroy 5,000 boards ⇨ <span id="counter"></span></h2>
-<div id="boards"></div>
-<script type="module">
-    import {Chessboard} from "../src/Chessboard.js"
-    import {FEN} from "../src/model/Position.js"
-    import {Chess} from "https://cdn.jsdelivr.net/npm/chess.mjs@1/src/chess.mjs/Chess.js"
-
-    const boardsDiv = document.getElementById("boards")
-    const boardDiv = document.createElement("div")
-    boardDiv.setAttribute("class", "board1")
-    boardsDiv.appendChild(boardDiv)
-    const largeBoard = new Chessboard(boardDiv, {
-        position: FEN.start,
-        assetsUrl: "../assets/",
-        style: {pieces: {file: "pieces/staunty.svg"}}
-    })
-    const chess = new Chess()
-    let count = 0;
-    for (let i = 0; i < 5000; i++) {
-        setTimeout(() => {
-            count++
-            document.getElementById("counter").innerText = "" + count
-            const boardDiv = document.createElement("div")
-            boardDiv.setAttribute("class", "board")
-            boardsDiv.appendChild(boardDiv)
-            const board = new Chessboard(boardDiv, {
-                position: chess.fen(),
-                assetsUrl: "../assets/",
-                style: {pieces: {file: "pieces/staunty.svg"}}
-            })
-            makeRandomMove()
-            largeBoard.setPosition(chess.fen(), true)
-            setTimeout(() => {
-                board.destroy()
-                boardsDiv.removeChild(boardDiv)
-            }, 10000)
-        }, i * 100)
-    }
-
-    function makeRandomMove() {
-        if(chess.game_over()) {
-            chess.reset()
-        }
-        const possibleMoves = chess.moves()
-        if (possibleMoves.length === 0) return
-        const randomIndex = Math.floor(Math.random() * possibleMoves.length)
-        chess.move(possibleMoves[randomIndex])
-    }
-
-</script>
-</body>
-</html>

package/examples/different-styles.html

@@ -1,109 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>cm-chessboard</title>
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
-    <link rel="stylesheet" href="styles/examples.css"/>
-    <link rel="stylesheet" href="../assets/chessboard.css"/>
-</head>
-<body>
-<h1><a href="../">cm-chessboard</a></h1>
-<h2>Example: Different styles and piece sets</h2>
-<div class="board" id="board1"></div>
-<div class="board" id="board2"></div>
-<div class="board" id="board3"></div>
-<div class="board" id="board4"></div>
-<div class="board" id="board5"></div>
-<div class="board" id="board6"></div>
-<div class="board" id="board7"></div>
-<div class="board" id="board8"></div>
-<div class="board" id="board9"></div>
-<script type="module">
-    import {Chessboard, BORDER_TYPE} from "../src/Chessboard.js"
-    import {FEN} from "../src/model/Position.js"
-
-    new Chessboard(document.getElementById("board1"), {
-        position: FEN.start,
-        assetsUrl: "../assets/",
-        assetsCache: false,
-        style: {
-            cssClass: "green",
-            borderType: BORDER_TYPE.frame,
-            pieces: {
-                file: "pieces/staunty.svg"
-            }
-        }
-    })
-    new Chessboard(document.getElementById("board2"), {
-        position: FEN.start,
-        assetsUrl: "../assets/",
-        assetsCache: false,
-        style: {
-            cssClass: "chessboard-js",
-            borderType: BORDER_TYPE.thin
-        }
-    })
-    new Chessboard(document.getElementById("board3"), {
-        position: FEN.start,
-        assetsUrl: "../assets/",
-        assetsCache: false,
-        style: {
-            cssClass: "chess-club",
-            borderType: BORDER_TYPE.frame,
-            pieces: {file: "pieces/staunty.svg"}
-        }
-    })
-    new Chessboard(document.getElementById("board4"), {
-        position: FEN.start,
-        assetsUrl: "../assets/",
-        assetsCache: false,
-        style: {
-            cssClass: "blue",
-            borderType: BORDER_TYPE.thin,
-            showCoordinates: false,
-        }
-    })
-    new Chessboard(document.getElementById("board5"), {
-        position: FEN.start,
-        assetsUrl: "../assets/",
-        assetsCache: false,
-        style: {borderType: BORDER_TYPE.none, pieces: {file: "pieces/staunty.svg"}},
-    })
-    new Chessboard(document.getElementById("board6"), {
-        position: FEN.start,
-        assetsUrl: "../assets/",
-        assetsCache: false,
-        style: {
-            pieces: {file: "pieces/staunty.svg"}, cssClass: "blue",
-            borderType: BORDER_TYPE.frame
-        },
-    })
-    new Chessboard(document.getElementById("board7"), {
-        position: FEN.start,
-        assetsUrl: "../assets/",
-        assetsCache: false,
-        style: {
-            cssClass: "green"
-        }
-    })
-    new Chessboard(document.getElementById("board8"), {
-        position: FEN.start,
-        assetsUrl: "../assets/",
-        assetsCache: false,
-        style: {
-            cssClass: "black-and-white"
-        }
-    })
-    new Chessboard(document.getElementById("board9"), {
-        position: FEN.start,
-        assetsUrl: "../assets/",
-        assetsCache: false,
-        style: {
-            cssClass: "chessboard-js",
-            borderType: BORDER_TYPE.frame
-        }
-    })
-</script>
-</body>
-</html>

package/examples/enable-input.html

@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>cm-chessboard</title>
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
-    <link rel="stylesheet" href="styles/examples.css"/>
-    <link rel="stylesheet" href="../assets/chessboard.css"/>
-    <link rel="stylesheet" href="../assets/extensions/markers/markers.css"/>
-</head>
-<body>
-<h1><a href="../">cm-chessboard</a></h1>
-<h2>Example: Input enabled without validation</h2>
-<p>Input enabled on both sides, without move validation.
-    </p>
-<p>Additionally, the <b>Markers</b> extension is used with its
-    autoMarkers ability.</p>
-<div class="board" id="board"></div>
-<pre>
-const board = new Chessboard(document.getElementById("board"), {
-    position: FEN.start,
-    assetsUrl: "../assets/",
-    style: {pieces: {file: "pieces/staunty.svg"}},
-    extensions: [{class: Markers}]
-})
-
-board.enableMoveInput(inputHandler)
-function inputHandler(event) {
-    console.log(event)
-    switch (event.type) {
-        case INPUT_EVENT_TYPE.moveInputStarted:
-            log(`moveInputStarted: ${event.squareFrom}`)
-            return true // false cancels move
-        case INPUT_EVENT_TYPE.validateMoveInput:
-            log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
-            return true // false cancels move
-        case INPUT_EVENT_TYPE.moveInputCanceled:
-            log(`moveInputCanceled`)
-            break
-        case INPUT_EVENT_TYPE.moveInputFinished:
-            log(`moveInputFinished`)
-            break
-        case INPUT_EVENT_TYPE.movingOverSquare:
-            log(`movingOverSquare: ${event.squareTo}`)
-            break
-    }
-}
-</pre>
-<button style="margin-bottom: 10px"
-        onclick="window.board.setOrientation(window.board.getOrientation() === 'w' ? 'b' : 'w')">Switch Orientation
-</button>
-<div id="output" style="width: 100%; overflow: hidden"></div>
-<script type="module">
-    import {INPUT_EVENT_TYPE, Chessboard} from "../src/Chessboard.js"
-    import {FEN} from "../src/model/Position.js"
-    import {Markers} from "../src/extensions/markers/Markers.js"
-
-    window.board = new Chessboard(document.getElementById("board"), {
-        position: FEN.start,
-        assetsUrl: "../assets/",
-        style: {pieces: {file: "pieces/staunty.svg"}},
-        extensions: [{class: Markers}]
-    })
-
-    window.board.enableMoveInput(inputHandler)
-
-    function inputHandler(event) {
-        console.log(event)
-        switch (event.type) {
-            case INPUT_EVENT_TYPE.moveInputStarted:
-                log(`moveInputStarted: ${event.squareFrom}`)
-                return true // false cancels move
-            case INPUT_EVENT_TYPE.validateMoveInput:
-                log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
-                return true // false cancels move
-            case INPUT_EVENT_TYPE.moveInputCanceled:
-                log(`moveInputCanceled`)
-                break
-            case INPUT_EVENT_TYPE.moveInputFinished:
-                log(`moveInputFinished`)
-                break
-            case INPUT_EVENT_TYPE.movingOverSquare:
-                log(`movingOverSquare: ${event.squareTo}`)
-                break
-        }
-    }
-
-    const output = document.getElementById("output")
-
-    function log(text) {
-        const log = document.createElement("div")
-        log.innerText = text
-        output.appendChild(log)
-    }
-</script>
-</body>
-</html>

package/examples/extensions/accessibility-extension.html

@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>cm-chessboard</title>
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
-    <link rel="stylesheet" href="../styles/examples.css"/>
-    <link rel="stylesheet" href="../../assets/chessboard.css"/>
-    <link rel="stylesheet" href="../../assets/extensions/markers/markers.css"/>
-</head>
-<body>
-<h1><a href="../..">cm-chessboard</a></h1>
-<h2>Example: Accessibility extension</h2>
-<p>
-    This example shows, how the accessibility extension from cm-chessboard works.
-    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>
-    <li>Display the chessboard additionally as HTML table</li>
-    <li>Display a form to move a piece (from, to, move)</li>
-    <li>Display the pieces additionally as List</li>
-    <li>Keyboard navigation on the board (arrow keys to navigate, Enter/Space to select, Escape to cancel)</li>
-    <li>Display these features visually hidden or not</li>
-</ul>
-<h3>Keyboard Navigation</h3>
-<p>Click the board or press Tab to focus it, then use:</p>
-<ul>
-    <li><strong>Arrow keys</strong> - Navigate between squares</li>
-    <li><strong>Enter / Space</strong> - Select a piece (first press) or target square (second press)</li>
-    <li><strong>Escape</strong> - Cancel the current move</li>
-</ul>
-<h3>The chessboard</h3>
-<div class="board" id="board"></div>
-<button style="margin-bottom: 10px"
-        onclick="window.switchOrientation()">Switch Orientation
-</button>
-<script type="module">
-    import {Chessboard} from "../../src/Chessboard.js"
-    import {Accessibility} from "../../src/extensions/accessibility/Accessibility.js"
-    import {Markers} from "../../src/extensions/markers/Markers.js"
-
-    const chessboard = new Chessboard(document.getElementById("board"), {
-        position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
-        assetsUrl: "../../assets/",
-        // animationDuration: 0, // optional, set to 0 to disable animations
-        style: {
-            cssClass: "default-contrast" // make the coordinates better visible with the "default-contrast" theme
-        },
-        extensions:
-            [{
-                class: Accessibility,
-                props: {
-                    brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the SVG
-                    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
-                    keyboardMoveInput: true, // enable keyboard navigation on the board with arrow keys
-                    visuallyHidden: false // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
-                }
-
-            }, {class: Markers}]
-    })
-    window.switchOrientation = function () {
-        chessboard.setOrientation(chessboard.getOrientation() === 'w' ? 'b' : 'w')
-    }
-
-    chessboard.enableMoveInput(() => true)
-
-</script>
-</body>
-</html>

package/examples/extensions/arrows-extension.html

@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>cm-chessboard</title>
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
-    <link rel="stylesheet" href="../styles/examples.css"/>
-    <link rel="stylesheet" href="../../assets/chessboard.css"/>
-    <link rel="stylesheet" href="../../assets/extensions/arrows/arrows.css"/>
-</head>
-<body>
-<h1><a href="../..">cm-chessboard</a></h1>
-<h2>Example: Arrows extension</h2>
-<div class="board" id="board"></div>
-<br style="clear: both"/>
-<h2>Example code</h2>
-<pre>
-const chessboard = new Chessboard(document.getElementById("board"), {
-    position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
-    assetsUrl: "../../assets/",
-    extensions: [{class: Arrows}]
-})
-chessboard.addArrow(ARROW_TYPE.default, "f3", "d5")
-chessboard.addArrow(ARROW_TYPE.default, "b8", "c6")
-chessboard.addArrow(ARROW_TYPE.pointy, "d2", "d3")
-chessboard.addArrow(ARROW_TYPE.danger, "g5", "e6")
-console.log(chessboard.getArrows())
-</pre>
-<h2>Methods</h2>
-<h3><code>addArrow(type, from, to)</code></h3>
-<h3><code>removeArrows(type, from, to)</code></h3>
-<p>
-    To remove all arrows, call <code>chessboard.removeArrows()</code> without parameters. To remove all arrows of a
-    specific
-    type (type "danger"), call <code>chessboard.removeArrows(ARROW_TYPE.danger)</code>. To remove all arrows starting at
-    "e2"
-    you can call <code>chessboard.removeArrows(undefined, "e2")</code> and so on...
-</p>
-<h3><code>getArrows(type, from, to)</code></h3>
-<p>
-    To get all arrows, call <code>chessboard.getArrows()</code> without parameters, as with <code>removeArrows(type,
-    from, to)</code>.
-</p>
-
-<script type="module">
-    import {ARROW_TYPE, Arrows} from "../../src/extensions/arrows/Arrows.js"
-    import {Chessboard} from "../../src/Chessboard.js"
-
-    const chessboard = new Chessboard(document.getElementById("board"), {
-        position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
-        assetsUrl: "../../assets/",
-        extensions: [{class: Arrows}]
-    })
-    chessboard.addArrow(ARROW_TYPE.danger, "f3", "d5")
-    chessboard.addArrow(ARROW_TYPE.info, "b8", "c6")
-    chessboard.addArrow(ARROW_TYPE.success, "d2", "d3")
-    chessboard.addArrow(ARROW_TYPE.warning, "g5", "e6")
-    chessboard.addArrow(ARROW_TYPE.secondary, "a1", "c3")
-    console.log(chessboard.getArrows())
-
-</script>
-</body>
-</html>

package/examples/extensions/html-layer-extension.html

@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>cm-chessboard</title>
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
-    <link rel="stylesheet" href="../styles/examples.css"/>
-    <link rel="stylesheet" href="../../assets/chessboard.css"/>
-    <link rel="stylesheet" href="../../assets/extensions/markers/markers.css"/>
-    <style>
-        /*noinspection CssUnusedSymbol*/
-        .board .html-layer {
-            background-color: rgba(0, 0, 0, 0.4);
-            cursor: pointer;
-        }
-        .board .html-layer div {
-            position: absolute;
-            top: 30%;
-            left: 1rem;
-            right: 1rem;
-            background-color: rgba(0, 0, 0, 0.5);
-            padding: 1rem;
-            font-size: 30px;
-            border-radius: 0.5rem;
-            text-align: center;
-        }
-    </style>
-</head>
-<body>
-<h1><a href="../../">cm-chessboard</a></h1>
-<h2>Example: HtmlLayer Extension</h2>
-<p>Use this extension to add a layer over the board which contains HTML.</p>
-<div class="board" id="board"></div>
-<div>
-    <button onclick="window.addLayer()">Add HTML Layer</button>
-    <button onclick="removeLayer()">Remove HTML Layer</button>
-</div>
-<script type="module">
-    import {Chessboard, FEN} from "../../src/Chessboard.js"
-    import {HtmlLayer} from "../../src/extensions/html-layer/HtmlLayer.js"
-    import {Markers} from "../../src/extensions/markers/Markers.js"
-
-    const board = new Chessboard(document.getElementById("board"), {
-        position: FEN.start,
-        assetsUrl: "../../assets/",
-        extensions: [{class: HtmlLayer}, {class: Markers}]
-    })
-    board.enableMoveInput(() => true)
-    let layer = null
-    window.addLayer = () => {
-       if(!layer) {
-           layer = board.addHtmlLayer("<div>Welcome to cm-chessboard!</div>")
-           layer.addEventListener("click", () => {
-               window.removeLayer()
-           })
-       }
-    }
-    window.removeLayer = () => {
-        if(layer) {
-            board.removeHtmlLayer(layer)
-            layer = null
-        }
-    }
-</script>
-</body>
-</html>