npm - cm-chessboard - Versions diffs - 6.0.4 → 7.0.2 - Mend

cm-chessboard 6.0.4 → 7.0.2

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

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

@@ -5,7 +5,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="../../assets/chessboard/chessboard.css"/>
+    <link rel="stylesheet" href="../../assets/extensions/markers/markers.css"/>
 </head>
 <body>
 <h1><a href="../..">cm-chessboard</a></h1>
@@ -31,10 +32,11 @@
 <script type="module">
     import {Chessboard} from "../../src/cm-chessboard/Chessboard.js"
     import {Accessibility} from "../../src/cm-chessboard/extensions/accessibility/Accessibility.js"
+    import {Markers} from "../../src/cm-chessboard/extensions/markers/Markers.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"},
+        assetsUrl: "../../assets/",
         // animationDuration: 0, // optional, set to 0 to disable animations
         style: {
             cssClass: "default-contrast" // make the coordinates better visible with the "default-contrast" theme
@@ -50,9 +52,9 @@
                     visuallyHidden: false // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
                 }
-            }]
+            }, {class: Markers}]
     })
-    window.setOrientation = function () {
+    window.switchOrientation = function () {
         chessboard.setOrientation(chessboard.getOrientation() === 'w' ? 'b' : 'w')
     }

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

@@ -5,8 +5,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"/>
+    <link rel="stylesheet" href="../../assets/chessboard/chessboard.css"/>
+    <link rel="stylesheet" href="../../assets/extensions/arrows/arrows.css"/>
 </head>
 <body>
 <h1><a href="../..">cm-chessboard</a></h1>
@@ -15,22 +15,10 @@
 <br style="clear: both"/>
 <h2>Example code</h2>
 <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"
-                }
-            }
-        }]
+    assetsUrl: "../../assets/",
+    extensions: [{class: Arrows}]
 })
 chessboard.addArrow(ARROW_TYPE.default, "f3", "d5")
 chessboard.addArrow(ARROW_TYPE.default, "b8", "c6")
@@ -42,13 +30,16 @@ console.log(chessboard.getArrows())
 <h3><code>addArrow(type, from, to)</code></h3>
 <h3><code>removeArrows(type, from, to)</code></h3>
 <p>
-    To remove all arrows, call <code>chessboard.removeArrows()</code> without parameters. To remove all arrows of a specific
-    type (type "danger"), call <code>chessboard.removeArrows(ARROW_TYPE.danger)</code>. To remove all arrows starting at "e2"
+    To remove all arrows, call <code>chessboard.removeArrows()</code> without parameters. To remove all arrows of a
+    specific
+    type (type "danger"), call <code>chessboard.removeArrows(ARROW_TYPE.danger)</code>. To remove all arrows starting at
+    "e2"
     you can call <code>chessboard.removeArrows(undefined, "e2")</code> and so on...
 </p>
 <h3><code>getArrows(type, from, to)</code></h3>
 <p>
-    To get all arrows, call <code>chessboard.getArrows()</code> without parameters, as with <code>removeArrows(type, from, to)</code>.
+    To get all arrows, call <code>chessboard.getArrows()</code> without parameters, as with <code>removeArrows(type,
+    from, to)</code>.
 </p>
 <script type="module">
@@ -57,17 +48,8 @@ console.log(chessboard.getArrows())
     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"
-                    }
-                }
-            }]
+        assetsUrl: "../../assets/",
+        extensions: [{class: Arrows}]
     })
     chessboard.addArrow(ARROW_TYPE.default, "f3", "d5")
     chessboard.addArrow(ARROW_TYPE.default, "b8", "c6")

package/examples/{input-callbacks.html → extensions/markers-extension.html} RENAMED Viewed

@@ -4,22 +4,24 @@
     <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/chessboard/chessboard.css"/>
+    <link rel="stylesheet" href="../../assets/extensions/markers/markers.css"/>
 </head>
 <body>
-<h1><a href="../">cm-chessboard</a></h1>
-<h2>Example: Custom markers, left and right click, mark squares and log to console.</h2>
+<h1><a href="../../">cm-chessboard</a></h1>
+<h2>Example: Markers Extension with pointer input</h2>
+<p>The second board shows the usage of autoMarkers, when moving a piece.</p>
 <div class="board" id="board1"></div>
 <div class="board" id="board2"></div>
 <script type="module">
-    import {Chessboard, INPUT_EVENT_TYPE, SQUARE_SELECT_TYPE} from "../src/cm-chessboard/Chessboard.js"
-    import {FEN} from "../src/cm-chessboard/model/Position.js"
-    import {MARKER_TYPE, Markers} from "../src/cm-chessboard/extensions/markers/Markers.js"
+    import {Chessboard, SQUARE_SELECT_TYPE} from "../../src/cm-chessboard/Chessboard.js"
+    import {FEN} from "../../src/cm-chessboard/model/Position.js"
+    import {MARKER_TYPE, Markers} from "../../src/cm-chessboard/extensions/markers/Markers.js"
     const board1 = new Chessboard(document.getElementById("board1"), {
         position: FEN.start,
-        sprite: {url: "../assets/images/chessboard-sprite.svg", cache: false},
+        assetsUrl: "../../assets/",
         extensions: [{class: Markers}]
     })
     board1.enableSquareSelect((event) => {
@@ -45,23 +47,17 @@
     const board2 = new Chessboard(document.getElementById("board2"), {
         position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR",
-        sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
-        extensions: [{class: Markers}]
+        assetsCache: false,
+        assetsUrl: "../../assets/",
+        style: {pieces: {file: "staunty.svg"}},
+        extensions: [{class: Markers, autoMarkers: MARKER_TYPE.frame}]
     })
-    board2.enableMoveInput((event) => {
-        console.log("MoveInput board2", event)
-        board2.removeMarkers(MARKER_TYPE.frame)
-        if(event.type === INPUT_EVENT_TYPE.moveInputStarted) {
-            board2.addMarker(MARKER_TYPE.frame, event.square)
-        } else if(event.type === INPUT_EVENT_TYPE.validateMoveInput) {
-            board2.addMarker(MARKER_TYPE.frame, event.squareFrom)
-            board2.addMarker(MARKER_TYPE.frame, event.squareTo)
-        }
+    board2.enableMoveInput(() => {
         return true
     })
-    const marker = {class: "markerCircleRed", slice: "markerCircle"}
+    const marker = {class: "marker-circle-red", slice: "markerCircle"}
     board2.enableSquareSelect((event) => {
-        if(event.type === SQUARE_SELECT_TYPE.secondary && event.mouseEvent.type === "mousedown") {
+        if (event.type === SQUARE_SELECT_TYPE.secondary && event.mouseEvent.type === "mousedown") {
             const markersOnSquare = board2.getMarkers(marker, event.square)
             if (markersOnSquare.length > 0) {
                 board2.removeMarkers(marker, event.square)

package/examples/extensions/{chessboard-promotion-dialog-extension.html → promotion-dialog-extension.html} RENAMED Viewed

@@ -6,8 +6,9 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="../styles/examples.css"/>
-    <link rel="stylesheet" href="../../assets/styles/cm-chessboard.css">
-    <link rel="stylesheet" href="../../src/cm-chessboard/extensions/promotion-dialog/assets/promotion-dialog.css"/>
+    <link rel="stylesheet" href="../../assets/chessboard/chessboard.css">
+    <link rel="stylesheet" href="../../assets/extensions/promotion-dialog/promotion-dialog.css"/>
+    <link rel="stylesheet" href="../../assets/extensions/markers/markers.css"/>
     <title>cm-chessboard promotion extension</title>
 </head>
 <body>
@@ -21,15 +22,15 @@
 <script type="module">
     import {Chessboard, COLOR, INPUT_EVENT_TYPE} from "../../src/cm-chessboard/Chessboard.js"
     import {PromotionDialog} from "../../src/cm-chessboard/extensions/promotion-dialog/PromotionDialog.js"
+    import {Markers} from "../../src/cm-chessboard/extensions/markers/Markers.js"
     const position = "4k3/1P6/8/8/6r1/8/8/2R1K3 w - - 0 1"
     const chessboard = new Chessboard(document.getElementById("chessboard"), {
         position: position,
-        sprite: {
-            url: "../../assets/images/chessboard-sprite.svg", // pieces and markers are stored in a sprite file
-        },
+        assetsUrl: "../../assets/",
         extensions: [
-            {class: PromotionDialog, props: {}}
+            {class: PromotionDialog},
+            {class: Markers}
         ]
     })
     chessboard.enableMoveInput((event) => {
@@ -38,7 +39,7 @@
             if (event.squareTo.charAt(1) === "8" && event.piece.charAt(1) === "p") {
                 chessboard.showPromotionDialog(event.squareTo, COLOR.white, (event) => {
                     console.log("48a99d Piece selected", event.piece)
-                    if(event.piece) {
+                    if (event.piece) {
                         chessboard.setPiece(event.square, event.piece, true)
                     } else {
                         chessboard.setPosition(position)

package/examples/extensions/{chessboard-render-video-extension.html → render-video-extension.html} RENAMED Viewed

@@ -5,7 +5,7 @@
     <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="../../assets/chessboard/chessboard.css"/>
 </head>
 <body>
 <h1><a href="../..">cm-chessboard</a></h1>
@@ -24,13 +24,8 @@
     const boardElement = document.getElementById("board")
     const chessboard = new Chessboard(boardElement, {
         position: FEN.start,
-        sprite: {url: "../../assets/images/chessboard-sprite.svg"},
-        extensions:
-            [{
-                class: RenderVideo,
-                props: {}
-            }]
-    })
+        assetsUrl: "../../assets/",
+        extensions: [{class: RenderVideo}]})
     await chessboard.recorderInit()
     await chessboard.recorderStart()
     await chessboard.recorderPause(500)

package/examples/many-boards.html CHANGED Viewed

@@ -5,10 +5,10 @@
     <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="../assets/chessboard/chessboard.css"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
     <!--suppress CssUnusedSymbol -->
-    <style type="text/css">
+    <style>
         div.board {
             float: left;
             width: 155px;
@@ -32,10 +32,10 @@
         boardDiv.setAttribute("class", "board")
         boardsDiv.appendChild(boardDiv)
         new Chessboard(boardDiv, {
-            accessible: true,
             responsive: false,
             position: game.fen(),
-            sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
+            assetsUrl: "../assets/",
+            style: {pieces: {file: "staunty.svg"}},
         })
         makeRandomMove()
     }
@@ -47,4 +47,4 @@
     }
 </script>
 </body>
-</html>
+</html>

package/examples/pieces-animation.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <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="../assets/chessboard/chessboard.css"/>
 </head>
 <body>
 <h1><a href="../">cm-chessboard</a></h1>
@@ -50,8 +50,8 @@ await board.movePiece("d5", "f4")
     const board = new Chessboard(document.getElementById("board"),
         {
             position: FEN.start,
-            sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
-            animationDuration: 500
+            assetsUrl: "../assets/",
+            style: {pieces: {file: "staunty.svg"}, animationDuration: 500}
         })
     let i = 0
     window.setPosition = (position, animated) => {

package/examples/responsive-board.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <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="../assets/chessboard/chessboard.css"/>
 </head>
 <body>
 <h1><a href="../">cm-chessboard</a></h1>
@@ -23,10 +23,8 @@ new Chessboard(document.getElementById("board"), {
     new Chessboard(document.getElementById("board"), {
         position: FEN.start,
-        sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
-        style: {
-            aspectRatio: 0.9
-        }
+        assetsUrl: "../assets/",
+        style: {aspectRatio: 0.9, pieces: {file: "staunty.svg"}}
     })
 </script>
 </body>

package/examples/simple-boards.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <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/chessboard/chessboard.css"/>
 </head>
 <body>
 <h1><a href="../">cm-chessboard</a></h1>
@@ -19,6 +19,8 @@ new Chessboard(document.getElementById("board1"), {
 })
 new Chessboard(document.getElementById("board2"), {
     position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
+    assetsCache: false,
+    style: {pieces: {file: "staunty.svg"}},
     orientation: COLOR.black
 })
 </pre>
@@ -28,11 +30,13 @@ new Chessboard(document.getElementById("board2"), {
     new Chessboard(document.getElementById("board1"), {
         position: FEN.start,
-        sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
+        assetsUrl: "../assets/"
     })
     new Chessboard(document.getElementById("board2"), {
         position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
-        sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
+        assetsUrl: "../assets/",
+        assetsCache: false,
+        style: {pieces: {file: "staunty.svg"}},
         orientation: COLOR.black
     })
 </script>

package/examples/test-getPiece.html CHANGED Viewed

@@ -1,7 +1,7 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
-    <link rel="stylesheet" href="../assets/styles/cm-chessboard.css">
+    <link rel="stylesheet" href="../assets/chessboard/chessboard.css">
     <title>frame test</title>
 </head>
 <body>
@@ -9,7 +9,7 @@ Board:
 <div id="board"></div>
 <script type="module">
-    import { Chessboard, MARKER_TYPE } from '../src/cm-chessboard/Chessboard.js'
+    import { Chessboard } from '../src/cm-chessboard/Chessboard.js'
     const board = new Chessboard(document.getElementById('board'), {
         position: 'start',

package/examples/validate-moves.html CHANGED Viewed

@@ -5,7 +5,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="../assets/chessboard/chessboard.css"/>
+    <link rel="stylesheet" href="../assets/extensions/markers/markers.css"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
 </head>
 <body>
@@ -58,8 +59,7 @@ function inputHandler(event) {
 const board = new Chessboard(document.getElementById("board"), {
     position: chess.fen(),
-    sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
-    style: {moveFromMarker: undefined, moveToMarker: undefined}, // disable standard markers
+    style: {pieces: {file: "staunty.svg"}},
     orientation: COLOR.white
 })
 board.enableMoveInput(inputHandler, COLOR.white)
@@ -76,7 +76,7 @@ board.enableMoveInput(inputHandler, COLOR.white)
         console.log("event", event)
         event.chessboard.removeMarkers(MARKER_TYPE.dot)
         if (event.type === INPUT_EVENT_TYPE.moveInputStarted) {
-            const moves = chess.moves({square: event.square, verbose: true});
+            const moves = chess.moves({square: event.square, verbose: true})
             for (const move of moves) { // draw dots on possible squares
                 event.chessboard.addMarker(MARKER_TYPE.dot, move.to)
             }
@@ -109,10 +109,10 @@ board.enableMoveInput(inputHandler, COLOR.white)
     const board = new Chessboard(document.getElementById("board"), {
         position: chess.fen(),
-        sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
-        style: {moveFromMarker: MARKER_TYPE.square, moveToMarker: MARKER_TYPE.square},
+        assetsUrl: "../assets/",
+        style: {pieces: {file: "staunty.svg"}},
         orientation: COLOR.white,
-        extensions: [{class: Markers}]
+        extensions: [{class: Markers, props: {autoMarkers: MARKER_TYPE.square}}]
     })
     board.enableMoveInput(inputHandler, COLOR.white)
 </script>

package/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>cm-chessboard</title>
-    <link rel="stylesheet" href="assets/styles/cm-chessboard.css"/>
+    <link rel="stylesheet" href="assets/chessboard/chessboard.css"/>
     <link rel="stylesheet" href="examples/styles/examples.css"/>
     <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
@@ -22,17 +22,17 @@ It works, it is cool and it is easy to use. 👍</p>
         <li><a href="examples/enable-input.html">Input enabled without validation</a></li>
         <li><a href="examples/validate-moves.html">Input enabled, move validation with chess.js</a> 🥸</li>
         <li><a href="examples/pieces-animation.html">Set different positions, with animation</a></li>
-        <li><a href="examples/input-callbacks.html">Context input, mark squares and detect clicks on fields</a></li>
+        <li><a href="examples/extensions/markers-extension.html">Context input, mark squares and detect clicks on fields</a></li>
         <li><a href="examples/different-styles.html">Different styles and piece sets</a> 🎨</li>
         <li><a href="examples/destroy-many-boards.html">Stress test, 5000 boards created and destroyed</a> 🤓 👍</li>
     </ul>
     <h3>Examples using the cm-chessboard extensions</h3>
     <ul>
-        <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>
-        <li><a href="examples/extensions/chessboard-markers-extension.html">Markers extension</a> 🆕</li>
-        <li><a href="examples/extensions/chessboard-promotion-dialog-extension.html">PromotionDialog extension</a></li>
-        <li><a href="examples/extensions/chessboard-render-video-extension.html">RenderVideo extension</a> 🆕</li>
+        <li><a href="examples/extensions/accessibility-extension.html">Accessibility extension</a></li>
+        <li><a href="examples/extensions/arrows-extension.html">Arrows extension</a></li>
+        <li><a href="examples/extensions/markers-extension.html">Markers extension</a> 🆕</li>
+        <li><a href="examples/extensions/promotion-dialog-extension.html">PromotionDialog extension</a></li>
+        <li><a href="examples/extensions/render-video-extension.html">RenderVideo extension</a> 🆕</li>
     </ul>
 </div>
 <h2>Chessboard</h2>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "6.0.4",
+  "version": "7.0.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 CHANGED Viewed

@@ -9,6 +9,7 @@ import {FEN, Position} from "./model/Position.js"
 import {PositionAnimationsQueue} from "./view/PositionAnimationsQueue.js"
 import {EXTENSION_POINT} from "./model/Extension.js"
 import {ChessboardView} from "./view/ChessboardView.js"
+import {Utils} from "./lib/Utils.js"
 export const COLOR = {
     white: "w",
@@ -16,8 +17,9 @@ export const COLOR = {
 }
 export const INPUT_EVENT_TYPE = {
     moveInputStarted: "moveInputStarted",
+    movingOverSquare: "movingOverSquare", // while dragging or hover after click
     validateMoveInput: "validateMoveInput",
-    moveInputCanceled: "moveInputCanceled",
+    moveInputCanceled: "moveInputCanceled"
 }
 export const SQUARE_SELECT_TYPE = {
     primary: "primary",
@@ -33,6 +35,10 @@ export const PIECE = {
     bp: "bp", bb: "bb", bn: "bn", br: "br", bq: "bq", bk: "bk"
 }
+export const PIECES_FILE_TYPE = {
+    svgSprite: "svgSprite"
+}
 export class Chessboard {
     constructor(context, props = {}) {
@@ -42,43 +48,31 @@ export class Chessboard {
         this.context = context
         this.id = (Math.random() + 1).toString(36).substring(2, 8)
         this.extensions = []
-        let defaultProps = {
-            position: FEN.empty, // set as fen, can use FEN.start or FEN.empty
+        this.props = {
+            position: FEN.empty, // set position as fen, use FEN.start or FEN.empty as shortcuts
             orientation: COLOR.white, // white on bottom
             responsive: true, // resize the board automatically to the size of the context element
-            animationDuration: 300, // pieces animation duration in milliseconds. Disable all animation with `0`.
             language: navigator.language.substring(0, 2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
+            assetsUrl: "./assets/", // put all css and sprites in this folder
+            assetsCache: true, // cache sprites
             style: {
                 cssClass: "default", // set the css theme of the board, try "green", "blue" or "chess-club"
                 showCoordinates: true, // show ranks and files
                 borderType: BORDER_TYPE.none, // "thin" thin border, "frame" wide border with coordinates in it, "none" no border
                 aspectRatio: 1, // height/width of the board
-            },
-            sprite: {
-                url: "./assets/images/chessboard-sprite.svg", // pieces and markers are stored in a sprite file
-                size: 40, // the sprite tiles size, defaults to 40x40px
-                cache: true // cache the sprite
+                pieces: {
+                    type: PIECES_FILE_TYPE.svgSprite, // pieces are in a SVG sprite, no other type supported for now
+                    file: "standard.svg", // the filename of the sprite in `assets/chessboard/pieces/`
+                    tileSize: 40 // the tile size in the sprite
+                },
+                animationDuration: 300 // pieces animation duration in milliseconds. Disable all animations with `0`.
             },
             extensions: [ /* {class: ExtensionClass, props: { ... }} */] // add extensions here
         }
-        this.props = {}
-        Object.assign(this.props, defaultProps)
-        Object.assign(this.props, props)
-        this.props.sprite = defaultProps.sprite
-        this.props.style = defaultProps.style
-        if (props.sprite) {
-            Object.assign(this.props.sprite, props.sprite)
-        }
-        if (props.style) {
-            Object.assign(this.props.style, props.style)
-        }
-        if (props.extensions) {
-            this.props.extensions = props.extensions
-        }
+        Utils.mergeObjects(this.props, props)
         if (this.props.language !== "de" && this.props.language !== "en") {
             this.props.language = "en"
         }
         this.state = new ChessboardState()
         this.view = new ChessboardView(this)
         this.positionAnimationsQueue = new PositionAnimationsQueue(this)
@@ -112,7 +106,7 @@ export class Chessboard {
     async setPosition(fen, animated = false) {
         const positionFrom = this.state.position.clone()
         const positionTo = new Position(fen)
-        if(positionFrom.getFen() !== positionTo.getFen()) {
+        if (positionFrom.getFen() !== positionTo.getFen()) {
             this.state.position.setFen(fen)
             this.state.invokeExtensionPoints(EXTENSION_POINT.positionChanged)
         }

package/src/cm-chessboard/extensions/accessibility/Accessibility.js CHANGED Viewed

@@ -4,8 +4,8 @@
  * 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 {piecesTranslations, renderPieceTitle} from "../../lib/I18n.js"
 const hlTranslations = {
     de: {

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

@@ -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", {