@alepot55/chessboardjs 2.1.7 → 2.2.1

package/README.md

@@ -1,9 +1,9 @@
 # Chessboard.js: Interactive and Customizable Chessboard Library
 
-Chessboard.js is a lightweight and versatile NPM package that lets you easily integrate an interactive, customizable chessboard into your web applications. Use it for game displays, chess lessons, analysis tools, or any project that needs a visual chess interface.
+[Chessboard.js](https://sites.google.com/view/chessboard-js/home) is a lightweight and versatile NPM package that lets you easily integrate an interactive, customizable chessboard into your web applications. Use it for game displays, chess lessons, analysis tools, or any project that needs a visual chess interface.
 
 ## Overview
-Chessboard.js is designed with simplicity and flexibility in mind. Configure board appearance, piece sets, orientation, highlighting, animations, and more through a rich API. The board updates dynamically with user interactions and programmatic moves.
+[Chessboard.js](https://sites.google.com/view/chessboard-js/home) is designed with simplicity and flexibility in mind. Configure board appearance, piece sets, orientation, highlighting, animations, and more through a rich API. The board updates dynamically with user interactions and programmatic moves.
 
 ## Installation
 ```bash
@@ -384,7 +384,7 @@ This document details the functions available to users for interacting with the
   Places a piece on the board.  
   _Example:_  
   ```js
-  board.put({ type: 'p', color: 'w' }, 'd4');
+  board.put('pw', 'd4');
   ```
 
 - **remove(squareId, animation = true)**  

package/chessboard.bundle.js

@@ -1997,7 +1997,8 @@ var Chessboard = (function () {
         'linear': 'linear',
         'ease-in': 'ease-in',
         'ease-out': 'ease-out',
-        'ease-in-out': 'ease-in-out'
+        'ease-in-out': 'ease-in-out',
+        'none': null
     };
 
     class ChessboardConfig {
@@ -2051,9 +2052,6 @@ var Chessboard = (function () {
             this.dropOffBoard = config.dropOffBoard;
             this.size = config.size;
             this.movableColors = config.movableColors;
-            this.moveAnimation = config.moveAnimation;
-            this.snapbackAnimation = config.snapbackAnimation;
-            this.fadeAnimation = config.fadeAnimation;
             this.piecesPath = config.piecesPath;
             this.onMove = config.onMove;
             this.onMoveEnd = config.onMoveEnd;
@@ -2063,6 +2061,10 @@ var Chessboard = (function () {
             this.onDrop = config.onDrop;
             this.onSnapbackEnd = config.onSnapbackEnd;
 
+            this.moveAnimation = this.setTransitionFunction(config.moveAnimation);
+            this.snapbackAnimation = this.setTransitionFunction(config.snapbackAnimation);
+            this.fadeAnimation = this.setTransitionFunction(config.fadeAnimation);
+
             this.hints = this.setBoolean(config.hints);
             this.clickable = this.setBoolean(config.clickable);
             this.draggable = this.setBoolean(config.draggable);
@@ -2115,7 +2117,7 @@ var Chessboard = (function () {
         }
 
         setTransitionFunction(value) {
-            if (transitionFunctions[value]) return transitionFunctions[value];
+            if (Object.keys(transitionFunctions).indexOf(value) !== -1) return transitionFunctions[value];
             throw new Error('Invalid transition function');
         }
     }
@@ -2168,7 +2170,7 @@ var Chessboard = (function () {
         }
 
         setDrag(f) {
-            this.element.ondragstart = () => false;
+            this.element.ondragstart = (e) => { e.preventDefault(); };
             this.element.onmousedown = f;
         }
 
@@ -2423,27 +2425,15 @@ var Chessboard = (function () {
         }
 
         check() {
-            if (this.piece === null) {
-                throw new Error("Invalid move: piece is null");
-            }
-            if (!(this.piece instanceof Piece)) {
-                throw new Error("Invalid move: piece is not an instance of Piece");
-            }
-            if (['q', 'r', 'b', 'n', null].indexOf(this.promotion) === -1) {
-                throw new Error("Invalid move: promotion is not valid");
-            }
-            if (!(this.from instanceof Square)) {
-                throw new Error("Invalid move: from is not an instance of Square");
-            }
-            if (!(this.to instanceof Square)) {
-                throw new Error("Invalid move: to is not an instance of Square");
-            }
-            if (!this.to) {
-                throw new Error("Invalid move: to is null or undefined");
-            }
-            if (!this.from) {
-                throw new Error("Invalid move: from is null or undefined");
-            }
+            if (this.piece === null) return false;
+            if (!(this.piece instanceof Piece)) return false;
+            if (['q', 'r', 'b', 'n', null].indexOf(this.promotion) === -1) return false;
+            if (!(this.from instanceof Square)) return false;
+            if (!(this.to instanceof Square)) return false;
+            if (!this.to) return false;
+            if (!this.from) return false;
+            if (this.from === this.to) return false;
+            return true;
         }
 
         isLegal(game) {
@@ -2515,7 +2505,7 @@ var Chessboard = (function () {
         }
 
         initParams() {
-            this.board = null;
+            this.element = null;
             this.squares = {};
             this.promoting = false;
             this.clicked = null;
@@ -2527,12 +2517,12 @@ var Chessboard = (function () {
         // Board Setup
         // -------------------
         buildBoard() {
-            this.board = document.getElementById(this.config.id_div);
-            if (!this.board) {
+            this.element = document.getElementById(this.config.id_div);
+            if (!this.element) {
                 throw new Error(this.error_messages['invalid_id_div'] + this.config.id_div);
             }
             this.resize(this.config.size);
-            this.board.className = "board";
+            this.element.className = "board";
         }
 
         buildSquares() {
@@ -2544,19 +2534,19 @@ var Chessboard = (function () {
                     let square = new Square(square_row, square_col);
                     this.squares[square.getId()] = square;
 
-                    this.board.appendChild(square.element);
+                    this.element.appendChild(square.element);
                 }
             }
         }
 
         removeBoard() {
 
-            this.board.innerHTML = '';
+            this.element.innerHTML = '';
         }
 
         removeSquares() {
             for (const square of Object.values(this.squares)) {
-                this.board.removeChild(square.element);
+                this.element.removeChild(square.element);
                 square.destroy();
 
             }
@@ -2566,12 +2556,12 @@ var Chessboard = (function () {
         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;
+                if (this.element.offsetWidth === 0) {
+                    size = this.element.offsetHeight;
+                } else if (this.element.offsetHeight === 0) {
+                    size = this.element.offsetWidth;
                 } else {
-                    size = Math.min(this.board.offsetWidth, this.board.offsetHeight);
+                    size = Math.min(this.element.offsetWidth, this.element.offsetHeight);
                 }
                 this.resize(size);
             } else if (typeof value !== 'number') {
@@ -2587,6 +2577,7 @@ var Chessboard = (function () {
         // -------------------
         convertFen(position) {
             if (typeof position === 'string') {
+                if (position == 'start') return 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
                 if (this.validateFen(position)) return position;
                 else if (this.standard_positions[position]) return this.standard_positions[position];
                 else throw new Error('Invalid position -' + position);
@@ -2613,15 +2604,15 @@ var Chessboard = (function () {
                     if (empty > 0) rowParts.push(empty);
                     parts.push(rowParts.join(''));
                 }
-                return parts.join('/');
-            } else {
+                return parts.join('/') + ' w KQkq - 0 1';        } else {
                 throw new Error('Invalid position -' + position);
             }
         }
 
-        setGame(position) {
+        setGame(position, options = undefined) {
             const fen = this.convertFen(position);
-            this.game = new Chess(fen);
+            if (this.game) this.game.load(fen, options);
+            else this.game = new Chess(fen);
         }
 
         // -------------------
@@ -2701,7 +2692,7 @@ var Chessboard = (function () {
 
         }
 
-        snapbackPiece(square, animate) {
+        snapbackPiece(square, animate = this.config.snapbackAnimation) {
             let move = new Move(square, square);
             this.translatePiece(move, false, animate);
         }
@@ -2712,11 +2703,15 @@ var Chessboard = (function () {
         updateBoardPieces(animation = false) {
             let { updatedFlags, escapeFlags, movableFlags, pendingTranslations } = this.prepareBoardUpdateData();
 
+            let change = Object.values(updatedFlags).some(flag => !flag);
+
             this.identifyPieceTranslations(updatedFlags, escapeFlags, movableFlags, pendingTranslations);
 
             this.executePieceTranslations(pendingTranslations, escapeFlags, animation);
 
             this.processRemainingPieceUpdates(updatedFlags, animation);
+
+            if (change) this.config.onChange(this.fen());
         }
 
         prepareBoardUpdateData() {
@@ -2816,11 +2811,9 @@ var Chessboard = (function () {
         updateSinglePiece(square, newPiece, updatedFlags, animation) {
             if (!updatedFlags[square.id]) {
                 let lastMove = this.lastMove();
-                console.log(lastMove);
 
                 if (lastMove?.promotion) {
                     if (lastMove['to'] === square.id) {
-                        console.log('Promotion detected');
 
                         let move = new Move(this.squares[lastMove['from']], square);
                         this.translatePiece(move, true, animation
@@ -2846,7 +2839,6 @@ var Chessboard = (function () {
                 event.preventDefault();
 
                 if (!this.config.draggable || !piece) return;
-                if (!this.config.onDragStart(square, piece)) return;
 
                 let prec;
                 let from = square;
@@ -2856,7 +2848,7 @@ var Chessboard = (function () {
 
                 if (!this.canMove(from)) return;
                 if (!this.config.clickable) this.clicked = null;
-                if (this.onClick(from)) return;
+                if (this.onClick(from, true, true)) return;
 
                 img.style.position = 'absolute';
                 img.style.zIndex = 100;
@@ -2870,10 +2862,11 @@ var Chessboard = (function () {
                 };
 
                 const onMouseMove = (event) => {
+                    if (!this.config.onDragStart(square, piece)) return;
                     if (!moveAt(event.pageX, event.pageY)) ;
 
-                    const boardRect = this.board.getBoundingClientRect();
-                    const { offsetWidth: boardWidth, offsetHeight: boardHeight } = this.board;
+                    const boardRect = this.element.getBoundingClientRect();
+                    const { offsetWidth: boardWidth, offsetHeight: boardHeight } = this.element;
                     const x = event.clientX - boardRect.left;
                     const y = event.clientY - boardRect.top;
 
@@ -2908,9 +2901,9 @@ var Chessboard = (function () {
                         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);
+                    } else if (!to || !this.onClick(to, true, true)) {
+                        this.snapbackPiece(from);
+                        if (to !== from) this.config.onSnapbackEnd(from, piece);
                     }
                 };
 
@@ -2937,14 +2930,14 @@ var Chessboard = (function () {
                     if (this.config.clickable && (!piece || this.config.onlyLegalMoves)) this.onClick(square);
                 };
 
-                square.element.addEventListener("click", handleClick);
+                square.element.addEventListener("mousedown", handleClick);
                 square.element.addEventListener("touch", handleClick);
             }
         }
 
-        onClick(square, animation = this.config.moveAnimation) {
-
-            if (square.id === this.clicked?.id) return false;
+        onClick(square, animation = this.config.moveAnimation, dragged = false) {
+            
+            if (this.clicked === square) return false;
 
             let from = this.clicked;
             this.clicked = null;
@@ -2963,19 +2956,22 @@ var Chessboard = (function () {
             if (!from) {
 
                 if (this.canMove(square)) {
-                    square.select();
-                    this.hintMoves(square);
+                    if (this.config.clickable) {
+                        square.select();
+                        this.hintMoves(square);
+                    }
                     this.clicked = square;
                 }
 
                 return false;
             }
 
-            if (!this.canMove(from)) return false;
-
             let move = new Move(from, square, promotion);
 
             move.from.deselect();
+
+            if (!move.check()) return false;
+
             this.allSquares("removeHint");
 
             if (this.config.onlyLegalMoves && !move.isLegal(this.game)) return false;
@@ -3030,7 +3026,7 @@ var Chessboard = (function () {
             return this.game.moves({ verbose: verb });
         }
 
-        move(move, animation) {
+        move(move, animation = true) {
             move = this.convertMove(move);
             move.check();
 
@@ -3201,36 +3197,60 @@ var Chessboard = (function () {
         }
 
         setOrientation(color, animation = true) {
-            if (!['w', 'b'].includes(color)) {
-                this.config.orientation = color;
-                this.flip(animation);
+            if (['w', 'b'].includes(color)) {
+                if (color !== this.config.orientation) {
+                    this.flip(animation);
+                }
             } else {
                 throw new Error(this.error_messages['invalid_orientation'] + color);
             }
         }
 
+        highlight(squareId) {
+            let square = this.convertSquare(squareId);
+            square.check();
+            square.highlight();
+        }
+
+        dehighlight(squareId) {
+            let square = this.convertSquare(squareId);
+            square.check();
+            square.dehighlight();
+        }
+
         lastMove() {
             const moves = this.history({ verbose: true });
             return moves[moves.length - 1];
         }
 
-        flip(animation = true) {
-            this.clearSquares();
-            this.allSquares('opposite');
-            this.updateBoardPieces(animation);
+        flip() {
+            this.config.orientation = this.config.orientation === 'w' ? 'b' : 'w';
+            this.destroy();
+            this.initParams();
+            this.build();
         }
 
         build() {
-            if (this.board) throw new Error('Board already built');
+            if (this.element) this.destroy();
             this.init();
         }
 
+        destroy() {
+            this.removeSquares();
+            this.removeBoard();
+        }
+
         ascii() {
             return this.game.ascii();
         }
 
         board() {
-            return this.game.board();
+            let dict = {};
+            for (let squareId in this.squares) {
+                let piece = this.getGamePieceId(squareId);
+                if (piece) dict[squareId] = piece;
+            }
+            return dict;
         }
 
         clear(options = {}, animation = true) {
@@ -3245,7 +3265,7 @@ var Chessboard = (function () {
         get(squareId) {
             const square = this.convertSquare(squareId);
             square.check();
-            return square.piece;        
+            return square.piece;
         }
 
         getCastlingRights(color) {
@@ -3292,9 +3312,9 @@ var Chessboard = (function () {
             return this.game.isThreefoldRepetition();
         }
 
-        load(fen, options = {}, animation = true) {
+        load(position, options = {}, animation = true) {
             this.clearSquares();
-            this.game.load(fen, options);
+            this.setGame(position, options);
             this.updateBoardPieces(animation);
         }
 
@@ -3317,7 +3337,8 @@ var Chessboard = (function () {
         }
 
         put(pieceId, squareId, animation = true) {
-            const success = this.game.put(pieceId, squareId);
+            const [type, color] = pieceId.split('');
+            const success = this.game.put({ type: type, color: color }, squareId);
             if (success) this.updateBoardPieces(animation);
             return success;
         }
@@ -3356,7 +3377,7 @@ var Chessboard = (function () {
         setHeader(key, value) {
             return this.game.setHeader(key, value);
         }
-        
+
         squareColor(squareId) {
             return this.game.squareColor(squareId);
         }
@@ -3397,4 +3418,5 @@ var Chessboard = (function () {
     return Chessboard;
 
 })();
-window.Chessboard.Chessboard = Chessboard;
+
+window.Chessboard.Chessboard = Chessboard;

package/chessboard.config.js

@@ -19,7 +19,8 @@ const transitionFunctions = {
     'linear': 'linear',
     'ease-in': 'ease-in',
     'ease-out': 'ease-out',
-    'ease-in-out': 'ease-in-out'
+    'ease-in-out': 'ease-in-out',
+    'none': null
 };
 
 class ChessboardConfig {
@@ -73,9 +74,6 @@ class ChessboardConfig {
         this.dropOffBoard = config.dropOffBoard;
         this.size = config.size;
         this.movableColors = config.movableColors;
-        this.moveAnimation = config.moveAnimation;
-        this.snapbackAnimation = config.snapbackAnimation;
-        this.fadeAnimation = config.fadeAnimation;
         this.piecesPath = config.piecesPath;
         this.onMove = config.onMove;
         this.onMoveEnd = config.onMoveEnd;
@@ -85,6 +83,10 @@ class ChessboardConfig {
         this.onDrop = config.onDrop;
         this.onSnapbackEnd = config.onSnapbackEnd;
 
+        this.moveAnimation = this.setTransitionFunction(config.moveAnimation);
+        this.snapbackAnimation = this.setTransitionFunction(config.snapbackAnimation);
+        this.fadeAnimation = this.setTransitionFunction(config.fadeAnimation);
+
         this.hints = this.setBoolean(config.hints);
         this.clickable = this.setBoolean(config.clickable);
         this.draggable = this.setBoolean(config.draggable);
@@ -137,7 +139,7 @@ class ChessboardConfig {
     }
 
     setTransitionFunction(value) {
-        if (transitionFunctions[value]) return transitionFunctions[value];
+        if (Object.keys(transitionFunctions).indexOf(value) !== -1) return transitionFunctions[value];
         throw new Error('Invalid transition function');
     }
 }

package/chessboard.js

@@ -65,7 +65,7 @@ class Chessboard {
     }
 
     initParams() {
-        this.board = null;
+        this.element = null;
         this.squares = {};
         this.promoting = false;
         this.clicked = null;
@@ -77,12 +77,12 @@ class Chessboard {
     // Board Setup
     // -------------------
     buildBoard() {
-        this.board = document.getElementById(this.config.id_div);
-        if (!this.board) {
+        this.element = document.getElementById(this.config.id_div);
+        if (!this.element) {
             throw new Error(this.error_messages['invalid_id_div'] + this.config.id_div);
         }
         this.resize(this.config.size);
-        this.board.className = "board";
+        this.element.className = "board";
     }
 
     buildSquares() {
@@ -94,19 +94,19 @@ class Chessboard {
                 let square = new Square(square_row, square_col);
                 this.squares[square.getId()] = square;
 
-                this.board.appendChild(square.element);
+                this.element.appendChild(square.element);
             }
         }
     }
 
     removeBoard() {
 
-        this.board.innerHTML = '';
+        this.element.innerHTML = '';
     }
 
     removeSquares() {
         for (const square of Object.values(this.squares)) {
-            this.board.removeChild(square.element);
+            this.element.removeChild(square.element);
             square.destroy();
 
         }
@@ -116,12 +116,12 @@ class Chessboard {
     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;
+            if (this.element.offsetWidth === 0) {
+                size = this.element.offsetHeight;
+            } else if (this.element.offsetHeight === 0) {
+                size = this.element.offsetWidth;
             } else {
-                size = Math.min(this.board.offsetWidth, this.board.offsetHeight);
+                size = Math.min(this.element.offsetWidth, this.element.offsetHeight);
             }
             this.resize(size);
         } else if (typeof value !== 'number') {
@@ -137,7 +137,7 @@ class Chessboard {
     // -------------------
     convertFen(position) {
         if (typeof position === 'string') {
-            
+            if (position == 'start') return 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
             if (this.validateFen(position)) return position;
             else if (this.standard_positions[position]) return this.standard_positions[position];
             else throw new Error('Invalid position -' + position);
@@ -164,15 +164,16 @@ class Chessboard {
                 if (empty > 0) rowParts.push(empty);
                 parts.push(rowParts.join(''));
             }
-            return parts.join('/');
+            return parts.join('/') + ' w KQkq - 0 1';;
         } else {
             throw new Error('Invalid position -' + position);
         }
     }
 
-    setGame(position) {
+    setGame(position, options = undefined) {
         const fen = this.convertFen(position);
-        this.game = new Chess(fen === 'start' ? this.standard_positions['default'] : null);
+        if (this.game) this.game.load(fen, options);
+        else this.game = new Chess(fen);
     }
 
     // -------------------
@@ -252,7 +253,7 @@ class Chessboard {
 
     }
 
-    snapbackPiece(square, animate) {
+    snapbackPiece(square, animate = this.config.snapbackAnimation) {
         let move = new Move(square, square);
         this.translatePiece(move, false, animate);
     }
@@ -263,11 +264,15 @@ class Chessboard {
     updateBoardPieces(animation = false) {
         let { updatedFlags, escapeFlags, movableFlags, pendingTranslations } = this.prepareBoardUpdateData();
 
+        let change = Object.values(updatedFlags).some(flag => !flag);
+
         this.identifyPieceTranslations(updatedFlags, escapeFlags, movableFlags, pendingTranslations);
 
         this.executePieceTranslations(pendingTranslations, escapeFlags, animation);
 
         this.processRemainingPieceUpdates(updatedFlags, animation);
+
+        if (change) this.config.onChange(this.fen());
     }
 
     prepareBoardUpdateData() {
@@ -395,9 +400,8 @@ class Chessboard {
             event.preventDefault();
 
             if (!this.config.draggable || !piece) return;
-            if (!this.config.onDragStart(square, piece)) return;
 
-            let prec;
+            let prec, moved;
             let from = square;
             let to = square;
 
@@ -405,7 +409,7 @@ class Chessboard {
 
             if (!this.canMove(from)) return;
             if (!this.config.clickable) this.clicked = null;
-            if (this.onClick(from)) return;
+            if (this.onClick(from, true, true)) return;
 
             img.style.position = 'absolute';
             img.style.zIndex = 100;
@@ -419,10 +423,11 @@ class Chessboard {
             };
 
             const onMouseMove = (event) => {
+                if (!this.config.onDragStart(square, piece)) return;
                 if (!moveAt(event.pageX, event.pageY)) return;
 
-                const boardRect = this.board.getBoundingClientRect();
-                const { offsetWidth: boardWidth, offsetHeight: boardHeight } = this.board;
+                const boardRect = this.element.getBoundingClientRect();
+                const { offsetWidth: boardWidth, offsetHeight: boardHeight } = this.element;
                 const x = event.clientX - boardRect.left;
                 const y = event.clientY - boardRect.top;
 
@@ -457,9 +462,9 @@ class Chessboard {
                     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);
+                } else if (!to || !this.onClick(to, true, true)) {
+                    this.snapbackPiece(from);
+                    if (to !== from) this.config.onSnapbackEnd(from, piece);
                 }
             };
 
@@ -486,14 +491,14 @@ class Chessboard {
                 if (this.config.clickable && (!piece || this.config.onlyLegalMoves)) this.onClick(square)
             }
 
-            square.element.addEventListener("click", handleClick);
+            square.element.addEventListener("mousedown", handleClick);
             square.element.addEventListener("touch", handleClick);
         }
     }
 
-    onClick(square, animation = this.config.moveAnimation) {
-
-        if (square.id === this.clicked?.id) return false;
+    onClick(square, animation = this.config.moveAnimation, dragged = false) {
+        
+        if (this.clicked === square) return false;
 
         let from = this.clicked;
         this.clicked = null;
@@ -512,19 +517,22 @@ class Chessboard {
         if (!from) {
 
             if (this.canMove(square)) {
-                square.select();
-                this.hintMoves(square);
+                if (this.config.clickable) {
+                    square.select();
+                    this.hintMoves(square);
+                }
                 this.clicked = square;
             }
 
             return false;
         }
 
-        if (!this.canMove(from)) return false;
-
         let move = new Move(from, square, promotion);
 
         move.from.deselect();
+
+        if (!move.check()) return false;
+
         this.allSquares("removeHint");
 
         if (this.config.onlyLegalMoves && !move.isLegal(this.game)) return false;
@@ -579,7 +587,7 @@ class Chessboard {
         return this.game.moves({ verbose: verb });
     }
 
-    move(move, animation) {
+    move(move, animation = true) {
         move = this.convertMove(move);
         move.check();
 
@@ -750,14 +758,27 @@ class Chessboard {
     }
 
     setOrientation(color, animation = true) {
-        if (!['w', 'b'].includes(color)) {
-            this.config.orientation = color;
-            this.flip(animation);
+        if (['w', 'b'].includes(color)) {
+            if (color !== this.config.orientation) {
+                this.flip(animation);
+            }
         } else {
             throw new Error(this.error_messages['invalid_orientation'] + color);
         }
     }
 
+    highlight(squareId) {
+        let square = this.convertSquare(squareId);
+        square.check();
+        square.highlight();
+    }
+
+    dehighlight(squareId) {
+        let square = this.convertSquare(squareId);
+        square.check();
+        square.dehighlight();
+    }
+
     lastMove() {
         const moves = this.history({ verbose: true });
         return moves[moves.length - 1];
@@ -771,7 +792,7 @@ class Chessboard {
     }
 
     build() {
-        if (this.board) this.destroy();
+        if (this.element) this.destroy();
         this.init();
     }
 
@@ -785,7 +806,12 @@ class Chessboard {
     }
 
     board() {
-        return this.game.board();
+        let dict = {};
+        for (let squareId in this.squares) {
+            let piece = this.getGamePieceId(squareId);
+            if (piece) dict[squareId] = piece;
+        }
+        return dict;
     }
 
     clear(options = {}, animation = true) {
@@ -800,7 +826,7 @@ class Chessboard {
     get(squareId) {
         const square = this.convertSquare(squareId);
         square.check();
-        return square.piece;        
+        return square.piece;
     }
 
     getCastlingRights(color) {
@@ -847,9 +873,9 @@ class Chessboard {
         return this.game.isThreefoldRepetition();
     }
 
-    load(fen, options = {}, animation = true) {
+    load(position, options = {}, animation = true) {
         this.clearSquares();
-        this.game.load(fen, options);
+        this.setGame(position, options);
         this.updateBoardPieces(animation);
     }
 
@@ -912,7 +938,7 @@ class Chessboard {
     setHeader(key, value) {
         return this.game.setHeader(key, value);
     }
-    
+
     squareColor(squareId) {
         return this.game.squareColor(squareId);
     }

package/chessboard.move.js

@@ -21,27 +21,15 @@ class Move {
     }
 
     check() {
-        if (this.piece === null) {
-            throw new Error("Invalid move: piece is null");
-        }
-        if (!(this.piece instanceof Piece)) {
-            throw new Error("Invalid move: piece is not an instance of Piece");
-        }
-        if (['q', 'r', 'b', 'n', null].indexOf(this.promotion) === -1) {
-            throw new Error("Invalid move: promotion is not valid");
-        }
-        if (!(this.from instanceof Square)) {
-            throw new Error("Invalid move: from is not an instance of Square");
-        }
-        if (!(this.to instanceof Square)) {
-            throw new Error("Invalid move: to is not an instance of Square");
-        }
-        if (!this.to) {
-            throw new Error("Invalid move: to is null or undefined");
-        }
-        if (!this.from) {
-            throw new Error("Invalid move: from is null or undefined");
-        }
+        if (this.piece === null) return false;
+        if (!(this.piece instanceof Piece)) return false;
+        if (['q', 'r', 'b', 'n', null].indexOf(this.promotion) === -1) return false;
+        if (!(this.from instanceof Square)) return false;
+        if (!(this.to instanceof Square)) return false;
+        if (!this.to) return false;
+        if (!this.from) return false;
+        if (this.from === this.to) return false;
+        return true;
     }
 
     isLegal(game) {

package/chessboard.piece.js

@@ -58,7 +58,7 @@ class Piece {
     }
 
     setDrag(f) {
-        this.element.ondragstart = () => false;
+        this.element.ondragstart = (e) => { e.preventDefault() };
         this.element.onmousedown = f;
     }
 

package/package.json

@@ -3,7 +3,7 @@
     "chess.js": "^1.0.0"
   },
   "name": "@alepot55/chessboardjs",
-  "version": "2.1.7",
+  "version": "2.2.1",
   "main": "chessboard.js",
   "type": "module",
   "scripts": {