@alepot55/chessboardjs 2.2.2 → 2.3.0

package/package.json

@@ -3,9 +3,24 @@
     "chess.js": "^1.0.0"
   },
   "name": "@alepot55/chessboardjs",
-  "version": "2.2.2",
-  "main": "src/index.js",
+  "version": "2.3.0",
+  "main": "dist/chessboard.cjs.js",
+  "module": "dist/chessboard.esm.js",
+  "browser": "dist/chessboard.iife.js",
   "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/chessboard.esm.js",
+      "require": "./dist/chessboard.cjs.js",
+      "default": "./dist/chessboard.esm.js"
+    },
+    "./dist/*": "./dist/*"
+  },
+  "files": [
+    "dist/",
+    "src/",
+    "assets/"
+  ],
   "scripts": {
     "dev": "rollup -c config/rollup.config.js --watch",
     "build": "rollup -c config/rollup.config.js",
@@ -21,7 +36,7 @@
     "lint:fix": "echo 'ESLint not configured yet'",
     "docs": "echo 'JSDoc not configured yet'",
     "examples": "echo 'Example server not configured yet'",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run test && npm run build"
   },
   "author": "alepot55",
   "license": "ISC",

package/src/components/Piece.js

@@ -155,6 +155,121 @@ class Piece {
         }
     }
 
+    /**
+     * Animate piece appearance with configurable style
+     * @param {string} style - Appearance style: 'fade', 'pulse', 'pop', 'drop', 'instant'
+     * @param {number} duration - Animation duration in ms
+     * @param {Function} callback - Callback when complete
+     */
+    appearAnimate(style, duration, callback) {
+        if (!this.element) {
+            if (callback) callback();
+            return;
+        }
+
+        const element = this.element;
+        const cleanup = () => {
+            if (element) {
+                element.style.opacity = '1';
+                element.style.transform = '';
+            }
+            if (callback) callback();
+        };
+
+        const smoothDecel = 'cubic-bezier(0.33, 1, 0.68, 1)';
+        const springOvershoot = 'cubic-bezier(0.34, 1.56, 0.64, 1)';
+
+        switch (style) {
+            case 'instant':
+                element.style.opacity = '1';
+                cleanup();
+                break;
+
+            case 'fade':
+                if (element.animate) {
+                    element.style.opacity = '0';
+                    const anim = element.animate([
+                        { opacity: 0, transform: 'scale(0.95)' },
+                        { opacity: 1, transform: 'scale(1)' }
+                    ], { duration, easing: smoothDecel, fill: 'forwards' });
+                    anim.onfinish = () => {
+                        anim.cancel();
+                        cleanup();
+                    };
+                } else {
+                    element.style.opacity = '0';
+                    element.style.transform = 'scale(0.95)';
+                    setTimeout(cleanup, duration);
+                }
+                break;
+
+            case 'pulse':
+                if (element.animate) {
+                    element.style.opacity = '0';
+                    const anim = element.animate([
+                        { opacity: 0, transform: 'scale(0.6)', offset: 0 },
+                        { opacity: 1, transform: 'scale(1.12)', offset: 0.3 },
+                        { opacity: 1, transform: 'scale(0.92)', offset: 0.55 },
+                        { opacity: 1, transform: 'scale(1.06)', offset: 0.8 },
+                        { opacity: 1, transform: 'scale(1)', offset: 1 }
+                    ], { duration, easing: smoothDecel, fill: 'forwards' });
+                    anim.onfinish = () => {
+                        anim.cancel();
+                        cleanup();
+                    };
+                } else {
+                    element.style.opacity = '0';
+                    element.style.transform = 'scale(0.6)';
+                    setTimeout(cleanup, duration);
+                }
+                break;
+
+            case 'pop':
+                if (element.animate) {
+                    element.style.opacity = '0';
+                    const anim = element.animate([
+                        { opacity: 0, transform: 'scale(0)', offset: 0 },
+                        { opacity: 1, transform: 'scale(1.15)', offset: 0.6 },
+                        { opacity: 1, transform: 'scale(1)', offset: 1 }
+                    ], { duration, easing: springOvershoot, fill: 'forwards' });
+                    anim.onfinish = () => {
+                        anim.cancel();
+                        cleanup();
+                    };
+                } else {
+                    element.style.opacity = '0';
+                    element.style.transform = 'scale(0)';
+                    setTimeout(cleanup, duration);
+                }
+                break;
+
+            case 'drop':
+                if (element.animate) {
+                    element.style.opacity = '0';
+                    const anim = element.animate([
+                        { opacity: 0, transform: 'translateY(-15px) scale(0.95)', offset: 0 },
+                        { opacity: 1, transform: 'translateY(3px) scale(1.02)', offset: 0.5 },
+                        { opacity: 1, transform: 'translateY(-1px) scale(1)', offset: 0.75 },
+                        { opacity: 1, transform: 'translateY(0) scale(1)', offset: 1 }
+                    ], { duration, easing: smoothDecel, fill: 'forwards' });
+                    anim.onfinish = () => {
+                        anim.cancel();
+                        cleanup();
+                    };
+                } else {
+                    element.style.opacity = '0';
+                    element.style.transform = 'translateY(-15px) scale(0.95)';
+                    setTimeout(cleanup, duration);
+                }
+                break;
+
+            default:
+                this.appearAnimate('fade', duration, callback);
+                return;
+        }
+    }
+
+    /** @deprecated Use appearAnimate() instead */
     fadeIn(duration, speed, transition_f, callback) {
         let start = performance.now();
         let opacity = 0;
@@ -188,15 +303,105 @@ class Piece {
             if (elapsed < duration) {
                 requestAnimationFrame(fade);
             } else {
-                if (!piece.element) { console.debug(`[Piece] fadeOut: ${piece.id} - element is null (end)`); if (callback) callback(); return; }
+                if (!piece.element) { if (callback) callback(); return; }
                 piece.element.style.opacity = 0;
-                console.debug(`[Piece] fadeOut complete: ${piece.id}`);
+                // Remove element from DOM after fade completes
+                if (piece.element.parentNode) {
+                    piece.element.parentNode.removeChild(piece.element);
+                }
                 if (callback) callback();
             }
         }
         fade();
     }
 
+    /**
+     * Animate piece capture with configurable style
+     * Uses fluid easing for smooth, connected animations
+     * @param {string} style - Capture style: 'fade', 'shrink', 'instant', 'explode'
+     * @param {number} duration - Animation duration in ms
+     * @param {Function} callback - Callback when complete
+     */
+    captureAnimate(style, duration, callback) {
+        if (!this.element) {
+            if (callback) callback();
+            return;
+        }
+
+        const element = this.element;
+        const cleanup = () => {
+            if (element && element.parentNode) {
+                element.parentNode.removeChild(element);
+            }
+            if (callback) callback();
+        };
+
+        // Fluid easing functions
+        const smoothDecel = 'cubic-bezier(0.33, 1, 0.68, 1)';
+        const smoothAccel = 'cubic-bezier(0.32, 0, 0.67, 0)';
+
+        switch (style) {
+            case 'instant':
+                cleanup();
+                break;
+
+            case 'fade':
+                if (element.animate) {
+                    // Smooth fade with subtle scale down
+                    const anim = element.animate([
+                        { opacity: 1, transform: 'scale(1)' },
+                        { opacity: 0, transform: 'scale(0.9)' }
+                    ], { duration, easing: smoothDecel, fill: 'forwards' });
+                    anim.onfinish = cleanup;
+                } else {
+                    element.style.transition = `opacity ${duration}ms ease-out, transform ${duration}ms ease-out`;
+                    element.style.opacity = '0';
+                    element.style.transform = 'scale(0.9)';
+                    setTimeout(cleanup, duration);
+                }
+                break;
+
+            case 'shrink':
+                if (element.animate) {
+                    // Smooth shrink with accelerating easing for "sucked in" feel
+                    const anim = element.animate([
+                        { transform: 'scale(1)', opacity: 1, offset: 0 },
+                        { transform: 'scale(0.7)', opacity: 0.6, offset: 0.6 },
+                        { transform: 'scale(0)', opacity: 0, offset: 1 }
+                    ], { duration, easing: smoothAccel, fill: 'forwards' });
+                    anim.onfinish = cleanup;
+                } else {
+                    element.style.transition = `transform ${duration}ms ease-in, opacity ${duration}ms ease-in`;
+                    element.style.transform = 'scale(0)';
+                    element.style.opacity = '0';
+                    setTimeout(cleanup, duration);
+                }
+                break;
+
+            case 'explode':
+                if (element.animate) {
+                    // Subtle expand with smooth deceleration - less dramatic
+                    const anim = element.animate([
+                        { transform: 'scale(1)', opacity: 1, offset: 0 },
+                        { transform: 'scale(1.15)', opacity: 0.5, offset: 0.5 },
+                        { transform: 'scale(1.25)', opacity: 0, offset: 1 }
+                    ], { duration, easing: smoothDecel, fill: 'forwards' });
+                    anim.onfinish = cleanup;
+                } else {
+                    element.style.transition = `transform ${duration}ms ease-out, opacity ${duration}ms ease-out`;
+                    element.style.transform = 'scale(1.25)';
+                    element.style.opacity = '0';
+                    setTimeout(cleanup, duration);
+                }
+                break;
+
+            default:
+                // Default to fade
+                this.captureAnimate('fade', duration, callback);
+                return;
+        }
+    }
+
     setDrag(f) {
         if (!this.element) { console.debug(`[Piece] setDrag: ${this.id} - element is null`); return; }
         
@@ -236,41 +441,319 @@ class Piece {
         }
     }
 
-    translate(to, duration, transition_f, speed, callback = null) {
-        if (!this.element) { console.debug(`[Piece] translate: ${this.id} - element is null`); if (callback) callback(); return; }
-        let sourceRect = this.element.getBoundingClientRect();
-        let targetRect = to.getBoundingClientRect();
-        let x_start = sourceRect.left + sourceRect.width / 2;
-        let y_start = sourceRect.top + sourceRect.height / 2;
-        let x_end = targetRect.left + targetRect.width / 2;
-        let y_end = targetRect.top + targetRect.height / 2;
-        let dx = x_end - x_start;
-        let dy = y_end - y_start;
-
-        let keyframes = [
-            { transform: 'translate(0, 0)' },
-            { transform: `translate(${dx}px, ${dy}px)` }
-        ];
+    /**
+     * Translate piece to target position with configurable movement style
+     * Uses Chessground-style cubic easing for fluid, natural movement
+     * @param {HTMLElement} to - Target element
+     * @param {number} duration - Animation duration in ms
+     * @param {Function} transition_f - Transition function (unused, for compatibility)
+     * @param {number} speed - Speed factor (unused, for compatibility)
+     * @param {Function} callback - Callback when complete
+     * @param {Object} options - Movement options
+     * @param {string} options.style - Movement style: 'slide', 'arc', 'hop', 'teleport', 'fade'
+     * @param {string} options.easing - CSS easing function
+     * @param {number} options.arcHeight - Arc height ratio (for arc/hop styles)
+     * @param {string} options.landingEffect - Landing effect: 'none', 'bounce', 'pulse', 'settle'
+     * @param {number} options.landingDuration - Landing effect duration in ms
+     */
+    translate(to, duration, transition_f, speed, callback = null, options = {}) {
+        if (!this.element) {
+            console.debug(`[Piece] translate: ${this.id} - element is null`);
+            if (callback) callback();
+            return;
+        }
+
+        const style = options.style || 'slide';
+        const arcHeight = options.arcHeight || 0.3;
+        const landingEffect = options.landingEffect || 'none';
+        const landingDuration = options.landingDuration || 150;
+
+        // Map easing names to Chessground-style fluid cubic-bezier curves
+        // Default: smooth deceleration like Lichess/Chessground
+        const easingMap = {
+            'ease': 'cubic-bezier(0.33, 1, 0.68, 1)',           // Chessground default - smooth decel
+            'linear': 'linear',
+            'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',       // Smooth acceleration
+            'ease-out': 'cubic-bezier(0.33, 1, 0.68, 1)',      // Smooth deceleration (same as default)
+            'ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)'    // Smooth both ways
+        };
+        const easing = easingMap[options.easing] || easingMap['ease'];
+
+        // Handle teleport (instant)
+        if (style === 'teleport' || duration === 0) {
+            if (callback) callback();
+            return;
+        }
+
+        // Handle fade style
+        if (style === 'fade') {
+            this._translateFade(to, duration, easing, landingEffect, landingDuration, callback);
+            return;
+        }
+
+        // Calculate movement vectors
+        const sourceRect = this.element.getBoundingClientRect();
+        const targetRect = to.getBoundingClientRect();
+        const dx = (targetRect.left + targetRect.width / 2) - (sourceRect.left + sourceRect.width / 2);
+        const dy = (targetRect.top + targetRect.height / 2) - (sourceRect.top + sourceRect.height / 2);
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        // Build keyframes based on style
+        let keyframes;
+        let animationEasing = easing;
+
+        switch (style) {
+            case 'arc':
+                keyframes = this._buildArcKeyframes(dx, dy, distance, arcHeight);
+                // Arc uses linear easing because the curve is in the keyframes
+                animationEasing = 'linear';
+                break;
+            case 'hop':
+                keyframes = this._buildHopKeyframes(dx, dy, distance, arcHeight);
+                // Hop uses ease-out for natural landing feel
+                animationEasing = 'cubic-bezier(0.33, 1, 0.68, 1)';
+                break;
+            case 'slide':
+            default:
+                keyframes = [
+                    { transform: 'translate(0, 0)' },
+                    { transform: `translate(${dx}px, ${dy}px)` }
+                ];
+        }
 
+        // Animate
         if (this.element.animate) {
-            let animation = this.element.animate(keyframes, {
+            const animation = this.element.animate(keyframes, {
                 duration: duration,
-                easing: 'ease',
-                fill: 'none'
+                easing: animationEasing,
+                fill: 'forwards'
             });
 
             animation.onfinish = () => {
-                if (!this.element) { console.debug(`[Piece] translate.onfinish: ${this.id} - element is null`); if (callback) callback(); return; }
-                if (callback) callback();
+                if (!this.element) {
+                    if (callback) callback();
+                    return;
+                }
+
+                // Cancel animation and move piece in DOM first
+                animation.cancel();
                 if (this.element) this.element.style = '';
-                console.debug(`[Piece] translate complete: ${this.id}`);
+
+                // Callback moves piece to new square in DOM
+                if (callback) callback();
+
+                // Apply landing effect AFTER piece is in new position
+                if (landingEffect !== 'none') {
+                    // Small delay to ensure DOM is updated
+                    requestAnimationFrame(() => {
+                        this._applyLandingEffect(landingEffect, landingDuration);
+                    });
+                }
             };
         } else {
-            this.element.style.transition = `transform ${duration}ms ease`;
+            // Fallback for browsers without Web Animations API
+            this.element.style.transition = `transform ${duration}ms ${animationEasing}`;
             this.element.style.transform = `translate(${dx}px, ${dy}px)`;
+            setTimeout(() => {
+                if (!this.element) {
+                    if (callback) callback();
+                    return;
+                }
+                if (this.element) this.element.style = '';
+                if (callback) callback();
+
+                // Apply landing effect after DOM update
+                if (landingEffect !== 'none') {
+                    requestAnimationFrame(() => {
+                        this._applyLandingEffect(landingEffect, landingDuration);
+                    });
+                }
+            }, duration);
+        }
+    }
+
+    /**
+     * Build arc-shaped keyframes (smooth parabolic curve)
+     * Uses many keyframes for fluid motion without relying on easing
+     * @private
+     */
+    _buildArcKeyframes(dx, dy, distance, arcHeight) {
+        const lift = distance * arcHeight;
+        const steps = 10;
+        const keyframes = [];
+
+        for (let i = 0; i <= steps; i++) {
+            const t = i / steps;
+            // Smooth easing for horizontal movement (Chessground-style cubic)
+            const easedT = t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+            // Parabolic arc for vertical lift: peaks at t=0.5
+            const arcT = 4 * t * (1 - t); // Parabola: 0 at t=0, 1 at t=0.5, 0 at t=1
+
+            const x = dx * easedT;
+            const y = dy * easedT - lift * arcT;
+
+            keyframes.push({
+                transform: `translate(${x}px, ${y}px)`,
+                offset: t
+            });
+        }
+        return keyframes;
+    }
+
+    /**
+     * Build hop-shaped keyframes (knight-like jump with subtle scale)
+     * More aggressive vertical movement, subtle scale for emphasis
+     * @private
+     */
+    _buildHopKeyframes(dx, dy, distance, arcHeight) {
+        const lift = distance * arcHeight * 1.2;
+        const steps = 12;
+        const keyframes = [];
+
+        for (let i = 0; i <= steps; i++) {
+            const t = i / steps;
+            // Chessground-style cubic easing for smooth acceleration/deceleration
+            const easedT = t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+            // Sharp parabolic hop - peaks earlier for snappier feel
+            const hopT = Math.sin(t * Math.PI); // Sine for smooth hop curve
+            // Subtle scale: peaks at 1.03 at the top of the hop
+            const scale = 1 + 0.03 * hopT;
+
+            const x = dx * easedT;
+            const y = dy * easedT - lift * hopT;
+
+            keyframes.push({
+                transform: `translate(${x}px, ${y}px) scale(${scale})`,
+                offset: t
+            });
+        }
+        return keyframes;
+    }
+
+    /**
+     * Translate using fade effect (smooth crossfade with scale)
+     * @private
+     */
+    _translateFade(to, duration, easing, landingEffect, landingDuration, callback) {
+        const halfDuration = duration / 2;
+        // Use smooth deceleration for fade
+        const fadeEasing = 'cubic-bezier(0.33, 1, 0.68, 1)';
+
+        // Fade out with subtle scale down
+        if (this.element.animate) {
+            const fadeOut = this.element.animate([
+                { opacity: 1, transform: 'scale(1)' },
+                { opacity: 0, transform: 'scale(0.95)' }
+            ], { duration: halfDuration, easing: fadeEasing, fill: 'forwards' });
+
+            fadeOut.onfinish = () => {
+                if (!this.element) {
+                    if (callback) callback();
+                    return;
+                }
+                // Move instantly (hidden)
+                fadeOut.cancel();
+                this.element.style.opacity = '0';
+                this.element.style.transform = 'scale(0.95)';
+
+                // Let parent move the piece in DOM, then fade in
+                if (callback) callback();
+
+                // Fade in at new position with subtle scale up
+                requestAnimationFrame(() => {
+                    if (!this.element) return;
+                    const fadeIn = this.element.animate([
+                        { opacity: 0, transform: 'scale(0.95)' },
+                        { opacity: 1, transform: 'scale(1)' }
+                    ], { duration: halfDuration, easing: fadeEasing, fill: 'forwards' });
+
+                    fadeIn.onfinish = () => {
+                        if (this.element) {
+                            fadeIn.cancel();
+                            this.element.style.opacity = '';
+                            this.element.style.transform = '';
+                            this._applyLandingEffect(landingEffect, landingDuration);
+                        }
+                    };
+                });
+            };
+        } else {
+            // Fallback
+            this.element.style.transition = `opacity ${halfDuration}ms ease, transform ${halfDuration}ms ease`;
+            this.element.style.opacity = '0';
+            this.element.style.transform = 'scale(0.95)';
+            setTimeout(() => {
+                if (callback) callback();
+                if (this.element) {
+                    this.element.style.opacity = '1';
+                    this.element.style.transform = 'scale(1)';
+                    setTimeout(() => {
+                        if (this.element) this.element.style = '';
+                    }, halfDuration);
+                }
+            }, halfDuration);
+        }
+    }
+
+    /**
+     * Apply landing effect after movement completes
+     * Uses spring-like overshoot easing for natural, connected feel
+     * @private
+     */
+    _applyLandingEffect(effect, duration, callback) {
+        if (!this.element || effect === 'none') {
+            if (callback) callback();
+            return;
+        }
+
+        let keyframes;
+        // Overshoot easing for spring-like natural feel
+        let effectEasing = 'cubic-bezier(0.34, 1.56, 0.64, 1)';
+
+        switch (effect) {
+            case 'bounce':
+                // Subtle bounce using spring easing - single smooth bounce
+                keyframes = [
+                    { transform: 'translateY(0)', offset: 0 },
+                    { transform: 'translateY(-5px)', offset: 0.4 },
+                    { transform: 'translateY(0)', offset: 1 }
+                ];
+                // Use ease-out for natural deceleration
+                effectEasing = 'cubic-bezier(0.33, 1, 0.68, 1)';
+                break;
+            case 'pulse':
+                // Subtle scale pulse - less aggressive, more refined
+                keyframes = [
+                    { transform: 'scale(1)', offset: 0 },
+                    { transform: 'scale(1.08)', offset: 0.5 },
+                    { transform: 'scale(1)', offset: 1 }
+                ];
+                break;
+            case 'settle':
+                // Minimal settle - piece "clicks" into place
+                keyframes = [
+                    { transform: 'scale(1.02)', offset: 0 },
+                    { transform: 'scale(1)', offset: 1 }
+                ];
+                effectEasing = 'cubic-bezier(0.33, 1, 0.68, 1)';
+                break;
+            default:
+                if (callback) callback();
+                return;
+        }
+
+        if (this.element.animate) {
+            const animation = this.element.animate(keyframes, {
+                duration: duration,
+                easing: effectEasing,
+                fill: 'forwards'
+            });
+            animation.onfinish = () => {
+                if (this.element) animation.cancel();
+                if (callback) callback();
+            };
+        } else {
             if (callback) callback();
-            if (this.element) this.element.style = '';
-            console.debug(`[Piece] translate complete (no animate): ${this.id}`);
         }
     }
 

package/src/components/Square.js

@@ -106,9 +106,9 @@ class Square {
     }
 
     putPiece(piece) {
-        // If there's already a piece, remove it first, but preserve if moving
+        // If there's already a piece, destroy it to avoid orphaned DOM elements
         if (this.piece) {
-            this.removePiece(true);
+            this.removePiece(false);
         }
         this.piece = piece;
         if (piece && piece.element) {
@@ -220,7 +220,7 @@ class Square {
     }
 
     getColor() {
-        return this.piece.getColor();
+        return this.piece ? this.piece.getColor() : null;
     }
 
     check() {