cm-chessboard 3.18.2 → 4.0.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "3.18.2",
+  "version": "4.0.1-beta.1",
   "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,7 +4,7 @@
  * License: MIT, see file 'LICENSE'
  */
 
-import {SQUARE_COORDINATES, ChessboardView} from "./ChessboardView.js"
+import {ChessboardView} from "./ChessboardView.js"
 import {ChessboardState} from "./ChessboardState.js"
 import {ChessboardViewAccessible} from "./ChessboardViewAccessible.js"
 
@@ -81,7 +81,17 @@ export class Chessboard {
         if (this.props.style.aspectRatio) {
             this.context.style.height = (this.context.offsetWidth * this.props.style.aspectRatio) + "px"
         }
+
         this.state = new ChessboardState()
+        const viewType = this.props.accessible ? ChessboardViewAccessible : ChessboardView
+        this.view = new viewType(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) {
@@ -90,36 +100,34 @@ export class Chessboard {
             this.state.setPosition(this.props.position)
         }
         this.state.orientation = this.props.orientation
-        const viewType = this.props.accessible ? ChessboardViewAccessible : ChessboardView
-        this.view = new viewType(this)
+        this.view.redraw()
     }
-
     // API //
 
     setPiece(square, piece) {
-        this.state.setPiece(this.state.squareToIndex(square), piece)
-        this.view.drawPieces(this.state.squares)
+        this.state.position.setPiece(square, piece)
+        this.view.drawPieces(this.state.position.squares)
     }
 
     getPiece(square) {
-        return this.state.squares[this.state.squareToIndex(square)]
+        return this.state.position.getPiece(square)
     }
 
     movePiece(squareFrom, squareTo, animated = true) {
         return new Promise((resolve, reject) => {
-            const prevSquares = this.state.squares.slice(0) // clone
+            const prevSquares = this.state.position.clone().squares
             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
+                this.state.position.setPiece(squareFrom, null)
+                this.state.position.setPiece(squareTo, pieceFrom)
                 if (animated) {
-                    this.view.animatePieces(prevSquares, this.state.squares, () => {
+                    this.view.animatePieces(prevSquares, this.state.position.squares, () => {
                         resolve()
                     })
                 } else {
-                    this.view.drawPieces(this.state.squares)
+                    this.view.drawPieces(this.state.position.squares)
                     resolve()
                 }
             }
@@ -138,14 +146,14 @@ export class Chessboard {
             const fenNormalized = fenParts[0]
 
             if (fenNormalized !== currentFen) {
-                const prevSquares = this.state.squares.slice(0) // clone
+                const prevSquares = this.state.position.squares.slice(0) // clone
                 this.state.setPosition(fen)
                 if (animated) {
-                    this.view.animatePieces(prevSquares, this.state.squares.slice(0), () => {
+                    this.view.animatePieces(prevSquares, this.state.position.squares.slice(0), () => {
                         resolve()
                     })
                 } else {
-                    this.view.drawPieces(this.state.squares)
+                    this.view.drawPieces(this.state.position.squares)
                     resolve()
                 }
             } else {
@@ -162,18 +170,18 @@ export class Chessboard {
         if (!type) {
             console.error("Error addMarker(), type is " + type)
         }
-        this.state.addMarker(this.state.squareToIndex(square), type)
+        this.state.addMarker(square, type)
         this.view.drawMarkers()
     }
 
     getMarkers(square = undefined, type = undefined) {
         const markersFound = []
         this.state.markers.forEach((marker) => {
-            const markerSquare = SQUARE_COORDINATES[marker.index]
+            const markerSquare = marker.square
             if (!square && (!type || type === marker.type) ||
                 !type && square === markerSquare ||
                 type === marker.type && square === markerSquare) {
-                markersFound.push({square: SQUARE_COORDINATES[marker.index], type: marker.type})
+                markersFound.push({square: marker.square, type: marker.type})
             }
         })
         return markersFound
@@ -236,7 +244,7 @@ export class Chessboard {
             return
         }
         this.squareSelectListener = function (e) {
-            const index = e.target.getAttribute("data-index")
+            const square = e.target.getAttribute("data-square")
             if (e.type === "contextmenu") {
                 // disable context menu
                 e.preventDefault()
@@ -245,7 +253,7 @@ export class Chessboard {
             eventHandler({
                 chessboard: this,
                 type: e.button === 2 ? SQUARE_SELECT_TYPE.secondary : SQUARE_SELECT_TYPE.primary,
-                square: SQUARE_COORDINATES[index]
+                square: square
             })
         }
         this.context.addEventListener("contextmenu", this.squareSelectListener)

package/src/cm-chessboard/ChessboardMoveInput.js

@@ -4,7 +4,8 @@
  * License: MIT, see file 'LICENSE'
  */
 
-import {SQUARE_COORDINATES, Svg} from "./ChessboardView.js"
+import {Svg} from "./ChessboardView.js"
+// import {Position} from "./Position.js"
 
 const STATE = {
     waitForInputStart: 0,
@@ -61,8 +62,8 @@ export class ChessboardMoveInput {
                     removeEventListener(this.pointerUpListener.type, this.pointerUpListener)
                     this.pointerUpListener = undefined
                 }
-                this.startIndex = params.index
-                this.endIndex = undefined
+                this.fromSquare = params.square
+                this.toSquare = undefined
                 this.movedPiece = params.piece
                 this.updateStartEndMarkers()
                 this.startPoint = params.point
@@ -101,7 +102,7 @@ export class ChessboardMoveInput {
                     this.draggablePiece = undefined
                 }
                 if (prevState === STATE.dragTo) {
-                    this.view.setPieceVisibility(params.index)
+                    this.view.setPieceVisibility(params.square)
                 }
                 break
 
@@ -117,7 +118,7 @@ export class ChessboardMoveInput {
                     throw new Error("moveInputState")
                 }
                 if (this.view.chessboard.state.inputEnabled) {
-                    this.view.setPieceVisibility(params.index, false)
+                    this.view.setPieceVisibility(params.square, false)
                     this.createDraggablePiece(params.piece)
                 }
                 break
@@ -127,7 +128,7 @@ export class ChessboardMoveInput {
                     throw new Error("moveInputState")
                 }
                 if (this.view.chessboard.state.inputEnabled) {
-                    this.view.setPieceVisibility(params.index, false)
+                    this.view.setPieceVisibility(params.square, false)
                     this.createDraggablePiece(params.piece)
                 }
                 break
@@ -136,18 +137,18 @@ export class ChessboardMoveInput {
                 if ([STATE.dragTo, STATE.clickTo, STATE.clickDragTo].indexOf(prevState) === -1) {
                     throw new Error("moveInputState")
                 }
-                this.endIndex = params.index
-                if (this.endIndex && this.moveDoneCallback(this.startIndex, this.endIndex)) {
-                    const prevSquares = this.chessboard.state.squares.slice(0)
-                    this.chessboard.state.setPiece(this.startIndex, undefined)
-                    this.chessboard.state.setPiece(this.endIndex, this.movedPiece)
+                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.squares.slice(0), () => {
+                        this.view.animatePieces(prevSquares, this.chessboard.state.position.clone().squares, () => {
                             this.setMoveInputState(STATE.reset)
                         })
                     } else {
-                        this.view.drawPieces(this.chessboard.state.squares)
+                        this.view.drawPieces(this.chessboard.state.position.squares)
                         // this.view.animationQueue = [] // todo remove all animations (See PR #59)
                         this.setMoveInputState(STATE.reset)
                     }
@@ -158,11 +159,11 @@ export class ChessboardMoveInput {
                 break
 
             case STATE.reset:
-                if (this.startIndex && !this.endIndex && this.movedPiece) {
-                    this.chessboard.state.setPiece(this.startIndex, this.movedPiece)
+                if (this.fromSquare && !this.toSquare && this.movedPiece) {
+                    this.chessboard.state.position.setPiece(this.fromSquare, this.movedPiece)
                 }
-                this.startIndex = undefined
-                this.endIndex = undefined
+                this.fromSquare = undefined
+                this.toSquare = undefined
                 this.movedPiece = undefined
                 this.updateStartEndMarkers()
                 if (this.draggablePiece) {
@@ -212,19 +213,19 @@ export class ChessboardMoveInput {
 
     onPointerDown(e) {
         if (e.type === "mousedown" && e.button === 0 || e.type === "touchstart") {
-            const index = e.target.getAttribute("data-index")
-            const pieceElement = this.view.getPiece(index)
-            let pieceName, color
-            if (pieceElement) {
-                pieceName = pieceElement.getAttribute("data-piece")
-                color = pieceName ? pieceName.substr(0, 1) : undefined
+            const square = e.target.getAttribute("data-square")
+            const pieceName = this.chessboard.getPiece(square)
+            console.log("onPointerDown", square, pieceName)
+            let color
+            if (pieceName) {
+                color = pieceName ? pieceName.substring(0, 1) : undefined
                 // allow scrolling, if not pointed on draggable piece
                 if (color === "w" && this.chessboard.state.inputWhiteEnabled ||
                     color === "b" && this.chessboard.state.inputBlackEnabled) {
                     e.preventDefault()
                 }
             }
-            if (index) { // pointer on square
+            if (square) { // pointer on square
                 if (this.moveInputState !== STATE.waitForInputStart ||
                     this.chessboard.state.inputWhiteEnabled && color === "w" ||
                     this.chessboard.state.inputBlackEnabled && color === "b") {
@@ -234,31 +235,31 @@ export class ChessboardMoveInput {
                     } else if (e.type === "touchstart") {
                         point = {x: e.touches[0].clientX, y: e.touches[0].clientY}
                     }
-                    if (this.moveInputState === STATE.waitForInputStart && pieceName && this.moveStartCallback(index)) {
+                    if (this.moveInputState === STATE.waitForInputStart && pieceName && this.moveStartCallback(square)) {
                         this.setMoveInputState(STATE.pieceClickedThreshold, {
-                            index: index,
+                            square: square,
                             piece: pieceName,
                             point: point,
                             type: e.type
                         })
                     } else if (this.moveInputState === STATE.clickTo) {
-                        if (index === this.startIndex) {
+                        if (square === this.fromSquare) {
                             this.setMoveInputState(STATE.secondClickThreshold, {
-                                index: index,
+                                square: square,
                                 piece: pieceName,
                                 point: point,
                                 type: e.type
                             })
                         } else {
-                            const pieceName = this.chessboard.getPiece(SQUARE_COORDINATES[index])
-                            const pieceColor = pieceName ? pieceName.substr(0, 1) : undefined
-                            const startPieceName = this.chessboard.getPiece(SQUARE_COORDINATES[this.startIndex])
-                            const startPieceColor = startPieceName ? startPieceName.substr(0, 1) : undefined
+                            const pieceName = this.chessboard.getPiece(square)
+                            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
-                                this.moveCanceledCallback(MOVE_CANCELED_REASON.clickedAnotherPiece, this.startIndex, index)
-                                if (this.moveStartCallback(index)) {
+                                this.moveCanceledCallback(MOVE_CANCELED_REASON.clickedAnotherPiece, this.fromSquare, square)
+                                if (this.moveStartCallback(square)) {
                                     this.setMoveInputState(STATE.pieceClickedThreshold, {
-                                        index: index,
+                                        square: square,
                                         piece: pieceName,
                                         point: point,
                                         type: e.type
@@ -267,7 +268,7 @@ export class ChessboardMoveInput {
                                     this.setMoveInputState(STATE.reset)
                                 }
                             } else {
-                                this.setMoveInputState(STATE.moveDone, {index: index})
+                                this.setMoveInputState(STATE.moveDone, {square: square})
                             }
                         }
                     }
@@ -294,9 +295,9 @@ export class ChessboardMoveInput {
         if (this.moveInputState === STATE.pieceClickedThreshold || this.moveInputState === STATE.secondClickThreshold) {
             if (Math.abs(this.startPoint.x - clientX) > DRAG_THRESHOLD || Math.abs(this.startPoint.y - clientY) > DRAG_THRESHOLD) {
                 if (this.moveInputState === STATE.secondClickThreshold) {
-                    this.setMoveInputState(STATE.clickDragTo, {index: this.startIndex, piece: this.movedPiece})
+                    this.setMoveInputState(STATE.clickDragTo, {square: this.fromSquare, piece: this.movedPiece})
                 } else {
-                    this.setMoveInputState(STATE.dragTo, {index: this.startIndex, piece: this.movedPiece})
+                    this.setMoveInputState(STATE.dragTo, {square: this.fromSquare, piece: this.movedPiece})
                 }
                 if (this.view.chessboard.state.inputEnabled) {
                     this.moveDraggablePiece(pageX, pageY)
@@ -304,17 +305,17 @@ export class ChessboardMoveInput {
             }
         } else if (this.moveInputState === STATE.dragTo || this.moveInputState === STATE.clickDragTo || this.moveInputState === STATE.clickTo) {
             if (target && target.getAttribute && target.parentElement === this.view.boardGroup) {
-                const index = target.getAttribute("data-index")
-                if (index !== this.startIndex && index !== this.endIndex) {
-                    this.endIndex = index
+                const square = target.getAttribute("data-square")
+                if (square !== this.fromSquare && square !== this.toSquare) {
+                    this.toSquare = square
                     this.updateStartEndMarkers()
-                } else if (index === this.startIndex && this.endIndex !== undefined) {
-                    this.endIndex = undefined
+                } else if (square === this.fromSquare && this.toSquare !== undefined) {
+                    this.toSquare = undefined
                     this.updateStartEndMarkers()
                 }
             } else {
-                if (this.endIndex !== undefined) {
-                    this.endIndex = undefined
+                if (this.toSquare !== undefined) {
+                    this.toSquare = undefined
                     this.updateStartEndMarkers()
                 }
             }
@@ -332,33 +333,33 @@ export class ChessboardMoveInput {
             target = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY)
         }
         if (target && target.getAttribute) {
-            const index = target.getAttribute("data-index")
+            const square = target.getAttribute("data-square")
 
-            if (index) {
+            if (square) {
                 if (this.moveInputState === STATE.dragTo || this.moveInputState === STATE.clickDragTo) {
-                    if (this.startIndex === index) {
+                    if (this.fromSquare === square) {
                         if (this.moveInputState === STATE.clickDragTo) {
-                            this.chessboard.state.setPiece(this.startIndex, this.movedPiece)
-                            this.view.setPieceVisibility(this.startIndex)
-                            this.moveCanceledCallback(MOVE_CANCELED_REASON.draggedBack, index, index)
+                            this.chessboard.state.setPiece(this.fromSquare, this.movedPiece)
+                            this.view.setPieceVisibility(this.fromSquare)
+                            this.moveCanceledCallback(MOVE_CANCELED_REASON.draggedBack, square, square)
                             this.setMoveInputState(STATE.reset)
                         } else {
-                            this.setMoveInputState(STATE.clickTo, {index: index})
+                            this.setMoveInputState(STATE.clickTo, {square: square})
                         }
                     } else {
-                        this.setMoveInputState(STATE.moveDone, {index: index})
+                        this.setMoveInputState(STATE.moveDone, {square: square})
                     }
                 } else if (this.moveInputState === STATE.pieceClickedThreshold) {
-                    this.setMoveInputState(STATE.clickTo, {index: index})
+                    this.setMoveInputState(STATE.clickTo, {square: square})
                 } else if (this.moveInputState === STATE.secondClickThreshold) {
                     this.setMoveInputState(STATE.reset)
-                    this.moveCanceledCallback(MOVE_CANCELED_REASON.secondClick, index, index)
+                    this.moveCanceledCallback(MOVE_CANCELED_REASON.secondClick, square, square)
                 }
             } else {
                 this.view.drawPieces()
-                const moveStartIndex = this.startIndex
+                const moveStartSquare = this.fromSquare
                 this.setMoveInputState(STATE.reset)
-                this.moveCanceledCallback(MOVE_CANCELED_REASON.movedOutOfBoard, moveStartIndex, undefined)
+                this.moveCanceledCallback(MOVE_CANCELED_REASON.movedOutOfBoard, moveStartSquare, undefined)
             }
         } else {
             this.view.drawPieces()
@@ -374,13 +375,13 @@ export class ChessboardMoveInput {
             this.chessboard.state.removeMarkers(undefined, this.chessboard.props.style.moveToMarker)
         }
         if (this.chessboard.props.style.moveFromMarker) {
-            if (this.startIndex) {
-                this.chessboard.state.addMarker(this.startIndex, this.chessboard.props.style.moveFromMarker)
+            if (this.fromSquare) {
+                this.chessboard.state.addMarker(this.fromSquare, this.chessboard.props.style.moveFromMarker)
             }
         }
         if (this.chessboard.props.style.moveToMarker) {
-            if (this.endIndex) {
-                this.chessboard.state.addMarker(this.endIndex, this.chessboard.props.style.moveToMarker)
+            if (this.toSquare) {
+                this.chessboard.state.addMarker(this.toSquare, this.chessboard.props.style.moveToMarker)
             }
         }
         this.view.drawMarkers()

package/src/cm-chessboard/ChessboardPiecesAnimation.js

@@ -3,6 +3,7 @@
  * Repository: https://github.com/shaack/cm-chessboard
  * License: MIT, see file 'LICENSE'
  */
+import {Position} from "./Position.js"
 
 const CHANGE_TYPE = {
     move: 0,
@@ -75,16 +76,16 @@ export class ChessboardPiecesAnimation {
             }
             switch (change.type) {
                 case CHANGE_TYPE.move:
-                    animatedItem.element = this.view.getPiece(change.atIndex)
-                    animatedItem.atPoint = this.view.squareIndexToPoint(change.atIndex)
-                    animatedItem.toPoint = this.view.squareIndexToPoint(change.toIndex)
+                    animatedItem.element = this.view.getPiece(Position.indexToSquare(change.atIndex))
+                    animatedItem.atPoint = this.view.indexToPoint(change.atIndex)
+                    animatedItem.toPoint = this.view.indexToPoint(change.toIndex)
                     break
                 case CHANGE_TYPE.appear:
-                    animatedItem.element = this.view.drawPiece(change.atIndex, change.piece)
+                    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.getPiece(change.atIndex)
+                    animatedItem.element = this.view.getPiece(Position.indexToSquare(change.atIndex))
                     break
             }
             animatedElements.push(animatedItem)
@@ -138,4 +139,4 @@ export class ChessboardPiecesAnimation {
         return Math.max(Math.abs(rank2 - rank1), Math.abs(file2 - file1))
     }
 
-}
+}

package/src/cm-chessboard/ChessboardState.js

@@ -3,11 +3,12 @@
  * Repository: https://github.com/shaack/cm-chessboard
  * License: MIT, see file 'LICENSE'
  */
+import {Position} from "./Position.js"
 
 export class ChessboardState {
 
     constructor() {
-        this.squares = new Array(64).fill(null)
+        this.position = new Position()
         this.orientation = undefined
         this.markers = []
         this.inputWhiteEnabled = false
@@ -15,49 +16,41 @@ export class ChessboardState {
         this.inputEnabled = false
         this.squareSelectEnabled = false
     }
-
+/*
     getPieces() {
-        const pieces = []
-        const sortBy = ['k', 'q', 'r', 'b', 'n', 'p']
-        const sort = (a, b) => {
-            return sortBy.indexOf(a.name) - sortBy.indexOf(b.name)
-        }
-        for(let i=0; i<64; i++) {
-            const piece = this.squares[i]
-            if(piece) {
-                pieces.push({
-                    name: piece.charAt(1),
-                    color:  piece.charAt(0),
-                    position: this.indexToSquare(i)
-                })
-            }
-        }
-        pieces.sort(sort)
-        return pieces
+        return this.position.getPieces()
     }
 
-    setPiece(index, piece) {
-        this.squares[index] = piece
+    setPiece(square, piece) {
+        this.position.setPiece(square, piece)
+    }
+*/
+    setPosition(fen) {
+        this.position.setFen(fen)
     }
 
-    addMarker(index, type) {
-        this.markers.push({index: index, type: type})
+    getPosition() {
+        return this.position.getFen()
     }
 
-    removeMarkers(index = undefined, type = undefined) {
-        if (!index && !type) {
+    addMarker(square, type) {
+        this.markers.push({square: square, type: type})
+    }
+
+    removeMarkers(square = undefined, type = undefined) {
+        if (!square && !type) {
             this.markers = []
         } else {
             this.markers = this.markers.filter((marker) => {
                 if (!marker.type) {
-                    if (index === marker.index) {
+                    if (square === marker.square) {
                         return false
                     }
-                } else if (!index) {
+                } else if (!square) {
                     if (marker.type === type) {
                         return false
                     }
-                } else if (marker.type === type && index === marker.index) {
+                } else if (marker.type === type && square === marker.square) {
                     return false
                 }
                 return true
@@ -65,74 +58,4 @@ export class ChessboardState {
         }
     }
 
-    setPosition(fen) {
-        if (fen) {
-            const parts = fen.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)
-                    let ret = ''
-                    for (let i = 0; i < numSpaces; i++) {
-                        ret += '-'
-                    }
-                    return ret
-                })
-                for (let c = 0; c < 8; c++) {
-                    const char = row.substr(c, 1)
-                    let piece = null
-                    if (char !== '-') {
-                        if (char.toUpperCase() === char) {
-                            piece = `w${char.toLowerCase()}`
-                        } else {
-                            piece = `b${char}`
-                        }
-                    }
-                    this.squares[part * 8 + c] = piece
-                }
-            }
-        }
-    }
-
-    getPosition() {
-        let parts = new Array(8).fill("")
-        for (let part = 0; part < 8; part++) {
-            let spaceCounter = 0
-            for (let i = 0; i < 8; i++) {
-                const piece = this.squares[part * 8 + i]
-                if (!piece) {
-                    spaceCounter++
-                } else {
-                    if (spaceCounter > 0) {
-                        parts[7 - part] += spaceCounter
-                        spaceCounter = 0
-                    }
-                    const color = piece.substr(0, 1)
-                    const name = piece.substr(1, 1)
-                    if (color === "w") {
-                        parts[7 - part] += name.toUpperCase()
-                    } else {
-                        parts[7 - part] += name
-                    }
-                }
-            }
-            if (spaceCounter > 0) {
-                parts[7 - part] += spaceCounter
-                spaceCounter = 0
-            }
-        }
-        return parts.join("/")
-    }
-
-    squareToIndex(square) {
-        const file = square.substr(0, 1).charCodeAt(0) - 97
-        const rank = square.substr(1, 1) - 1
-        return 8 * rank + file
-    }
-
-    indexToSquare(index) {
-        const file = String.fromCharCode(index % 8 + 97)
-        const rank = Math.floor(index / 8) + 1
-        return file + rank
-    }
-
 }

package/src/cm-chessboard/ChessboardView.js

@@ -7,6 +7,7 @@
 import {ChessboardMoveInput} from "./ChessboardMoveInput.js"
 import {COLOR, INPUT_EVENT_TYPE, BORDER_TYPE} from "./Chessboard.js"
 import {ChessboardPiecesAnimation} from "./ChessboardPiecesAnimation.js"
+import {Position} from "./Position.js"
 
 export const piecesTranslations = {
     en: {
@@ -46,7 +47,7 @@ export function renderPieceTitle(lang, name, color = undefined) {
     }
     return title
 }
-
+/*
 export const SQUARE_COORDINATES = [
     "a1", "b1", "c1", "d1", "e1", "f1", "g1", "h1",
     "a2", "b2", "c2", "d2", "e2", "f2", "g2", "h2",
@@ -57,7 +58,7 @@ export const SQUARE_COORDINATES = [
     "a7", "b7", "c7", "d7", "e7", "f7", "g7", "h7",
     "a8", "b8", "c8", "d8", "e8", "f8", "g8", "h8"
 ]
-
+*/
 export class ChessboardView {
 
     constructor(chessboard) {
@@ -195,7 +196,7 @@ export class ChessboardView {
         this.drawCoordinates()
         this.drawMarkers()
         this.visualizeInputState()
-        this.drawPieces(this.chessboard.state.squares)
+        this.drawPieces(this.chessboard.state.position.squares)
     }
 
     // Board //
@@ -222,12 +223,12 @@ export class ChessboardView {
             const index = this.chessboard.state.orientation === COLOR.white ? i : 63 - i
             const squareColor = ((9 * index) & 8) === 0 ? 'black' : 'white'
             const fieldClass = `square ${squareColor}`
-            const point = this.squareIndexToPoint(index)
+            const point = this.squareToPoint(Position.indexToSquare(index))
             const squareRect = Svg.addElement(this.boardGroup, "rect", {
                 x: point.x, y: point.y, width: this.squareWidth, height: this.squareHeight
             })
             squareRect.setAttribute("class", fieldClass)
-            squareRect.setAttribute("data-index", "" + index)
+            squareRect.setAttribute("data-square", Position.indexToSquare(index))
         }
     }
 
@@ -289,12 +290,12 @@ export class ChessboardView {
 
     // Pieces //
 
-    drawPieces(squares = this.chessboard.state.squares) {
+    drawPieces(squares = this.chessboard.state.position.squares) {
         const childNodes = Array.from(this.piecesGroup.childNodes)
         for (let i = 0; i < 64; i++) {
             const pieceName = squares[i]
             if (pieceName) {
-                this.drawPiece(i, pieceName)
+                this.drawPiece(Position.indexToSquare(i), pieceName)
             }
         }
         for (const childNode of childNodes) {
@@ -302,11 +303,11 @@ export class ChessboardView {
         }
     }
 
-    drawPiece(index, pieceName) {
+    drawPiece(square, pieceName) {
         const pieceGroup = Svg.addElement(this.piecesGroup, "g")
         pieceGroup.setAttribute("data-piece", pieceName)
-        pieceGroup.setAttribute("data-index", index)
-        const point = this.squareIndexToPoint(index)
+        pieceGroup.setAttribute("data-square", square)
+        const point = this.squareToPoint(square)
         const transform = (this.svg.createSVGTransform())
         transform.setTranslate(point.x, point.y)
         pieceGroup.transform.baseVal.appendItem(transform)
@@ -326,18 +327,20 @@ export class ChessboardView {
         return pieceGroup
     }
 
-    setPieceVisibility(index, visible = true) {
-        const piece = this.getPiece(index)
+    setPieceVisibility(square, visible = true) {
+        const piece = this.getPiece(square)
         if (visible) {
             piece.setAttribute("visibility", "visible")
         } else {
             piece.setAttribute("visibility", "hidden")
         }
-
     }
 
-    getPiece(index) {
-        return this.piecesGroup.querySelector(`g[data-index='${index}']`)
+    getPiece(square) {
+        if(square.length < 2) {
+            throw new Error("980e03")
+        }
+        return this.piecesGroup.querySelector(`g[data-square='${square}']`)
     }
 
     // Markers //
@@ -353,9 +356,10 @@ export class ChessboardView {
     }
 
     drawMarker(marker) {
+        // console.log("drawMarker", marker)
         const markerGroup = Svg.addElement(this.markersGroup, "g")
-        markerGroup.setAttribute("data-index", marker.index)
-        const point = this.squareIndexToPoint(marker.index)
+        markerGroup.setAttribute("data-square", marker.square)
+        const point = this.squareToPoint(marker.square)
         const transform = (this.svg.createSVGTransform())
         transform.setTranslate(point.x, point.y)
         markerGroup.transform.baseVal.appendItem(transform)
@@ -426,39 +430,39 @@ export class ChessboardView {
 
     // callbacks //
 
-    moveStartCallback(index) {
+    moveStartCallback(square) {
         if (this.moveInputCallback) {
             return this.moveInputCallback({
                 chessboard: this.chessboard,
                 type: INPUT_EVENT_TYPE.moveStart,
-                square: SQUARE_COORDINATES[index]
+                square: square
             })
         } else {
             return true
         }
     }
 
-    moveDoneCallback(fromIndex, toIndex) {
+    moveDoneCallback(squareFrom, squareTo) {
         if (this.moveInputCallback) {
             return this.moveInputCallback({
                 chessboard: this.chessboard,
                 type: INPUT_EVENT_TYPE.moveDone,
-                squareFrom: SQUARE_COORDINATES[fromIndex],
-                squareTo: SQUARE_COORDINATES[toIndex]
+                squareFrom: squareFrom,
+                squareTo: squareTo
             })
         } else {
             return true
         }
     }
 
-    moveCanceledCallback(reason, fromIndex, toIndex) {
+    moveCanceledCallback(reason, squareFrom, squareTo) {
         if (this.moveInputCallback) {
             this.moveInputCallback({
                 chessboard: this.chessboard,
                 type: INPUT_EVENT_TYPE.moveCanceled,
                 reason: reason,
-                squareFrom: SQUARE_COORDINATES[fromIndex],
-                squareTo: toIndex ? SQUARE_COORDINATES[toIndex] : undefined
+                squareFrom: squareFrom,
+                squareTo: squareTo
             })
         }
     }
@@ -475,7 +479,7 @@ export class ChessboardView {
         }
     }
 
-    squareIndexToPoint(index) {
+    indexToPoint(index) {
         let x, y
         if (this.chessboard.state.orientation === COLOR.white) {
             x = this.borderSize + (index % 8) * this.squareWidth
@@ -487,6 +491,11 @@ export class ChessboardView {
         return {x: x, y: y}
     }
 
+    squareToPoint(square) {
+        const index = Position.squareToIndex(square)
+        return this.indexToPoint(index)
+    }
+
 }
 
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg"

package/src/cm-chessboard/ChessboardViewAccessible.js

@@ -4,7 +4,7 @@
  * License: MIT, see file 'LICENSE'
  */
 import {ChessboardView, renderPieceTitle} from "./ChessboardView.js"
-import {COLOR} from "./Chessboard.js"
+import {COLOR, INPUT_EVENT_TYPE} from "./Chessboard.js"
 import {piecesTranslations} from "./ChessboardView.js"
 
 const hlTranslations = {
@@ -55,7 +55,15 @@ export class ChessboardViewAccessible extends ChessboardView {
         this.inputTo = this.movePieceFormContainer.querySelector(".input-to")
         this.moveButton = this.movePieceFormContainer.querySelector(".button-move")
         this.moveButton.addEventListener("click", () => {
-            this.chessboard.movePiece(this.inputFrom.value, this.inputTo.value, true)
+            if (this.moveInputCallback({
+                chessboard: this.chessboard,
+                type: INPUT_EVENT_TYPE.moveDone,
+                squareFrom: this.inputFrom.value,
+                squareTo: this.inputTo.value
+            })) {
+                this.inputFrom.value = ""
+                this.inputTo.value = ""
+            }
         })
         this.accessibleContainer.appendChild(this.movePieceFormContainer)
 
@@ -90,7 +98,7 @@ export class ChessboardViewAccessible extends ChessboardView {
         }
     }
 
-    drawPieces(squares = this.chessboard.state.squares) {
+    drawPieces(squares = this.chessboard.state.position.squares) {
         super.drawPieces(squares)
         setTimeout(() => {
             this.redrawBoardAsTable()
@@ -99,7 +107,7 @@ export class ChessboardViewAccessible extends ChessboardView {
     }
 
     redrawPiecesLists() {
-        const pieces = this.chessboard.state.getPieces()
+        const pieces = this.chessboard.state.position.getPieces()
         let listW = ""
         let listB = ""
         for (const piece of pieces) {
@@ -117,7 +125,7 @@ export class ChessboardViewAccessible extends ChessboardView {
     }
 
     redrawBoardAsTable() {
-        const squares = this.chessboard.state.squares.slice()
+        const squares = this.chessboard.state.position.squares.slice()
         const ranks = ["a", "b", "c", "d", "e", "f", "g", "h"]
         const files = ["1", "2", "3", "4", "5", "6", "7", "8"]
         if (this.chessboard.state.orientation === COLOR.black) {
@@ -135,7 +143,7 @@ export class ChessboardViewAccessible extends ChessboardView {
             for (let y = 0; y < 8; y++) {
                 const pieceCode = squares[y % 8 + x * 8]
                 let color, name
-                if(pieceCode) {
+                if (pieceCode) {
                     color = pieceCode.charAt(0)
                     name = pieceCode.charAt(1)
                     html += `<td>${renderPieceTitle(this.lang, name, color)}</td>`

package/src/cm-chessboard/Observed.js

@@ -0,0 +1,40 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+
+export function Observed(target) {
+    const self = this
+    this.target = target
+    this.observers = []
+    this.target.addObserver = (callback, propertyName = undefined) => {
+        self.observers.push({callback: callback, property: propertyName})
+        // console.log(this.observers)
+    }
+    this.target.destruct = () => {
+        self.observers = []
+    }
+    this.proxy = new Proxy(this.target, {
+        set(target, property, value) {
+            const oldValue = target[property]
+            target[property] = value
+            // console.log("set", "property", property, "value", value)
+            for (const observer of self.observers) {
+                clearTimeout(observer.callbackDebounce)
+                observer.callbackDebounce = setTimeout(() => {
+                    if (!observer.property || observer.property === property) {
+                        observer.callback({
+                            target: target,
+                            property: property,
+                            value: value,
+                            oldValue: oldValue
+                        })
+                    }
+                })
+            }
+            return true
+        }
+    })
+    return this.proxy
+}

package/src/cm-chessboard/Position.js

@@ -0,0 +1,115 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+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 Position {
+
+    constructor(fen = undefined) {
+        this.squares = new Array(64).fill(null)
+        this.setFen(fen)
+    }
+    setFen(fen = FEN_START_POSITION) {
+        const parts = fen.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)
+                let ret = ''
+                for (let i = 0; i < numSpaces; i++) {
+                    ret += '-'
+                }
+                return ret
+            })
+            for (let c = 0; c < 8; c++) {
+                const char = row.substring(c, c + 1)
+                let piece = null
+                if (char !== '-') {
+                    if (char.toUpperCase() === char) {
+                        piece = `w${char.toLowerCase()}`
+                    } else {
+                        piece = `b${char}`
+                    }
+                }
+                this.squares[part * 8 + c] = piece
+            }
+        }
+    }
+    getFen() {
+        let parts = new Array(8).fill("")
+        for (let part = 0; part < 8; part++) {
+            let spaceCounter = 0
+            for (let i = 0; i < 8; i++) {
+                const piece = this.squares[part * 8 + i]
+                if (!piece) {
+                    spaceCounter++
+                } else {
+                    if (spaceCounter > 0) {
+                        parts[7 - part] += spaceCounter
+                        spaceCounter = 0
+                    }
+                    const color = piece.substring(0, 1)
+                    const name = piece.substring(1, 2)
+                    if (color === "w") {
+                        parts[7 - part] += name.toUpperCase()
+                    } else {
+                        parts[7 - part] += name
+                    }
+                }
+            }
+            if (spaceCounter > 0) {
+                parts[7 - part] += spaceCounter
+                spaceCounter = 0
+            }
+        }
+        return parts.join("/")
+    }
+    getPieces() {
+        const pieces = []
+        const sortBy = ['k', 'q', 'r', 'b', 'n', 'p']
+        const sort = (a, b) => {
+            return sortBy.indexOf(a.name) - sortBy.indexOf(b.name)
+        }
+        for(let i=0; i<64; i++) {
+            const piece = this.squares[i]
+            if(piece) {
+                pieces.push({
+                    name: piece.charAt(1),
+                    color:  piece.charAt(0),
+                    position: Position.indexToSquare(i)
+                })
+            }
+        }
+        pieces.sort(sort)
+        return pieces
+    }
+
+    setPiece(square, piece) {
+        this.squares[Position.squareToIndex(square)] = piece
+    }
+
+    getPiece(square) {
+        return this.squares[Position.squareToIndex(square)]
+    }
+
+    static squareToIndex(square) {
+        const file = square.substring(0, 1).charCodeAt(0) - 97
+        const rank = square.substring(1, 2) - 1
+        return 8 * rank + file
+    }
+
+    static indexToSquare(index) {
+        const file = String.fromCharCode(index % 8 + 97)
+        const rank = Math.floor(index / 8) + 1
+        return file + rank
+    }
+
+    clone() {
+        const cloned = new Position()
+        cloned.squares = this.squares.slice(0)
+        return cloned
+    }
+
+}

package/test/TestChessboard.js

@@ -0,0 +1,53 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+
+import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
+import {PIECE, Chessboard} from "../src/cm-chessboard/Chessboard.js"
+
+describe("TestChessboard", () => {
+
+    it("should create and destroy a chessboard", () => {
+        const chessboard = new Chessboard(document.getElementById("TestPosition"), {
+            sprite: {url: "../assets/images/chessboard-sprite.svg"},
+            position: "start"
+        })
+        assert.equals(chessboard.getPosition(), "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
+        chessboard.destroy()
+    })
+
+    it("should set and get the position", () => {
+        const chessboard = new Chessboard(document.getElementById("TestPosition"),
+            {sprite: {url: "../assets/images/chessboard-sprite.svg"},})
+        chessboard.setPosition("rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11", false).then(() => {
+            assert.equals(chessboard.getPosition(), "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR")
+            chessboard.destroy()
+        })
+    })
+
+    it("should get pieces on squares", () => {
+        const chessboard = new Chessboard(document.getElementById("TestPosition"), {
+            sprite: {url: "../assets/images/chessboard-sprite.svg"},
+            position: "start"
+        })
+        assert.equals(chessboard.getPiece("d1"), "wq")
+        assert.equals(chessboard.getPiece("d8"), "bq")
+        assert.equals(chessboard.getPiece("a2"), "wp")
+        chessboard.destroy()
+    })
+
+    it("should set pieces on squares", () => {
+        const chessboard = new Chessboard(document.getElementById("TestPosition"), {
+            position: "empty",
+            sprite: {url: "../assets/images/chessboard-sprite.svg"},
+        })
+        chessboard.setPiece("a1", PIECE.bk)
+        assert.equals(chessboard.getPiece("a1"), "bk")
+        chessboard.setPiece("e5", PIECE.wk)
+        assert.equals(chessboard.getPiece("e5"), "wk")
+        chessboard.destroy()
+    })
+
+})

package/test/TestMarkers.js

@@ -29,4 +29,4 @@ describe("TestMarkers", () => {
         chessboard.destroy()
     })
 
-})
+})

package/test/TestPiecesAnimation.js

@@ -28,8 +28,8 @@ describe("TestPiecesAnimation", () => {
         state1.setPosition("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
         const state2 = new ChessboardState()
         state2.setPosition("rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR")
-        const previousBoard1 = state1.squares
-        const newBoard1 = state2.squares
+        const previousBoard1 = state1.position.squares
+        const newBoard1 = state2.position.squares
         const changes = cfa.seekChanges(previousBoard1, newBoard1)
 
         assert.equals(changes[0].type,0 )
@@ -52,4 +52,4 @@ describe("TestPiecesAnimation", () => {
         assert.equals(changes[13].atIndex, 59)
     })
 
-})
+})

package/test/TestPosition.js

@@ -5,49 +5,21 @@
  */
 
 import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
-import {PIECE, Chessboard} from "../src/cm-chessboard/Chessboard.js"
+import {Position} from "../src/cm-chessboard/Position.js"
 
 describe("TestPosition", () => {
-
-    it("should create and destroy a chessboard", () => {
-        const chessboard = new Chessboard(document.getElementById("TestPosition"), {
-            sprite: {url: "../assets/images/chessboard-sprite.svg"},
-            position: "start"
-        })
-        assert.equals(chessboard.getPosition(), "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
-        chessboard.destroy()
-    })
-
-    it("should set and get the position", () => {
-        const chessboard = new Chessboard(document.getElementById("TestPosition"),
-            {sprite: {url: "../assets/images/chessboard-sprite.svg"},})
-        chessboard.setPosition("rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11", false).then(() => {
-            assert.equals(chessboard.getPosition(), "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR")
-            chessboard.destroy()
-        })
+    it("should convert square to index", () => {
+        assert.equals(Position.squareToIndex("a1"), 0)
+        assert.equals(Position.squareToIndex("h1"), 7)
+        assert.equals(Position.squareToIndex("a8"), 56)
+        assert.equals(Position.squareToIndex("g5"), 38)
+        assert.equals(Position.squareToIndex("h8"), 63)
     })
-
-    it("should get pieces on squares", () => {
-        const chessboard = new Chessboard(document.getElementById("TestPosition"), {
-            sprite: {url: "../assets/images/chessboard-sprite.svg"},
-            position: "start"
-        })
-        assert.equals(chessboard.getPiece("d1"), "wq")
-        assert.equals(chessboard.getPiece("d8"), "bq")
-        assert.equals(chessboard.getPiece("a2"), "wp")
-        chessboard.destroy()
+    it("should convert index to square", () => {
+        assert.equals(Position.indexToSquare(0), "a1")
+        assert.equals(Position.indexToSquare(7), "h1")
+        assert.equals(Position.indexToSquare(56), "a8")
+        assert.equals(Position.indexToSquare(38), "g5")
+        assert.equals(Position.indexToSquare(63), "h8")
     })
-
-    it("should set pieces on squares", () => {
-        const chessboard = new Chessboard(document.getElementById("TestPosition"), {
-            position: "empty",
-            sprite: {url: "../assets/images/chessboard-sprite.svg"},
-        })
-        chessboard.setPiece("a1", PIECE.bk)
-        assert.equals(chessboard.getPiece("a1"), "bk")
-        chessboard.setPiece("e5", PIECE.wk)
-        assert.equals(chessboard.getPiece("e5"), "wk")
-        chessboard.destroy()
-    })
-
 })

package/test/index.html

@@ -5,7 +5,7 @@
     <title>Test cm-chessboard</title>
     <link rel="stylesheet" href="../examples/styles/examples.css"/>
     <link rel="stylesheet" href="../assets/styles/cm-chessboard.css"/>
-    <style type="text/css">
+    <style>
         .board {
             position: absolute;
             right: 20px;
@@ -22,11 +22,11 @@
 <div class="board" id="TestMarkers"></div>
 <script type="module">
     import {teevi} from "../node_modules/teevi/src/teevi.js"
-    import "./TestPosition.js"
+    import "./TestChessboard.js"
     import "./TestBoard.js"
     import "./TestPiecesAnimation.js"
     import "./TestMarkers.js"
-    import "./TestState.js"
+    import "./TestPosition.js"
     teevi.run()
 </script>
 </body>

package/test/TestState.js

@@ -1,27 +0,0 @@
-/**
- * Author and copyright: Stefan Haack (https://shaack.com)
- * Repository: https://github.com/shaack/cm-chessboard
- * License: MIT, see file 'LICENSE'
- */
-
-import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
-import {ChessboardState} from "../src/cm-chessboard/ChessboardState.js"
-
-describe("TestState", () => {
-    it("should convert square to index", () => {
-        const state = new ChessboardState()
-        assert.equals(state.squareToIndex("a1"), 0)
-        assert.equals(state.squareToIndex("h1"), 7)
-        assert.equals(state.squareToIndex("a8"), 56)
-        assert.equals(state.squareToIndex("g5"), 38)
-        assert.equals(state.squareToIndex("h8"), 63)
-    })
-    it("should convert index to square", () => {
-        const state = new ChessboardState()
-        assert.equals(state.indexToSquare(0), "a1")
-        assert.equals(state.indexToSquare(7), "h1")
-        assert.equals(state.indexToSquare(56), "a8")
-        assert.equals(state.indexToSquare(38), "g5")
-        assert.equals(state.indexToSquare(63), "h8")
-    })
-})