@alepot55/chessboardjs 2.1.5 → 2.1.7

package/chessboard.js

@@ -47,16 +47,17 @@ class Chessboard {
         'invalid_hintColor': 'Invalid hintColor - ',
     }
 
+    // -------------------
+    // Initialization
+    // -------------------
     constructor(config) {
         this.config = new ChessboardConfig(config);
         this.init();
     }
 
-    // Build
-
     init() {
         this.initParams();
-        this.buildGame(this.config.position);
+        this.setGame(this.config.position);
         this.buildBoard();
         this.buildSquares();
         this.addListeners();
@@ -68,27 +69,13 @@ class Chessboard {
         this.squares = {};
         this.promoting = false;
         this.clicked = null;
-        this.movesHistory = [];
         this.mosseIndietro = [];
         this.clicked = null;
     }
 
-    buildGame(position) {
-        if (typeof position === 'object') {
-            this.game = new Chess('start');
-            Object.entries(position).forEach(([square, [type, color]]) => {
-                this.game.put({ type, color }, square);
-            });
-        } else if (Object.values(this.standard_positions).includes(position)) {
-            if (position === 'start') this.game = new Chess();
-            else this.game = new Chess(this.standard_positions[position]);
-        } else if (validateFen(position)) {
-            this.game = new Chess(position);
-        } else {
-            throw new Error(this.error_messages['invalid_position'] + position);
-        }
-    }
-
+    // -------------------
+    // Board Setup
+    // -------------------
     buildBoard() {
         this.board = document.getElementById(this.config.id_div);
         if (!this.board) {
@@ -98,12 +85,6 @@ class Chessboard {
         this.board.className = "board";
     }
 
-    realCoord(row, col) {
-        if (this.isWhiteOriented()) row = 7 - row;
-        else col = 7 - col;
-        return [row + 1, col + 1];
-    }
-
     buildSquares() {
 
         for (let row = 0; row < 8; row++) {
@@ -123,8 +104,80 @@ class Chessboard {
         this.board.innerHTML = '';
     }
 
-    // Pieces
+    removeSquares() {
+        for (const square of Object.values(this.squares)) {
+            this.board.removeChild(square.element);
+            square.destroy();
+
+        }
+        this.squares = {};
+    }
+
+    resize(value) {
+        if (value === 'auto') {
+            let size;
+            if (this.board.offsetWidth === 0) {
+                size = this.board.offsetHeight;
+            } else if (this.board.offsetHeight === 0) {
+                size = this.board.offsetWidth;
+            } else {
+                size = Math.min(this.board.offsetWidth, this.board.offsetHeight);
+            }
+            this.resize(size);
+        } else if (typeof value !== 'number') {
+            throw new Error(this.error_messages['invalid_value'] + value);
+        } else {
+            document.documentElement.style.setProperty('--dimBoard', value + 'px');
+            this.updateBoardPieces();
+        }
+    }
+
+    // -------------------
+    // Game/Position Functions
+    // -------------------
+    convertFen(position) {
+        if (typeof position === 'string') {
+            
+            if (this.validateFen(position)) return position;
+            else if (this.standard_positions[position]) return this.standard_positions[position];
+            else throw new Error('Invalid position -' + position);
+        } else if (typeof position === 'object') {
+            let parts = [];
+            for (let row = 0; row < 8; row++) {
+                let rowParts = [];
+                let empty = 0;
+                for (let col = 0; col < 8; col++) {
+                    let square = this.getSquareID(row, col);
+                    let piece = position[square];
+                    if (piece) {
+                        if (empty > 0) {
+                            rowParts.push(empty);
+                            empty = 0;
+                        }
+                        // Convert piece notation: white pieces become uppercase, black remain lowercase.
+                        let fenPiece = piece[1] === 'w' ? piece[0].toUpperCase() : piece[0].toLowerCase();
+                        rowParts.push(fenPiece);
+                    } else {
+                        empty++;
+                    }
+                }
+                if (empty > 0) rowParts.push(empty);
+                parts.push(rowParts.join(''));
+            }
+            return parts.join('/');
+        } else {
+            throw new Error('Invalid position -' + position);
+        }
+    }
+
+    setGame(position) {
+        const fen = this.convertFen(position);
+        this.game = new Chess(fen === 'start' ? this.standard_positions['default'] : null);
+    }
 
+    // -------------------
+    // Piece Functions
+    // -------------------
     getPiecePath(piece) {
         if (typeof this.config.piecesPath === 'string')
             return this.config.piecesPath + '/' + piece + '.svg';
@@ -136,41 +189,27 @@ class Chessboard {
             throw new Error(this.error_messages['invalid_piecesPath']);
     }
 
-    colorPiece(square) {
-        let piece = this.piece(square);
-        return piece ? piece[1] : null;
-    }
-
-    movePiece(piece, to, duration, callback) {
-        piece.translate(to, duration, this.transitionTimingFunction, this.config.moveAnimation, callback);
-    }
-
-    translatePiece(move, removeTo, animate, callback = null) {
-
-        if (removeTo) this.removePieceFromSquare(move.to, false);
-
-        let change_square = () => {
-            move.from.removePiece();
-            move.to.putPiece(move.piece);
-            move.piece.setDrag(this.dragFunction(move.to, move.piece));
-            if (callback) callback();
+    convertPiece(piece) {
+        if (piece instanceof Piece) return piece;
+        if (typeof piece === 'string') {
+            let [type, color] = piece.split('');
+            return new Piece(color, type, this.getPiecePath(piece));
         }
+        throw new Error(this.error_messages['invalid_piece'] + piece);
+    }
 
-        let duration = animate ? this.config.moveTime : 0;
-
-        this.movePiece(move.piece, move.to, duration, change_square);
+    addPieceOnSquare(square, piece, fade = true) {
 
-    }
+        square.putPiece(piece);
+        piece.setDrag(this.dragFunction(square, piece));
 
-    snapbackPiece(square, animate) {
-        let move = new Move(square, square);
-        this.translatePiece(move, false, animate);
-    }
+        if (fade) piece.fadeIn(
+            this.config.fadeTime,
+            this.config.fadeAnimation,
+            this.transitionTimingFunction
+        );
 
-    convertSquare(square) {
-        if (square instanceof Square) return square;
-        if (typeof square === 'string' && this.squares[square]) return this.squares[square];
-        throw new Error('Invalid square value');
+        piece.visible();
     }
 
     removePieceFromSquare(square, fade = true) {
@@ -192,110 +231,35 @@ class Chessboard {
         return piece;
     }
 
-    dragFunction(square, piece) {
-
-        return (event) => {
-
-            event.preventDefault();
-
-            if (!this.config.draggable || !piece) return;
-            if (!this.config.onDragStart(square, piece)) return;
-
-            let prec;
-            let from = square;
-            let to = square;
-
-            const img = piece.element;
-
-            if (!this.canMove(from)) return;
-            if (!this.config.clickable) this.clicked = null;
-            if (this.onClick(from)) return;
-
-            img.style.position = 'absolute';
-            img.style.zIndex = 100;
-
-            const moveAt = (pageX, pageY) => {
-                const halfWidth = img.offsetWidth / 2;
-                const halfHeight = img.offsetHeight / 2;
-                img.style.left = `${pageX - halfWidth}px`;
-                img.style.top = `${pageY - halfHeight}px`;
-                return true;
-            };
-
-            const onMouseMove = (event) => {
-                if (!moveAt(event.pageX, event.pageY)) return;
-
-                const boardRect = this.board.getBoundingClientRect();
-                const { offsetWidth: boardWidth, offsetHeight: boardHeight } = this.board;
-                const x = event.clientX - boardRect.left;
-                const y = event.clientY - boardRect.top;
-
-                let newTo = null;
-                if (x >= 0 && x <= boardWidth && y >= 0 && y <= boardHeight) {
-                    const col = Math.floor(x / (boardWidth / 8));
-                    const row = Math.floor(y / (boardHeight / 8));
-                    newTo = this.squares[this.getSquareID(row, col)];
-                }
-
-                to = newTo;
-                this.config.onDragMove(from, to, piece);
-
-                if (to !== prec) {
-                    to?.highlight();
-                    prec?.dehighlight();
-                    prec = to;
-                }
-            };
-
-            const onMouseUp = () => {
-                prec?.dehighlight();
-                document.removeEventListener('mousemove', onMouseMove);
-                window.removeEventListener('mouseup', onMouseUp);
-                img.style.zIndex = 20;
-
-                const dropResult = this.config.onDrop(from, to, piece);
-                const isTrashDrop = !to && (this.config.dropOffBoard === 'trash' || dropResult === 'trash');
+    movePiece(piece, to, duration, callback) {
+        piece.translate(to, duration, this.transitionTimingFunction, this.config.moveAnimation, callback);
+    }
 
-                if (isTrashDrop) {
-                    this.allSquares("unmoved");
-                    this.allSquares('removeHint');
-                    from.deselect();
-                    this.remove(from);
-                } else if (!to || !this.onClick(to, true)) {
-                    this.snapbackPiece(from, !this.promoting);
-                    this.config.onSnapbackEnd(from, piece);
-                }
-            };
+    translatePiece(move, removeTo, animate, callback = null) {
 
-            window.addEventListener('mouseup', onMouseUp, { once: true });
-            document.addEventListener('mousemove', onMouseMove);
-            img.addEventListener('mouseup', onMouseUp, { once: true });
-        }
-    }
+        if (removeTo) this.removePieceFromSquare(move.to, false);
 
-    convertPiece(piece) {
-        if (piece instanceof Piece) return piece;
-        if (typeof piece === 'string') {
-            let [type, color] = piece.split('');
-            return new Piece(color, type, this.getPiecePath(piece));
+        let change_square = () => {
+            move.from.removePiece();
+            move.to.putPiece(move.piece);
+            move.piece.setDrag(this.dragFunction(move.to, move.piece));
+            if (callback) callback();
         }
-        throw new Error(this.error_messages['invalid_piece'] + piece);
-    }
 
-    addPieceOnSquare(square, piece, fade = true) {
+        let duration = animate ? this.config.moveTime : 0;
 
-        square.putPiece(piece);
-        piece.setDrag(this.dragFunction(square, piece));
+        this.movePiece(move.piece, move.to, duration, change_square);
 
-        if (fade) piece.fadeIn(
-            this.config.fadeTime,
-            this.config.fadeAnimation,
-            this.transitionTimingFunction
-        );
+    }
 
-        piece.visible();
+    snapbackPiece(square, animate) {
+        let move = new Move(square, square);
+        this.translatePiece(move, false, animate);
     }
 
+    // -------------------
+    // Board Update Functions
+    // -------------------
     updateBoardPieces(animation = false) {
         let { updatedFlags, escapeFlags, movableFlags, pendingTranslations } = this.prepareBoardUpdateData();
 
@@ -315,9 +279,9 @@ class Chessboard {
         for (let squareId in this.squares) {
             let cellPiece = this.squares[squareId].piece;
             let cellPieceId = cellPiece ? cellPiece.getId() : null;
-            updatedFlags[squareId] = this.piece(squareId) === cellPieceId;
+            updatedFlags[squareId] = this.getGamePieceId(squareId) === cellPieceId;
             escapeFlags[squareId] = false;
-            movableFlags[squareId] = cellPiece ? this.piece(squareId) !== cellPieceId : false;
+            movableFlags[squareId] = cellPiece ? this.getGamePieceId(squareId) !== cellPieceId : false;
         }
 
         return { updatedFlags, escapeFlags, movableFlags, pendingTranslations };
@@ -325,7 +289,7 @@ class Chessboard {
 
     identifyPieceTranslations(updatedFlags, escapeFlags, movableFlags, pendingTranslations) {
         Object.values(this.squares).forEach(targetSquare => {
-            const newPieceId = this.piece(targetSquare.id);
+            const newPieceId = this.getGamePieceId(targetSquare.id);
             const newPiece = newPieceId && this.convertPiece(newPieceId);
             const currentPiece = targetSquare.piece;
             const currentPieceId = currentPiece ? currentPiece.getId() : null;
@@ -370,7 +334,7 @@ class Chessboard {
 
         pendingTranslations.push([currentSource, sourceSquare, targetSquare]);
 
-        if (!this.piece(sourceSquare.id)) updatedFlags[sourceSquare.id] = true;
+        if (!this.getGamePieceId(sourceSquare.id)) updatedFlags[sourceSquare.id] = true;
 
         escapeFlags[sourceSquare.id] = true;
         movableFlags[sourceSquare.id] = false;
@@ -379,7 +343,6 @@ class Chessboard {
 
     executePieceTranslations(pendingTranslations, escapeFlags, animation) {
         for (let [_, sourceSquare, targetSquare] of pendingTranslations) {
-            console.log('executing translation: ', sourceSquare.id, targetSquare.id);
             let removeTarget = !escapeFlags[targetSquare.id] && targetSquare.piece;
             let moveObj = new Move(sourceSquare, targetSquare);
             this.translatePiece(moveObj, removeTarget, animation);
@@ -389,7 +352,7 @@ class Chessboard {
     // Gestisce gli aggiornamenti residui per ogni cella che non è ancora stata correttamente aggiornata
     processRemainingPieceUpdates(updatedFlags, animation) {
         for (const square of Object.values(this.squares)) {
-            let newPieceId = this.piece(square.id);
+            let newPieceId = this.getGamePieceId(square.id);
             let newPiece = newPieceId ? this.convertPiece(newPieceId) : null;
             let currentPiece = square.piece;
             let currentPieceId = currentPiece ? currentPiece.getId() : null;
@@ -422,48 +385,128 @@ class Chessboard {
         }
     }
 
-    isPiece(piece, square) { return this.piece(square) === piece }
-
-    // Listeners
+    // -------------------
+    // Event Handlers and Drag
+    // -------------------
+    dragFunction(square, piece) {
 
-    addListeners() {
-        for (const square of Object.values(this.squares)) {
+        return (event) => {
 
-            let piece = square.piece;
+            event.preventDefault();
 
-            square.element.addEventListener("mouseover", (e) => {
-                if (!this.clicked) this.hintMoves(square);
-            });
-            square.element.addEventListener("mouseout", (e) => {
-                if (!this.clicked) this.dehintMoves(square);
-            });
+            if (!this.config.draggable || !piece) return;
+            if (!this.config.onDragStart(square, piece)) return;
 
-            const handleClick = (e) => {
-                e.stopPropagation();
-                if (this.config.clickable && (!piece || this.config.onlyLegalMoves)) this.onClick(square)
-            }
+            let prec;
+            let from = square;
+            let to = square;
 
-            square.element.addEventListener("click", handleClick);
-            square.element.addEventListener("touch", handleClick);
-        }
-    }
+            const img = piece.element;
 
-    onClick(square, animation = this.config.moveAnimation) {
+            if (!this.canMove(from)) return;
+            if (!this.config.clickable) this.clicked = null;
+            if (this.onClick(from)) return;
 
-        if (square.id === this.clicked?.id) return false;
+            img.style.position = 'absolute';
+            img.style.zIndex = 100;
 
-        let from = this.clicked;
-        this.clicked = null;
+            const moveAt = (pageX, pageY) => {
+                const halfWidth = img.offsetWidth / 2;
+                const halfHeight = img.offsetHeight / 2;
+                img.style.left = `${pageX - halfWidth}px`;
+                img.style.top = `${pageY - halfHeight}px`;
+                return true;
+            };
 
-        let promotion = null
+            const onMouseMove = (event) => {
+                if (!moveAt(event.pageX, event.pageY)) return;
 
-        if (this.promoting) {
-            if (this.promoting === 'none') from = null
-            else promotion = this.promoting;
+                const boardRect = this.board.getBoundingClientRect();
+                const { offsetWidth: boardWidth, offsetHeight: boardHeight } = this.board;
+                const x = event.clientX - boardRect.left;
+                const y = event.clientY - boardRect.top;
 
-            this.promoting = false;
-            this.allSquares("removePromotion");
-            this.allSquares("removeCover");
+                let newTo = null;
+                if (x >= 0 && x <= boardWidth && y >= 0 && y <= boardHeight) {
+                    const col = Math.floor(x / (boardWidth / 8));
+                    const row = Math.floor(y / (boardHeight / 8));
+                    newTo = this.squares[this.getSquareID(row, col)];
+                }
+
+                to = newTo;
+                this.config.onDragMove(from, to, piece);
+
+                if (to !== prec) {
+                    to?.highlight();
+                    prec?.dehighlight();
+                    prec = to;
+                }
+            };
+
+            const onMouseUp = () => {
+                prec?.dehighlight();
+                document.removeEventListener('mousemove', onMouseMove);
+                window.removeEventListener('mouseup', onMouseUp);
+                img.style.zIndex = 20;
+
+                const dropResult = this.config.onDrop(from, to, piece);
+                const isTrashDrop = !to && (this.config.dropOffBoard === 'trash' || dropResult === 'trash');
+
+                if (isTrashDrop) {
+                    this.allSquares("unmoved");
+                    this.allSquares('removeHint');
+                    from.deselect();
+                    this.remove(from);
+                } else if (!to || !this.onClick(to, true)) {
+                    this.snapbackPiece(from, !this.promoting);
+                    this.config.onSnapbackEnd(from, piece);
+                }
+            };
+
+            window.addEventListener('mouseup', onMouseUp, { once: true });
+            document.addEventListener('mousemove', onMouseMove);
+            img.addEventListener('mouseup', onMouseUp, { once: true });
+        }
+    }
+
+    addListeners() {
+        for (const square of Object.values(this.squares)) {
+
+            let piece = square.piece;
+
+            square.element.addEventListener("mouseover", (e) => {
+                if (!this.clicked) this.hintMoves(square);
+            });
+            square.element.addEventListener("mouseout", (e) => {
+                if (!this.clicked) this.dehintMoves(square);
+            });
+
+            const handleClick = (e) => {
+                e.stopPropagation();
+                if (this.config.clickable && (!piece || this.config.onlyLegalMoves)) this.onClick(square)
+            }
+
+            square.element.addEventListener("click", handleClick);
+            square.element.addEventListener("touch", handleClick);
+        }
+    }
+
+    onClick(square, animation = this.config.moveAnimation) {
+
+        if (square.id === this.clicked?.id) return false;
+
+        let from = this.clicked;
+        this.clicked = null;
+
+        let promotion = null
+
+        if (this.promoting) {
+            if (this.promoting === 'none') from = null
+            else promotion = this.promoting;
+
+            this.promoting = false;
+            this.allSquares("removePromotion");
+            this.allSquares("removeCover");
         }
 
         if (!from) {
@@ -496,31 +539,9 @@ class Chessboard {
         return false;
     }
 
-    // Hint
-
-    hint(square) {
-        if (!this.config.hints || !this.squares[square]) return;
-        this.squares[square].putHint(this.colorPiece(square) && this.colorPiece(square) !== this.turn());
-    }
-
-    hintMoves(square) {
-        if (!this.canMove(square)) return;
-        let mosse = this.game.moves({ square: square.id, verbose: true });
-        for (let mossa of mosse) {
-            if (mossa['to'].length === 2) this.hint(mossa['to']);
-        }
-    }
-
-    dehintMoves(square) {
-        let mosse = this.game.moves({ square: square.id, verbose: true });
-        for (let mossa of mosse) {
-            let to = this.squares[mossa['to']];
-            to.removeHint();
-        }
-    }
-
-    // Moves
-
+    // -------------------
+    // Move Functions
+    // -------------------
     canMove(square) {
         if (!square.piece) return false;
         if (this.config.movableColors === 'none') return false;
@@ -541,13 +562,6 @@ class Chessboard {
         throw new Error("Invalid move format");
     }
 
-    allSquares(method) {
-        for (const square of Object.values(this.squares)) {
-            square[method]();
-            this.squares[square.id] = square;
-        }
-    }
-
     legalMove(move) {
         let legal_moves = this.legalMoves(move.from.id);
 
@@ -565,50 +579,72 @@ class Chessboard {
         return this.game.moves({ verbose: verb });
     }
 
-    // Position
+    move(move, animation) {
+        move = this.convertMove(move);
+        move.check();
 
-    chageFenTurn(fen, color) {
-        let parts = fen.split(' ');
-        parts[1] = color;
-        return parts.join(' ');
-    }
+        let from = move.from;
+        let to = move.to;
 
-    changeFenColor(fen) {
-        let parts = fen.split(' ');
-        parts[1] = parts[1] === 'w' ? 'b' : 'w';
-        return parts.join(' ');
-    }
+        if (!this.config.onlyLegalMoves) {
+            let piece = this.getGamePieceId(from.id);
+            this.game.remove(from.id);
+            this.game.remove(to.id);
+            this.game.put({ type: move.hasPromotion() ? move.promotion : piece[0], color: piece[1] }, to.id);
+            this.updateBoardPieces(animation);
+        } else {
+            this.allSquares("unmoved");
 
-    playerTurn() {
-        return this.getOrientation() == this.game.turn()
+            move = this.game.move({
+                from: from.id,
+                to: to.id,
+                promotion: move.hasPromotion() ? move.promotion : undefined
+            });
+
+            if (move === null) {
+                throw new Error("Invalid move: move could not be executed");
+            }
+
+            this.updateBoardPieces(animation);
+
+            from.moved();
+            to.moved();
+            this.allSquares("removeHint");
+
+            this.config.onMoveEnd(move);
+        }
     }
 
-    isWhiteOriented() { return this.config.orientation === 'w' }
+    // -------------------
+    // Miscellaneous Functions
+    // -------------------
+    hint(squareId) {
+        let square = this.squares[squareId];
+        if (!this.config.hints || !square) return;
+        square.putHint(square.piece && square.piece.color !== this.turn());
+    }
 
-    // Squares
+    hintMoves(square) {
+        if (!this.canMove(square)) return;
+        let mosse = this.game.moves({ square: square.id, verbose: true });
+        for (let mossa of mosse) {
+            if (mossa['to'].length === 2) this.hint(mossa['to']);
+        }
+    }
 
-    getSquareID(row, col) {
-        row = parseInt(row);
-        col = parseInt(col);
-        if (this.isWhiteOriented()) {
-            row = 8 - row;
-            col = col + 1;
-        } else {
-            row = row + 1;
-            col = 8 - col;
+    dehintMoves(square) {
+        let mosse = this.game.moves({ square: square.id, verbose: true });
+        for (let mossa of mosse) {
+            let to = this.squares[mossa['to']];
+            to.removeHint();
         }
-        let letters = 'abcdefgh';
-        let letter = letters[col - 1];
-        return letter + row;
     }
 
-    removeSquares() {
+    allSquares(method) {
         for (const square of Object.values(this.squares)) {
-            this.board.removeChild(square.element);
-            square.destroy();
-
+            square[method]();
+            this.squares[square.id] = square;
         }
-        this.squares = {};
     }
 
     promote(move) {
@@ -666,57 +702,72 @@ class Chessboard {
         }
     }
 
-    // user
-
-    turn() {
-        return this.game.turn();
+    clearSquares() {
+        this.allSquares('removeHint');
+        this.allSquares("deselect");
+        this.allSquares("unmoved");
     }
 
-    getOrientation() {
-        return this.config.orientation;
+    getGamePieceId(squareId) {
+        let piece = this.game.get(squareId);
+        return piece ? piece['type'] + piece['color'] : null;
     }
 
-    fen() {
-        return this.game.fen();
-    }
+    isPiece(piece, square) { return this.getGamePieceId(square) === piece }
 
-    lastMove() {
-        return this.movesHistory[this.movesHistory.length - 1];
+    realCoord(row, col) {
+        if (this.isWhiteOriented()) row = 7 - row;
+        else col = 7 - col;
+        return [row + 1, col + 1];
     }
 
-    get history() {
-        return this.movesHistory;
+    getSquareID(row, col) {
+        row = parseInt(row);
+        col = parseInt(col);
+        if (this.isWhiteOriented()) {
+            row = 8 - row;
+            col = col + 1;
+        } else {
+            row = row + 1;
+            col = 8 - col;
+        }
+        let letters = 'abcdefgh';
+        let letter = letters[col - 1];
+        return letter + row;
     }
 
-    history() {
-        return this.movesHistory;
+    convertSquare(square) {
+        if (square instanceof Square) return square;
+        if (typeof square === 'string' && this.squares[square]) return this.squares[square];
+        throw new Error(this.error_messages['invalid_square'] + square);
     }
 
-    get(square) {
-        square = this.convertSquare(square);
-        square.check();
-        let piece = square.piece;
-        return piece ? piece.id : null;
+    // -------------------
+    // User API and Chess.js Integration
+    // -------------------
+    getOrientation() {
+        return this.config.orientation;
     }
 
-    position(position, color = null) {
-        this.allSquares('removeHint');
-        this.allSquares("deselect");
-        this.allSquares("unmoved");
-        if (color && color !== this.config.orientation) {
-            position = this.changeFenColor(position);
+    setOrientation(color, animation = true) {
+        if (!['w', 'b'].includes(color)) {
             this.config.orientation = color;
-            this.destroy();
-            this.init();
+            this.flip(animation);
         } else {
-            this.buildGame(this.config.position);
-            this.updateBoardPieces();
+            throw new Error(this.error_messages['invalid_orientation'] + color);
         }
     }
 
+    lastMove() {
+        const moves = this.history({ verbose: true });
+        return moves[moves.length - 1];
+    }
+
     flip() {
-        let position = this.game.fen();
-        this.position(position, this.config.orientation === 'w' ? 'b' : 'w');
+        this.config.orientation = this.config.orientation === 'w' ? 'b' : 'w';
+        this.destroy();
+        this.initParams();
+        this.build();
     }
 
     build() {
@@ -724,127 +775,179 @@ class Chessboard {
         this.init();
     }
 
-    move(move, animation) {
-        move = this.convertMove(move);
-        move.check();
+    destroy() {
+        this.removeSquares();
+        this.removeBoard();
+    }
 
-        let from = move.from;
-        let to = move.to;
+    ascii() {
+        return this.game.ascii();
+    }
 
-        if (!this.config.onlyLegalMoves) {
-            let piece = this.piece(from.id);
-            this.game.remove(from.id);
-            this.game.remove(to.id);
-            this.game.put({ type: move.hasPromotion() ? move.promotion : piece[0], color: piece[1] }, to.id);
-            this.updateBoardPieces(animation);
-        } else {
-            this.allSquares("unmoved");
+    board() {
+        return this.game.board();
+    }
 
-            move = this.game.move({
-                from: from.id,
-                to: to.id,
-                promotion: move.hasPromotion() ? move.promotion : undefined
-            });
+    clear(options = {}, animation = true) {
+        this.game.clear(options);
+        this.updateBoardPieces(animation);
+    }
 
-            if (move === null) {
-                throw new Error("Invalid move: move could not be executed");
-            }
+    fen() {
+        return this.game.fen();
+    }
 
-            this.movesHistory.push(move);
+    get(squareId) {
+        const square = this.convertSquare(squareId);
+        square.check();
+        return square.piece;        
+    }
 
-            this.updateBoardPieces(animation);
+    getCastlingRights(color) {
+        return this.game.getCastlingRights(color);
+    }
 
-            from.moved();
-            to.moved();
-            this.allSquares("removeHint");
+    getComment() {
+        return this.game.getComment();
+    }
 
-            this.config.onMoveEnd(move);
-        }
+    getComments() {
+        return this.game.getComments();
+    }
+
+    history(options = {}) {
+        return this.game.history(options);
+    }
+
+    isCheckmate() {
+        return this.game.isCheckmate();
+    }
+
+    isDraw() {
+        return this.game.isDraw();
+    }
+
+    isDrawByFiftyMoves() {
+        return this.game.isDrawByFiftyMoves();
+    }
+
+    isInsufficientMaterial() {
+        return this.game.isInsufficientMaterial();
+    }
+
+    isGameOver() {
+        return this.game.isGameOver();
+    }
+
+    isStalemate() {
+        return this.game.isStalemate();
     }
 
-    clear(animation = true) {
-        this.game.clear();
+    isThreefoldRepetition() {
+        return this.game.isThreefoldRepetition();
+    }
+
+    load(fen, options = {}, animation = true) {
+        this.clearSquares();
+        this.game.load(fen, options);
         this.updateBoardPieces(animation);
     }
 
-    insert(square, piece) {
-        square = this.convertSquare(square);
-        piece = this.convertPiece(piece);
-        square.check();
-        piece.check();
-        if (square.piece) this.remove(square);
-        this.game.put({ type: piece.type, color: piece.color }, square.id);
+    loadPgn(pgn, options = {}, animation = true) {
+        this.clearSquares();
+        this.game.loadPgn(pgn, options);
         this.updateBoardPieces();
     }
 
-    isGameOver() {
-        if (this.game.isGameOver()) {
-            if (this.game.inCheck()) return this.game.turn() === 'w' ? 'b' : 'w';
-            return 'd';
-        }
-        return null;
+    moveNumber() {
+        return this.game.moveNumber();
     }
 
-    orientation(color) {
-        if ((color === 'w' || color === 'b') && color !== this.config.orientation) this.flip();
+    moves(options = {}) {
+        return this.game.moves(options);
     }
 
-    resize(value) {
-        if (value === 'auto') {
-            let size;
-            if (this.board.offsetWidth === 0) {
-                size = this.board.offsetHeight;
-            } else if (this.board.offsetHeight === 0) {
-                size = this.board.offsetWidth;
-            } else {
-                size = Math.min(this.board.offsetWidth, this.board.offsetHeight);
-            }
-            this.resize(size);
-        } else if (typeof value !== 'number') {
-            throw new Error(this.error_messages['invalid_value'] + value);
-        } else {
-            document.documentElement.style.setProperty('--dimBoard', value + 'px');
-            this.updateBoardPieces();
-        }
+    pgn(options = {}) {
+        return this.game.pgn(options);
     }
 
-    destroy() {
-        this.removeSquares();
-        this.removeBoard();
-        this.game = null;
-        this.clicked = null;
-        this.movesHistory = [];
-        this.mosseIndietro = [];
-        this.clicked = null;
-        this.board = null;
+    put(pieceId, squareId, animation = true) {
+        const [type, color] = pieceId.split('');
+        const success = this.game.put({ type: type, color: color }, squareId);
+        if (success) this.updateBoardPieces(animation);
+        return success;
     }
 
-    remove(square, animation = true) {
-        square = this.convertSquare(square);
-        square.check();
-        this.game.remove(square.id);
-        let piece = square.piece;
+    remove(squareId, animation = true) {
+        const removedPiece = this.game.remove(squareId);
         this.updateBoardPieces(animation);
-        return piece;
+        return removedPiece;
     }
 
-    piece(square) {
-        let piece = this.game.get(square);
-        return piece ? piece['type'] + piece['color'] : null;
+    removeComment() {
+        return this.game.removeComment();
     }
 
-    highlight(square) {
-        square = this.convertSquare(square);
-        square.check();
-        square.highlight();
+    removeComments() {
+        return this.game.removeComments();
     }
 
-    dehighlight(square) {
-        square = this.convertSquare(square);
-        square.check();
-        square.dehighlight();
+    removeHeader(field) {
+        return this.game.removeHeader(field);
+    }
+
+    reset(animation = true) {
+        this.game.reset();
+        this.updateBoardPieces(animation);
+    }
+
+    setCastlingRights(color, rights) {
+        return this.game.setCastlingRights(color, rights);
+    }
+
+    setComment(comment) {
+        this.game.setComment(comment);
+    }
+
+    setHeader(key, value) {
+        return this.game.setHeader(key, value);
+    }
+    
+    squareColor(squareId) {
+        return this.game.squareColor(squareId);
     }
 
+    turn() {
+        return this.game.turn();
+    }
+
+    undo() {
+        const move = this.game.undo();
+        if (move) this.updateBoardPieces();
+        return move;
+    }
+
+    validateFen(fen) {
+        return validateFen(fen);
+    }
+
+    // -------------------
+    // Other Utility Functions
+    // -------------------
+    chageFenTurn(fen, color) {
+        let parts = fen.split(' ');
+        parts[1] = color;
+        return parts.join(' ');
+    }
+
+    changeFenColor(fen) {
+        let parts = fen.split(' ');
+        parts[1] = parts[1] === 'w' ? 'b' : 'w';
+        return parts.join(' ');
+    }
+
+    isWhiteOriented() { return this.config.orientation === 'w' }
+
 }
 
 export default Chessboard;