cm-chessboard 3.15.0 → 3.16.2

package/README.md

@@ -44,7 +44,7 @@ dependencies.
 
 Preconditions for using cm-chessboard in a web page:
 
-1. **include the css:** `styles/cm-chessboard.css`
+1. **include the css:** `assets/styles/cm-chessboard.css`
 2. **import the ES6 module:** `import {Chessboard} from "PATH/TO/src/cm-chessboard/Chessboard.js"`
 
 Example, showing a FEN:
@@ -106,12 +106,18 @@ Sets a piece on a square. Example: `board.setPiece("e4", PIECE.blackKnight)` or
 
 Returns the piece on a square or `undefined` if the square is empty.
 
+### movePiece(squareFrom, squareTo, animated = true)
+
+Move a piece from `squareFrom` to `squareTo`. Returns a **Promise**, which is resolved, when the animation finished.
+
+[Example for **movePiece**](https://shaack.com/projekte/cm-chessboard/examples/pieces-animation.html)
+
 ### setPosition(fen, animated = true)
 
 Sets the position as `fen`. Special values are `"start"`, sets the chess start position and
 `"empty"`, sets an empty board. When `animated` is set `false`, the new position will be shown instant.
 
-Returns a **Promise** which will be resolved, after the Animation has finished.
+Returns a **Promise**, which is resolved, when the animation finished.
 
 [Example for **setPosition**](https://shaack.com/projekte/cm-chessboard/examples/pieces-animation.html)
 
@@ -262,7 +268,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: "emphasize", slice: "markerSquare"})`
+with `board.addMarker("e4", {class: "markerSquare", slice: "markerSquare"})`
 "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)
 .
@@ -270,7 +276,7 @@ also demonstrated in the [mark squares example](https://shaack.com/projekte/cm-c
 The color and stroke-width of the marker is defined in the css (or scss). You could also define your marker completely
 in the sprite, but then that is not so flexible.
 
-These are the css styles of the markers "emphasize" and "danger".
+These are the css styles of the markers "markerSquare" and "markerCircleRed".
 
 ```css
 marker.markerSquare {

package/examples/enable-input.html

@@ -45,6 +45,7 @@ function inputHandler(event) {
     })
     window.board.enableMoveInput(inputHandler)
     function inputHandler(event) {
+        console.log(event)
         switch (event.type) {
             case INPUT_EVENT_TYPE.moveStart:
                 log(`moveStart: ${event.square}`)

package/examples/pieces-animation.html

@@ -18,11 +18,23 @@
 <button onclick="setPosition('rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR')">Position 1</button>
 <button onclick="setPosition('rnbqkbnr/pp1ppppp/8/2p5/4P3/5N2/PPPP1PPP/RNBQKB1R')">Position 2</button>
 <button onclick="setPosition('rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR')">Position 3</button>
-<button onclick="switchOrientation()">Switch Orientation
-</button>
+<button onclick="switchOrientation()">Switch Orientation</button>
 <pre>&lt;button onclick="window.board.setPosition('rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR')"&gt;Position 3&lt;/button&gt;</pre>
+<br/>
+Move piece from: <input id="moveFrom" type="text" size="2" value="e2"/> to: <input id="moveTo" type="text" size="2"
+                                                                                   value="e4"/>
+<button onclick="movePiece()">Do move</button>
+<pre>board.movePiece(squareFrom, squareTo)</pre>
+<br/>
+<button onclick="knightMove()">Knight dance</button>
+<pre>
+board.setPiece("e4", PIECE.wn)
+await board.movePiece("e4", "c3")
+await board.movePiece("c3", "d5")
+await board.movePiece("d5", "f4")
+</pre>
 <script type="module">
-    import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
+    import {Chessboard, PIECE} from "../src/cm-chessboard/Chessboard.js"
 
     const board = new Chessboard(document.getElementById("board"),
         {
@@ -40,6 +52,19 @@
     window.switchOrientation = () => {
         board.setOrientation(board.getOrientation() === 'w' ? 'b' : 'w')
     }
+    window.movePiece = () => {
+        const squareFrom = document.getElementById("moveFrom").value
+        const squareTo = document.getElementById("moveTo").value
+        console.log("movePiece", squareFrom, squareTo)
+        board.movePiece(squareFrom, squareTo)
+    }
+    window.knightMove = async () => {
+        await board.setPosition("empty")
+        board.setPiece("e4", PIECE.wn)
+        await board.movePiece("e4", "c3")
+        await board.movePiece("c3", "d5")
+        await board.movePiece("d5", "f4")
+    }
 </script>
 </body>
 </html>

package/examples/validate-moves.html

@@ -22,6 +22,7 @@ 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)
     if (event.type === INPUT_EVENT_TYPE.moveStart) {
         const moves = chess.moves({square: event.square, verbose: true});
         event.chessboard.addMarker(event.square, MARKER_TYPE.square)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "3.15.0",
+  "version": "3.16.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

@@ -114,6 +114,27 @@ export class Chessboard {
         return this.state.squares[this.state.squareToIndex(square)]
     }
 
+    movePiece(squareFrom, squareTo, animated = true) {
+        return new Promise((resolve, reject) => {
+            const prevSquares = this.state.squares.slice(0) // clone
+            const pieceFrom = this.getPiece(squareFrom)
+            if(!pieceFrom) {
+                reject("no piece on square " + squareFrom)
+                return
+            }
+            this.state.squares[this.state.squareToIndex(squareFrom)] = null
+            this.state.squares[this.state.squareToIndex(squareTo)] = pieceFrom
+            if (animated) {
+                this.view.animatePieces(prevSquares, this.state.squares, () => {
+                    resolve()
+                })
+            } else {
+                this.view.drawPieces(this.state.squares)
+                resolve()
+            }
+        })
+    }
+
     setPosition(fen, animated = true) {
         return new Promise((resolve) => {
             if (fen === "start") {

package/src/cm-chessboard/ChessboardMoveInput.js

@@ -21,7 +21,7 @@ export const MOVE_CANCELED_REASON = {
     secondClick: "secondClick",
     movedOutOfBoard: "movedOutOfBoard",
     draggedBack: "draggedBack",
-    clickedAnother: "clickedAnother"
+    clickedAnotherPiece: "clickedAnotherPiece"
 }
 
 const DRAG_THRESHOLD = 4
@@ -254,7 +254,7 @@ export class ChessboardMoveInput {
                             const startPieceName = this.chessboard.getPiece(SQUARE_COORDINATES[this.startIndex])
                             const startPieceColor = startPieceName ? startPieceName.substr(0, 1) : undefined
                             if (color && startPieceColor === pieceColor) { // https://github.com/shaack/cm-chessboard/issues/40
-                                this.moveCanceledCallback(MOVE_CANCELED_REASON.clickedAnother, index)
+                                this.moveCanceledCallback(MOVE_CANCELED_REASON.clickedAnotherPiece, this.startIndex, index)
                                 if (this.moveStartCallback(index)) {
                                     this.setMoveInputState(STATE.pieceClickedThreshold, {
                                         index: index,
@@ -339,7 +339,7 @@ export class ChessboardMoveInput {
                         if (this.moveInputState === STATE.clickDragTo) {
                             this.chessboard.state.setPiece(this.startIndex, this.movedPiece)
                             this.view.setPieceVisibility(this.startIndex)
-                            this.moveCanceledCallback(MOVE_CANCELED_REASON.draggedBack, index)
+                            this.moveCanceledCallback(MOVE_CANCELED_REASON.draggedBack, index, index)
                             this.setMoveInputState(STATE.reset)
                         } else {
                             this.setMoveInputState(STATE.clickTo, {index: index})
@@ -351,12 +351,13 @@ export class ChessboardMoveInput {
                     this.setMoveInputState(STATE.clickTo, {index: index})
                 } else if (this.moveInputState === STATE.secondClickThreshold) {
                     this.setMoveInputState(STATE.reset)
-                    this.moveCanceledCallback(MOVE_CANCELED_REASON.secondClick, index)
+                    this.moveCanceledCallback(MOVE_CANCELED_REASON.secondClick, index, index)
                 }
             } else {
                 this.view.drawPieces()
+                const moveStartIndex = this.startIndex
                 this.setMoveInputState(STATE.reset)
-                this.moveCanceledCallback(MOVE_CANCELED_REASON.movedOutOfBoard, undefined)
+                this.moveCanceledCallback(MOVE_CANCELED_REASON.movedOutOfBoard, moveStartIndex, undefined)
             }
         } else {
             this.view.drawPieces()

package/src/cm-chessboard/ChessboardState.js

@@ -7,7 +7,7 @@
 export class ChessboardState {
 
     constructor() {
-        this.squares = new Array(64).fill(undefined)
+        this.squares = new Array(64).fill(null)
         this.orientation = undefined
         this.markers = []
         this.inputWhiteEnabled = false
@@ -59,7 +59,7 @@ export class ChessboardState {
                 })
                 for (let c = 0; c < 8; c++) {
                     const char = row.substr(c, 1)
-                    let piece = undefined
+                    let piece = null
                     if (char !== '-') {
                         if (char.toUpperCase() === char) {
                             piece = `w${char.toLowerCase()}`

package/src/cm-chessboard/ChessboardView.js

@@ -406,13 +406,14 @@ export class ChessboardView {
         }
     }
 
-    moveCanceledCallback(reason, index) {
+    moveCanceledCallback(reason, fromIndex, toIndex) {
         if (this.moveInputCallback) {
             this.moveInputCallback({
                 chessboard: this.chessboard,
                 type: INPUT_EVENT_TYPE.moveCanceled,
                 reason: reason,
-                square: index ? SQUARE_COORDINATES[index] : undefined
+                squareFrom: SQUARE_COORDINATES[fromIndex],
+                squareTo: toIndex ? SQUARE_COORDINATES[toIndex] : undefined
             })
         }
     }