cm-chessboard 6.0.3 → 7.0.1

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

@@ -5,7 +5,7 @@
  */
 
 import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
-import {Svg} from "../../view/ChessboardView.js"
+import {Svg} from "../../lib/Svg.js"
 
 export const ARROW_TYPE = {
     default: {class: "arrow-default", slice: "arrowDefault", headSize: 7},
@@ -14,27 +14,18 @@ export const ARROW_TYPE = {
 }
 
 export class Arrows extends Extension {
-    constructor(chessboard, props) {
+    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 = {
+            sprite: "arrows.svg"
         }
-        this.props = {}
-        Object.assign(this.props, defaultProps)
         Object.assign(this.props, props)
-        this.props.sprite = defaultProps.sprite
-        if (props.sprite) {
-            Object.assign(this.props.sprite, props.sprite)
-        }
-        if (this.props.sprite.cache) {
-            this.chessboard.view.cacheSpriteToDiv("chessboardArrowSpriteCache", this.props.sprite.url)
+        if (this.chessboard.props.assetsCache) {
+            this.chessboard.view.cacheSpriteToDiv("cm-chessboard-arrows",
+                this.chessboard.props.assetsUrl + "extensions/arrows/" + this.props.sprite)
         }
         this.registerMethod("addArrow", this.addArrow)
         this.registerMethod("getArrows", this.getArrows)
@@ -56,11 +47,11 @@ export class Arrows extends Extension {
         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 spriteUrl = this.chessboard.props.assetsCache ? "" : this.chessboard.props.assetsUrl +
+            "extensions/arrows/" + this.props.sprite
         const defs = Svg.addElement(arrowsGroup, "defs")
         const id = "arrow-" + arrow.from + arrow.to
         const marker = Svg.addElement(defs, "marker", {

package/src/cm-chessboard/extensions/markers/Markers.js

@@ -5,7 +5,8 @@
  */
 
 import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
-import {Svg} from "../../view/ChessboardView.js"
+import {Svg} from "../../lib/Svg.js"
+import {INPUT_EVENT_TYPE} from "../../Chessboard.js"
 
 export const MARKER_TYPE = {
     square: {class: "marker-square", slice: "markerSquare"},
@@ -15,27 +16,20 @@ export const MARKER_TYPE = {
 }
 
 export class Markers extends Extension {
-    constructor(chessboard, props) {
+    constructor(chessboard, props = {}) {
         super(chessboard, props)
         this.registerExtensionPoint(EXTENSION_POINT.redrawBoard, () => {
             this.onRedrawBoard()
         })
-        let defaultProps = {
-            style: {
-                moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
-                moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
-            },
-            sprite: chessboard.props.sprite
+        this.props = {
+            autoMarkers: MARKER_TYPE.frame, // set to `null` to disable autoMarkers
+            sprite: "markers.svg" // the sprite file of the markers
         }
-        this.props = {}
-        Object.assign(this.props, defaultProps)
         Object.assign(this.props, props)
-        this.props.sprite = defaultProps.sprite
-        if (props && props.sprite) {
-            Object.assign(this.props.sprite, props.sprite)
-        }
-        if (this.props.sprite.cache) {
-            this.chessboard.view.cacheSpriteToDiv("chessboardMarkerSpriteCache", this.props.sprite.url)
+        this.autoMarker = {}
+        if (chessboard.props.assetsCache) {
+            chessboard.view.cacheSpriteToDiv("cm-chessboard-markers", this.chessboard.props.assetsUrl +
+                "extensions/markers/" + this.props.sprite)
         }
         this.registerMethod("addMarker", this.addMarker)
         this.registerMethod("getMarkers", this.getMarkers)
@@ -43,6 +37,22 @@ export class Markers extends Extension {
         this.markerGroupDown = Svg.addElement(chessboard.view.markersLayer, "g", {class: "markers"})
         this.markerGroupUp = Svg.addElement(chessboard.view.markersTopLayer, "g", {class: "markers"})
         this.markers = []
+        if (this.props.autoMarkers) {
+            Object.assign(this.autoMarker, this.props.autoMarkers)
+            this.registerExtensionPoint(EXTENSION_POINT.moveInput, (event) => {
+                this.removeMarkers(this.autoMarker)
+                if (event.type === INPUT_EVENT_TYPE.moveInputStarted ||
+                    event.type === INPUT_EVENT_TYPE.movingOverSquare ||
+                    event.type === INPUT_EVENT_TYPE.validateMoveInput) {
+                    if(event.squareFrom) {
+                        this.addMarker(this.autoMarker, event.squareFrom)
+                    }
+                    if(event.squareTo) {
+                        this.addMarker(this.autoMarker, event.squareTo)
+                    }
+                }
+            })
+        }
     }
 
     onRedrawBoard() {
@@ -70,7 +80,8 @@ export class Markers extends Extension {
         const transform = (this.chessboard.view.svg.createSVGTransform())
         transform.setTranslate(point.x, point.y)
         markerGroup.transform.baseVal.appendItem(transform)
-        const spriteUrl = this.chessboard.props.sprite.cache ? "" : this.chessboard.props.sprite.url
+        const spriteUrl = this.chessboard.props.assetsCache ? "" : this.chessboard.props.assetsUrl +
+            "extensions/markers/" + this.props.sprite
         const markerUse = Svg.addElement(markerGroup, "use",
             {href: `${spriteUrl}#${marker.type.slice}`, class: "marker " + marker.type.class})
         const transformScale = (this.chessboard.view.svg.createSVGTransform())

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

@@ -5,17 +5,17 @@
  */
 import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
 import {COLOR, PIECE} from "../../Chessboard.js"
-import {DomUtils, Svg} from "../../view/ChessboardView.js"
+import {Svg} from "../../lib/Svg.js"
+import {Utils} from "../../lib/Utils.js"
 
 export class PromotionDialog extends Extension {
 
-    constructor(chessboard, props) {
+    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",
+        Utils.delegate(this.promotionDialogGroup, "click", ".promotion-dialog-button",
             this.promotionDialogOnClickPiece.bind(this))
         this.state = {
             isShown: false,
@@ -23,7 +23,6 @@ export class PromotionDialog extends Extension {
             square: undefined,
             callback: undefined
         }
-
     }
 
     drawPieceButton(piece, point) {
@@ -121,7 +120,6 @@ export class PromotionDialog extends Extension {
         this.state.color = color
         this.state.callback = callback
         const mousedownListener = (event) => {
-            // console.log("98c265", event)
             if (!event.target.dataset.piece && this.state.isShown) {
                 this.state.isShown = false
                 this.state.callback({square: this.state.square, piece: null})

package/src/cm-chessboard/extensions/render-video/RenderVideo.js

@@ -146,10 +146,13 @@ export class RenderVideo extends Extension {
         document.body.appendChild(wrapper)
         const svg = this.chessboard.view.svg
         const xhr = new XMLHttpRequest()
-        xhr.open("GET", this.chessboard.props.sprite.url, true)
+        xhr.open("GET", this.chessboard.view.getSpriteUrl(), true)
         xhr.onload = function () {
             const doc = new DOMParser().parseFromString(xhr.response, "text/xml")
-            svg.prepend(doc.getElementById("Sprite-PD"))
+            const pieces = doc.querySelectorAll("svg>g")
+            for (const piece of pieces) {
+                svg.prepend(piece)
+            }
         }
         xhr.send()
     }

package/src/cm-chessboard/lib/I18n.js

@@ -0,0 +1,44 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+
+export const piecesTranslations = {
+    en: {
+        colors: {
+            w: "w", b: "b"
+        },
+        colors_long: {
+            w: "White", b: "Black"
+        },
+        pieces: {
+            p: "p", n: "n", b: "b", r: "r", q: "q", k: "k"
+        },
+        pieces_long: {
+            p: "Pawn", n: "Knight", b: "Bishop", r: "Rook", q: "Queen", k: "King"
+        }
+    },
+    de: {
+        colors: {
+            w: "w", b: "s"
+        },
+        colors_long: {
+            w: "Weiß", b: "Schwarz"
+        },
+        pieces: {
+            p: "b", n: "s", b: "l", r: "t", q: "d", k: "k"
+        },
+        pieces_long: {
+            p: "Bauer", n: "Springer", b: "Läufer", r: "Turm", q: "Dame", k: "König"
+        }
+    }
+}
+
+export function renderPieceTitle(lang, name, color = undefined) {
+    let title = piecesTranslations[lang].pieces_long[name]
+    if (color) {
+        title += " " + piecesTranslations[lang].colors_long[color]
+    }
+    return title
+}

package/src/cm-chessboard/lib/Svg.js

@@ -0,0 +1,69 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg"
+
+export class Svg {
+
+    /**
+     * create the Svg in the HTML DOM
+     * @param containerElement
+     * @returns {Element}
+     */
+    static createSvg(containerElement = undefined) {
+        let svg = document.createElementNS(SVG_NAMESPACE, "svg")
+        if (containerElement) {
+            svg.setAttribute("width", "100%")
+            svg.setAttribute("height", "100%")
+            containerElement.appendChild(svg)
+        }
+        return svg
+    }
+
+    /**
+     * Add an Element to a SVG DOM
+     * @param parent
+     * @param name
+     * @param attributes
+     * @param sibling
+     * @returns {Element}
+     */
+    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
+        }
+        for (let attribute in attributes) {
+            if (attributes.hasOwnProperty(attribute)) {
+                if (attribute.indexOf(":") !== -1) {
+                    const value = attribute.split(":")
+                    element.setAttributeNS("http://www.w3.org/1999/" + value[0], value[1], attributes[attribute])
+                } else {
+                    element.setAttribute(attribute, attributes[attribute])
+                }
+            }
+        }
+        if (sibling !== undefined) {
+            parent.appendChild(element)
+        } else {
+            parent.insertBefore(element, sibling)
+        }
+        return element
+    }
+
+    /**
+     * Remove an Element from a SVG DOM
+     * @param element
+     */
+    static removeElement(element) {
+        if (element.parentNode) {
+            element.parentNode.removeChild(element)
+        } else {
+            console.warn(element, "without parentNode")
+        }
+    }
+
+}

package/src/cm-chessboard/lib/Utils.js

@@ -0,0 +1,41 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+
+export class Utils {
+
+    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)
+            }
+        }
+    }
+
+    static mergeObjects(target, source) {
+        const isObject = (obj) => obj && typeof obj === 'object'
+        if (!isObject(target) || !isObject(source)) {
+            return source
+        }
+        for (const key of Object.keys(source)) {
+            if (source[key] instanceof Object) {
+                Object.assign(source[key], Utils.mergeObjects(target[key], source[key]))
+            }
+        }
+        Object.assign(target || {}, source)
+        return target
+    }
+
+}

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

@@ -8,9 +8,9 @@ export const EXTENSION_POINT = {
     positionChanged: "positionChanged", // the positions of the pieces was changed
     boardChanged: "boardChanged", // the board (orientation) was changed
     moveInputToggled: "moveInputToggled", // move input was enabled or disabled
-    moveInput: "moveInput", // move started, to validate or canceled
+    moveInput: "moveInput", // move started, moving over a square, validating or canceled
     redrawBoard: "redrawBoard", // called after redrawing the board
-    animation: "animation", // called on every animation frame
+    animation: "animation", // called on animation start, end and on every animation frame
     destroy: "destroy" // called, before the board is destroyed
 }