cm-chessboard 4.0.3 → 4.0.7

package/README.md

@@ -36,13 +36,26 @@ aspects of chess games.
 **Option 3:** Use it via CDN https://cdn.jsdelivr.net/npm/cm-chessboard@3.18.0/src/cm-chessboard/Chessboard.js
 
 After installation, copy the sprite in `cm-chessboard/assets/images/` to your projects `assets/images/`
-folder. If you put the sprite somewhere else you have to configure the location with `{sprite.url: "./url/of/chessboard-sprite.svg"}`
+folder. If you put the sprite somewhere else you have to configure the location
+with `{sprite.url: "./url/of/chessboard-sprite.svg"}`
 (see section 'Configuration' below).
 
 To run the unit tests in `/test` you first have to `npm install` the dev dependencies. Without tests there are no
 dependencies.
 
-## Example usage
+## Version 4.x has many changes
+
+> With the new version 4 of cm-chessboard I completely redesigned the animation of positions with
+> the use of promises.
+ 
+The pieces animations are now smoother and less error-prone for race conditions.
+
+As of version 4.x, the API functions `setPosition()`, `setPiece()` and `movePiece()` are **not animated** as default.
+If you want some pieces animations you have to give the parameter `animated = true`.
+
+Also in 4.x the chessboard will become more accessible for visually impaired people but this is in alpha stage for now.
+
+## Usage
 
 Preconditions for using cm-chessboard in a web page:
 
@@ -69,23 +82,30 @@ examples.
 Below is the default configuration
 
 ```javascript
-props = {
+let defaultProps = {
     position: "empty", // set as fen, "start" or "empty"
     orientation: COLOR.white, // white on bottom
+    responsive: true, // resizes the board based on element size
+    animationDuration: 300, // pieces animation duration in milliseconds. Disable all animation with `0`.
     style: {
-        cssClass: "default",
+        cssClass: "default", // set the css theme of the board, try "green", "blue" or "chess-club"
         showCoordinates: true, // show ranks and files
-        borderType: BORDER_TYPE.thin, // thin: thin border, frame: wide border with coordinates in it, none: no border
-        aspectRatio: 1, // height/width. Set to `undefined`, if you want to define it only in the css.
+        borderType: BORDER_TYPE.none, // "thin" thin border, "frame" wide border with coordinates in it, "none" no border
+        aspectRatio: 1, // height/width of the board
         moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
-        moveToMarker: MARKER_TYPE.frame // the marker used to mark the square where the figure is moving to
+        moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
     },
-    responsive: true, // resizes the board based on element size
-    animationDuration: 300, // pieces animation duration in milliseconds
     sprite: {
-        url: "./assets/images/chessboard-sprite-staunty.svg", // pieces and markers are stored as svg sprite
-        size: 40, // the sprite size, defaults to 40x40px
-        cache: true // cache the sprite inline, in the HTML
+        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
+    },
+    accessibility: { // accessibility functions are in "alpha" version for now, they might not work as expected
+        brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the svg
+        movePieceForm: false, // display a form to move a piece (from, to, move)
+        boardAsTable: false, // display the board additionally as HTML table
+        piecesAsList: false, // display the pieces additionally as List
+        visuallyHidden: true // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
     }
 }
 ```
@@ -94,32 +114,32 @@ props = {
 
 ### constructor
 
-`new Chessboard(containerElement, props = {})`
+`new Chessboard(context, props = {})`
 
-- **`containerElement`**: a HTML DOM element being the container of the widget
+- **`context`**: the HTML DOM element being the container of the widget
 - **`props`**: The board configuration (properties)
 
-### setPiece(square, piece)
+### setPiece(square, piece, animated = false)
 
-Sets a piece on a square. Example: `board.setPiece("e4", PIECE.blackKnight)` or
-`board.setPiece("e4", "bn")`. Remove a Piece with `board.setPiece("e4", null)`.
+Sets a piece on a square. Example: `board.setPiece("e4", PIECE.blackKnight, true)` or
+`board.setPiece("e4", "bn")`. Remove a Piece with `board.setPiece("e4", null)`. Returns a **Promise**, which is
+resolved,
+after the animation finished.
 
 ### getPiece(square)
 
 Returns the piece on a square or `undefined` if the square is empty.
 
-### movePiece(squareFrom, squareTo, animated = true)
+### movePiece(squareFrom, squareTo, animated = false)
 
-Move a piece from `squareFrom` to `squareTo`. Returns a **Promise**, which is resolved, when the animation finished.
+Move a piece from `squareFrom` to `squareTo`. Returns a **Promise**, which is resolved, after 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.
+### setPosition(fen, animated = false)
 
-Returns a **Promise**, which is resolved, when the animation finished.
+Sets the position as `fen`. Special values are "start", sets the chess start position and
+"empty", sets an empty board. Returns a **Promise**, which is resolved, after the animation finished.
 
 [Example for **setPosition**](https://shaack.com/projekte/cm-chessboard/examples/pieces-animation.html)
 
@@ -131,11 +151,13 @@ Returns the board position as `fen`.
 
 Adds a marker on a square.
 
-Default types are: `MARKER_TYPE.frame`, `MARKER_TYPE.square`, `MARKER_TYPE.dot`, `MARKER_TYPE.circle` exportet by `Chessboard.js`.
+Default types are: `MARKER_TYPE.frame`, `MARKER_TYPE.square`, `MARKER_TYPE.dot`, `MARKER_TYPE.circle` exportet
+by `Chessboard.js`.
 
 #### You can create your own marker types:
 
-Just create an object like `const myMarker = {class: "markerCssClass", slice: "markerSliceId"}`, where `class` is the css class of the marker for styling
+Just create an object like `const myMarker = {class: "markerCssClass", slice: "markerSliceId"}`, where `class` is the
+css class of the marker for styling
 and `slice` is the `id` in `sprite.svg`. See also [Create your own custom markers](#create-your-own-custom-markers)
 below.
 
@@ -271,7 +293,8 @@ 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: "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
+"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)
 .
 
@@ -282,14 +305,15 @@ These are the css styles of the markers "markerSquare" and "markerCircleRed".
 
 ```css
 marker.markerSquare {
-  fill: black;
-  opacity: 0.11;
+    fill: black;
+    opacity: 0.11;
 }
+
 marker.markerCircleRed {
-   stroke: #aa0000;
-   stroke-width: 3px;
-   opacity: 0.4;
- }
+    stroke: #aa0000;
+    stroke-width: 3px;
+    opacity: 0.4;
+}
 ```
 
 So you can simply add a marker with the id `myMarkerIdInSvg` to the SVG, and add the class `myMarkerCssClass` to the

package/docs/PositionsAnimation.md

@@ -0,0 +1,11 @@
+# Positions Queue
+
+- Extra Class
+- Holds the Queue
+- API 
+  - `isRunning(): boolean`
+  - `pushPosition(position, animated)`
+  - `run(): Promise` // starts the animation, callback when finished, if running : Promis
+  - `skip(callback): Promise` // skips all running steps, displays the last position and returns to callback
+- Positions are set immediately in the Model
+  - Then they are pushed into an Animations queue and run (if not running)

package/docs/PreMoves.md

@@ -1,2 +1,3 @@
 # Pre Moves
 
+- TODO

package/examples/pieces-animation.html

@@ -13,16 +13,26 @@
 <p>Animations are queued automatically.</p>
 <div class="board" id="board"></div>
 <br/>
-<button onclick="setPosition('empty')">Empty Position</button>
+<h3>Not animated</h3>
+<button onclick="setPosition('empty').then(() => { console.log('empty finished')})">Empty Position</button>
 <button onclick="setPosition('start')">Start Position</button>
 <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>
+<h3>Animated</h3>
+<button onclick="setPosition('empty', true).then(() => { console.log('empty animated finished')})">Empty Position</button>
+<button onclick="setPosition('start', true)">Start Position</button>
+<button onclick="setPosition('rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR', true)">Position 1</button>
+<button onclick="setPosition('rnbqkbnr/pp1ppppp/8/2p5/4P3/5N2/PPPP1PPP/RNBQKB1R', true)">Position 2</button>
+<button onclick="setPosition('rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR', true)">Position 3</button>
+<button onclick="switchOrientation(true)">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"/>
+Move piece <label for="moveFrom">from</label> <input id="moveFrom" type="text" size="2" value="e2"/> <label
+        for="moveTo">to</label> <input id="moveTo" type="text" size="2"
+                                       value="e4"/>
 <button onclick="movePiece()">Do move</button>
 <pre>board.movePiece(squareFrom, squareTo)</pre>
 <br/>
@@ -43,27 +53,27 @@ await board.movePiece("d5", "f4")
             animationDuration: 500
         })
     let i = 0
-    window.setPosition = (position) => {
+    window.setPosition = (position, animated) => {
         i++
-        board.setPosition(position).then(() => {
-            console.log("setPosition resolved", position, i)
-        })
+        return board.setPosition(position, animated)
     }
-    window.switchOrientation = () => {
-        board.setOrientation(board.getOrientation() === 'w' ? 'b' : 'w')
+    window.switchOrientation = (animated) => {
+        board.setOrientation(board.getOrientation() === 'w' ? 'b' : 'w', animated)
     }
     window.movePiece = () => {
         const squareFrom = document.getElementById("moveFrom").value
         const squareTo = document.getElementById("moveTo").value
         console.log("movePiece", squareFrom, squareTo)
-        board.movePiece(squareFrom, squareTo)
+        board.movePiece(squareFrom, squareTo, true)
     }
     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")
+        board.setPiece("e5", PIECE.wn)
+        board.movePiece("e5", "c4", true)
+        board.movePiece("c4", "d6", true)
+        board.movePiece("d6", "f5", true)
+        board.movePiece("f5", "h4", true)
+        board.movePiece("h4", "g6", true)
+        board.movePiece("g6", "e5", true)
     }
 </script>
 </body>

package/examples/validate-moves.html

@@ -38,7 +38,7 @@ function inputHandler(event) {
     if (event.type === INPUT_EVENT_TYPE.moveStart) {
         const moves = chess.moves({square: event.square, verbose: true});
         event.chessboard.addMarker(event.square, MARKER_TYPE.square)
-        for (const move of moves) {
+        for (const move of moves) { // draw dots on possible moves
             event.chessboard.addMarker(move.to, MARKER_TYPE.dot)
         }
         return moves.length > 0
@@ -46,9 +46,7 @@ function inputHandler(event) {
         const move = {from: event.squareFrom, to: event.squareTo}
         const result = chess.move(move)
         if (result) {
-            event.chessboard.removeMarkers(undefined, MARKER_TYPE.square)
             event.chessboard.disableMoveInput()
-            event.chessboard.setPosition(chess.fen())
             const possibleMoves = chess.moves({verbose: true})
             if (possibleMoves.length > 0) {
                 const randomIndex = Math.floor(Math.random() * possibleMoves.length)
@@ -56,7 +54,7 @@ function inputHandler(event) {
                 setTimeout(() => { // smoother with 500ms delay
                     chess.move({from: randomMove.from, to: randomMove.to})
                     event.chessboard.enableMoveInput(inputHandler, COLOR.white)
-                    event.chessboard.setPosition(chess.fen())
+                    event.chessboard.setPosition(chess.fen(), true)
                 }, 500)
             }
         } else {
@@ -97,7 +95,6 @@ board.enableMoveInput(inputHandler, COLOR.white)
             const result = chess.move(move)
             if (result) {
                 event.chessboard.disableMoveInput()
-                event.chessboard.setPosition(chess.fen())
                 const possibleMoves = chess.moves({verbose: true})
                 if (possibleMoves.length > 0) {
                     const randomIndex = Math.floor(Math.random() * possibleMoves.length)
@@ -105,7 +102,7 @@ board.enableMoveInput(inputHandler, COLOR.white)
                     setTimeout(() => { // smoother with 500ms delay
                         chess.move({from: randomMove.from, to: randomMove.to})
                         event.chessboard.enableMoveInput(inputHandler, COLOR.white)
-                        event.chessboard.setPosition(chess.fen())
+                        event.chessboard.setPosition(chess.fen(), true)
                     }, 500)
                 }
             } else {
@@ -119,7 +116,8 @@ board.enableMoveInput(inputHandler, COLOR.white)
         position: chess.fen(),
         sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
         style: {moveFromMarker: undefined, moveToMarker: undefined}, // disable standard markers
-        orientation: COLOR.white
+        orientation: COLOR.white,
+        animationDuration: 500
     })
     board.enableMoveInput(inputHandler, COLOR.white)
 </script>

package/package.json

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

package/src/cm-chessboard/Chessboard.js

@@ -4,8 +4,10 @@
  * License: MIT, see file 'LICENSE'
  */
 
-import {ChessboardState} from "./ChessboardState.js"
-import {ChessboardViewAccessible} from "./ChessboardViewAccessible.js"
+import {State} from "./core/State.js"
+import {ViewAccessible} from "./core/ViewAccessible.js"
+import {PositionAnimationsQueue} from "./core/PositionAnimationsQueue.js"
+import {Position} from "./core/Position.js"
 
 export const COLOR = {
     white: "w",
@@ -35,8 +37,6 @@ export const PIECE = {
     wp: "wp", wb: "wb", wn: "wn", wr: "wr", wq: "wq", wk: "wk",
     bp: "bp", bb: "bb", bn: "bn", br: "br", bq: "bq", bk: "bk",
 }
-export const FEN_START_POSITION = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
-export const FEN_EMPTY_POSITION = "8/8/8/8/8/8/8/8"
 
 export class Chessboard {
 
@@ -45,29 +45,29 @@ export class Chessboard {
             throw new Error("container element is " + context)
         }
         this.context = context
-        this.id = (Math.random() + 1).toString(36).substr(2, 6)
+        this.id = (Math.random() + 1).toString(36).substring(2, 8)
         let defaultProps = {
             position: "empty", // set as fen, "start" or "empty"
             orientation: COLOR.white, // white on bottom
-            animationDuration: 300, // pieces animation duration in milliseconds
             responsive: true, // resizes the board based on element size
+            animationDuration: 300, // pieces animation duration in milliseconds. Disable all animation with `0`.
             style: {
-                cssClass: "default",
+                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
+                borderType: BORDER_TYPE.none, // "thin" thin border, "frame" wide border with coordinates in it, "none" no border
                 aspectRatio: 1, // height/width of the board
                 moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
                 moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
             },
             sprite: {
-                url: "./assets/images/chessboard-sprite.svg", // pieces and markers are stored as svg sprite
-                size: 40, // the sprite size, defaults to 40x40px
+                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
             },
-            accessibility: {
+            accessibility: { // accessibility functions are in "alpha" version for now, they might not work as expected
                 brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the svg
-                boardAsTable: false, // display the board additionally as HTML table
                 movePieceForm: false, // display a form to move a piece (from, to, move)
+                boardAsTable: false, // display the board additionally as HTML table
                 piecesAsList: false, // display the pieces additionally as List
                 visuallyHidden: true // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
             }
@@ -88,88 +88,57 @@ export class Chessboard {
             Object.assign(this.props.accessibility, props.accessibility)
         }
 
-        this.state = new ChessboardState()
-        this.view = new ChessboardViewAccessible(this)
-        /*
-        this.state.addObserver(() => {
-            if(this.view) {
-                this.view.drawPieces()
-            }
-        })
-        */
-        if (this.props.position === "start") {
-            this.state.setPosition(FEN_START_POSITION)
-        } else if (this.props.position === "empty" || this.props.position === undefined) {
-            this.state.setPosition(FEN_EMPTY_POSITION)
-        } else {
-            this.state.setPosition(this.props.position)
-        }
+        this.state = new State()
+        this.view = new ViewAccessible(this)
+        this.positionAnimationsQueue = new PositionAnimationsQueue(this)
         this.state.orientation = this.props.orientation
         this.view.redraw()
+        this.state.position = new Position(this.props.position)
+        this.view.redrawPieces()
     }
 
     // API //
 
-    setPiece(square, piece) {
+    async setPiece(square, piece, animated = false) {
+        const positionFrom = this.state.position.clone()
         this.state.position.setPiece(square, piece)
-        this.view.drawPieces(this.state.position.squares)
+        return this.positionAnimationsQueue.enqueuePositionChange(positionFrom, this.state.position.clone(), animated)
     }
 
-    getPiece(square) {
-        return this.state.position.getPiece(square)
+    async movePiece(squareFrom, squareTo, animated = false) {
+        const positionFrom = this.state.position.clone()
+        this.state.position.movePiece(squareFrom, squareTo)
+        return this.positionAnimationsQueue.enqueuePositionChange(positionFrom, this.state.position.clone(), animated)
     }
 
-    movePiece(squareFrom, squareTo, animated = true) {
-        return new Promise((resolve, reject) => {
-            const prevSquares = this.state.position.clone().squares
-            const pieceFrom = this.getPiece(squareFrom)
-            if(!pieceFrom) {
-                reject("no piece on square " + squareFrom)
-            } else {
-                this.state.position.setPiece(squareFrom, null)
-                this.state.position.setPiece(squareTo, pieceFrom)
-                if (animated) {
-                    this.view.animatePieces(prevSquares, this.state.position.squares, () => {
-                        resolve()
-                    })
-                } else {
-                    this.view.drawPieces(this.state.position.squares)
-                    resolve()
-                }
-            }
-        })
+    async setPosition(fen, animated = false) {
+        const positionFrom = this.state.position.clone()
+        this.state.position.setFen(fen)
+        return this.positionAnimationsQueue.enqueuePositionChange(positionFrom, this.state.position.clone(), animated)
     }
 
-    setPosition(fen, animated = true) {
-        return new Promise((resolve) => {
-            if (fen === "start") {
-                fen = FEN_START_POSITION
-            } else if (fen === "empty") {
-                fen = FEN_EMPTY_POSITION
-            }
-            const currentFen = this.state.getPosition()
-            const fenParts = fen.split(" ")
-            const fenNormalized = fenParts[0]
-
-            if (fenNormalized !== currentFen) {
-                const prevSquares = this.state.position.squares.slice(0) // clone
-                this.state.setPosition(fen)
-                if (animated) {
-                    this.view.animatePieces(prevSquares, this.state.position.squares.slice(0), () => {
-                        resolve()
-                    })
-                } else {
-                    this.view.drawPieces(this.state.position.squares)
-                    resolve()
-                }
-            } else {
-                resolve()
-            }
+    async setOrientation(color, animated = false) {
+        const position = this.state.position.clone()
+        if(this.boardTurning) {
+            console.log("setOrientation is only once in queue allowed")
+            return
+        }
+        this.boardTurning = true
+        return this.positionAnimationsQueue.enqueueTurnBoard(position, color, animated).then(() => {
+            this.boardTurning = false
         })
     }
 
+    getPiece(square) {
+        return this.state.position.getPiece(square)
+    }
+
     getPosition() {
-        return this.state.getPosition()
+        return this.state.position.getFen()
+    }
+
+    getOrientation() {
+        return this.state.orientation
     }
 
     addMarker(square, type) {
@@ -199,16 +168,8 @@ export class Chessboard {
         this.view.drawMarkers()
     }
 
-    setOrientation(color) {
-        this.state.orientation = color
-        return this.view.redraw()
-    }
-
-    getOrientation() {
-        return this.state.orientation
-    }
-
     destroy() {
+        this.positionAnimationsQueue.destroy()
         this.view.destroy()
         this.view = undefined
         this.state = undefined

package/src/cm-chessboard/{ChessboardMoveInput.js → core/MoveInput.js}

@@ -4,8 +4,7 @@
  * License: MIT, see file 'LICENSE'
  */
 
-import {Svg} from "./ChessboardView.js"
-// import {Position} from "./Position.js"
+import {Svg} from "./View.js"
 
 const STATE = {
     waitForInputStart: 0,
@@ -27,7 +26,7 @@ export const MOVE_CANCELED_REASON = {
 
 const DRAG_THRESHOLD = 4
 
-export class ChessboardMoveInput {
+export class MoveInput {
 
     constructor(view, moveStartCallback, moveDoneCallback, moveCanceledCallback) {
         this.view = view
@@ -102,7 +101,7 @@ export class ChessboardMoveInput {
                     this.draggablePiece = undefined
                 }
                 if (prevState === STATE.dragTo) {
-                    this.view.setPieceVisibility(params.square)
+                    this.view.setPieceVisibility(params.square, true)
                 }
                 break
 
@@ -139,21 +138,18 @@ export class ChessboardMoveInput {
                 }
                 this.toSquare = params.square
                 if (this.toSquare && this.moveDoneCallback(this.fromSquare, this.toSquare)) {
-                    const prevSquares = this.chessboard.state.position.clone().squares
-                    this.chessboard.state.position.setPiece(this.fromSquare, undefined)
-                    this.chessboard.state.position.setPiece(this.toSquare, this.movedPiece)
-                    if (prevState === STATE.clickTo) {
-                        this.updateStartEndMarkers()
-                        this.view.animatePieces(prevSquares, this.chessboard.state.position.clone().squares, () => {
+                    if(prevState === STATE.clickTo) {
+                        this.chessboard.movePiece(this.fromSquare, this.toSquare, true).then(() => {
                             this.setMoveInputState(STATE.reset)
                         })
                     } else {
-                        this.view.drawPieces(this.chessboard.state.position.squares)
-                        // this.view.animationQueue = [] // todo remove all animations (See PR #59)
-                        this.setMoveInputState(STATE.reset)
+                        this.chessboard.movePiece(this.fromSquare, this.toSquare, false).then(() => {
+                            this.view.setPieceVisibility(this.toSquare, true)
+                            this.setMoveInputState(STATE.reset)
+                        })
                     }
                 } else {
-                    this.view.drawPieces()
+                    this.view.setPieceVisibility(this.fromSquare, true)
                     this.setMoveInputState(STATE.reset)
                 }
                 break
@@ -187,6 +183,7 @@ export class ChessboardMoveInput {
     }
 
     createDraggablePiece(pieceName) {
+        // TODO use the existing piece from the board and don't create an new one
         if (this.draggablePiece) {
             throw Error("draggablePiece exists")
         }
@@ -255,7 +252,7 @@ export class ChessboardMoveInput {
                             const pieceColor = pieceName ? pieceName.substring(0, 1) : undefined
                             const startPieceName = this.chessboard.getPiece(this.fromSquare)
                             const startPieceColor = startPieceName ? startPieceName.substring(0, 1) : undefined
-                            if (color && startPieceColor === pieceColor) { // https://github.com/shaack/cm-chessboard/issues/40
+                            if (color && startPieceColor === pieceColor) {
                                 this.moveCanceledCallback(MOVE_CANCELED_REASON.clickedAnotherPiece, this.fromSquare, square)
                                 if (this.moveStartCallback(square)) {
                                     this.setMoveInputState(STATE.pieceClickedThreshold, {
@@ -356,13 +353,13 @@ export class ChessboardMoveInput {
                     this.moveCanceledCallback(MOVE_CANCELED_REASON.secondClick, square, square)
                 }
             } else {
-                this.view.drawPieces()
+                this.view.redrawPieces()
                 const moveStartSquare = this.fromSquare
                 this.setMoveInputState(STATE.reset)
                 this.moveCanceledCallback(MOVE_CANCELED_REASON.movedOutOfBoard, moveStartSquare, undefined)
             }
         } else {
-            this.view.drawPieces()
+            this.view.redrawPieces()
             this.setMoveInputState(STATE.reset)
         }
     }