cm-chessboard 4.0.4 → 4.0.8

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

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

@@ -12,8 +12,17 @@ export class Position {
         this.squares = new Array(64).fill(null)
         this.setFen(fen)
     }
-    setFen(fen = FEN_START_POSITION) {
-        const parts = fen.replace(/^\s*/, "").replace(/\s*$/, "").split(/\/|\s/)
+
+    setFen(fen = FEN_EMPTY_POSITION) {
+        let fenNormalized
+        if (fen === "start") {
+            fenNormalized = FEN_START_POSITION
+        } else if (fen === "empty" || fen === undefined) {
+            fenNormalized = FEN_EMPTY_POSITION
+        } else {
+            fenNormalized = fen
+        }
+        const parts = fenNormalized.replace(/^\s*/, "").replace(/\s*$/, "").split(/\/|\s/)
         for (let part = 0; part < 8; part++) {
             const row = parts[7 - part].replace(/\d/g, (str) => {
                 const numSpaces = parseInt(str)
@@ -37,6 +46,7 @@ export class Position {
             }
         }
     }
+
     getFen() {
         let parts = new Array(8).fill("")
         for (let part = 0; part < 8; part++) {
@@ -66,9 +76,9 @@ export class Position {
         }
         return parts.join("/")
     }
-    getPieces() {
+
+    getPieces(sortBy = ['k', 'q', 'r', 'b', 'n', 'p']) {
         const pieces = []
-        const sortBy = ['k', 'q', 'r', 'b', 'n', 'p']
         const sort = (a, b) => {
             return sortBy.indexOf(a.name) - sortBy.indexOf(b.name)
         }
@@ -82,10 +92,21 @@ export class Position {
                 })
             }
         }
-        pieces.sort(sort)
+        if(sortBy) {
+            pieces.sort(sort)
+        }
         return pieces
     }
 
+    movePiece(squareFrom, squareTo) {
+        if(!this.squares[Position.squareToIndex(squareFrom)]) {
+            console.error("movePiece, no piece on square", squareFrom)
+            return
+        }
+        this.squares[Position.squareToIndex(squareTo)] = this.squares[Position.squareToIndex(squareFrom)]
+        this.squares[Position.squareToIndex(squareFrom)] = undefined
+    }
+
     setPiece(square, piece) {
         this.squares[Position.squareToIndex(square)] = piece
     }

package/src/cm-chessboard/core/PositionAnimationsQueue.js

@@ -0,0 +1,274 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+import {FEN_EMPTY_POSITION, Position} from "./Position.js"
+import {Svg} from "./View.js"
+
+/*
+* Thanks to markosyan for the idea to the PromiseQueue
+* https://medium.com/@karenmarkosyan/how-to-manage-promises-into-dynamic-queue-with-vanilla-javascript-9d0d1f8d4df5
+*/
+
+export class PromiseQueue {
+
+    constructor() {
+        this.queue = []
+        this.workingOnPromise = false
+        this.stop = false
+    }
+
+    async enqueue(promise) {
+        return new Promise((resolve, reject) => {
+            this.queue.push({
+                promise, resolve, reject,
+            })
+            this.dequeue()
+        })
+    }
+
+    dequeue() {
+        if (this.workingOnPromise) {
+            return
+        }
+        if (this.stop) {
+            this.queue = []
+            this.stop = false
+            return
+        }
+        const entry = this.queue.shift()
+        if (!entry) {
+            return
+        }
+        try {
+            this.workingOnPromise = true
+            entry.promise().then((value) => {
+                this.workingOnPromise = false
+                entry.resolve(value)
+                this.dequeue()
+            }).catch(err => {
+                this.workingOnPromise = false
+                entry.reject(err)
+                this.dequeue()
+            })
+        } catch (err) {
+            this.workingOnPromise = false
+            entry.reject(err)
+            this.dequeue()
+        }
+        return true
+    }
+
+    destroy() {
+        console.log("PAQ destroy")
+        this.stop = true
+    }
+
+
+}
+
+
+const CHANGE_TYPE = {
+    move: 0,
+    appear: 1,
+    disappear: 2
+}
+
+export class PositionsAnimation {
+
+    constructor(view, fromPosition, toPosition, duration, callback) {
+        this.view = view
+        if (fromPosition && toPosition) {
+            this.animatedElements = this.createAnimation(fromPosition.squares, toPosition.squares)
+            this.duration = duration
+            this.callback = callback
+            this.frameHandle = requestAnimationFrame(this.animationStep.bind(this))
+        } else {
+            console.error("fromPosition", fromPosition, "toPosition", toPosition)
+        }
+    }
+
+    static seekChanges(fromSquares, toSquares) {
+        const appearedList = [], disappearedList = [], changes = []
+        for (let i = 0; i < 64; i++) {
+            const previousSquare = fromSquares[i]
+            const newSquare = toSquares[i]
+            if (newSquare !== previousSquare) {
+                if (newSquare) {
+                    appearedList.push({piece: newSquare, index: i})
+                }
+                if (previousSquare) {
+                    disappearedList.push({piece: previousSquare, index: i})
+                }
+            }
+        }
+        appearedList.forEach((appeared) => {
+            let shortestDistance = 8
+            let foundMoved = undefined
+            disappearedList.forEach((disappeared) => {
+                if (appeared.piece === disappeared.piece) {
+                    const moveDistance = PositionsAnimation.squareDistance(appeared.index, disappeared.index)
+                    if (moveDistance < shortestDistance) {
+                        foundMoved = disappeared
+                        shortestDistance = moveDistance
+                    }
+                }
+            })
+            if (foundMoved) {
+                disappearedList.splice(disappearedList.indexOf(foundMoved), 1) // remove from disappearedList, because it is moved now
+                changes.push({
+                    type: CHANGE_TYPE.move,
+                    piece: appeared.piece,
+                    atIndex: foundMoved.index,
+                    toIndex: appeared.index
+                })
+            } else {
+                changes.push({type: CHANGE_TYPE.appear, piece: appeared.piece, atIndex: appeared.index})
+            }
+        })
+        disappearedList.forEach((disappeared) => {
+            changes.push({type: CHANGE_TYPE.disappear, piece: disappeared.piece, atIndex: disappeared.index})
+        })
+        return changes
+    }
+
+    createAnimation(fromSquares, toSquares) {
+        const changes = PositionsAnimation.seekChanges(fromSquares, toSquares)
+        // console.log("changes", changes)
+        const animatedElements = []
+        changes.forEach((change) => {
+            const animatedItem = {
+                type: change.type
+            }
+            switch (change.type) {
+                case CHANGE_TYPE.move:
+                    animatedItem.element = this.view.getPieceElement(Position.indexToSquare(change.atIndex))
+                    animatedItem.element.parentNode.appendChild(animatedItem.element) // move element to top layer
+                    animatedItem.atPoint = this.view.indexToPoint(change.atIndex)
+                    animatedItem.toPoint = this.view.indexToPoint(change.toIndex)
+                    break
+                case CHANGE_TYPE.appear:
+                    animatedItem.element = this.view.drawPiece(Position.indexToSquare(change.atIndex), change.piece)
+                    animatedItem.element.style.opacity = 0
+                    break
+                case CHANGE_TYPE.disappear:
+                    animatedItem.element = this.view.getPieceElement(Position.indexToSquare(change.atIndex))
+                    break
+            }
+            animatedElements.push(animatedItem)
+        })
+        return animatedElements
+    }
+
+    animationStep(time) {
+        // console.log("animationStep", time)
+        if (!this.startTime) {
+            this.startTime = time
+        }
+        const timeDiff = time - this.startTime
+        if (timeDiff <= this.duration) {
+            this.frameHandle = requestAnimationFrame(this.animationStep.bind(this))
+        } else {
+            cancelAnimationFrame(this.frameHandle)
+            // console.log("ANIMATION FINISHED")
+            this.animatedElements.forEach((animatedItem) => {
+                if (animatedItem.type === CHANGE_TYPE.disappear) {
+                    Svg.removeElement(animatedItem.element)
+                }
+            })
+            this.callback()
+            return
+        }
+        const t = Math.min(1, timeDiff / this.duration)
+        let progress = t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t // easeInOut
+        if (isNaN(progress)) {
+            progress = 1
+        }
+        this.animatedElements.forEach((animatedItem) => {
+            // console.log("animatedItem", animatedItem)
+            if (animatedItem.element) {
+                switch (animatedItem.type) {
+                    case CHANGE_TYPE.move:
+                        animatedItem.element.transform.baseVal.removeItem(0)
+                        const transform = (this.view.svg.createSVGTransform())
+                        transform.setTranslate(
+                            animatedItem.atPoint.x + (animatedItem.toPoint.x - animatedItem.atPoint.x) * progress,
+                            animatedItem.atPoint.y + (animatedItem.toPoint.y - animatedItem.atPoint.y) * progress)
+                        animatedItem.element.transform.baseVal.appendItem(transform)
+                        break
+                    case CHANGE_TYPE.appear:
+                        animatedItem.element.style.opacity = Math.round(progress * 100) / 100
+                        break
+                    case CHANGE_TYPE.disappear:
+                        animatedItem.element.style.opacity = Math.round((1 - progress) * 100) / 100
+                        break
+                }
+            } else {
+                console.warn("animatedItem has no element", animatedItem)
+            }
+        })
+    }
+
+    static squareDistance(index1, index2) {
+        const file1 = index1 % 8
+        const rank1 = Math.floor(index1 / 8)
+        const file2 = index2 % 8
+        const rank2 = Math.floor(index2 / 8)
+        return Math.max(Math.abs(rank2 - rank1), Math.abs(file2 - file1))
+    }
+
+}
+
+export class PositionAnimationsQueue extends PromiseQueue {
+
+    constructor(chessboard) {
+        super()
+        this.chessboard = chessboard
+    }
+
+    async enqueuePositionChange(positionFrom, positionTo, animated) {
+        return super.enqueue(() => new Promise((resolve) => {
+            let duration = animated ? this.chessboard.props.animationDuration : 0
+            if(this.queue.length > 0) {
+                duration = duration / (1 + Math.pow(this.queue.length / 5, 2))
+            }
+            // console.log("duration", duration, animated, "this.chessboard.props.animationDuration", this.chessboard.props.animationDuration)
+            new PositionsAnimation(this.chessboard.view,
+                positionFrom, positionTo, animated ? duration : 0,
+                () => {
+                    if(this.chessboard.view) { // if destroyed, no view anymore
+                        this.chessboard.view.redrawPieces(positionTo.squares)
+                    }
+                    resolve()
+                }
+            )
+        }))
+    }
+
+    async enqueueTurnBoard(position, color, animated) {
+        return super.enqueue(() => new Promise((resolve) => {
+            const emptyPosition = new Position(FEN_EMPTY_POSITION)
+            let duration = animated ? this.chessboard.props.animationDuration : 0
+            if(this.queue.length > 0) {
+                duration = duration / (1 + Math.pow(this.queue.length / 5, 2))
+            }
+            new PositionsAnimation(this.chessboard.view,
+                position, emptyPosition, animated ? duration : 0,
+                () => {
+                    this.chessboard.state.orientation = color
+                    this.chessboard.view.redraw()
+                    this.chessboard.view.redrawPieces(emptyPosition.squares)
+                    new PositionsAnimation(this.chessboard.view,
+                        emptyPosition, position, animated ? duration : 0,
+                        () => {
+                            this.chessboard.view.redrawPieces(position.squares)
+                            resolve()
+                        }
+                    )
+                }
+            )
+        }))
+    }
+
+}

package/src/cm-chessboard/{ChessboardState.js → core/State.js}

@@ -5,7 +5,7 @@
  */
 import {Position} from "./Position.js"
 
-export class ChessboardState {
+export class State {
 
     constructor() {
         this.position = new Position()
@@ -16,21 +16,28 @@ export class ChessboardState {
         this.inputEnabled = false
         this.squareSelectEnabled = false
     }
-/*
-    getPieces() {
-        return this.position.getPieces()
-    }
 
-    setPiece(square, piece) {
-        this.position.setPiece(square, piece)
+    setPosition(fen, animated = false) {
+        this.position = new Position(fen, animated)
     }
-*/
-    setPosition(fen) {
-        this.position.setFen(fen)
+
+    movePiece(fromSquare, toSquare, animated = false) {
+        const position = this._position.clone()
+        position.animated = animated
+        const piece = position.getPiece(fromSquare)
+        if(!piece) {
+            console.error("no piece on", fromSquare)
+        }
+        position.setPiece(fromSquare, undefined)
+        position.setPiece(toSquare, piece)
+        this._position = position
     }
 
-    getPosition() {
-        return this.position.getFen()
+    setPiece(square, piece, animated = false) {
+        const position = this._position.clone()
+        position.animated = animated
+        position.setPiece(square, piece)
+        this._position = position
     }
 
     addMarker(square, type) {

package/src/cm-chessboard/{ChessboardView.js → core/View.js}

@@ -4,9 +4,8 @@
  * License: MIT, see file 'LICENSE'
  */
 
-import {ChessboardMoveInput} from "./ChessboardMoveInput.js"
-import {COLOR, INPUT_EVENT_TYPE, BORDER_TYPE} from "./Chessboard.js"
-import {ChessboardPiecesAnimation} from "./ChessboardPiecesAnimation.js"
+import {MoveInput} from "./MoveInput.js"
+import {COLOR, INPUT_EVENT_TYPE, BORDER_TYPE} from "../Chessboard.js"
 import {Position} from "./Position.js"
 
 export const piecesTranslations = {
@@ -42,33 +41,28 @@ export const piecesTranslations = {
 
 export function renderPieceTitle(lang, name, color = undefined) {
     let title = piecesTranslations[lang].pieces_long[name]
-    if(color) {
+    if (color) {
         title += " " + piecesTranslations[lang].colors_long[color]
     }
     return title
 }
 
-export class ChessboardView {
+export class View {
 
     constructor(chessboard) {
-        this.animationRunning = false
-        this.currentAnimation = undefined
         this.chessboard = chessboard
-        this.moveInput = new ChessboardMoveInput(this,
+        this.moveInput = new MoveInput(this,
             this.moveStartCallback.bind(this),
             this.moveDoneCallback.bind(this),
             this.moveCanceledCallback.bind(this)
         )
-        this.animationQueue = []
         if (chessboard.props.sprite.cache) {
             this.cacheSprite()
         }
         this.context = document.createElement("div")
         this.chessboard.context.appendChild(this.context)
         if (chessboard.props.responsive) {
-            // noinspection JSUnresolvedVariable
             if (typeof ResizeObserver !== "undefined") {
-                // noinspection JSUnresolvedFunction
                 this.resizeObserver = new ResizeObserver(() => {
                     this.handleResize()
                 })
@@ -104,11 +98,11 @@ export class ChessboardView {
         }
         this.chessboard.context.removeEventListener("mousedown", this.pointerDownListener)
         this.chessboard.context.removeEventListener("touchstart", this.pointerDownListener)
-        Svg.removeElement(this.svg)
         this.animationQueue = []
         if (this.currentAnimation) {
             cancelAnimationFrame(this.currentAnimation.frameHandle)
         }
+        Svg.removeElement(this.svg)
     }
 
     // Sprite //
@@ -172,6 +166,7 @@ export class ChessboardView {
             this.context.clientHeight !== this.height) {
             this.updateMetrics()
             this.redraw()
+            this.redrawPieces()
         }
         this.svg.setAttribute("width", "100%") // safari bugfix
         this.svg.setAttribute("height", "100%")
@@ -182,7 +177,6 @@ export class ChessboardView {
         this.drawCoordinates()
         this.drawMarkers()
         this.visualizeInputState()
-        this.drawPieces(this.chessboard.state.position.squares)
     }
 
     // Board //
@@ -191,20 +185,20 @@ export class ChessboardView {
         while (this.boardGroup.firstChild) {
             this.boardGroup.removeChild(this.boardGroup.lastChild)
         }
-        if (this.chessboard.props.style.borderType !== BORDER_TYPE.none) {
-            let boardBorder = Svg.addElement(this.boardGroup, "rect", {width: this.width, height: this.height})
-            boardBorder.setAttribute("class", "border")
-            if (this.chessboard.props.style.borderType === BORDER_TYPE.frame) {
-                const innerPos = this.borderSize
-                let borderInner = Svg.addElement(this.boardGroup, "rect", {
-                    x: innerPos,
-                    y: innerPos,
-                    width: this.width - innerPos * 2,
-                    height: this.height - innerPos * 2
-                })
-                borderInner.setAttribute("class", "border-inner")
-            }
+
+        let boardBorder = Svg.addElement(this.boardGroup, "rect", {width: this.width, height: this.height})
+        boardBorder.setAttribute("class", "border")
+        if (this.chessboard.props.style.borderType === BORDER_TYPE.frame) {
+            const innerPos = this.borderSize
+            let borderInner = Svg.addElement(this.boardGroup, "rect", {
+                x: innerPos,
+                y: innerPos,
+                width: this.width - innerPos * 2,
+                height: this.height - innerPos * 2
+            })
+            borderInner.setAttribute("class", "border-inner")
         }
+
         for (let i = 0; i < 64; i++) {
             const index = this.chessboard.state.orientation === COLOR.white ? i : 63 - i
             const squareColor = ((9 * index) & 8) === 0 ? 'black' : 'white'
@@ -276,7 +270,7 @@ export class ChessboardView {
 
     // Pieces //
 
-    drawPieces(squares = this.chessboard.state.position.squares) {
+    redrawPieces(squares = this.chessboard.state.position.squares) {
         const childNodes = Array.from(this.piecesGroup.childNodes)
         for (let i = 0; i < 64; i++) {
             const pieceName = squares[i]
@@ -314,7 +308,7 @@ export class ChessboardView {
     }
 
     setPieceVisibility(square, visible = true) {
-        const piece = this.getPiece(square)
+        const piece = this.getPieceElement(square)
         if (visible) {
             piece.setAttribute("visibility", "visible")
         } else {
@@ -322,11 +316,15 @@ export class ChessboardView {
         }
     }
 
-    getPiece(square) {
-        if(square.length < 2) {
+    getPieceElement(square) {
+        if (square.length < 2) {
             throw new Error("980e03")
         }
-        return this.piecesGroup.querySelector(`g[data-square='${square}']`)
+        const piece = this.piecesGroup.querySelector(`g[data-square='${square}']`)
+        if (!piece) {
+            console.error("no piece found on", square)
+        }
+        return piece
     }
 
     // Markers //
@@ -358,32 +356,6 @@ export class ChessboardView {
         return markerGroup
     }
 
-    // animation queue //
-
-    animatePieces(fromSquares, toSquares, callback) {
-        this.animationQueue.push({fromSquares: fromSquares, toSquares: toSquares, callback: callback})
-        if (!this.animationRunning) {
-            this.nextPieceAnimationInQueue()
-        }
-    }
-
-    nextPieceAnimationInQueue() {
-        const nextAnimation = this.animationQueue.shift()
-        if (nextAnimation !== undefined) {
-            this.animationRunning = true
-            this.currentAnimation = new ChessboardPiecesAnimation(this, nextAnimation.fromSquares, nextAnimation.toSquares, this.chessboard.props.animationDuration / (this.animationQueue.length + 1), () => {
-                if (!this.moveInput.draggablePiece) {
-                    this.drawPieces(nextAnimation.toSquares)
-                }
-                this.animationRunning = false
-                this.nextPieceAnimationInQueue()
-                if (nextAnimation.callback) {
-                    nextAnimation.callback()
-                }
-            })
-        }
-    }
-
     // enable and disable move input //
 
     enableMoveInput(eventHandler, color = undefined) {

package/src/cm-chessboard/{ChessboardViewAccessible.js → core/ViewAccessible.js}

@@ -3,9 +3,9 @@
  * Repository: https://github.com/shaack/cm-chessboard
  * License: MIT, see file 'LICENSE'
  */
-import {ChessboardView, renderPieceTitle} from "./ChessboardView.js"
-import {COLOR, INPUT_EVENT_TYPE} from "./Chessboard.js"
-import {piecesTranslations} from "./ChessboardView.js"
+import {View, renderPieceTitle} from "./View.js"
+import {COLOR, INPUT_EVENT_TYPE} from "../Chessboard.js"
+import {piecesTranslations} from "./View.js"
 
 const hlTranslations = {
     de: {
@@ -32,7 +32,7 @@ const hlTranslations = {
     }
 }
 
-export class ChessboardViewAccessible extends ChessboardView {
+export class ViewAccessible extends View {
 
     constructor(chessboard, callbackAfterCreation) {
         super(chessboard, callbackAfterCreation)
@@ -103,8 +103,8 @@ export class ChessboardViewAccessible extends ChessboardView {
         }
     }
 
-    drawPieces(squares = this.chessboard.state.position.squares) {
-        super.drawPieces(squares)
+    redrawPieces(squares = this.chessboard.state.position.squares) {
+        super.redrawPieces(squares)
         setTimeout(() => {
             if(this.chessboard.props.accessibility.boardAsTable) {
                 this.redrawBoardAsTable()