cm-chessboard 4.5.0 → 4.5.3

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

@@ -12,6 +12,31 @@
 <h1><a href="../..">cm-chessboard</a></h1>
 <h2>Example: Arrows extension</h2>
 <div class="board" id="board"></div>
+<br style="clear: both"/>
+<pre>
+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"},
+    extensions:
+        [{
+            class: Arrows,
+            props: {
+                sprite: {
+                    url: "../../src/cm-chessboard/extensions/arrows/assets/arrows.svg"
+                }
+            }
+
+        }]
+})
+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);
+</pre>
+
 <script type="module">
     import {ARROW_TYPE, Arrows} from "../../src/cm-chessboard/extensions/arrows/Arrows.js"
     import {Chessboard} from "../../src/cm-chessboard/Chessboard.js"
@@ -19,18 +44,12 @@
     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
+                        url: "../../src/cm-chessboard/extensions/arrows/assets/arrows.svg"
                     }
                 }
 
@@ -38,7 +57,8 @@
     })
     chessboard.addArrow("f3", "d5", ARROW_TYPE.default);
     chessboard.addArrow("b8", "c6", ARROW_TYPE.default);
-    chessboard.addArrow("d2", "d3", ARROW_TYPE.default);
+    chessboard.addArrow("d2", "d3", ARROW_TYPE.pointy);
+    chessboard.addArrow("g5", "e6", ARROW_TYPE.danger);
 </script>
 </body>
 </html>

package/package.json

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

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

@@ -9,6 +9,7 @@ import {Svg} from "../../view/ChessboardView.js"
 
 export const ARROW_TYPE = {
     default: {class: "arrow-default", slice: "arrowDefault", headSize: 7},
+    danger: {class: "arrow-danger", slice: "arrowDefault", headSize: 7},
     pointy: {class: "arrow-pointy", slice: "arrowPointy", headSize: 7},
 }
 
@@ -28,6 +29,10 @@ export class Arrows extends Extension {
         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)
         }

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

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

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

@@ -5,5 +5,5 @@
 		"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"
+	"mappings": "AAAA,AAEI,cAFU,CACZ,cAAc,CACZ,WAAW,CAAC;EACV,IAAI,EAAE,IAAI;EACV,SAAS,EAAE,OAAO;EAClB,YAAY,EAAE,CAAC,GAChB;;AANL,AAOI,cAPU,CACZ,cAAc,CAMZ,WAAW,CAAC;EACV,MAAM,EAAE,IAAI;EACZ,cAAc,EAAE,KAAK;EACrB,OAAO,EAAE,GAAG,GACb;;AAXL,AAcI,cAdU,CAaZ,aAAa,CACX,WAAW,CAAC;EACV,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,OAAO;EAClB,YAAY,EAAE,CAAC,GAChB;;AAlBL,AAmBI,cAnBU,CAaZ,aAAa,CAMX,WAAW,CAAC;EACV,MAAM,EAAE,GAAG;EACX,cAAc,EAAE,KAAK;EACrB,OAAO,EAAE,GAAG,GACb;;AAvBL,AA0BI,cA1BU,CAyBZ,aAAa,CACX,WAAW,CAAC;EACV,IAAI,EAAE,KAAK;EACX,SAAS,EAAE,OAAO;EAClB,YAAY,EAAE,CAAC,GAChB;;AA9BL,AA+BI,cA/BU,CAyBZ,aAAa,CAMX,WAAW,CAAC;EACV,MAAM,EAAE,KAAK;EACb,cAAc,EAAE,KAAK;EACrB,OAAO,EAAE,GAAG,GACb"
 }

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

@@ -1,15 +1,38 @@
 .cm-chessboard {
-  .arrows {
+  .arrow-default {
     .arrow-head {
       fill: blue;
       fill-rule: nonzero;
       fill-opacity: 1;
     }
-
     .arrow-line {
       stroke: blue;
       stroke-linecap: round;
       opacity: 0.5;
     }
   }
+  .arrow-danger {
+    .arrow-head {
+      fill: red;
+      fill-rule: nonzero;
+      fill-opacity: 1;
+    }
+    .arrow-line {
+      stroke: red;
+      stroke-linecap: round;
+      opacity: 0.5;
+    }
+  }
+  .arrow-pointy {
+    .arrow-head {
+      fill: black;
+      fill-rule: nonzero;
+      fill-opacity: 1;
+    }
+    .arrow-line {
+      stroke: black;
+      stroke-linecap: round;
+      opacity: 0.5;
+    }
+  }
 }

package/test/TestBoard.js

@@ -23,9 +23,9 @@ describe("TestBoard", () => {
             sprite: {url: "../assets/images/chessboard-sprite.svg"},
             position: "start"
         })
-        assert.equals(chessboard.view.context.childNodes.length, 1)
+        assert.equal(chessboard.view.context.childNodes.length, 1)
         chessboard.destroy()
-        assert.equals(chessboard.state, undefined)
+        assert.equal(chessboard.state, undefined)
     })
 
 })

package/test/TestChessboard.js

@@ -14,7 +14,7 @@ describe("TestChessboard", () => {
             sprite: {url: "../assets/images/chessboard-sprite.svg"},
             position: "start"
         })
-        assert.equals(chessboard.getPosition(), "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
+        assert.equal(chessboard.getPosition(), "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
         chessboard.destroy()
     })
 
@@ -22,7 +22,7 @@ describe("TestChessboard", () => {
         const chessboard = new Chessboard(document.getElementById("TestPosition"),
             {sprite: {url: "../assets/images/chessboard-sprite.svg"},})
         chessboard.setPosition("rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11", false).then(() => {
-            assert.equals(chessboard.getPosition(), "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR")
+            assert.equal(chessboard.getPosition(), "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR")
             chessboard.destroy()
         })
     })
@@ -32,9 +32,9 @@ describe("TestChessboard", () => {
             sprite: {url: "../assets/images/chessboard-sprite.svg"},
             position: "start"
         })
-        assert.equals(chessboard.getPiece("d1"), "wq")
-        assert.equals(chessboard.getPiece("d8"), "bq")
-        assert.equals(chessboard.getPiece("a2"), "wp")
+        assert.equal(chessboard.getPiece("d1"), "wq")
+        assert.equal(chessboard.getPiece("d8"), "bq")
+        assert.equal(chessboard.getPiece("a2"), "wp")
         chessboard.destroy()
     })
 
@@ -44,9 +44,9 @@ describe("TestChessboard", () => {
             sprite: {url: "../assets/images/chessboard-sprite.svg"},
         })
         chessboard.setPiece("a1", PIECE.bk)
-        assert.equals(chessboard.getPiece("a1"), "bk")
+        assert.equal(chessboard.getPiece("a1"), "bk")
         chessboard.setPiece("e5", PIECE.wk)
-        assert.equals(chessboard.getPiece("e5"), "wk")
+        assert.equal(chessboard.getPiece("e5"), "wk")
         chessboard.destroy()
     })
 

package/test/TestMarkers.js

@@ -17,24 +17,24 @@ describe("TestMarkers", () => {
         chessboard.addMarker("e5", MARKER_TYPE.square)
         chessboard.addMarker("b6", MARKER_TYPE.frame)
         chessboard.addMarker("h6", MARKER_TYPE.frame)
-        assert.equals(chessboard.getMarkers().length,3)
+        assert.equal(chessboard.getMarkers().length,3)
         const markersE5 = chessboard.getMarkers("e5")
-        assert.equals(markersE5.length, 1)
-        assert.equals(markersE5[0].square, "e5")
-        assert.equals(markersE5[0].type.slice, "markerSquare")
-        assert.equals(chessboard.getMarkers(undefined, MARKER_TYPE.square).length, 1)
-        assert.equals(chessboard.getMarkers("a4").length, 0)
-        assert.equals(chessboard.getMarkers(undefined, MARKER_TYPE.frame).length, 2)
-        assert.equals(chessboard.getMarkers("b6", MARKER_TYPE.frame).length, 1)
-        assert.equals(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 1)
+        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.equals(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 0)
+        assert.equal(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 0)
         chessboard.addMarker("h6", MARKER_TYPE.frame)
-        assert.equals(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 1)
+        assert.equal(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 1)
         chessboard.removeMarkers("h6", MARKER_TYPE.square)
-        assert.equals(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 1)
+        assert.equal(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 1)
         chessboard.removeMarkers("h6", MARKER_TYPE.frame)
-        assert.equals(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 0)
+        assert.equal(chessboard.getMarkers("h6", MARKER_TYPE.frame).length, 0)
         chessboard.destroy()
     })
 

package/test/TestPiecesAnimation.js

@@ -10,14 +10,14 @@ import {PositionsAnimation} from "../src/cm-chessboard/view/PositionAnimationsQu
 
 describe("TestPiecesAnimation", () => {
     it("should calculate square distances", () => {
-        assert.equals(PositionsAnimation.squareDistance(0, 0), 0)
-        assert.equals(PositionsAnimation.squareDistance(0, 1), 1)
-        assert.equals(PositionsAnimation.squareDistance(0, 7), 7)
-        assert.equals(PositionsAnimation.squareDistance(0, 8), 1)
-        assert.equals(PositionsAnimation.squareDistance(10, 20), 2)
-        assert.equals(PositionsAnimation.squareDistance(0, 63), 7)
-        assert.equals(PositionsAnimation.squareDistance(8, 24), 2)
-        assert.equals(PositionsAnimation.squareDistance(14, 24), 6)
+        assert.equal(PositionsAnimation.squareDistance(0, 0), 0)
+        assert.equal(PositionsAnimation.squareDistance(0, 1), 1)
+        assert.equal(PositionsAnimation.squareDistance(0, 7), 7)
+        assert.equal(PositionsAnimation.squareDistance(0, 8), 1)
+        assert.equal(PositionsAnimation.squareDistance(10, 20), 2)
+        assert.equal(PositionsAnimation.squareDistance(0, 63), 7)
+        assert.equal(PositionsAnimation.squareDistance(8, 24), 2)
+        assert.equal(PositionsAnimation.squareDistance(14, 24), 6)
     })
 
     it("should seek changes", () => {
@@ -29,24 +29,24 @@ describe("TestPiecesAnimation", () => {
         const newBoard1 = state2.position.squares
         const changes = PositionsAnimation.seekChanges(previousBoard1, newBoard1)
 
-        assert.equals(changes[0].type,0 )
-        assert.equals(changes[0].piece, "wn")
-        assert.equals(changes[0].atIndex, 1)
-        assert.equals(changes[0].toIndex,3)
+        assert.equal(changes[0].type,0 )
+        assert.equal(changes[0].piece, "wn")
+        assert.equal(changes[0].atIndex, 1)
+        assert.equal(changes[0].toIndex,3)
 
-        assert.equals(changes[2].type, 0)
-        assert.equals(changes[2].piece, "wn")
-        assert.equals(changes[2].atIndex, 6)
-        assert.equals(changes[2].toIndex, 18)
+        assert.equal(changes[2].type, 0)
+        assert.equal(changes[2].piece, "wn")
+        assert.equal(changes[2].atIndex, 6)
+        assert.equal(changes[2].toIndex, 18)
 
-        assert.equals(changes[4].type,0 )
-        assert.equals(changes[4].piece, "wp")
-        assert.equals(changes[4].atIndex, 8)
-        assert.equals(changes[4].toIndex, 24)
+        assert.equal(changes[4].type,0 )
+        assert.equal(changes[4].piece, "wp")
+        assert.equal(changes[4].atIndex, 8)
+        assert.equal(changes[4].toIndex, 24)
 
-        assert.equals(changes[13].type, 2)
-        assert.equals(changes[13].piece, "bq")
-        assert.equals(changes[13].atIndex, 59)
+        assert.equal(changes[13].type, 2)
+        assert.equal(changes[13].piece, "bq")
+        assert.equal(changes[13].atIndex, 59)
     })
 
 })

package/test/TestPosition.js

@@ -9,17 +9,17 @@ import {Position} from "../src/cm-chessboard/model/Position.js"
 
 describe("TestPosition", () => {
     it("should convert square to index", () => {
-        assert.equals(Position.squareToIndex("a1"), 0)
-        assert.equals(Position.squareToIndex("h1"), 7)
-        assert.equals(Position.squareToIndex("a8"), 56)
-        assert.equals(Position.squareToIndex("g5"), 38)
-        assert.equals(Position.squareToIndex("h8"), 63)
+        assert.equal(Position.squareToIndex("a1"), 0)
+        assert.equal(Position.squareToIndex("h1"), 7)
+        assert.equal(Position.squareToIndex("a8"), 56)
+        assert.equal(Position.squareToIndex("g5"), 38)
+        assert.equal(Position.squareToIndex("h8"), 63)
     })
     it("should convert index to square", () => {
-        assert.equals(Position.indexToSquare(0), "a1")
-        assert.equals(Position.indexToSquare(7), "h1")
-        assert.equals(Position.indexToSquare(56), "a8")
-        assert.equals(Position.indexToSquare(38), "g5")
-        assert.equals(Position.indexToSquare(63), "h8")
+        assert.equal(Position.indexToSquare(0), "a1")
+        assert.equal(Position.indexToSquare(7), "h1")
+        assert.equal(Position.indexToSquare(56), "a8")
+        assert.equal(Position.indexToSquare(38), "g5")
+        assert.equal(Position.indexToSquare(63), "h8")
     })
 })