npm - cm-chessboard - Versions diffs - 4.4.2 → 4.5.0 - Mend

cm-chessboard 4.4.2 → 4.5.0

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

package/assets/styles/cm-chessboard.scss CHANGED Viewed

@@ -102,35 +102,35 @@ body * {
 @include cm-chessboard-theme(
                 "default", // name
                 #ecdab9, #c5a076 // squares
-)
+);
 @include cm-chessboard-theme(
                 "default-contrast", // name
                 #ecdab9, #c5a076, // squares
                 #333, #333, // coordinates in squares (white, black)
-)
+);
 @include cm-chessboard-theme(
                 "green", // name
                 #E0DDCC, #4c946a // squares
-)
+);
 @include cm-chessboard-theme(
                 "blue", // name
                 #d8ecfb, #86afcf // squares
-)
+);
 @include cm-chessboard-theme(
                 "chess-club", // name
                 #E6D3B1, #AF6B3F, // squares
                 #AF6B3F, #E6D3B1, // coordinates in squares (white, black)
                 #E6D3B1, // coordinates in frame-mode
                 #692e2b, #692e2b // border and frame background
-)
+);
 @include cm-chessboard-theme(
                 "chessboard-js", // name
                 #f0d9b5, #b58863, // squares
                 #b58863, #f0d9b5, // coordinates in squares (white, black)
                 #404040, // coordinates in frame-mode
                 #404040, #f0d9b5 // border and frame background
-)
+);
 @include cm-chessboard-theme(
                 "black-and-white", // name
                 #ffffff, #9c9c9c // squares
-)
+);

package/examples/{accessible-chessboard.html → extensions/chessboard-accessibility-extension.html} RENAMED Viewed

@@ -4,11 +4,11 @@
     <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/styles/cm-chessboard.css"/>
+    <link rel="stylesheet" href="../styles/examples.css"/>
+    <link rel="stylesheet" href="../../assets/styles/cm-chessboard.css"/>
 </head>
 <body>
-<h1><a href="../">cm-chessboard</a></h1>
+<h1><a href="../..">cm-chessboard</a></h1>
 <h2>Example: Accessibility extension</h2>
 <p>
     This example shows, how the accessibility extension from cm-chessboard works.
@@ -24,17 +24,17 @@
     <li>Display these features visually hidden or not</li>
 </ul>
 <h3>The chessboard</h3>
-<div class="board green" id="board"></div>
+<div class="board" id="board"></div>
 <button style="margin-bottom: 10px"
         onclick="window.setOrientation()">Switch Orientation
 </button>
 <script type="module">
-    import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
-    import {Accessibility} from "../src/cm-chessboard/extensions/Accessibility.js"
+    import {Chessboard} from "../../src/cm-chessboard/Chessboard.js"
+    import {Accessibility} from "../../src/cm-chessboard/extensions/accessibility/Accessibility.js"
     const chessboard = new Chessboard(document.getElementById("board"), {
         position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
-        sprite: {url: "../assets/images/chessboard-sprite.svg"},
+        sprite: {url: "../../assets/images/chessboard-sprite.svg"},
         // animationDuration: 0, // optional, set to 0 to disable animations
         style: {
             cssClass: "default-contrast" // make the coordinates better visible with the "default-contrast" theme

package/examples/extensions/chessboard-arrows-extension.html ADDED Viewed

@@ -0,0 +1,44 @@
+<!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/styles/cm-chessboard.css"/>
+    <link rel="stylesheet" href="../../src/cm-chessboard/extensions/arrows/assets/arrows.css"/>
+</head>
+<body>
+<h1><a href="../..">cm-chessboard</a></h1>
+<h2>Example: Arrows extension</h2>
+<div class="board" id="board"></div>
+<script type="module">
+    import {ARROW_TYPE, Arrows} from "../../src/cm-chessboard/extensions/arrows/Arrows.js"
+    import {Chessboard} from "../../src/cm-chessboard/Chessboard.js"
+    const chessboard = new Chessboard(document.getElementById("board"), {
+        position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
+        sprite: {url: "../../assets/images/chessboard-sprite.svg"},
+        // 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: Arrows,
+                props: {
+                    sprite: {
+                        url: "../../src/cm-chessboard/extensions/arrows/assets/arrows.svg",
+                        size: 40,
+                        cache: true
+                    }
+                }
+            }]
+    })
+    chessboard.addArrow("f3", "d5", ARROW_TYPE.default);
+    chessboard.addArrow("b8", "c6", ARROW_TYPE.default);
+    chessboard.addArrow("d2", "d3", ARROW_TYPE.default);
+</script>
+</body>
+</html>

package/index.html CHANGED Viewed

@@ -29,7 +29,8 @@ It works, it is cool and it is easy to use. 👍</p>
     </ul>
     <h3>Examples of extensions</h3>
     <ul>
-        <li><a href="examples/accessible-chessboard.html">Accessibility extension</a> 🆕</li>
+        <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>
     </ul>
 </div>
 <h2>Chessboard</h2>

package/package.json CHANGED Viewed

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

@@ -87,18 +87,18 @@ export class Chessboard {
             this.props.language = "en"
         }
-        this.moveTask = Promise.resolve()
         this.state = new ChessboardState()
         this.view = new ChessboardView(this)
         this.positionAnimationsQueue = new PositionAnimationsQueue(this)
         this.state.orientation = this.props.orientation
-        this.view.redrawBoard()
-        this.state.position = new Position(this.props.position)
-        this.view.redrawPieces()
         // instantiate extensions
         for (const extensionData of this.props.extensions) {
             this.extensions.push(new extensionData.class(this, extensionData.props))
         }
+        this.view.redrawBoard()
+        this.state.position = new Position(this.props.position)
+        this.view.redrawPieces()
+        this.state.invokeExtensionPoints(EXTENSION_POINT.positionChanged)
     }
     // API //

package/src/cm-chessboard/extensions/{Accessibility.js → accessibility/Accessibility.js} RENAMED Viewed

@@ -3,9 +3,9 @@
  * Repository: https://github.com/shaack/cm-chessboard
  * License: MIT, see file 'LICENSE'
  */
-import {Extension, EXTENSION_POINT} from "../model/Extension.js"
-import {piecesTranslations, renderPieceTitle} from "../view/ChessboardView.js"
-import {COLOR, INPUT_EVENT_TYPE} from "../Chessboard.js"
+import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
+import {piecesTranslations, renderPieceTitle} from "../../view/ChessboardView.js"
+import {COLOR, INPUT_EVENT_TYPE} from "../../Chessboard.js"
 const hlTranslations = {
     de: {

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

@@ -0,0 +1,132 @@
+/**
+ * Author and copyright: Barak Michener (@barakmich)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
+import {Svg} from "../../view/ChessboardView.js"
+export const ARROW_TYPE = {
+    default: {class: "arrow-default", slice: "arrowDefault", headSize: 7},
+    pointy: {class: "arrow-pointy", slice: "arrowPointy", headSize: 7},
+}
+export class Arrows extends Extension {
+    constructor(chessboard, props) {
+        super(chessboard, props)
+        this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, () => {
+            this.onRedrawBoard()
+        })
+        let defaultProps = {
+            sprite: {
+                url: "./assets/images/chessboard-arrows.svg",
+                size: 40,
+                cache: true
+            },
+        }
+        this.props = {}
+        Object.assign(this.props, defaultProps)
+        Object.assign(this.props, props)
+        if (this.props.sprite.cache) {
+            this.chessboard.view.cacheSpriteToDiv("chessboardArrowSpriteCache", this.props.sprite.url)
+        }
+        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.arrows = []
+    }
+    onRedrawBoard() {
+        while (this.arrowGroup.firstChild) {
+            this.arrowGroup.removeChild(this.arrowGroup.firstChild)
+        }
+        this.arrows.forEach((arrow) => {
+            this.drawArrow(arrow)
+        })
+    }
+    drawArrow(arrow) {
+        const arrowsGroup = Svg.addElement(this.arrowGroup, "g")
+        arrowsGroup.setAttribute("data-arrow", arrow.from + arrow.to)
+        arrowsGroup.setAttribute("class", "arrow " + arrow.type.class)
+        const view = this.chessboard.view
+        const sqfrom = document.querySelectorAll('[data-square="' + arrow.from + '"]')[0]
+        const sqto = document.querySelectorAll('[data-square="' + arrow.to + '"]')[0]
+        const spriteUrl = this.chessboard.props.sprite.cache ? "" : this.chessboard.props.sprite.url
+        const defs = Svg.addElement(arrowsGroup, "defs")
+        const id = "arrow-" + arrow.from + arrow.to
+        const marker = Svg.addElement(defs, "marker", {
+            id: id,
+            markerWidth: arrow.type.headSize,
+            markerHeight: arrow.type.headSize,
+            //markerUnits: "userSpaceOnUse",
+            refX: 20,
+            refY: 20,
+            viewBox: "0 0 40 40",
+            orient: "auto",
+            class: "arrow-head",
+        })
+        const ignored = Svg.addElement(marker, "use", {
+            href: `${spriteUrl}#${arrow.type.slice}`,
+        })
+        const x1 = sqfrom.x.baseVal.value + (sqfrom.width.baseVal.value / 2)
+        const x2 = sqto.x.baseVal.value + (sqto.width.baseVal.value / 2)
+        const y1 = sqfrom.y.baseVal.value + (sqfrom.height.baseVal.value / 2)
+        const y2 = sqto.y.baseVal.value + (sqto.height.baseVal.value / 2)
+        const width = ((view.scalingX + view.scalingY) / 2) * 4
+        let lineFill = Svg.addElement(arrowsGroup, "line")
+        lineFill.setAttribute('x1', x1)
+        lineFill.setAttribute('x2', x2)
+        lineFill.setAttribute('y1', y1)
+        lineFill.setAttribute('y2', y2)
+        lineFill.setAttribute('class', 'arrow-line')
+        lineFill.setAttribute("marker-end", "url(#" + id + ")")
+        lineFill.setAttribute('stroke-width', width + "px")
+    }
+    addArrow(from, to, type) {
+        this.arrows.push(new Arrow(from, to, type))
+        this.chessboard.view.redrawBoard()
+    }
+    getArrows(from = undefined, to = undefined, type = undefined) {
+        let arrows = []
+        this.arrows.forEach((arrow) => {
+            if (arrow.matches(from, to, type)) {
+                arrows.push(arrow)
+            }
+        })
+        return arrows
+    }
+    removeArrows(from = undefined, to = undefined, type = undefined) {
+        this.arrows = this.arrows.filter((arrow) => !arrow.matches(from, to, type))
+        this.chessboard.view.redrawBoard()
+    }
+}
+class Arrow {
+    constructor(from, to, type) {
+        this.from = from
+        this.to = to
+        this.type = type
+    }
+    matches(from = undefined, to = undefined, type = undefined) {
+        if (from && from !== this.from) {
+            return false
+        }
+        if (to && to !== this.to) {
+            return false
+        }
+        return !(type && type !== this.type);
+    }
+}

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

@@ -0,0 +1,11 @@
+.cm-chessboard .arrows .arrow-head {
+  fill: blue;
+  fill-rule: nonzero;
+  fill-opacity: 1; }
+.cm-chessboard .arrows .arrow-line {
+  stroke: blue;
+  stroke-linecap: round;
+  opacity: 0.5; }
+/*# sourceMappingURL=arrows.css.map */

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

@@ -0,0 +1,9 @@
+{
+	"version": 3,
+	"file": "arrows.css",
+	"sources": [
+		"arrows.scss"
+	],
+	"names": [],
+	"mappings": "AAAA,AAEI,cAFU,CACZ,OAAO,CACL,WAAW,CAAC;EACV,IAAI,EAAE,IAAI;EACV,SAAS,EAAE,OAAO;EAClB,YAAY,EAAE,CAAC,GAChB;;AANL,AAQI,cARU,CACZ,OAAO,CAOL,WAAW,CAAC;EACV,MAAM,EAAE,IAAI;EACZ,cAAc,EAAE,KAAK;EACrB,OAAO,EAAE,GAAG,GACb"
+}

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

@@ -0,0 +1,15 @@
+.cm-chessboard {
+  .arrows {
+    .arrow-head {
+      fill: blue;
+      fill-rule: nonzero;
+      fill-opacity: 1;
+    }
+    .arrow-line {
+      stroke: blue;
+      stroke-linecap: round;
+      opacity: 0.5;
+    }
+  }
+}

package/src/cm-chessboard/extensions/arrows/assets/arrows.svg ADDED Viewed

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--
+LICENSE
+=======
+License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
+https://creativecommons.org/licenses/by-sa/3.0/
+-->
+<svg
+   width="40px"
+   height="40px"
+   viewBox="0 0 40 40"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg">
+  <title
+     id="title47">cm-chessbord arrowheads</title>
+  <desc
+     id="desc49">Arrowheads for cm-chessboard (https://shaack.com/projekte/cm-chessboard/).</desc>
+  <g id="arrowDefault" transform="matrix(5.1931792,0,0,5.1931792,3.5980168,-0.83225447)">
+    <path
+       d="M 0.535156,0.398438 C 0.398438,0.507812 0.316406,0.671875 0.3125,0.847656 0.316406,1.02344 0.398438,1.1875 0.535156,1.29688 L 3.01172,3.35938 3.72266,4.01563 3.01172,4.64453 0.535156,6.67969 C 0.394531,6.79297 0.3125,6.96094 0.3125,7.13672 c 0,0.17578 0.082031,0.34375 0.222656,0.45703 0.328125,0.25781 0.792974,0.25781 1.117184,0 L 5.45703,4.46094 C 5.59766,4.34766 5.68359,4.17969 5.69141,4 5.69141,3.82031 5.60547,3.65234 5.45703,3.54297 L 1.64453,0.394531 C 1.31641,0.148438 0.859375,0.148438 0.535156,0.398438 Z m 0,0"
+       class="head-fill" />
+  </g>
+  <g id="arrowPointy">
+    <path d="M 20,20 5,5 35,20 5,35 Z" class="head-fill"/>
+  </g>
+</svg>

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

@@ -10,7 +10,8 @@ export const EXTENSION_POINT = {
     moveInputToggled: "moveInputToggled", // move input was enabled or disabled
     moveInput: "moveInput", // move started, cancelled or done
     moveInputStateChanged: "moveInput", // TODO deprecated, use `moveInput`
-    destroy: "destroy" // called, before the board is destroyed
+    destroy: "destroy", // called, before the board is destroyed
+    redrawBoard: "redrawBoard" // called while redrawing the board
 }
 export class Extension {
@@ -27,4 +28,10 @@ export class Extension {
         this.chessboard.state.extensionPoints[name].push(callback)
     }
+    registerMethod(name, callback) {
+        if (!this.chessboard[name]) {
+          this.chessboard[name] = (...args) => {callback.apply(this, args)}
+        }
+    }
 }

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

@@ -58,7 +58,7 @@ export class ChessboardView {
             this.moveCanceledCallback.bind(this)
         )
         if (chessboard.props.sprite.cache) {
-            this.cacheSprite()
+            this.cacheSpriteToDiv("chessboardSpriteCache", this.chessboard.props.sprite.url)
         }
         this.context = document.createElement("div")
         this.chessboard.context.appendChild(this.context)
@@ -108,15 +108,14 @@ export class ChessboardView {
     // Sprite //
-    cacheSprite() {
-        const wrapperId = "chessboardSpriteCache"
+    cacheSpriteToDiv(wrapperId, url) {
         if (!document.getElementById(wrapperId)) {
             const wrapper = document.createElement("div")
             wrapper.style.display = "none"
             wrapper.id = wrapperId
             document.body.appendChild(wrapper)
             const xhr = new XMLHttpRequest()
-            xhr.open("GET", this.chessboard.props.sprite.url, true)
+            xhr.open("GET", url, true)
             xhr.onload = function () {
                 wrapper.insertAdjacentHTML('afterbegin', xhr.response)
             }
@@ -137,8 +136,10 @@ export class ChessboardView {
         this.updateMetrics()
         this.boardGroup = Svg.addElement(this.svg, "g", {class: "board"})
         this.coordinatesGroup = Svg.addElement(this.svg, "g", {class: "coordinates"})
-        this.markersGroup = Svg.addElement(this.svg, "g", {class: "markers"})
-        this.piecesGroup = Svg.addElement(this.svg, "g", {class: "pieces"})
+        this.markersLayer = Svg.addElement(this.svg, "g", {class: "markers-layer"})
+        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"})
     }
     updateMetrics() {
@@ -177,6 +178,7 @@ export class ChessboardView {
         this.redrawSquares()
         this.drawCoordinates()
         this.drawMarkers()
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.redrawBoard)
         this.visualizeInputState()
     }
@@ -489,7 +491,7 @@ export class Svg {
      * @param attributes
      * @returns {Element}
      */
-    static addElement(parent, name, attributes) {
+    static addElement(parent, name, attributes, sibling = undefined) {
         let element = document.createElementNS(SVG_NAMESPACE, name)
         if (name === "use") {
             attributes["xlink:href"] = attributes["href"] // fix for safari
@@ -504,7 +506,11 @@ export class Svg {
                 }
             }
         }
-        parent.appendChild(element)
+        if (sibling !== undefined) {
+          parent.appendChild(element)
+        } else {
+          parent.insertBefore(element, sibling)
+        }
         return element
     }