cm-chessboard 5.0.1 → 5.1.1

package/README.md

@@ -10,15 +10,17 @@ aspects of chess games.
 
 ## Features
 
-- [Mobile friendly and responsive](https://shaack.com/projekte/cm-chessboard/examples/responsive-board.html)
+- **No dependencies**, just clean ES6
 - [Can handle moves input via click or drag](https://shaack.com/projekte/cm-chessboard/examples/validate-moves.html)
-- [Styleable via css](https://shaack.com/projekte/cm-chessboard/examples/different-styles.html)
-- [Supports multiple piece sets](https://shaack.com/projekte/cm-chessboard/examples/different-styles.html)
-- [Supports an optimized usage for visually impaired people](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-accessibility-extension.html)
-  🆕
+- [Styleable via css and supports multiple piece sets](https://shaack.com/projekte/cm-chessboard/examples/different-styles.html)
 - Uses SVG for rendering
-- Vanilla JavaScript modules in ECMAScript 6 syntax
-- **No dependencies**
+- [Allows adding **
+  extensions** to extend the functionality](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
+
+## 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)
 
 ## Demo and repository
 
@@ -43,18 +45,6 @@ with `{sprite.url: "./url/of/chessboard-sprite.svg"}`
 To run the unit tests in `/test` you first have to `npm install` the dev dependencies. Without tests there are no
 dependencies.
 
-## Version 4.x has many changes
-
-> With the new version 4 of cm-chessboard I completely redesigned the animation of positions with
-> the use of promises.
-
-The pieces animations are now smoother and less error-prone for race conditions.
-
-As of version 4.x, the API functions `setPosition()`, `setPiece()` and `movePiece()` are **not animated** as default.
-If you want some pieces animations you have to give the parameter `animated = true`.
-
-And with 4.x the chessboard has become more accessible for visually impaired people.
-
 ## Usage
 
 Preconditions for using cm-chessboard in a web page:
@@ -142,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.
 
@@ -159,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(square = undefined, type = undefined)
+### removeMarkers(type = undefined, square = 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)
 
@@ -287,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)
@@ -314,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
@@ -333,6 +329,8 @@ chessboard.removeMarkers(undefined, myMarkerType)
 cm-chessboard provides the ability to extend its functionality with extensions. Extensions extend the class `Extension`
 and have access to the chessboard and can register extension points.
 
+### registerExtensionPoint(name, callback)
+
 ```js
 class MyCoolChessboardExtension extends Extension {
     constructor(chessboard, props) {
@@ -349,11 +347,11 @@ Currently possible extension points are defined in `Extension.js`.
 
 ```js
 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, cancelled or done
-  destroy: "destroy" // called, before the board is destroyed
+    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, cancelled or done
+    destroy: "destroy" // called, before the board is destroyed
 }
 ```
 
@@ -372,15 +370,30 @@ const chessboard = new Chessboard(document.getElementById("board"), {
 })
 ```
 
-### `Accessibility` extension
+### registerMethod(name, callback)
+
+Add methods to the main chessboard from your extension with `this.registerMethod("name", callback)`
+like `addArrow(from, to, type)` in the
+[Arrows extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html).
+
+```js
+this.registerMethod("addArrow", this.addArrow)
+```
+
+### Existing extensions
+
+cm-chessboard is shipped with these extensions.
+
+#### Accessibility Extension
 
 This extension ensures that visual impaired people can better use the chessboard. It displays the braille notation
 of the current position in the alt tag of the board image and enables a form to move the pieces via text input. It
 can also display the board as HTML table and the pieces as list.
 
-See example [Accessibility extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-accessibility-extension.html)
+See
+example [Accessibility extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-accessibility-extension.html)
 
-#### Usage
+##### Usage
 
 ```js
 const chessboard = new Chessboard(document.getElementById("board"), {
@@ -405,11 +418,12 @@ const chessboard = new Chessboard(document.getElementById("board"), {
 })
 ```
 
-### `Arrows` extension
+#### Arrows extension
 
 To draw arrows on the board.
 
-See example [Arrows extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
+See
+example [Arrows extension](https://shaack.com/projekte/cm-chessboard/examples/extensions/chessboard-arrows-extension.html)
 
 ## Usage with React
 

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.1",
+  "version": "5.1.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

@@ -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()
     })