cm-chessboard 5.0.2 → 5.1.2

package/README.md

@@ -132,7 +132,9 @@ Sets the position as `fen`. Special values are "start", sets the chess start pos
 
 Returns the board position as `fen`.
 
-### addMarker(square, type)
+### addMarker(type, square) 
+
+> signature changed with V5.1 from (square, type) to (type, square)
 
 Adds a marker on a square.
 
@@ -149,19 +151,23 @@ below.
 [Example for **addMarker**, **getMarkers** and
 **removeMarkers**](https://shaack.com/projekte/cm-chessboard/examples/context-input.html)
 
-### getMarkers(square = undefined, type = undefined)
+### getMarkers(type = undefined, square = undefined)
+
+> signature changed with V5.1 from (square, type) to (type, square)
 
 Returns the board's markers as an array.
 
-Set square to `undefined`, to get all markers of a type on the board. Set type to `undefined`, to get all types.
-Set `both` to undefined to get all markers on the board.
+Only set type, to get all markers of a type on the board. Set type to `undefined`, to get markers of all types on a square.
+Set `both` to `undefined` to get all markers on the board.
+
+### removeMarkers(type = undefined, square = undefined)
 
-### removeMarkers(square = undefined, type = undefined)
+> signature changed with V5.1 from (square, type) to (type, square)
 
 Removes markers from the board.
 
-Set `square` to `undefined` to remove markers of `type` from all squares. Set `type` to `undefined`, to remove all types
-from a square. Set both to `undefined` to remove all markers from the board.
+Only set `type` to remove all markers of `type` from the board. Set `type` to `undefined`, to remove all types
+of markers from a square. Call without parameters to remove all markers from the board.
 
 ### setOrientation(color)
 
@@ -277,7 +283,7 @@ Example: The markerCircle is defined in the SVG like this.
 It's a circle with the radius 18 and its center at 20/20.
 
 Important is the id "markerCircle". You can set the marker
-with `board.addMarker("e4", {class: "markerSquare", slice: "markerSquare"})`
+with `board.addMarker({class: "markerSquare", slice: "markerSquare"}, "e4")`
 "emphasize" is the css class, which defines the color and opacity of the marker. "slice" is the id of the marker in the
 SVG. This is
 also demonstrated in the [mark squares example](https://shaack.com/projekte/cm-chessboard/examples/input-callbacks.html)
@@ -304,18 +310,18 @@ marker.markerCircleRed {
 So you can simply add a marker with the id `myMarkerIdInSvg` to the SVG, and add the class `myMarkerCssClass` to the
 css. Then you can show it on the field "e4" with
 
-`addMarker("e4", {class: "myMarkerCssClass", slice: "myMarkerIdInSvg"})`
+`addMarker({class: "myMarkerCssClass", slice: "myMarkerIdInSvg"}, "e4")`
 
 To allow easy removing of the marker, you have to define the marker type in your code.
 
 ```js
 const myMarkerType = {class: "myMarkerCssClass", slice: "myMarkerIdInSvg"}
 // add
-chessboard.addMarker("e4", myMarkerType)
+chessboard.addMarker(myMarkerType, "e4")
 // remove
-chessboard.removeMarkers("e4", myMarkerType)
+chessboard.removeMarkers(myMarkerType, "e4")
 // remove all "myMarkerType"
-chessboard.removeMarkers(undefined, myMarkerType)
+chessboard.removeMarkers(myMarkerType, undefined)
 ```
 
 ## Extensions
@@ -367,7 +373,7 @@ const chessboard = new Chessboard(document.getElementById("board"), {
 ### registerMethod(name, callback)
 
 Add methods to the main chessboard from your extension with `this.registerMethod("name", callback)`
-like `addArrow(from, to, type)` in the
+like `addArrow(ftype, rom, to)` in the
 [Arrows extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html).
 
 ```js

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

@@ -31,10 +31,10 @@ const chessboard = new Chessboard(document.getElementById("board"), {
 
         }]
 })
-chessboard.addArrow("f3", "d5", ARROW_TYPE.default);
-chessboard.addArrow("b8", "c6", ARROW_TYPE.default);
-chessboard.addArrow("d2", "d3", ARROW_TYPE.pointy);
-chessboard.addArrow("g5", "e6", ARROW_TYPE.danger);
+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");
 </pre>
 
 <script type="module">
@@ -55,10 +55,10 @@ chessboard.addArrow("g5", "e6", ARROW_TYPE.danger);
 
             }]
     })
-    chessboard.addArrow("f3", "d5", ARROW_TYPE.default);
-    chessboard.addArrow("b8", "c6", ARROW_TYPE.default);
-    chessboard.addArrow("d2", "d3", ARROW_TYPE.pointy);
-    chessboard.addArrow("g5", "e6", ARROW_TYPE.danger);
+    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");
 </script>
 </body>
 </html>

package/examples/input-callbacks.html

@@ -22,11 +22,11 @@
         } else {
             markerType = MARKER_TYPE.circle
         }
-        const markersOnSquare = board1.getMarkers(event.square, markerType)
+        const markersOnSquare = board1.getMarkers(markerType, event.square)
         if (markersOnSquare.length > 0) {
-            board1.removeMarkers(event.square, markerType)
+            board1.removeMarkers(markerType, event.square)
         } else {
-            board1.addMarker(event.square, markerType)
+            board1.addMarker(markerType, event.square)
         }
     })
 </pre>
@@ -45,11 +45,11 @@
         } else {
             markerType = MARKER_TYPE.circle
         }
-        const markersOnSquare = board1.getMarkers(event.square, markerType)
+        const markersOnSquare = board1.getMarkers(markerType, event.square)
         if (markersOnSquare.length > 0) {
-            board1.removeMarkers(event.square, markerType)
+            board1.removeMarkers(markerType, event.square)
         } else {
-            board1.addMarker(event.square, markerType)
+            board1.addMarker(markerType, event.square)
         }
     })
 
@@ -65,11 +65,11 @@
     const marker = {class: "markerCircleRed", slice: "markerCircle"}
     board2.enableSquareSelect((event) => {
         if(event.type === SQUARE_SELECT_TYPE.secondary) {
-            const markersOnSquare = board2.getMarkers(event.square, marker)
+            const markersOnSquare = board2.getMarkers(marker, event.square)
             if (markersOnSquare.length > 0) {
-                board2.removeMarkers(event.square, marker)
+                board2.removeMarkers(marker, event.square)
             } else {
-                board2.addMarker(event.square, marker)
+                board2.addMarker(marker, event.square)
             }
         }
     })

package/examples/validate-moves.html

@@ -33,13 +33,13 @@ const chess = new Chess()
 
 function inputHandler(event) {
     console.log("event", event)
-    event.chessboard.removeMarkers(undefined, MARKER_TYPE.dot)
-    event.chessboard.removeMarkers(undefined, MARKER_TYPE.square)
+    event.chessboard.removeMarkers(MARKER_TYPE.dot)
+    event.chessboard.removeMarkers(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)
+        event.chessboard.addMarker(MARKER_TYPE.square, event.square)
         for (const move of moves) { // draw dots on possible moves
-            event.chessboard.addMarker(move.to, MARKER_TYPE.dot)
+            event.chessboard.addMarker(MARKER_TYPE.dot, move.to)
         }
         return moves.length > 0
     } else if (event.type === INPUT_EVENT_TYPE.moveDone) {
@@ -81,11 +81,11 @@ board.enableMoveInput(inputHandler, COLOR.white)
 
     function inputHandler(event) {
         console.log("event", event)
-        event.chessboard.removeMarkers(undefined, MARKER_TYPE.dot)
+        event.chessboard.removeMarkers(MARKER_TYPE.dot)
         if (event.type === INPUT_EVENT_TYPE.moveStart) {
             const moves = chess.moves({square: event.square, verbose: true});
             for (const move of moves) { // draw dots on possible squares
-                event.chessboard.addMarker(move.to, MARKER_TYPE.dot)
+                event.chessboard.addMarker(MARKER_TYPE.dot, move.to)
             }
             return moves.length > 0
         } else if (event.type === INPUT_EVENT_TYPE.moveDone) {

package/package.json

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

package/src/cm-chessboard/Chessboard.js

@@ -67,7 +67,7 @@ export class Chessboard {
                 size: 40, // the sprite tiles size, defaults to 40x40px
                 cache: true // cache the sprite
             },
-            extensions: [ /* {class: ExtensionClass, props: { ... }} */ ] // add extensions here
+            extensions: [ /* {class: ExtensionClass, props: { ... }} */] // add extensions here
         }
         this.props = {}
         Object.assign(this.props, defaultProps)
@@ -149,15 +149,20 @@ export class Chessboard {
         return this.state.orientation
     }
 
-    addMarker(square, type) {
-        if (!type) {
-            console.error("Error addMarker(), type is " + type)
+    addMarker(type, square) {
+        if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
+            console.error("changed the signature of `addMarker` to `(type, square)` with v5.1.x")
+            return
         }
         this.state.addMarker(square, type)
         this.view.drawMarkers()
     }
 
-    getMarkers(square = undefined, type = undefined) {
+    getMarkers(type = undefined, square = undefined) {
+        if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
+            console.error("changed the signature of `getMarkers` to `(type, square)` with v5.1.x")
+            return
+        }
         const markersFound = []
         this.state.markers.forEach((marker) => {
             const markerSquare = marker.square
@@ -170,7 +175,11 @@ export class Chessboard {
         return markersFound
     }
 
-    removeMarkers(square = undefined, type = undefined) {
+    removeMarkers(type = undefined, square = undefined) {
+        if (typeof type === "string" || typeof square === "object") { // todo remove 2022-12-01
+            console.error("changed the signature of `removeMarkers` to `(type, square)` with v5.1.x")
+            return
+        }
         this.state.removeMarkers(square, type)
         this.view.drawMarkers()
     }

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

@@ -97,12 +97,20 @@ export class Arrows extends Extension {
 
     }
 
-    addArrow(from, to, type) {
+    addArrow(type, from, to) {
+        if (typeof type === "string" || typeof from === "object" || typeof to === "object") { // todo remove 2022-12-01
+            console.error("changed the signature of `addArrow` to `(type, from, to)` with v5.1.x")
+            return
+        }
         this.arrows.push(new Arrow(from, to, type))
         this.chessboard.view.redrawBoard()
     }
 
-    getArrows(from = undefined, to = undefined, type = undefined) {
+    getArrows(type = undefined, from = undefined, to = undefined) {
+        if (typeof type === "string" || typeof from === "object" || typeof to === "object") { // todo remove 2022-12-01
+            console.error("changed the signature of `getArrows` to `(type, from, to)` with v5.1.x")
+            return
+        }
         let arrows = []
         this.arrows.forEach((arrow) => {
             if (arrow.matches(from, to, type)) {
@@ -112,7 +120,11 @@ export class Arrows extends Extension {
         return arrows
     }
 
-    removeArrows(from = undefined, to = undefined, type = undefined) {
+    removeArrows(type = undefined, from = undefined, to = undefined) {
+        if (typeof type === "string" || typeof from === "object" || typeof to === "object") { // todo remove 2022-12-01
+            console.error("changed the signature of `removeArrows` to `(type, from, to)` with v5.1.x")
+            return
+        }
         this.arrows = this.arrows.filter((arrow) => !arrow.matches(from, to, type))
         this.chessboard.view.redrawBoard()
     }
@@ -132,6 +144,6 @@ class Arrow {
         if (to && to !== this.to) {
             return false
         }
-        return !(type && type !== this.type);
+        return !(type && type !== this.type)
     }
 }

package/test/TestMarkers.js

@@ -14,27 +14,27 @@ describe("TestMarkers", () => {
             sprite: {url: "../assets/images/chessboard-sprite.svg"},
             position: "empty"
         })
-        chessboard.addMarker("e5", MARKER_TYPE.square)
-        chessboard.addMarker("b6", MARKER_TYPE.frame)
-        chessboard.addMarker("h6", MARKER_TYPE.frame)
-        assert.equal(chessboard.getMarkers().length,3)
-        const markersE5 = chessboard.getMarkers("e5")
+        chessboard.addMarker(MARKER_TYPE.square, "e5")
+        chessboard.addMarker(MARKER_TYPE.frame, "b6")
+        chessboard.addMarker(MARKER_TYPE.frame, "h6")
+        assert.equal(chessboard.getMarkers().length, 3)
+        const markersE5 = chessboard.getMarkers(undefined,"e5")
         assert.equal(markersE5.length, 1)
         assert.equal(markersE5[0].square, "e5")
         assert.equal(markersE5[0].type.slice, "markerSquare")
-        assert.equal(chessboard.getMarkers(undefined, MARKER_TYPE.square).length, 1)
-        assert.equal(chessboard.getMarkers("a4").length, 0)
-        assert.equal(chessboard.getMarkers(undefined, MARKER_TYPE.frame).length, 2)
-        assert.equal(chessboard.getMarkers("b6", MARKER_TYPE.frame).length, 1)
-        assert.equal(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 1)
-        chessboard.removeMarkers("h6")
-        assert.equal(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 0)
-        chessboard.addMarker("h6", MARKER_TYPE.frame)
-        assert.equal(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 1)
-        chessboard.removeMarkers("h6", MARKER_TYPE.square)
-        assert.equal(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 1)
-        chessboard.removeMarkers("h6", MARKER_TYPE.frame)
-        assert.equal(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 0)
+        assert.equal(chessboard.getMarkers(MARKER_TYPE.square).length, 1)
+        assert.equal(chessboard.getMarkers(undefined, "a4").length, 0)
+        assert.equal(chessboard.getMarkers(MARKER_TYPE.frame).length, 2)
+        assert.equal(chessboard.getMarkers(MARKER_TYPE.frame, "b6").length, 1)
+        assert.equal(chessboard.getMarkers(MARKER_TYPE.frame, "h6").length, 1)
+        chessboard.removeMarkers(undefined, "h6")
+        assert.equal(chessboard.getMarkers(MARKER_TYPE.frame, "h6").length, 0)
+        chessboard.addMarker(MARKER_TYPE.frame, "h6")
+        assert.equal(chessboard.getMarkers(MARKER_TYPE.frame, "h6").length, 1)
+        chessboard.removeMarkers(MARKER_TYPE.square, "h6")
+        assert.equal(chessboard.getMarkers(MARKER_TYPE.frame, "h6").length, 1)
+        chessboard.removeMarkers(MARKER_TYPE.frame, "h6")
+        assert.equal(chessboard.getMarkers(MARKER_TYPE.frame, "h6").length, 0)
         chessboard.destroy()
     })