cm-chessboard 3.15.1 → 3.16.3

package/README.md

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

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/package.json

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

package/src/cm-chessboard/Chessboard.js

@@ -40,7 +40,7 @@ export const FEN_EMPTY_POSITION = "8/8/8/8/8/8/8/8"
 
 export class Chessboard {
 
-    constructor(element, props = {}) {
+    constructor(element, props = {}) { // TODO rename element to context
         if (!element) {
             throw new Error("container element is " + element)
         }
@@ -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)
+            } else {
+                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/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()}`