@alepot55/chessboardjs 2.1.7 → 2.2.0

package/chessboard.bundle.js

@@ -2587,6 +2587,7 @@ var Chessboard = (function () {
         // -------------------
         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);
@@ -2620,8 +2621,10 @@ var Chessboard = (function () {
         }
 
         setGame(position) {
+            console.log(position);
             const fen = this.convertFen(position);
-            this.game = new Chess(fen);
+            console.log(fen);
+            this.game = new Chess(fen === 'start' ? this.standard_positions['default'] : null);
         }
 
         // -------------------
@@ -2816,11 +2819,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
@@ -3214,17 +3215,23 @@ var Chessboard = (function () {
             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.board) this.destroy();
             this.init();
         }
 
+        destroy() {
+            this.removeSquares();
+            this.removeBoard();
+        }
+
         ascii() {
             return this.game.ascii();
         }
@@ -3317,7 +3324,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;
         }
@@ -3397,4 +3405,5 @@ var Chessboard = (function () {
     return 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,17 @@ 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);
+        console.log(fen);
+        if (this.game) this.game.load(fen, options);
+        else this.game = new Chess(fen);
     }
 
     // -------------------
@@ -252,7 +254,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 +265,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 +401,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 +410,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 +424,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 +463,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 +492,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 +518,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 +588,7 @@ class Chessboard {
         return this.game.moves({ verbose: verb });
     }
 
-    move(move, animation) {
+    move(move, animation = true) {
         move = this.convertMove(move);
         move.check();
 
@@ -750,20 +759,34 @@ 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];
     }
 
     flip() {
+        console.log(this.config.position);
         this.config.orientation = this.config.orientation === 'w' ? 'b' : 'w';
         this.destroy();
         this.initParams();
@@ -771,7 +794,7 @@ class Chessboard {
     }
 
     build() {
-        if (this.board) this.destroy();
+        if (this.element) this.destroy();
         this.init();
     }
 
@@ -785,7 +808,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 +828,7 @@ class Chessboard {
     get(squareId) {
         const square = this.convertSquare(squareId);
         square.check();
-        return square.piece;        
+        return square.piece;
     }
 
     getCastlingRights(color) {
@@ -847,9 +875,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 +940,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.0",
   "main": "chessboard.js",
   "type": "module",
   "scripts": {