cm-chessboard 3.15.1 → 3.16.0

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,9 +18,12 @@
 <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>
 <script type="module">
     import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
 
@@ -40,6 +43,12 @@
     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)
+    }
 </script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "3.15.1",
+  "version": "3.16.0",
   "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)] = undefined
+            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()}`