@alepot55/chessboardjs 2.3.6 → 2.3.7

package/dist/chessboard.iife.js

@@ -127,6 +127,7 @@ var Chessboard = (function (exports) {
         invalid_fadeTime: 'Invalid fadeTime: ',
         invalid_fadeAnimation: 'Invalid fadeAnimation: ',
         invalid_ratio: 'Invalid ratio: ',
+        invalid_animationStyle: 'Invalid animationStyle: ',
         animation_failed: 'Animation failed: ',
         
         // Event handlers
@@ -378,6 +379,7 @@ var Chessboard = (function (exports) {
         movableColors: ['w', 'b', 'white', 'black', 'both', 'none'],
         dropOffBoard: ['snapback', 'trash'],
         easingTypes: ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'],
+        animationStyles: ['sequential', 'simultaneous'],
         modes: ['normal', 'creative', 'analysis'],
         promotionPieces: ['q', 'r', 'b', 'n', 'Q', 'R', 'B', 'N']
     });
@@ -706,6 +708,14 @@ var Chessboard = (function (exports) {
             return this._validValues.easingTypes.includes(easing);
         }
 
+        /**
+         * Validates animation style
+         * @param {string} style - Animation style to validate
+         * @returns {boolean} True if valid
+         */
+        isValidAnimationStyle(style) {
+            return this._validValues.animationStyles.includes(style);
+        }
 
         /**
          * Validates CSS color format
@@ -902,7 +912,11 @@ var Chessboard = (function (exports) {
             if (config.dropOffBoard && !this.isValidDropOffBoard(config.dropOffBoard)) {
                 errors.push(ERROR_MESSAGES.invalid_dropOffBoard + config.dropOffBoard);
             }
-                    
+            
+            if (config.animationStyle && !this.isValidAnimationStyle(config.animationStyle)) {
+                errors.push(ERROR_MESSAGES.invalid_animationStyle + config.animationStyle);
+            }
+            
             // Validate callbacks
             const callbacks = ['onMove', 'onMoveEnd', 'onChange', 'onDragStart', 'onDragMove', 'onDrop', 'onSnapbackEnd'];
             for (const callback of callbacks) {
@@ -1080,7 +1094,8 @@ var Chessboard = (function (exports) {
         fadeAnimation: 'ease',
         ratio: 0.9,
         piecesPath: '../assets/themes/default',
-        simultaneousAnimationDelay: 100,
+        animationStyle: 'simultaneous',
+        simultaneousAnimationDelay: 0,
         onMove: () => true,
         onMoveEnd: () => true,
         onChange: () => true,
@@ -1114,19 +1129,19 @@ var Chessboard = (function (exports) {
         constructor(settings = {}) {
             // Initialize validation service
             this._validationService = new ValidationService();
-
+            
             // Validate input
             this._validateInput(settings);
-
+            
             // Merge with defaults
             const config = this._mergeWithDefaults(settings);
-
+            
             // Process and validate configuration
             this._processConfiguration(config);
-
+            
             // Set CSS properties
             this._setCSSProperties(config);
-
+            
             // Configure mode-specific settings
             this._configureModeSettings();
         }
@@ -1141,7 +1156,7 @@ var Chessboard = (function (exports) {
             if (settings !== null && typeof settings !== 'object') {
                 throw new ConfigurationError('Settings must be an object', 'settings', settings);
             }
-
+            
             // Validate using validation service
             try {
                 this._validationService.validateConfig(settings);
@@ -1175,7 +1190,7 @@ var Chessboard = (function (exports) {
             this.size = config.size;
             this.movableColors = config.movableColors;
             this.piecesPath = config.piecesPath;
-
+            
             // Event handlers
             this.onMove = this._validateCallback(config.onMove);
             this.onMoveEnd = this._validateCallback(config.onMoveEnd);
@@ -1203,8 +1218,9 @@ var Chessboard = (function (exports) {
             this.snapbackTime = this._setTime(config.snapbackTime);
             this.dropCenterTime = this._setTime(config.dropCenterTime);
             this.fadeTime = this._setTime(config.fadeTime);
-
+            
             // Animation style properties
+            this.animationStyle = this._validateAnimationStyle(config.animationStyle);
             this.simultaneousAnimationDelay = this._validateDelay(config.simultaneousAnimationDelay);
         }
 
@@ -1265,6 +1281,19 @@ var Chessboard = (function (exports) {
             return callback;
         }
 
+        /**
+         * Validates animation style
+         * @private
+         * @param {string} style - Animation style
+         * @returns {string} Validated style
+         * @throws {ConfigurationError} If style is invalid
+         */
+        _validateAnimationStyle(style) {
+            if (!this._validationService.isValidAnimationStyle(style)) {
+                throw new ConfigurationError('Invalid animation style', 'animationStyle', style);
+            }
+            return style;
+        }
 
         /**
          * Validates animation delay
@@ -1322,11 +1351,11 @@ var Chessboard = (function (exports) {
                 }
                 return value;
             }
-
+            
             if (typeof value === 'string' && value in ANIMATION_TIMES) {
                 return ANIMATION_TIMES[value];
             }
-
+            
             throw new ConfigurationError('Invalid time value', 'time', value);
         }
 
@@ -1341,11 +1370,11 @@ var Chessboard = (function (exports) {
             if (typeof value === 'boolean') {
                 return value;
             }
-
+            
             if (value in BOOLEAN_VALUES) {
                 return BOOLEAN_VALUES[value];
             }
-
+            
             throw new ConfigurationError('Invalid boolean value', 'boolean', value);
         }
 
@@ -1361,17 +1390,17 @@ var Chessboard = (function (exports) {
             if (typeof value === 'boolean') {
                 return value ? TRANSITION_FUNCTIONS.ease : null;
             }
-
+            
             // Handle string values
             if (typeof value === 'string' && value in TRANSITION_FUNCTIONS) {
                 return TRANSITION_FUNCTIONS[value];
             }
-
+            
             // Handle null/undefined
             if (value === null || value === undefined) {
                 return null;
             }
-
+            
             throw new ConfigurationError('Invalid transition function', 'transitionFunction', value);
         }
 
@@ -1402,6 +1431,7 @@ var Chessboard = (function (exports) {
                 fadeTime: this.fadeTime,
                 fadeAnimation: this.fadeAnimation,
                 piecesPath: this.piecesPath,
+                animationStyle: this.animationStyle,
                 simultaneousAnimationDelay: this.simultaneousAnimationDelay,
                 onlyLegalMoves: this.onlyLegalMoves
             };
@@ -1423,7 +1453,7 @@ var Chessboard = (function (exports) {
 
             // Apply updates
             const newConfig = Object.assign({}, this.toObject(), updates);
-
+            
             // Re-process configuration
             this._processConfiguration(newConfig);
             this._setCSSProperties(newConfig);
@@ -1646,10 +1676,22 @@ var Chessboard = (function (exports) {
 
         setDrag(f) {
             if (!this.element) { console.debug(`[Piece] setDrag: ${this.id} - element is null`); return; }
+            // Remove previous handlers
+            this.element.onmousedown = null;
+            this.element.ontouchstart = null;
+            this.element.ondragstart = null;
+            if (window.PointerEvent) {
+                this.element.onpointerdown = null;
+            }
+            // Set new handlers
             this.element.ondragstart = (e) => { e.preventDefault(); };
             this.element.onmousedown = f;
             this.element.ontouchstart = f; // Drag touch
-            console.debug(`[Piece] setDrag: ${this.id}`);
+            if (window.PointerEvent) {
+                this.element.onpointerdown = f;
+                console.debug(`[Piece] setDrag: pointerdown set for ${this.id}`);
+            }
+            console.debug(`[Piece] setDrag: mousedown/ontouchstart set for ${this.id}`);
         }
 
         destroy() {
@@ -7072,7 +7114,7 @@ var Chessboard = (function (exports) {
      * Implements the Facade pattern to provide a unified interface
      * @class
      */
-    let Chessboard$1 = class Chessboard {
+    class Chessboard {
         /**
          * Creates a new Chessboard instance
          * @param {Object} config - Configuration object
@@ -7097,8 +7139,6 @@ var Chessboard = (function (exports) {
             } catch (error) {
                 this._handleConstructorError(error);
             }
-            this._undoneMoves = [];
-            this._updateBoardPieces(true, true); // Forza popolamento DOM subito
         }
 
         /**
@@ -7142,31 +7182,6 @@ var Chessboard = (function (exports) {
             }
         }
 
-        /**
-         * Cleans up any partially initialized resources (safe to call multiple times)
-         * @private
-         */
-        _cleanup() {
-            // Remove event listeners if present
-            if (this.eventService && typeof this.eventService.removeListeners === 'function') {
-                this.eventService.removeListeners();
-            }
-            // Clear timeouts
-            if (this._updateTimeout) {
-                clearTimeout(this._updateTimeout);
-                this._updateTimeout = null;
-            }
-            // Null all services
-            this.validationService = null;
-            this.coordinateService = null;
-            this.positionService = null;
-            this.boardService = null;
-            this.pieceService = null;
-            this.animationService = null;
-            this.moveService = null;
-            this.eventService = null;
-        }
-
         /**
          * Initializes all services
          * @private
@@ -7235,23 +7250,8 @@ var Chessboard = (function (exports) {
         /**
          * Builds the board DOM structure
          * @private
-         * Best practice: always remove squares (destroy JS/DOM) before clearing the board container.
          */
         _buildBoard() {
-            console.log('CHIAMATO: _buildBoard');
-            if (this._isUndoRedo) {
-                console.log('SKIP _buildBoard per undo/redo');
-                return;
-            }
-            // Forza la pulizia completa del contenitore board (DOM)
-            const boardContainer = document.getElementById(this.config.id_div);
-            if (boardContainer) boardContainer.innerHTML = '';
-            // Force remove all pieces from all squares (no animation, best practice)
-            if (this.boardService && this.boardService.squares) {
-                Object.values(this.boardService.squares).forEach(sq => sq && sq.forceRemoveAllPieces && sq.forceRemoveAllPieces());
-            }
-            if (this.boardService && this.boardService.removeSquares) this.boardService.removeSquares();
-            if (this.boardService && this.boardService.removeBoard) this.boardService.removeBoard();
             this.boardService.buildBoard();
         }
 
@@ -7260,14 +7260,6 @@ var Chessboard = (function (exports) {
          * @private
          */
         _buildSquares() {
-            console.log('CHIAMATO: _buildSquares');
-            if (this._isUndoRedo) {
-                console.log('SKIP _buildSquares per undo/redo');
-                return;
-            }
-            if (this.boardService && this.boardService.removeSquares) {
-                this.boardService.removeSquares();
-            }
             this.boardService.buildSquares((row, col) => {
                 return this.coordinateService.realCoord(row, col);
             });
@@ -7472,7 +7464,7 @@ var Chessboard = (function (exports) {
                     const capturedPiece = move.to.piece;
 
                     // For castle moves in simultaneous mode, we need to coordinate both animations
-                    if (isCastleMove) {
+                    if (isCastleMove && this.config.animationStyle === 'simultaneous') {
                         // Start king animation
                         this.pieceService.translatePiece(
                             move,
@@ -7637,7 +7629,6 @@ var Chessboard = (function (exports) {
          * @param {boolean} [isPositionLoad=false] - Whether this is a position load
          */
         _updateBoardPieces(animation = false, isPositionLoad = false) {
-            console.log('CHIAMATO: _updateBoardPieces', { animation, isPositionLoad, isUndoRedo: this._isUndoRedo });
             // Check if services are available
             if (!this.positionService || !this.moveService || !this.eventService) {
                 console.log('Cannot update board pieces - services not available');
@@ -7697,125 +7688,112 @@ var Chessboard = (function (exports) {
         }
 
         /**
-         * Aggiorna i pezzi sulla scacchiera con animazione e delay configurabile (greedy matching)
+         * Performs the actual board update
          * @private
-         * @param {boolean} [animation=false] - Se animare
-         * @param {boolean} [isPositionLoad=false] - Se è un caricamento posizione (delay 0)
+         * @param {boolean} [animation=false] - Whether to animate
+         * @param {boolean} [isPositionLoad=false] - Whether this is a position load (affects delay)
          */
         _doUpdateBoardPieces(animation = false, isPositionLoad = false) {
-            if (this._isDragging) return;
-            if (this._isPromoting) return;
-            if (!this.positionService || !this.positionService.getGame()) return;
+            // Skip update if we're in the middle of a promotion
+            if (this._isPromoting) {
+                console.log('Skipping board update during promotion');
+                return;
+            }
+
+            // Check if services are available
+            if (!this.positionService || !this.positionService.getGame()) {
+                console.log('Cannot update board pieces - position service not available');
+                return;
+            }
+
             const squares = this.boardService.getAllSquares();
             const gameStateBefore = this.positionService.getGame().fen();
-            if (/^8\/8\/8\/8\/8\/8\/8\/8/.test(gameStateBefore)) {
-                const boardContainer = document.getElementById(this.config.id_div);
-                if (boardContainer) {
-                    const pieceElements = boardContainer.querySelectorAll('.piece');
-                    pieceElements.forEach(element => element.remove());
-                }
-                Object.values(squares).forEach(sq => { if (sq && sq.piece) sq.piece = null; });
-                this._clearVisualState();
-                this._addListeners();
-                if (this.config.onChange) this.config.onChange(gameStateBefore);
-                return;
+
+            console.log('_doUpdateBoardPieces - current FEN:', gameStateBefore);
+            console.log('_doUpdateBoardPieces - animation:', animation, 'style:', this.config.animationStyle, 'isPositionLoad:', isPositionLoad);
+
+            // Determine which animation style to use
+            const useSimultaneous = this.config.animationStyle === 'simultaneous';
+            console.log('_doUpdateBoardPieces - useSimultaneous:', useSimultaneous);
+
+            if (useSimultaneous) {
+                console.log('Using simultaneous animation');
+                this._doSimultaneousUpdate(squares, gameStateBefore, isPositionLoad);
+            } else {
+                console.log('Using sequential animation');
+                this._doSequentialUpdate(squares, gameStateBefore, animation);
             }
+        }
 
-            // --- Matching greedy tra attuale e atteso ---
-            const currentMap = {};
-            const expectedMap = {};
+        /**
+         * Performs sequential piece updates (original behavior)
+         * @private
+         * @param {Object} squares - All squares
+         * @param {string} gameStateBefore - Game state before update
+         * @param {boolean} animation - Whether to animate
+         */
+        _doSequentialUpdate(squares, gameStateBefore, animation) {
+            // Update each square sequentially
             Object.values(squares).forEach(square => {
-                const currentPiece = square.piece;
                 const expectedPieceId = this.positionService.getGamePieceId(square.id);
-                if (currentPiece) {
-                    const key = (currentPiece.color + currentPiece.type).toLowerCase();
-                    if (!currentMap[key]) currentMap[key] = [];
-                    currentMap[key].push({ square, id: square.id, piece: currentPiece });
-                }
-                if (expectedPieceId) {
-                    const key = expectedPieceId.toLowerCase();
-                    if (!expectedMap[key]) expectedMap[key] = [];
-                    expectedMap[key].push({ square, id: square.id });
-                }
-            });
-            const animationDelay = isPositionLoad ? 0 : this.config.simultaneousAnimationDelay || 0;
-            let totalAnimations = 0;
-            let animationsCompleted = 0;
+                const currentPiece = square.piece;
+                const currentPieceId = currentPiece ? currentPiece.getId() : null;
 
-            // 1. Matching greedy: trova i movimenti
-            const moves = [];
-            const fromMatched = {};
-            const toMatched = {};
-            const unchanged = [];
-            Object.keys(expectedMap).forEach(key => {
-                const fromList = (currentMap[key] || []).slice();
-                const toList = expectedMap[key].slice();
-                const localFromMatched = new Array(fromList.length).fill(false);
-                const localToMatched = new Array(toList.length).fill(false);
-                // Matrice delle distanze
-                const distances = [];
-                for (let i = 0; i < fromList.length; i++) {
-                    distances[i] = [];
-                    for (let j = 0; j < toList.length; j++) {
-                        distances[i][j] = Math.abs(fromList[i].square.row - toList[j].square.row) +
-                            Math.abs(fromList[i].square.col - toList[j].square.col);
-                    }
-                }
-                while (true) {
-                    let minDist = Infinity, minI = -1, minJ = -1;
-                    for (let i = 0; i < fromList.length; i++) {
-                        if (localFromMatched[i]) continue;
-                        for (let j = 0; j < toList.length; j++) {
-                            if (localToMatched[j]) continue;
-                            if (distances[i][j] < minDist) {
-                                minDist = distances[i][j];
-                                minI = i;
-                                minJ = j;
-                            }
+                // Log only for squares that are changing
+                if (currentPieceId !== expectedPieceId) {
+                    console.log(`_doSequentialUpdate - ${square.id}: ${currentPieceId} -> ${expectedPieceId}`);
+
+                    // Check if we already have the correct piece (from promotion)
+                    if (currentPiece && currentPiece.getId() === expectedPieceId) {
+                        console.log(`Piece ${expectedPieceId} already correctly placed on ${square.id}`);
+                    } else {
+                        // Remove current piece if exists
+                        if (currentPiece) {
+                            this.pieceService.removePieceFromSquare(square, animation);
+                        }
+
+                        // Add new piece if needed
+                        if (expectedPieceId) {
+                            const newPiece = this.pieceService.convertPiece(expectedPieceId);
+                            this.pieceService.addPieceOnSquare(
+                                square,
+                                newPiece,
+                                animation,
+                                this._createDragFunction.bind(this)
+                            );
                         }
                     }
-                    if (minI === -1 || minJ === -1) break;
-                    // Se la posizione è la stessa E il Piece è lo stesso oggetto, non fare nulla (pezzo unchanged)
-                    if (fromList[minI].square === toList[minJ].square && squares[toList[minJ].square.id].piece === fromList[minI].piece) {
-                        unchanged.push({ square: fromList[minI].square, piece: fromList[minI].piece });
-                        localFromMatched[minI] = true;
-                        localToMatched[minJ] = true;
-                        fromMatched[fromList[minI].square.id] = true;
-                        toMatched[toList[minJ].square.id] = true;
-                        continue;
-                    }
-                    // Altrimenti, sposta il pezzo
-                    moves.push({ from: fromList[minI].square, to: toList[minJ].square, piece: fromList[minI].piece });
-                    localFromMatched[minI] = true;
-                    localToMatched[minJ] = true;
-                    fromMatched[fromList[minI].square.id] = true;
-                    toMatched[toList[minJ].square.id] = true;
                 }
             });
 
-            // 2. Rimozione: pezzi presenti solo in attuale (non matched)
-            const removes = [];
-            Object.keys(currentMap).forEach(key => {
-                currentMap[key].forEach(({ square, piece }) => {
-                    if (!fromMatched[square.id]) {
-                        removes.push({ square, piece });
-                    }
-                });
-            });
+            // Re-add listeners after updating pieces to ensure hover events work correctly
+            this._addListeners();
 
-            // 3. Aggiunta: pezzi presenti solo in atteso (non matched)
-            const adds = [];
-            Object.keys(expectedMap).forEach(key => {
-                expectedMap[key].forEach(({ square, id }) => {
-                    if (!toMatched[square.id]) {
-                        adds.push({ square, pieceId: key });
-                    }
-                });
-            });
+            // Trigger change event if position changed
+            const gameStateAfter = this.positionService.getGame().fen();
+            if (gameStateBefore !== gameStateAfter) {
+                this.config.onChange(gameStateAfter);
+            }
+        }
 
-            totalAnimations = moves.length + removes.length + adds.length;
-            if (totalAnimations === 0) {
+        /**
+         * Performs simultaneous piece updates
+         * @private
+         * @param {Object} squares - All squares
+         * @param {string} gameStateBefore - Game state before update
+         * @param {boolean} [isPositionLoad=false] - Whether this is a position load
+         */
+        _doSimultaneousUpdate(squares, gameStateBefore, isPositionLoad = false) {
+            console.log('_doSimultaneousUpdate - Starting simultaneous update');
+
+            // Analyze what changes need to be made
+            const changeAnalysis = this._analyzePositionChanges(squares);
+
+            if (changeAnalysis.totalChanges === 0) {
+                console.log('_doSimultaneousUpdate - No changes needed, returning');
                 this._addListeners();
+
+                // Trigger change event if position changed
                 const gameStateAfter = this.positionService.getGame().fen();
                 if (gameStateBefore !== gameStateAfter) {
                     this.config.onChange(gameStateAfter);
@@ -7823,64 +7801,10 @@ var Chessboard = (function (exports) {
                 return;
             }
 
-            // Debug: logga i pezzi unchanged
-            if (unchanged.length > 0) {
-                console.debug('[Chessboard] Unchanged pieces:', unchanged.map(u => u.piece.id + '@' + u.square.id));
-            }
-
-            const onAnimationComplete = () => {
-                animationsCompleted++;
-                if (animationsCompleted === totalAnimations) {
-                    // Pulizia finale robusta: rimuovi tutti i pezzi orfani dal DOM e dal riferimento JS
-                    Object.values(this.boardService.getAllSquares()).forEach(square => {
-                        const expectedPieceId = this.positionService.getGamePieceId(square.id);
-                        if (!expectedPieceId && typeof square.forceRemoveAllPieces === 'function') {
-                            square.forceRemoveAllPieces();
-                        }
-                    });
-                    this._addListeners();
-                    const gameStateAfter = this.positionService.getGame().fen();
-                    if (gameStateBefore !== gameStateAfter) {
-                        this.config.onChange(gameStateAfter);
-                    }
-                }
-            };
+            console.log('_doSimultaneousUpdate - Change analysis:', changeAnalysis);
 
-            // 4. Esegui tutte le animazioni con delay
-            let idx = 0;
-            moves.forEach(move => {
-                setTimeout(() => {
-                    this.pieceService.translatePiece(
-                        move,
-                        false,
-                        animation,
-                        this._createDragFunction.bind(this),
-                        onAnimationComplete
-                    );
-                }, idx++ * animationDelay);
-            });
-            removes.forEach(op => {
-                setTimeout(() => {
-                    if (typeof op.square.forceRemoveAllPieces === 'function') {
-                        op.square.forceRemoveAllPieces();
-                        onAnimationComplete();
-                    } else {
-                        this.pieceService.removePieceFromSquare(op.square, animation, onAnimationComplete);
-                    }
-                }, idx++ * animationDelay);
-            });
-            adds.forEach(op => {
-                setTimeout(() => {
-                    const newPiece = this.pieceService.convertPiece(op.pieceId);
-                    this.pieceService.addPieceOnSquare(
-                        op.square,
-                        newPiece,
-                        animation,
-                        this._createDragFunction.bind(this),
-                        onAnimationComplete
-                    );
-                }, idx++ * animationDelay);
-            });
+            // Execute all changes simultaneously
+            this._executeSimultaneousChanges(changeAnalysis, gameStateBefore, isPositionLoad);
         }
 
         /**
@@ -8206,380 +8130,99 @@ var Chessboard = (function (exports) {
         }
 
         // -------------------
-        // Public API Methods (Refactored)
+        // Public API Methods
         // -------------------
 
-        // --- POSITION & STATE ---
-        /**
-         * Get the current position as FEN
-         * @returns {string}
-         */
-        getPosition() { return this.fen(); }
-        /**
-         * Set the board position (FEN or object)
-         * @param {string|Object} position
-         * @param {Object} [opts]
-         * @param {boolean} [opts.animate=true]
-         * @returns {boolean}
-         */
-        setPosition(position, opts = {}) {
-            const animate = opts.animate !== undefined ? opts.animate : true;
-            // Remove highlights and selections
-            if (this.boardService && this.boardService.applyToAllSquares) {
-                this.boardService.applyToAllSquares('removeHint');
-                this.boardService.applyToAllSquares('deselect');
-                this.boardService.applyToAllSquares('unmoved');
-            }
-            if (this.positionService && this.positionService.setGame) {
-                this.positionService.setGame(position);
-            }
-            if (this._updateBoardPieces) {
-                this._updateBoardPieces(animate, true);
-            }
-            // Forza la sincronizzazione dopo setPosition
-            this._updateBoardPieces(true, false);
-            return true;
-        }
-        /**
-         * Reset the board to the starting position
-         * @param {Object} [opts]
-         * @param {boolean} [opts.animate=true]
-         * @returns {boolean}
-         */
-        reset(opts = {}) {
-            const animate = opts.animate !== undefined ? opts.animate : true;
-            // Use the default starting position from config or fallback
-            const startPosition = this.config && this.config.position ? this.config.position : 'start';
-            this._updateBoardPieces(animate);
-            const result = this.setPosition(startPosition, { animate });
-            // Forza la sincronizzazione dopo reset
-            this._updateBoardPieces(true, false);
-            return result;
-        }
         /**
-         * Clear the board
-         * @param {Object} [opts]
-         * @param {boolean} [opts.animate=true]
-         * @returns {boolean}
+         * Gets the current position as FEN
+         * @returns {string} FEN string
          */
-        clear(opts = {}) {
-            const animate = opts.animate !== undefined ? opts.animate : true;
-            if (!this.positionService || !this.positionService.getGame()) {
-                return false;
-            }
-            if (this._clearVisualState) this._clearVisualState();
-            this.positionService.getGame().clear();
-            // Forza la rimozione di tutti i pezzi dal DOM
-            if (this.boardService && this.boardService.squares) {
-                Object.values(this.boardService.squares).forEach(sq => {
-                    if (sq && sq.piece) sq.piece = null;
-                });
-            }
-            if (this._updateBoardPieces) {
-                this._updateBoardPieces(animate, true);
-            }
-            // Forza la sincronizzazione dopo clear
-            this._updateBoardPieces(true, false);
-            return true;
+        fen() {
+            return this.positionService.getGame().fen();
         }
 
-        // --- MOVE MANAGEMENT ---
-        /**
-         * Undo last move
-         * @param {Object} [opts]
-         * @param {boolean} [opts.animate=true]
-         * @returns {boolean}
-         */
-        undoMove(opts = {}) {
-            const undone = this.positionService.getGame().undo();
-            if (undone) {
-                this._undoneMoves.push(undone);
-                // Forza refresh completo di tutti i pezzi dopo undo
-                this._updateBoardPieces(true, true);
-                return undone;
-            }
-            return null;
-        }
         /**
-         * Redo last undone move
-         * @param {Object} [opts]
-         * @param {boolean} [opts.animate=true]
-         * @returns {boolean}
+         * Gets current turn
+         * @returns {string} 'w' or 'b'
          */
-        redoMove(opts = {}) {
-            if (this._undoneMoves && this._undoneMoves.length > 0) {
-                const move = this._undoneMoves.pop();
-                const moveObj = { from: move.from, to: move.to };
-                if (move.promotion) moveObj.promotion = move.promotion;
-                const result = this.positionService.getGame().move(moveObj);
-                // Forza refresh completo di tutti i pezzi dopo redo
-                this._updateBoardPieces(true, true);
-                return result;
-            }
-            return false;
+        turn() {
+            return this.positionService.getGame().turn();
         }
-        /**
-         * Get legal moves for a square
-         * @param {string} square
-         * @returns {Array}
-         */
-        getLegalMoves(square) { return this.legalMoves(square); }
 
-        // --- PIECE MANAGEMENT ---
         /**
-         * Get the piece at a square
-         * @param {string} square
-         * @returns {string|null}
-         */
-        getPiece(square) {
-            // Sempre leggi lo stato aggiornato dal boardService
-            const squareObj = typeof square === 'string' ? this.boardService.getSquare(square) : square;
-            if (!squareObj || typeof squareObj !== 'object' || !('id' in squareObj)) throw new Error('[getPiece] Parametro square non valido');
-            // Forza sync prima di leggere
-            this._updateBoardPieces(false, false);
-            const piece = squareObj.piece;
-            if (!piece) return null;
-            return (piece.color + piece.type).toLowerCase();
-        }
-        /**
-         * Put a piece on a square
-         * @param {string|Piece} piece
-         * @param {string|Square} square
-         * @param {Object} [opts]
-         * @param {boolean} [opts.animate=true]
-         * @returns {boolean}
+         * Loads a new position
+         * @param {string|Object} position - Position to load
+         * @param {Object} [options={}] - Loading options
+         * @param {boolean} [animation=true] - Whether to animate
          */
-        putPiece(piece, square, opts = {}) {
-            const animate = opts.animate !== undefined ? opts.animate : true;
-            let pieceStr = piece;
-            if (typeof piece === 'object' && piece.type && piece.color) {
-                pieceStr = (piece.color + piece.type).toLowerCase();
-            } else if (typeof piece === 'string' && piece.length === 2) {
-                const a = piece[0].toLowerCase();
-                const b = piece[1].toLowerCase();
-                const types = 'kqrbnp';
-                const colors = 'wb';
-                if (types.includes(a) && colors.includes(b)) {
-                    pieceStr = b + a;
-                } else if (colors.includes(a) && types.includes(b)) {
-                    pieceStr = a + b;
-                } else {
-                    throw new Error(`[putPiece] Invalid piece: ${piece}`);
-                }
-            }
-            const squareObj = typeof square === 'string' ? this.boardService.getSquare(square) : square;
-            if (!squareObj || typeof squareObj !== 'object' || !('id' in squareObj)) throw new Error('[putPiece] Parametro square non valido');
-            const pieceObj = this.pieceService.convertPiece(pieceStr);
-            if (!pieceObj || typeof pieceObj !== 'object' || !('type' in pieceObj)) throw new Error('[putPiece] Parametro piece non valido');
-            // Aggiorna solo il motore chess.js
-            const chessJsPiece = { type: pieceObj.type, color: pieceObj.color };
-            const game = this.positionService.getGame();
-            const result = game.put(chessJsPiece, squareObj.id);
-            if (!result) throw new Error(`[putPiece] Game.put failed for ${pieceStr} on ${squareObj.id}`);
-            // Non aggiornare direttamente square.piece!
-            // Riallinea la board JS allo stato del motore
-            this._updateBoardPieces(animate);
-            return true;
-        }
-        /**
-         * Remove a piece from a square
-         * @param {string|Square} square
-         * @param {Object} [opts]
-         * @param {boolean} [opts.animate=true]
-         * @returns {string|null}
-         */
-        removePiece(square, opts = {}) {
-            const animate = opts.animate !== undefined ? opts.animate : true;
-            const squareObj = typeof square === 'string' ? this.boardService.getSquare(square) : square;
-            if (!squareObj || typeof squareObj !== 'object' || !('id' in squareObj)) throw new Error('[removePiece] Parametro square non valido');
-            // Aggiorna solo il motore chess.js
-            const game = this.positionService.getGame();
-            game.remove(squareObj.id);
-            // Non aggiornare direttamente square.piece!
-            // Riallinea la board JS allo stato del motore
-            this._updateBoardPieces(animate);
-            return true;
-        }
+        load(position, options = {}, animation = true) {
+            this.boardService.applyToAllSquares('removeHint');
+            this.boardService.applyToAllSquares('deselect');
+            this.boardService.applyToAllSquares('unmoved');
 
-        // --- BOARD CONTROL ---
-        /**
-         * Flip the board orientation
-         * @param {Object} [opts]
-         * @param {boolean} [opts.animate=true]
-         */
-        flipBoard(opts = {}) {
-            if (this.coordinateService && this.coordinateService.flipOrientation) {
-                this.coordinateService.flipOrientation();
-            }
-            if (this._buildBoard) this._buildBoard();
-            if (this._buildSquares) this._buildSquares();
-            if (this._addListeners) this._addListeners();
-            if (this._updateBoardPieces) this._updateBoardPieces(opts.animate !== false);
-            console.log('FEN dopo flip:', this.fen(), 'Orientamento:', this.coordinateService.getOrientation());
-        }
-        /**
-         * Set the board orientation
-         * @param {'w'|'b'} color
-         * @param {Object} [opts]
-         * @param {boolean} [opts.animate=true]
-         */
-        setOrientation(color, opts = {}) {
-            if (this.validationService.isValidOrientation(color)) {
-                this.coordinateService.setOrientation(color);
-                if (this._buildBoard) this._buildBoard();
-                if (this._buildSquares) this._buildSquares();
-                if (this._addListeners) this._addListeners();
-                if (this._updateBoardPieces) this._updateBoardPieces(opts.animate !== false);
-            }
-            return this.coordinateService.getOrientation();
-        }
-        /**
-         * Get the current orientation
-         * @returns {'w'|'b'}
-         */
-        getOrientation() { return this.orientation(); }
-        /**
-         * Resize the board
-         * @param {number|string} size
-         */
-        resizeBoard(size) {
-            if (size === 'auto') {
-                this.config.size = 'auto';
-                document.documentElement.style.setProperty('--dimBoard', 'auto');
-                this._updateBoardPieces(false);
-                return true;
-            }
-            if (typeof size !== 'number' || size < 50 || size > 3000) {
-                throw new Error(`[resizeBoard] Invalid size: ${size}`);
-            }
-            this.config.size = size;
-            document.documentElement.style.setProperty('--dimBoard', `${size}px`);
-            this._updateBoardPieces(false);
-            return true;
+            this.positionService.setGame(position, options);
+            this._updateBoardPieces(animation, true); // Position load
         }
 
-        // --- HIGHLIGHTING & UI ---
         /**
-         * Highlight a square
-         * @param {string|Square} square
-         * @param {Object} [opts]
-         */
-        highlight(square, opts = {}) {
-            // API: accetta id, converte subito in oggetto
-            const squareObj = typeof square === 'string' ? this.boardService.getSquare(square) : square;
-            if (!squareObj || typeof squareObj !== 'object' || !('id' in squareObj)) throw new Error('[highlight] Parametro square non valido');
-            if (this.boardService && this.boardService.highlightSquare) {
-                this.boardService.highlightSquare(squareObj, opts);
-            } else if (this.eventService && this.eventService.highlightSquare) {
-                this.eventService.highlightSquare(squareObj, opts);
-            }
-        }
-        /**
-         * Remove highlight from a square
-         * @param {string|Square} square
-         * @param {Object} [opts]
+         * Destroys the board and cleans up resources
          */
-        dehighlight(square, opts = {}) {
-            // API: accetta id, converte subito in oggetto
-            const squareObj = typeof square === 'string' ? this.boardService.getSquare(square) : square;
-            if (!squareObj || typeof squareObj !== 'object' || !('id' in squareObj)) throw new Error('[dehighlight] Parametro square non valido');
-            if (this.boardService && this.boardService.dehighlightSquare) {
-                this.boardService.dehighlightSquare(squareObj, opts);
-            } else if (this.eventService && this.eventService.dehighlightSquare) {
-                this.eventService.dehighlightSquare(squareObj, opts);
+        destroy() {
+            this.eventService.destroy();
+            this.boardService.destroy();
+            this.positionService.destroy();
+            this.pieceService.destroy();
+            this.moveService.destroy();
+            this.animationService.destroy();
+            this.validationService.destroy();
+
+            if (this._updateTimeout) {
+                clearTimeout(this._updateTimeout);
+                this._updateTimeout = null;
             }
         }
 
-        // --- GAME INFO ---
-        /**
-         * Get FEN string
-         * @returns {string}
-         */
-        fen() {
-            // Avoid recursion: call the underlying game object's fen()
-            const game = this.positionService.getGame();
-            if (!game || typeof game.fen !== 'function') return '';
-            return game.fen();
-        }
-        /**
-         * Get current turn
-         * @returns {'w'|'b'}
-         */
-        turn() { return this.positionService.getGame().turn(); }
-        /**
-         * Is the game over?
-         * @returns {boolean}
-         */
-        isGameOver() {
-            // Forza sync prima di interrogare il motore
-            this._updateBoardPieces(false, false);
-            const game = this.positionService.getGame();
-            if (!game) return false;
-            if (game.isGameOver) return game.isGameOver();
-            // Fallback: checkmate or draw
-            if (game.isCheckmate && game.isCheckmate()) return true;
-            if (game.isDraw && game.isDraw()) return true;
-            return false;
-        }
-        /**
-         * Is it checkmate?
-         * @returns {boolean}
-         */
-        isCheckmate() {
-            const game = this.positionService.getGame();
-            if (!game) return false;
-            return game.isCheckmate ? game.isCheckmate() : false;
-        }
-        /**
-         * Is it draw?
-         * @returns {boolean}
-         */
-        isDraw() {
-            const game = this.positionService.getGame();
-            if (!game) return false;
-            return game.isDraw ? game.isDraw() : false;
-        }
         /**
-         * Get move history
-         * @returns {Array}
+         * Resizes the board
+         * @param {number|string} size - New size
          */
-        getHistory() {
-            const game = this.positionService.getGame();
-            if (!game) return [];
-            return game.history ? game.history() : [];
+        resize(size) {
+            this.boardService.resize(size);
+            this._updateBoardPieces();
         }
 
-        // --- LIFECYCLE ---
-        /**
-         * Destroy the board and cleanup
-         */
-        destroy() { /* TODO: robust destroy logic */ }
         /**
-         * Rebuild the board
+         * Flips the board orientation
          */
-        rebuild() { this._initialize(); }
+        flip() {
+            this.coordinateService.flipOrientation();
 
-        // --- CONFIGURATION ---
-        /**
-         * Get current config
-         * @returns {Object}
-         */
-        getConfig() { return this.config; }
-        /**
-         * Set new config
-         * @param {Object} newConfig
-         */
-        setConfig(newConfig) { this.setConfig(newConfig); }
+            // Save current position before destroying
+            let currentPosition = null;
+            try {
+                // Check if there are any pieces on the board
+                const position = this.positionService.getPosition();
+                const hasPieces = Object.keys(position).length > 0;
 
-        // --- ALIASES/DEPRECATED ---
-        // Note: These methods are now implemented as aliases at the end of the class
+                if (hasPieces) {
+                    currentPosition = this.positionService.getGame().fen();
+                }
+            } catch (error) {
+                console.log('No valid position to save during flip');
+            }
 
-        /**
-         * Alias for flipBoard (for backward compatibility)
-         */
-        flip(opts = {}) {
-            this._updateBoardPieces(opts.animate !== false);
-            return this.flipBoard(opts);
+            this.destroy();
+            this._initializeServices(); // Recreate all services
+            this._initParams();
+
+            // Restore position after rebuilding if we had one
+            if (currentPosition) {
+                this._setGame(currentPosition);
+            }
+            this._buildBoard();
+            this._buildSquares();
+            this._addListeners();
+            this._updateBoardPieces(true, true);
         }
 
         /**
@@ -8602,19 +8245,51 @@ var Chessboard = (function (exports) {
             this.load(position, {}, animate); // load() already handles isPositionLoad=true
         }
 
+        /**
+         * Makes a move on the board
+         * @param {string|Object} move - Move to make
+         * @param {boolean} [animate=true] - Whether to animate
+         * @returns {boolean} True if move was successful
+         */
+        move(move, animate = true) {
+            if (typeof move === 'string') {
+                // Parse move string (e.g., 'e2e4')
+                const moveObj = this.moveService.parseMove(move);
+                if (!moveObj) return false;
+
+                const fromSquare = this.boardService.getSquare(moveObj.from);
+                const toSquare = this.boardService.getSquare(moveObj.to);
+
+                if (!fromSquare || !toSquare) return false;
+
+                return this._onMove(fromSquare, toSquare, moveObj.promotion, animate);
+            } else if (move && move.from && move.to) {
+                // Handle move object
+                const fromSquare = this.boardService.getSquare(move.from);
+                const toSquare = this.boardService.getSquare(move.to);
+
+                if (!fromSquare || !toSquare) return false;
+
+                return this._onMove(fromSquare, toSquare, move.promotion, animate);
+            }
+
+            return false;
+        }
+
         /**
          * Undoes the last move
          * @param {boolean} [animate=true] - Whether to animate
          * @returns {boolean} True if undo was successful
          */
         undo(animate = true) {
-            const undone = this.positionService.getGame().undo();
-            if (undone) {
-                this._undoneMoves.push(undone);
-                this._updateBoardPieces(animate);
-                return undone;
+            if (this.positionService.getGame().undo) {
+                const undoResult = this.positionService.getGame().undo();
+                if (undoResult) {
+                    this._updateBoardPieces(animate, true); // Position change
+                    return true;
+                }
             }
-            return null;
+            return false;
         }
 
         /**
@@ -8623,13 +8298,12 @@ var Chessboard = (function (exports) {
          * @returns {boolean} True if redo was successful
          */
         redo(animate = true) {
-            if (this._undoneMoves && this._undoneMoves.length > 0) {
-                const move = this._undoneMoves.pop();
-                const moveObj = { from: move.from, to: move.to };
-                if (move.promotion) moveObj.promotion = move.promotion;
-                const result = this.positionService.getGame().move(moveObj);
-                this._updateBoardPieces(animate);
-                return result;
+            if (this.positionService.getGame().redo) {
+                const redoResult = this.positionService.getGame().redo();
+                if (redoResult) {
+                    this._updateBoardPieces(animate, true); // Position change
+                    return true;
+                }
             }
             return false;
         }
@@ -8791,6 +8465,112 @@ var Chessboard = (function (exports) {
             }
         }
 
+        /**
+         * Clears the board
+         * @param {boolean} [animate=true] - Whether to animate
+         */
+        clear(animate = true) {
+            // Check if services are available
+            if (!this.positionService || !this.positionService.getGame()) {
+                console.log('Cannot clear - position service not available');
+                return;
+            }
+
+            // Clear visual state first
+            this._clearVisualState();
+
+            // Clear game state
+            this.positionService.getGame().clear();
+
+            // Update board visually
+            this._updateBoardPieces(animate, true); // Position change
+        }
+
+        /**
+         * Resets the board to starting position
+         * @param {boolean} [animate=true] - Whether to animate
+         */
+        reset(animate = true) {
+            // Check if services are available
+            if (!this.positionService || !this.positionService.getGame()) {
+                console.log('Cannot reset - position service not available');
+                return;
+            }
+
+            this.positionService.getGame().reset();
+            this._updateBoardPieces(animate, true); // Position change
+        }
+
+        /**
+         * Puts a piece on a square
+         * @param {string} square - Square to put piece on
+         * @param {string} piece - Piece to put
+         * @param {boolean} [animate=true] - Whether to animate
+         * @returns {boolean} True if successful
+         */
+        put(square, piece, animate = true) {
+            console.log(`put() called with square: ${square}, piece: ${piece}`);
+
+            if (!this.validationService.isValidSquare(square) || !this.validationService.isValidPiece(piece)) {
+                console.log('Validation failed');
+                return false;
+            }
+
+            // Check if services are available
+            if (!this.positionService || !this.positionService.getGame()) {
+                console.log('Cannot put piece - position service not available');
+                return false;
+            }
+
+            const pieceObj = this.pieceService.convertPiece(piece);
+            console.log(`Converted piece:`, pieceObj);
+            console.log(`Piece type: ${pieceObj.type}, color: ${pieceObj.color}`);
+
+            const squareObj = this.boardService.getSquare(square);
+
+            if (!squareObj) {
+                console.log('Square not found');
+                return false;
+            }
+
+            // Update game state - note: chess.js expects (piece, square) order
+            const chessJsPiece = { type: pieceObj.type.toLowerCase(), color: pieceObj.color.toLowerCase() };
+            console.log(`Chess.js piece:`, chessJsPiece);
+
+            const result = this.positionService.getGame().put(chessJsPiece, square);
+            console.log(`Chess.js put result:`, result);
+
+            if (result) {
+                // Update visual representation
+                this._updateBoardPieces(animate, true); // Position change
+            }
+
+            return result;
+        }
+
+        /**
+         * Removes a piece from a square
+         * @param {string} square - Square to remove piece from
+         * @param {boolean} [animate=true] - Whether to animate
+         * @returns {boolean} True if successful
+         */
+        remove(square, animate = true) {
+            if (!this.validationService.isValidSquare(square)) {
+                return false;
+            }
+
+            const squareObj = this.boardService.getSquare(square);
+            if (!squareObj) return false;
+
+            // Update game state
+            this.positionService.getGame().remove(square);
+
+            // Update visual representation
+            this._updateBoardPieces(animate, true); // Position change
+
+            return true;
+        }
+
         /**
          * Gets configuration options
          * @returns {Object} Configuration object
@@ -8816,6 +8596,23 @@ var Chessboard = (function (exports) {
             }
         }
 
+        /**
+         * Gets or sets the animation style
+         * @param {string} [style] - New animation style ('sequential' or 'simultaneous')
+         * @returns {string} Current animation style
+         */
+        animationStyle(style) {
+            if (style === undefined) {
+                return this.config.animationStyle;
+            }
+
+            if (this.validationService.isValidAnimationStyle(style)) {
+                this.config.animationStyle = style;
+            }
+
+            return this.config.animationStyle;
+        }
+
         /**
          * Gets or sets the simultaneous animation delay
          * @param {number} [delay] - New delay in milliseconds
@@ -8835,97 +8632,7 @@ var Chessboard = (function (exports) {
 
         // Additional API methods would be added here following the same pattern
         // This is a good starting point for the refactored architecture
-
-        // Additional API methods and aliases for backward compatibility
-        insert(square, piece) { return this.putPiece(piece, square); }
-        build() { return this._initialize(); }
-        ascii() { return this.positionService.getGame().ascii(); }
-        board() { return this.positionService.getGame().board(); }
-        getCastlingRights(color) { return this.positionService.getGame().getCastlingRights(color); }
-        getComment() { return this.positionService.getGame().getComment(); }
-        getComments() { return this.positionService.getGame().getComments(); }
-        lastMove() { return this.positionService.getGame().lastMove(); }
-        moveNumber() { return this.positionService.getGame().moveNumber(); }
-        moves(options = {}) { return this.positionService.getGame().moves(options); }
-        squareColor(squareId) { return this.boardService.getSquare(squareId).isWhite() ? 'light' : 'dark'; }
-        isDrawByFiftyMoves() { return this.positionService.getGame().isDrawByFiftyMoves(); }
-        isInsufficientMaterial() { return this.positionService.getGame().isInsufficientMaterial(); }
-        removeComment() { return this.positionService.getGame().removeComment(); }
-        removeComments() { return this.positionService.getGame().removeComments(); }
-        removeHeader(field) { return this.positionService.getGame().removeHeader(field); }
-        setCastlingRights(color, rights) { return this.positionService.getGame().setCastlingRights(color, rights); }
-        setComment(comment) { return this.positionService.getGame().setComment(comment); }
-        setHeader(key, value) { return this.positionService.getGame().setHeader(key, value); }
-        validateFen(fen) { return this.positionService.getGame().validateFen(fen); }
-
-        // Implementazioni reali per highlight/dehighlight
-        highlightSquare(square) {
-            return this.boardService.highlight(square);
-        }
-        dehighlightSquare(square) {
-            return this.boardService.dehighlight(square);
-        }
-        forceSync() { this._updateBoardPieces(true, true); this._updateBoardPieces(true, false); }
-
-        // Metodi mancanti che causano fallimenti nei test
-        /**
-         * Move a piece from one square to another
-         * @param {string|Object} move - Move in format 'e2e4' or {from: 'e2', to: 'e4'}
-         * @param {Object} [opts] - Options
-         * @param {boolean} [opts.animate=true] - Whether to animate
-         * @returns {boolean} True if move was successful
-         */
-        movePiece(move, opts = {}) {
-            const animate = opts.animate !== undefined ? opts.animate : true;
-
-            // --- API: accetta id/stringhe, ma converte subito in oggetti ---
-            let fromSquareObj, toSquareObj, promotion;
-            if (typeof move === 'string') {
-                if (move.length === 4) {
-                    fromSquareObj = this.boardService.getSquare(move.substring(0, 2));
-                    toSquareObj = this.boardService.getSquare(move.substring(2, 4));
-                } else if (move.length === 5) {
-                    fromSquareObj = this.boardService.getSquare(move.substring(0, 2));
-                    toSquareObj = this.boardService.getSquare(move.substring(2, 4));
-                    promotion = move.substring(4, 5);
-                } else {
-                    throw new Error(`Invalid move format: ${move}`);
-                }
-            } else if (typeof move === 'object' && move.from && move.to) {
-                // Se sono id, converto in oggetti; se sono già oggetti, li uso direttamente
-                fromSquareObj = typeof move.from === 'string' ? this.boardService.getSquare(move.from) : move.from;
-                toSquareObj = typeof move.to === 'string' ? this.boardService.getSquare(move.to) : move.to;
-                promotion = move.promotion;
-            } else {
-                throw new Error(`Invalid move: ${move}`);
-            }
-
-            if (!fromSquareObj || !toSquareObj) {
-                throw new Error(`Invalid squares: ${move.from || move.substring(0, 2)} or ${move.to || move.substring(2, 4)}`);
-            }
-
-            // --- Internamente: lavora solo con oggetti ---
-            const result = this._onMove(fromSquareObj, toSquareObj, promotion, animate);
-            // Dopo ogni mossa, forza la sincronizzazione della board
-            this._updateBoardPieces(true, false);
-            return result;
-        }
-
-        // Aliases for backward compatibility
-        move(move, animate = true) {
-            // On any new move, clear the redo stack
-            this._undoneMoves = [];
-            return this.movePiece(move, { animate });
-        }
-        get(square) { return this.getPiece(square); }
-        piece(square) { return this.getPiece(square); }
-        put(piece, square, opts = {}) { return this.putPiece(piece, square, opts); }
-        remove(square, opts = {}) { return this.removePiece(square, opts); }
-        load(position, opts = {}) { return this.setPosition(position, opts); }
-        resize(size) { return this.resizeBoard(size); }
-        start(opts = {}) { return this.reset(opts); }
-        clearBoard(opts = {}) { return this.clear(opts); }
-    };
+    }
 
     /**
      * Structured logging system for Chessboard.js
@@ -9383,6 +9090,7 @@ var Chessboard = (function (exports) {
                 hints: true,
                 clickable: true,
                 moveHighlight: true,
+                animationStyle: 'simultaneous'
             });
 
             // Tournament template
@@ -9393,6 +9101,7 @@ var Chessboard = (function (exports) {
                 clickable: true,
                 moveHighlight: true,
                 onlyLegalMoves: true,
+                animationStyle: 'sequential'
             });
 
             // Analysis template
@@ -9403,6 +9112,7 @@ var Chessboard = (function (exports) {
                 clickable: true,
                 moveHighlight: true,
                 mode: 'analysis',
+                animationStyle: 'simultaneous'
             });
 
             // Puzzle template
@@ -9413,6 +9123,7 @@ var Chessboard = (function (exports) {
                 clickable: true,
                 moveHighlight: true,
                 onlyLegalMoves: true,
+                animationStyle: 'sequential'
             });
 
             // Demo template
@@ -9422,6 +9133,7 @@ var Chessboard = (function (exports) {
                 hints: false,
                 clickable: false,
                 moveHighlight: true,
+                animationStyle: 'simultaneous'
             });
         }
 
@@ -9467,7 +9179,7 @@ var Chessboard = (function (exports) {
                 this.validationService.validateConfig(finalConfig);
 
                 // Create chessboard instance
-                const chessboard = new Chessboard$1(finalConfig);
+                const chessboard = new Chessboard(finalConfig);
 
                 // Store instance for management
                 this.instances.set(containerId, {
@@ -9727,44 +9439,13 @@ var Chessboard = (function (exports) {
      */
 
 
-    /**
-     * Main Chessboard factory function for backward compatibility
-     * Supports both legacy and modern calling conventions
-     * @param {string|Object} containerElm - Container element ID or configuration object
-     * @param {Object} [config={}] - Configuration options (when first param is string)
-     * @returns {ChessboardClass} Chessboard instance
-     */
-    function Chessboard(containerElm, config = {}) {
-        const factoryLogger = logger.child('ChessboardFactory');
-
-        try {
-            // If first parameter is an object, treat it as config
-            if (typeof containerElm === 'object' && containerElm !== null) {
-                factoryLogger.debug('Creating chessboard with config object');
-                return new Chessboard$1(containerElm);
-            }
-
-            // Otherwise, treat first parameter as element ID
-            if (typeof containerElm === 'string') {
-                factoryLogger.debug('Creating chessboard with element ID', { elementId: containerElm });
-                const fullConfig = { ...config, id: containerElm };
-                return new Chessboard$1(fullConfig);
-            }
-
-            throw new Error('Invalid parameters: first parameter must be string or object');
-        } catch (error) {
-            factoryLogger.error('Failed to create chessboard instance', { error });
-            throw error;
-        }
-    }
-
     /**
      * Wrapper class that handles both calling conventions
      * Provides enhanced error handling and logging
      * @class
      * @extends ChessboardClass
      */
-    class ChessboardWrapper extends Chessboard$1 {
+    class ChessboardWrapper extends Chessboard {
         /**
          * Creates a new ChessboardWrapper instance
          * @param {string|Object} containerElm - Container element ID or configuration object
@@ -9793,53 +9474,32 @@ var Chessboard = (function (exports) {
         }
     }
 
-    /**
-     * Refactored Chessboard API - see Chessboard.js for full method docs
-     * @typedef {import('./Chessboard.js').Chessboard} Chessboard
-     */
+    // Attach classes and utilities to the factory function for direct access
+    Chessboard.Class = ChessboardWrapper;
+    Chessboard.Chessboard = ChessboardWrapper;
+    Chessboard.Config = ChessboardConfig;
+    Chessboard.Factory = ChessboardFactory;
 
-    // --- STATIC/FACTORY METHODS ---
-    /**
-     * Create a new Chessboard instance
-     * @param {string|Object} containerElm
-     * @param {Object} [config]
-     * @returns {Chessboard}
-     */
+    // Attach factory methods
     Chessboard.create = createChessboard;
-    /**
-     * Create a Chessboard from a template
-     * @param {string|Object} containerElm
-     * @param {string} templateName
-     * @param {Object} [config]
-     * @returns {Chessboard}
-     */
-    Chessboard.fromTemplate = createChessboardFromTemplate;
+    Chessboard.createFromTemplate = createChessboardFromTemplate;
     Chessboard.factory = chessboardFactory;
 
-    // --- INSTANCE MANAGEMENT ---
+    // Static methods for instance management
     Chessboard.getInstance = (containerId) => chessboardFactory.getInstance(containerId);
     Chessboard.destroyInstance = (containerId) => chessboardFactory.destroy(containerId);
     Chessboard.destroyAll = () => chessboardFactory.destroyAll();
     Chessboard.listInstances = () => chessboardFactory.listInstances();
 
-    // --- TEMPLATE MANAGEMENT ---
+    // Template management
     Chessboard.registerTemplate = (name, config) => chessboardFactory.registerTemplate(name, config);
     Chessboard.removeTemplate = (name) => chessboardFactory.removeTemplate(name);
     Chessboard.getTemplate = (name) => chessboardFactory.getTemplate(name);
     Chessboard.listTemplates = () => chessboardFactory.listTemplates();
 
-    // --- STATS & DEBUG ---
+    // Statistics and debugging
     Chessboard.getStats = () => chessboardFactory.getStats();
 
-    // --- DEPRECATED/LEGACY ALIASES ---
-    /**
-     * @deprecated Use Chessboard.create instead
-     */
-    Chessboard.Class = ChessboardWrapper;
-    Chessboard.Chessboard = ChessboardWrapper;
-    Chessboard.Config = ChessboardConfig;
-    Chessboard.Factory = ChessboardFactory;
-
     /**
      * Coordinate utilities for Chessboard.js
      */
@@ -10229,7 +9889,11 @@ var Chessboard = (function (exports) {
         if (config.moveAnimation && !isValidEasing(config.moveAnimation)) {
             errors.push('Invalid moveAnimation. Must be a valid easing function');
         }
-            
+        
+        if (config.animationStyle && !['sequential', 'simultaneous'].includes(config.animationStyle)) {
+            errors.push('Invalid animationStyle. Must be "sequential" or "simultaneous"');
+        }
+        
         return {
             success: errors.length === 0,
             errors