npm - cm-chessboard - Versions diffs - 5.3.3 → 5.4.1 - Mend

cm-chessboard 5.3.3 → 5.4.1

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

package/README.md CHANGED Viewed

@@ -16,10 +16,11 @@ aspects of chess games.
 - Uses SVG for rendering
 - [Allows adding **extensions** to extend the functionality](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
-## Extensions 🆕
+## Extensions
 - [Accessibility Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-accessibility-extension.html)
 - [Arrows Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html) (by [@barakmich](https://github.com/barakmich))
+- [PromotionDialog Extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-promotion-dialog-extension.html)  🆕
 ## Demo and repository

package/examples/extensions/chessboard-accessibility-extension.html CHANGED Viewed

@@ -26,7 +26,7 @@
 <h3>The chessboard</h3>
 <div class="board" id="board"></div>
 <button style="margin-bottom: 10px"
-        onclick="window.setOrientation()">Switch Orientation
+        onclick="window.switchOrientation()">Switch Orientation
 </button>
 <script type="module">
     import {Chessboard} from "../../src/cm-chessboard/Chessboard.js"

package/examples/extensions/chessboard-promotion-dialog-extension.html ADDED Viewed

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="../styles/examples.css"/>
+    <link rel="stylesheet" href="../../assets/styles/cm-chessboard.css">
+    <link rel="stylesheet" href="../../src/cm-chessboard/extensions/promotion-dialog/assets/promotion-dialog.css"/>
+    <title>cm-chessboard promotion extension</title>
+</head>
+<body>
+<h1><a href="../..">cm-chessboard</a></h1>
+<h2>Example of the cm-chessboard PromotionDialog extension</h2>
+<div id="chessboard" class="board-max-width" style="margin-bottom: 1rem">
+</div>
+<button style="margin-bottom: 10px"
+        onclick="window.switchOrientation()">Switch Orientation
+</button>
+<script type="module">
+    import {Chessboard, COLOR, INPUT_EVENT_TYPE} from "../../src/cm-chessboard/Chessboard.js"
+    import {PromotionDialog} from "../../src/cm-chessboard/extensions/promotion-dialog/PromotionDialog.js"
+    const chessboard = new Chessboard(document.getElementById("chessboard"), {
+        position: "2P1k3/8/8/8/6r1/8/8/2R1K3 w - - 0 1",
+        sprite: {
+            url: "../../assets/images/chessboard-sprite.svg", // pieces and markers are stored in a sprite file
+        },
+        extensions: [
+            {class: PromotionDialog, props: {}}
+        ]
+    })
+    chessboard.enableMoveInput((event) => {
+        console.log("8610fe", event)
+        if(event === INPUT_EVENT_TYPE.validateMoveInput) {
+        }
+        return true
+    })
+    chessboard.showPromotionDialog("c8", COLOR.white, (event) => {
+        console.log(event)
+        chessboard.setPiece(event.square, event.piece, true)
+    })
+    window.switchOrientation = function () {
+        chessboard.setOrientation(chessboard.getOrientation() === 'w' ? 'b' : 'w')
+    }
+</script>
+</body>
+</html>

package/examples/pieces-animation.html CHANGED Viewed

@@ -55,6 +55,12 @@ await board.movePiece("d5", "f4")
         })
     let i = 0
     window.setPosition = (position, animated) => {
+        if(position === "start") {
+            position = FEN.start
+        }
+        if(position === "empty") {
+            position = FEN.empty
+        }
         i++
         return board.setPosition(position, animated)
     }

package/index.html CHANGED Viewed

@@ -30,17 +30,18 @@ It works, it is cool and it is easy to use. 👍</p>
     <ul>
         <li><a href="examples/extensions/chessboard-accessibility-extension.html">Accessibility extension</a></li>
         <li><a href="examples/extensions/chessboard-arrows-extension.html">Arrows extension</a></li>
-        <li><a href="examples/extensions/chessboard-promotion-extension.html">Promotion extension</a> 🆕</li>
+        <li><a href="examples/extensions/chessboard-promotion-dialog-extension.html">PromotionDialog extension</a> 🆕</li>
     </ul>
 </div>
 <h2>Chessboard</h2>
 <div class="board" id="board"></div>
 <script type="module">
     import {Chessboard} from "./src/cm-chessboard/Chessboard.js"
+    import {FEN} from "./src/cm-chessboard/model/Position.js"
     const chess = new Chess()
     const board = new Chessboard(document.getElementById("board"), {
-        position: "start"
+        position: FEN.start
     })
     const interval = setInterval(() => {
         makeRandomMove()

package/package.json CHANGED Viewed

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

@@ -39,7 +39,7 @@ export const MARKER_TYPE = {
 }
 export const PIECE = {
     wp: "wp", wb: "wb", wn: "wn", wr: "wr", wq: "wq", wk: "wk",
-    bp: "bp", bb: "bb", bn: "bn", br: "br", bq: "bq", bk: "bk",
+    bp: "bp", bb: "bb", bn: "bn", br: "br", bq: "bq", bk: "bk"
 }
 export class Chessboard {

package/src/cm-chessboard/extensions/arrows/Arrows.js CHANGED Viewed

@@ -39,7 +39,7 @@ export class Arrows extends Extension {
         this.registerMethod("addArrow", this.addArrow)
         this.registerMethod("getArrows", this.getArrows)
         this.registerMethod("removeArrows", this.removeArrows)
-        this.arrowGroup = Svg.addElement(chessboard.view.piecesLayer, "g", {class: "arrows"})
+        this.arrowGroup = Svg.addElement(chessboard.view.markersTopLayer, "g", {class: "arrows"})
         this.arrows = []
     }

package/src/cm-chessboard/extensions/promotion-dialog/PromotionDialog.js ADDED Viewed

@@ -0,0 +1,122 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
+import {COLOR, PIECE} from "../../Chessboard.js"
+import {DomUtils, Svg} from "../../view/ChessboardView.js"
+export class PromotionDialog extends Extension {
+    constructor(chessboard, props) {
+        super(chessboard, props)
+        this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, this.redrawDialog.bind(this))
+        this.registerMethod("showPromotionDialog", this.showPromotionDialog)
+        this.promotionDialogGroup = Svg.addElement(chessboard.view.markersTopLayer, "g", {class: "promotion-dialog-group"})
+        DomUtils.delegate(this.promotionDialogGroup, "click", ".promotion-dialog-button",
+            this.promotionDialogOnClickPiece.bind(this))
+        this.state = {
+            isShown: false,
+            color: undefined,
+            square: undefined,
+            callback: undefined
+        }
+    }
+    drawPieceButton(piece, point) {
+        const squareWidth = this.chessboard.view.squareWidth
+        const squareHeight = this.chessboard.view.squareHeight
+        Svg.addElement(this.promotionDialogGroup,
+            "rect", {
+                x: point.x, y: point.y, width: squareWidth, height: squareHeight,
+                class: "promotion-dialog-button",
+                "data-piece": piece
+            })
+        this.chessboard.view.drawPiece(this.promotionDialogGroup, piece, point)
+    }
+    redrawDialog() {
+        if (!this.state.square) {
+            return
+        }
+        const squareWidth = this.chessboard.view.squareWidth
+        const squareHeight = this.chessboard.view.squareHeight
+        const squareCenterPoint = this.chessboard.view.squareToPoint(this.state.square)
+        squareCenterPoint.x = squareCenterPoint.x + squareWidth / 2
+        squareCenterPoint.y = squareCenterPoint.y + squareHeight / 2
+        while (this.promotionDialogGroup.firstChild) {
+            this.promotionDialogGroup.removeChild(this.promotionDialogGroup.firstChild)
+        }
+        if (this.state.isShown) {
+            let turned = false
+            const rank = parseInt(this.state.square.charAt(1), 10)
+            if (this.chessboard.getOrientation() === COLOR.white && rank < 5 ||
+                this.chessboard.getOrientation() === COLOR.black && rank >= 5) {
+                turned = true
+            }
+            const offsetY = turned ? -4 * squareHeight : 0
+            const offsetX = squareCenterPoint.x + squareWidth > this.chessboard.view.width ? -squareWidth : 0
+            Svg.addElement(this.promotionDialogGroup,
+                "rect", {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y + offsetY,
+                    width: squareWidth,
+                    height: squareHeight * 4,
+                    class: "promotion-dialog"
+                })
+            if (turned) {
+                this.drawPieceButton(PIECE[this.state.color + "q"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y - squareHeight
+                })
+                this.drawPieceButton(PIECE[this.state.color + "r"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y - squareHeight * 2
+                })
+                this.drawPieceButton(PIECE[this.state.color + "b"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y - squareHeight * 3
+                })
+                this.drawPieceButton(PIECE[this.state.color + "n"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y - squareHeight * 4
+                })
+            } else {
+                this.drawPieceButton(PIECE[this.state.color + "q"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y
+                })
+                this.drawPieceButton(PIECE[this.state.color + "r"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y + squareHeight
+                })
+                this.drawPieceButton(PIECE[this.state.color + "b"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y + squareHeight * 2
+                })
+                this.drawPieceButton(PIECE[this.state.color + "n"], {
+                    x: squareCenterPoint.x + offsetX,
+                    y: squareCenterPoint.y + squareHeight * 3
+                })
+            }
+        }
+    }
+    promotionDialogOnClickPiece(event) {
+        this.state.callback({square: this.state.square, piece: event.target.dataset.piece})
+        this.state.isShown = false
+        this.redrawDialog()
+    }
+    showPromotionDialog(square, color, callback) {
+        this.state.isShown = true
+        this.state.square = square
+        this.state.color = color
+        this.state.callback = callback
+        this.redrawDialog()
+    }
+}

package/src/cm-chessboard/extensions/promotion-dialog/assets/promotion-dialog.css ADDED Viewed

@@ -0,0 +1,15 @@
+svg.cm-chessboard .promotion-dialog-group .promotion-dialog {
+  fill: black;
+  fill-opacity: 0.3;
+  stroke: rgba(0, 0, 0, 0.3); }
+svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button {
+  fill: transparent;
+  cursor: pointer; }
+  svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button:hover {
+    fill: rgba(0, 0, 0, 0.2); }
+svg.cm-chessboard .promotion-dialog-group .piece-group {
+  pointer-events: none; }
+/*# sourceMappingURL=promotion-dialog.css.map */

package/src/cm-chessboard/extensions/promotion-dialog/assets/promotion-dialog.css.map ADDED Viewed

@@ -0,0 +1,9 @@
+{
+	"version": 3,
+	"file": "promotion-dialog.css",
+	"sources": [
+		"promotion-dialog.scss"
+	],
+	"names": [],
+	"mappings": "AAAA,AAEI,GAFD,AAAA,cAAc,CACf,uBAAuB,CACrB,iBAAiB,CAAC;EAChB,IAAI,EAAE,KAAK;EACX,YAAY,EAAE,GAAG;EACjB,MAAM,EAAE,kBAAkB,GAC3B;;AANL,AAQI,GARD,AAAA,cAAc,CACf,uBAAuB,CAOrB,wBAAwB,CAAC;EACvB,IAAI,EAAE,WAAW;EACjB,MAAM,EAAE,OAAO,GAKhB;EAfL,AAYM,GAZH,AAAA,cAAc,CACf,uBAAuB,CAOrB,wBAAwB,CAIpB,KAAK,CAAC;IACN,IAAI,EAAE,kBAAkB,GACzB;;AAdP,AAiBI,GAjBD,AAAA,cAAc,CACf,uBAAuB,CAgBrB,YAAY,CAAC;EACX,cAAc,EAAE,IAAI,GACrB"
+}

package/src/cm-chessboard/extensions/promotion-dialog/assets/promotion-dialog.scss ADDED Viewed

@@ -0,0 +1,22 @@
+svg.cm-chessboard {
+  .promotion-dialog-group {
+    .promotion-dialog {
+      fill: black;
+      fill-opacity: 0.3;
+      stroke: rgba(0, 0, 0, 0.3)
+    }
+    .promotion-dialog-button {
+      fill: transparent;
+      cursor: pointer;
+      &:hover {
+        fill: rgba(0, 0, 0, 0.2)
+      }
+    }
+    .piece-group {
+      pointer-events: none;
+    }
+  }
+}

package/src/cm-chessboard/model/Position.js CHANGED Viewed

@@ -20,10 +20,10 @@ export class Position {
     setFen(fen = FEN.empty) {
         let fenNormalized
         if (fen === "start") {
-            console.warn("setting the position with the strings 'start' or 'empty' is deprecated, use FEN.start or FEN.empty")
+            console.warn("setting the position with the strings 'start' or 'empty' is deprecated, use FEN.start or FEN.empty", "used:", fen)
             fenNormalized = FEN.start
         } else if (fen === "empty" || fen === undefined) {
-            console.warn("setting the position with the strings 'start' or 'empty' is deprecated, use FEN.start or FEN.empty")
+            console.warn("setting the position with the strings 'start' or 'empty' is deprecated, use FEN.start or FEN.empty", "used:", fen)
             fenNormalized = FEN.empty
         } else {
             fenNormalized = fen

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

@@ -140,6 +140,8 @@ export class ChessboardView {
         this.markersGroup = Svg.addElement(this.markersLayer, "g", {class: "markers"})
         this.piecesLayer = Svg.addElement(this.svg, "g", {class: "pieces-layer"})
         this.piecesGroup = Svg.addElement(this.piecesLayer, "g", {class: "pieces"})
+        this.markersTopLayer = Svg.addElement(this.svg, "g", {class: "markers-top-layer"})
+        // this.markersTopGroup = Svg.addElement(this.markersTopLayer, "g", {class: "markers-top"})
     }
     updateMetrics() {
@@ -278,7 +280,7 @@ export class ChessboardView {
         for (let i = 0; i < 64; i++) {
             const pieceName = squares[i]
             if (pieceName) {
-                this.drawPiece(Position.indexToSquare(i), pieceName)
+                this.drawPieceOnSquare(Position.indexToSquare(i), pieceName)
             }
         }
         for (const childNode of childNodes) {
@@ -286,8 +288,35 @@ export class ChessboardView {
         }
     }
-    drawPiece(square, pieceName) {
-        const pieceGroup = Svg.addElement(this.piecesGroup, "g")
+    drawPiece(parentGroup, pieceName, point) {
+        const pieceGroup = Svg.addElement(parentGroup, "g", {})
+        pieceGroup.setAttribute("data-piece", pieceName)
+        pieceGroup.setAttribute("class", "piece-group")
+        const transform = (this.svg.createSVGTransform())
+        transform.setTranslate(point.x, point.y)
+        pieceGroup.transform.baseVal.appendItem(transform)
+        const spriteUrl = this.chessboard.props.sprite.cache ? "" : this.chessboard.props.sprite.url
+        const pieceUse = Svg.addElement(pieceGroup, "use", {
+            href: `${spriteUrl}#${pieceName}`,
+            class: "piece"
+        })
+        const transformScale = (this.svg.createSVGTransform())
+        transformScale.setScale(this.scalingY, this.scalingY)
+        pieceUse.transform.baseVal.appendItem(transformScale)
+        const transformTranslate = (this.svg.createSVGTransform())
+        transformTranslate.setTranslate(this.pieceXTranslate, 0)
+        pieceUse.transform.baseVal.appendItem(transformTranslate)
+        return pieceGroup
+    }
+    drawPieceOnSquare(square, pieceName) {
+        const point = this.squareToPoint(square)
+        const pieceGroup = this.drawPiece(this.piecesGroup, pieceName, point)
+        pieceGroup.setAttribute("data-square", square)
+        return pieceGroup
+        /*
+        const pieceGroup = Svg.addElement(this.piecesGroup, "g", {})
         pieceGroup.setAttribute("data-piece", pieceName)
         pieceGroup.setAttribute("data-square", square)
         const point = this.squareToPoint(square)
@@ -303,11 +332,10 @@ export class ChessboardView {
         const transformTranslate = (this.svg.createSVGTransform())
         transformTranslate.setTranslate(this.pieceXTranslate, 0)
         pieceUse.transform.baseVal.appendItem(transformTranslate)
-        // scale
-        const transformScale = (this.svg.createSVGTransform())
-        transformScale.setScale(this.scalingY, this.scalingY)
-        pieceUse.transform.baseVal.appendItem(transformScale)
-        return pieceGroup
+         */
+        // return pieceGroup
     }
     setPieceVisibility(square, visible = true) {
@@ -395,14 +423,17 @@ export class ChessboardView {
         const data = {
             chessboard: this.chessboard,
             type: INPUT_EVENT_TYPE.moveInputStarted,
-            square: square
+            square: square,
+            piece: this.chessboard.getPiece(square)
         }
-        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data) // TODO use the return value of this EP
         if (this.moveInputCallback) {
-            return this.moveInputCallback(data)
-        } else {
-            return true
+            // the "oldschool" move input validator
+            data.moveInputCallbackResult =  this.moveInputCallback(data)
         }
+        // the new extension points
+        const extensionPointsResult = this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
+        // validates, when moveInputCallbackResult and extensionPointsResult are true
+        return !(extensionPointsResult === false || !data.moveInputCallbackResult);
     }
     validateMoveInputCallback(squareFrom, squareTo) {
@@ -419,7 +450,6 @@ export class ChessboardView {
         }
         // the new extension points
         const extensionPointsResult = this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
-        // console.log("5b0d1f", extensionPointsResult, data.moveInputCallbackResult)
         // validates, when moveInputCallbackResult and extensionPointsResult are true
         return !(extensionPointsResult === false || !data.moveInputCallbackResult);
     }
@@ -532,3 +562,23 @@ export class Svg {
     }
 }
+export class DomUtils {
+    static delegate(element, eventName, selector, handler) {
+        const eventListener = function (event) {
+            let target = event.target
+            while (target && target !== this) {
+                if (target.matches(selector)) {
+                    handler.call(target, event)
+                }
+                target = target.parentNode
+            }
+        }
+        element.addEventListener(eventName, eventListener)
+        return {
+            remove: function () {
+                element.removeEventListener(eventName, eventListener)
+            }
+        }
+    }
+}

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

@@ -147,7 +147,7 @@ export class PositionsAnimation {
                     animatedItem.toPoint = this.view.indexToPoint(change.toIndex)
                     break
                 case CHANGE_TYPE.appear:
-                    animatedItem.element = this.view.drawPiece(Position.indexToSquare(change.atIndex), change.piece)
+                    animatedItem.element = this.view.drawPieceOnSquare(Position.indexToSquare(change.atIndex), change.piece)
                     animatedItem.element.style.opacity = 0
                     break
                 case CHANGE_TYPE.disappear:

package/examples/extensions/chessboard-promotion-extension.html DELETED Viewed

@@ -1,35 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="../styles/examples.css"/>
-    <link rel="stylesheet" href="../../assets/styles/cm-chessboard.css">
-    <title>cm-chessboard promotion extension</title>
-</head>
-<body>
-<h1>Example of the cm-chessboard Promotion extension</h1>
-<p>Try to move the pawn to the c8</p>
-<div id="chessboard" class="board-max-width">
-</div>
-<script type="module">
-    import {Chessboard} from "../../src/cm-chessboard/Chessboard.js"
-    import {Promotion} from "../../src/cm-chessboard/extensions/promotion/Promotion.js"
-    const chessboard = new Chessboard(document.getElementById("chessboard"), {
-        position: "4k3/2P5/8/8/8/8/3Q1Q2/4K2R w K - 0 1",
-        sprite: {
-            url: "../../assets/images/chessboard-sprite.svg", // pieces and markers are stored in a sprite file
-        },
-        extensions: [
-            {class: Promotion, props: {}}
-        ]
-    })
-    chessboard.enableMoveInput((move) => {
-        return true
-    })
-</script>
-</body>
-</html>

package/src/cm-chessboard/extensions/promotion/Promotion.js DELETED Viewed

@@ -1,36 +0,0 @@
-/**
- * Author and copyright: Stefan Haack (https://shaack.com)
- * Repository: https://github.com/shaack/cm-chessboard
- * License: MIT, see file 'LICENSE'
- */
-import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
-import {INPUT_EVENT_TYPE, PIECE} from "../../Chessboard.js"
-export class Promotion extends Extension {
-    constructor(chessboard, props) {
-        super(chessboard, props)
-        this.registerExtensionPoint(EXTENSION_POINT.moveInput, this.onMoveInput.bind(this))
-    }
-    onMoveInput(event) {
-        if(event.type === INPUT_EVENT_TYPE.validateMoveInput) {
-            console.log(this)
-            console.log("976000", event,
-                this.chessboard.getPiece(event.squareFrom),
-                this.chessboard.getPiece(event.squareTo))
-            if(event.piece === PIECE.wp && event.squareTo.charAt(1) === "8") {
-                return false
-            }
-        }
-    }
-    showPromotionDialog(event) {
-        this.promotionDialog = document.createElement("div")
-        this.promotionDialog.style.width = "50px"
-        this.promotionDialog.style.height = "50px"
-        this.promotionDialog.style.backgroundColor = "white"
-        // this.chessboard.view.
-    }
-}

package/src/cm-chessboard/extensions/validate-moves/Chess.mjs DELETED Viewed

File without changes

package/src/cm-chessboard/extensions/validate-moves/ValidateMoves.js DELETED Viewed

File without changes