cm-chessboard 4.0.2 → 4.0.6

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 = {
@@ -48,13 +47,13 @@ export function renderPieceTitle(lang, name, color = undefined) {
     return title
 }
 
-export class ChessboardView {
+export class View {
 
     constructor(chessboard) {
-        this.animationRunning = false
-        this.currentAnimation = undefined
+        // 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)
@@ -104,11 +103,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 +171,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 +182,6 @@ export class ChessboardView {
         this.drawCoordinates()
         this.drawMarkers()
         this.visualizeInputState()
-        this.drawPieces(this.chessboard.state.position.squares)
     }
 
     // Board //
@@ -276,7 +275,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 +313,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 +321,15 @@ export class ChessboardView {
         }
     }
 
-    getPiece(square) {
+    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,38 +361,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()
-                    }
-                } else {
-                    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()

package/test/TestPiecesAnimation.js

@@ -5,32 +5,29 @@
  */
 
 import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
-import {ChessboardPiecesAnimation} from "../src/cm-chessboard/ChessboardPiecesAnimation.js"
-import {ChessboardState} from "../src/cm-chessboard/ChessboardState.js"
-import {ViewMock} from "./mocks/ViewMock.js"
-
-const cfa = new ChessboardPiecesAnimation(new ViewMock())
+import {State} from "../src/cm-chessboard/core/State.js"
+import {PositionsAnimation} from "../src/cm-chessboard/core/PositionAnimationsQueue.js"
 
 describe("TestPiecesAnimation", () => {
     it("should calculate square distances", () => {
-        assert.equals(cfa.squareDistance(0, 0), 0)
-        assert.equals(cfa.squareDistance(0, 1), 1)
-        assert.equals(cfa.squareDistance(0, 7), 7)
-        assert.equals(cfa.squareDistance(0, 8), 1)
-        assert.equals(cfa.squareDistance(10, 20), 2)
-        assert.equals(cfa.squareDistance(0, 63), 7)
-        assert.equals(cfa.squareDistance(8, 24), 2)
-        assert.equals(cfa.squareDistance(14, 24), 6)
+        assert.equals(PositionsAnimation.squareDistance(0, 0), 0)
+        assert.equals(PositionsAnimation.squareDistance(0, 1), 1)
+        assert.equals(PositionsAnimation.squareDistance(0, 7), 7)
+        assert.equals(PositionsAnimation.squareDistance(0, 8), 1)
+        assert.equals(PositionsAnimation.squareDistance(10, 20), 2)
+        assert.equals(PositionsAnimation.squareDistance(0, 63), 7)
+        assert.equals(PositionsAnimation.squareDistance(8, 24), 2)
+        assert.equals(PositionsAnimation.squareDistance(14, 24), 6)
     })
 
     it("should seek changes", () => {
-        const state1 = new ChessboardState()
+        const state1 = new State()
         state1.setPosition("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
-        const state2 = new ChessboardState()
+        const state2 = new State()
         state2.setPosition("rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR")
         const previousBoard1 = state1.position.squares
         const newBoard1 = state2.position.squares
-        const changes = cfa.seekChanges(previousBoard1, newBoard1)
+        const changes = PositionsAnimation.seekChanges(previousBoard1, newBoard1)
 
         assert.equals(changes[0].type,0 )
         assert.equals(changes[0].piece, "wn")

package/test/TestPosition.js

@@ -5,7 +5,7 @@
  */
 
 import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
-import {Position} from "../src/cm-chessboard/Position.js"
+import {Position} from "../src/cm-chessboard/core/Position.js"
 
 describe("TestPosition", () => {
     it("should convert square to index", () => {