@alepot55/chessboardjs 2.2.0 → 2.3.2

package/jest.config.js

@@ -1,7 +1,2 @@
-export default {
-    testEnvironment: 'jsdom',
-    transform: {
-        "^.+\\.js$": "babel-jest"
-    }
-    // ...existing config...
-};
+// Re-export the configuration from the config directory
+export { default } from './config/jest.config.js';

package/package.json

@@ -3,11 +3,25 @@
     "chess.js": "^1.0.0"
   },
   "name": "@alepot55/chessboardjs",
-  "version": "2.2.0",
-  "main": "chessboard.js",
+  "version": "2.3.2",
+  "main": "src/index.js",
   "type": "module",
   "scripts": {
-    "test": "jest"
+    "dev": "rollup -c config/rollup.config.js --watch",
+    "build": "rollup -c config/rollup.config.js",
+    "build:all": "npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:iife",
+    "build:esm": "rollup -c config/rollup.config.js --format esm",
+    "build:cjs": "rollup -c config/rollup.config.js --format cjs",
+    "build:umd": "rollup -c config/rollup.config.js --format umd",
+    "build:iife": "rollup -c config/rollup.config.js --format iife",
+    "test": "jest --config config/jest.config.js",
+    "test:watch": "jest --config config/jest.config.js --watch",
+    "test:coverage": "jest --config config/jest.config.js --coverage",
+    "lint": "echo 'ESLint not configured yet'",
+    "lint:fix": "echo 'ESLint not configured yet'",
+    "docs": "echo 'JSDoc not configured yet'",
+    "examples": "echo 'Example server not configured yet'",
+    "prepublishOnly": "npm run build"
   },
   "author": "alepot55",
   "license": "ISC",
@@ -28,6 +42,7 @@
     "@babel/core": "^7.26.8",
     "@babel/preset-env": "^7.26.8",
     "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-replace": "^6.0.2",
     "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

package/rollup.config.js

@@ -1,11 +1,2 @@
-import resolve from '@rollup/plugin-node-resolve';
-
-export default {
-  input: 'chessboard.js', // entry point per la libreria
-  output: {
-    file: 'dist/chessboard.bundle.js', // percorso relativo per evitare errori di permessi
-    format: 'iife', // oppure "umd" per UMD
-    name: 'Chessboard'
-  },
-  plugins: [resolve()]
-};
+// Re-export the configuration from the config directory
+export { default } from './config/rollup.config.js';

package/{chessboard.move.js → src/components/Move.js}

@@ -1,10 +1,10 @@
-import Piece from "./chessboard.piece.js";
-import Square from "./chessboard.square.js";
+import Piece from "./Piece.js";
+import Square from "./Square.js";
 
 class Move {
 
     constructor(from, to, promotion = null, check = false) {
-        this.piece = from.getPiece();
+        this.piece = from ? from.getPiece() : null;
         this.from = from;
         this.to = to;
         this.promotion = promotion;

package/src/components/Piece.js

@@ -0,0 +1,273 @@
+class Piece {
+    constructor(color, type, src, opacity = 1) {
+        this.color = color;
+        this.type = type;
+        this.id = this.getId();
+        this.src = src;
+        this.element = this.createElement(src, opacity);
+        console.debug(`[Piece] Constructed: ${this.id}`);
+        this.check();
+    }
+
+    getId() { return this.type + this.color }
+
+    createElement(src, opacity = 1) {
+        let element = document.createElement("img");
+        element.classList.add("piece");
+        element.id = this.id;
+        element.src = src || this.src;
+        element.style.opacity = opacity;
+
+        // Ensure the image loads properly
+        element.onerror = () => {
+            console.warn('Failed to load piece image:', element.src);
+        };
+
+        return element;
+    }
+
+    visible() { if (this.element) { this.element.style.opacity = 1; console.debug(`[Piece] visible: ${this.id}`); } }
+
+    invisible() { if (this.element) { this.element.style.opacity = 0; console.debug(`[Piece] invisible: ${this.id}`); } }
+
+    /**
+     * Updates the piece image source
+     * @param {string} newSrc - New image source
+     */
+    updateSrc(newSrc) {
+        this.src = newSrc;
+        if (this.element) {
+            this.element.src = newSrc;
+        }
+    }
+
+    /**
+     * Transforms the piece to a new type with smooth animation
+     * @param {string} newType - New piece type
+     * @param {string} newSrc - New image source
+     * @param {number} [duration=200] - Animation duration in milliseconds
+     * @param {Function} [callback] - Callback when transformation is complete
+     */
+    transformTo(newType, newSrc, duration = 200, callback = null) {
+        if (!this.element) { console.debug(`[Piece] transformTo: ${this.id} - element is null`); if (callback) callback(); return; }
+        const element = this.element;
+        const oldSrc = element.src;
+
+        // Add transformation class to disable all transitions temporarily
+        element.classList.add('transforming');
+
+        // Create a smooth scale animation for the transformation
+        const scaleDown = [
+            { transform: 'scale(1)', opacity: '1' },
+            { transform: 'scale(0.8)', opacity: '0.7' }
+        ];
+
+        const scaleUp = [
+            { transform: 'scale(0.8)', opacity: '0.7' },
+            { transform: 'scale(1)', opacity: '1' }
+        ];
+
+        const halfDuration = duration / 2;
+
+        // First animation: scale down
+        if (element.animate) {
+            const scaleDownAnimation = element.animate(scaleDown, {
+                duration: halfDuration,
+                easing: 'ease-in',
+                fill: 'forwards'
+            });
+
+            scaleDownAnimation.onfinish = () => {
+                if (!this.element) { console.debug(`[Piece] transformTo.scaleDown.onfinish: ${this.id} - element is null`); if (callback) callback(); return; }
+                // Change the piece type and source at the smallest scale
+                this.type = newType;
+                this.id = this.getId();
+                this.src = newSrc;
+                element.src = newSrc;
+                element.id = this.id;
+
+                // Second animation: scale back up
+                const scaleUpAnimation = element.animate(scaleUp, {
+                    duration: halfDuration,
+                    easing: 'ease-out',
+                    fill: 'forwards'
+                });
+
+                scaleUpAnimation.onfinish = () => {
+                    if (!this.element) { console.debug(`[Piece] transformTo.scaleUp.onfinish: ${this.id} - element is null`); if (callback) callback(); return; }
+                    // Reset transform and remove transformation class
+                    element.style.transform = '';
+                    element.style.opacity = '';
+                    element.classList.remove('transforming');
+
+                    // Add a subtle bounce effect
+                    element.classList.add('transform-complete');
+
+                    // Remove bounce class after animation
+                    setTimeout(() => {
+                        if (!this.element) return;
+                        element.classList.remove('transform-complete');
+                    }, 400);
+
+                    console.debug(`[Piece] transformTo complete: ${this.id}`);
+                    if (callback) callback();
+                };
+            };
+        } else {
+            // Fallback for browsers without Web Animations API
+            element.style.transition = `transform ${halfDuration}ms ease-in, opacity ${halfDuration}ms ease-in`;
+            element.style.transform = 'scale(0.8)';
+            element.style.opacity = '0.7';
+
+            setTimeout(() => {
+                if (!this.element) { console.debug(`[Piece] transformTo (fallback): ${this.id} - element is null`); if (callback) callback(); return; }
+                // Change the piece
+                this.type = newType;
+                this.id = this.getId();
+                this.src = newSrc;
+                element.src = newSrc;
+                element.id = this.id;
+
+                // Scale back up
+                element.style.transition = `transform ${halfDuration}ms ease-out, opacity ${halfDuration}ms ease-out`;
+                element.style.transform = 'scale(1)';
+                element.style.opacity = '1';
+
+                setTimeout(() => {
+                    if (!this.element) { console.debug(`[Piece] transformTo (fallback, cleanup): ${this.id} - element is null`); if (callback) callback(); return; }
+                    // Clean up
+                    element.style.transition = '';
+                    element.style.transform = '';
+                    element.style.opacity = '';
+                    element.classList.remove('transforming');
+
+                    // Add bounce effect
+                    element.classList.add('transform-complete');
+                    setTimeout(() => {
+                        if (!this.element) return;
+                        element.classList.remove('transform-complete');
+                    }, 400);
+
+                    console.debug(`[Piece] transformTo complete (fallback): ${this.id}`);
+                    if (callback) callback();
+                }, halfDuration);
+            }, halfDuration);
+        }
+    }
+
+    fadeIn(duration, speed, transition_f, callback) {
+        let start = performance.now();
+        let opacity = 0;
+        let piece = this;
+        let fade = function () {
+            if (!piece.element) { console.debug(`[Piece] fadeIn: ${piece.id} - element is null`); if (callback) callback(); return; }
+            let elapsed = performance.now() - start;
+            opacity = transition_f(elapsed, duration, speed);
+            piece.element.style.opacity = opacity;
+            if (elapsed < duration) {
+                requestAnimationFrame(fade);
+            } else {
+                if (!piece.element) { console.debug(`[Piece] fadeIn: ${piece.id} - element is null (end)`); if (callback) callback(); return; }
+                piece.element.style.opacity = 1;
+                console.debug(`[Piece] fadeIn complete: ${piece.id}`);
+                if (callback) callback();
+            }
+        }
+        fade();
+    }
+
+    fadeOut(duration, speed, transition_f, callback) {
+        let start = performance.now();
+        let opacity = 1;
+        let piece = this;
+        let fade = function () {
+            if (!piece.element) { console.debug(`[Piece] fadeOut: ${piece.id} - element is null`); if (callback) callback(); return; }
+            let elapsed = performance.now() - start;
+            opacity = 1 - transition_f(elapsed, duration, speed);
+            piece.element.style.opacity = opacity;
+            if (elapsed < duration) {
+                requestAnimationFrame(fade);
+            } else {
+                if (!piece.element) { console.debug(`[Piece] fadeOut: ${piece.id} - element is null (end)`); if (callback) callback(); return; }
+                piece.element.style.opacity = 0;
+                console.debug(`[Piece] fadeOut complete: ${piece.id}`);
+                if (callback) callback();
+            }
+        }
+        fade();
+    }
+
+    setDrag(f) {
+        if (!this.element) { console.debug(`[Piece] setDrag: ${this.id} - element is null`); return; }
+        this.element.ondragstart = (e) => { e.preventDefault() };
+        this.element.onmousedown = f;
+        console.debug(`[Piece] setDrag: ${this.id}`);
+    }
+
+    destroy() {
+        console.debug(`[Piece] Destroy: ${this.id}`);
+        // Remove all event listeners
+        if (this.element) {
+            this.element.onmousedown = null;
+            this.element.ondragstart = null;
+
+            // Remove from DOM
+            if (this.element.parentNode) {
+                this.element.parentNode.removeChild(this.element);
+            }
+
+            // Clear references
+            this.element = null;
+        }
+    }
+
+    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)` }
+        ];
+
+        if (this.element.animate) {
+            let animation = this.element.animate(keyframes, {
+                duration: duration,
+                easing: 'ease',
+                fill: 'none'
+            });
+
+            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) this.element.style = '';
+                console.debug(`[Piece] translate complete: ${this.id}`);
+            };
+        } else {
+            this.element.style.transition = `transform ${duration}ms ease`;
+            this.element.style.transform = `translate(${dx}px, ${dy}px)`;
+            if (callback) callback();
+            if (this.element) this.element.style = '';
+            console.debug(`[Piece] translate complete (no animate): ${this.id}`);
+        }
+    }
+
+    check() {
+        if (['p', 'r', 'n', 'b', 'q', 'k'].indexOf(this.type) === -1) {
+            throw new Error("Invalid piece type");
+        }
+
+        if (['w', 'b'].indexOf(this.color) === -1) {
+            throw new Error("Invalid piece color");
+        }
+    }
+}
+
+export default Piece;

package/{chessboard.square.js → src/components/Square.js}

@@ -1,4 +1,4 @@
-import Piece from "./chessboard.piece.js";
+import Piece from "./Piece.js";
 
 class Square {
 
@@ -54,11 +54,51 @@ class Square {
         return this.element.getBoundingClientRect();
     }
 
-    removePiece() {
-        this.element.removeChild(this.piece.element);
-        const piece = this.piece;
+    removePiece(preserve = false) {
+        if (!this.piece) {
+            return null;
+        }
+        // Only destroy the piece if not preserving (i.e., not moving)
+        if (!preserve && typeof this.piece.destroy === 'function') {
+            this.piece.destroy();
+        }
         this.piece = null;
-        return piece;
+        return null;
+    }
+
+    /**
+     * Forcefully removes all pieces from this square
+     */
+    forceRemoveAllPieces() {
+        // Best practice: destroy the piece object if present
+        if (this.piece && typeof this.piece.destroy === 'function') {
+            this.piece.destroy();
+            this.piece = null;
+        }
+        // Remove any orphaned img.piece elements from the DOM
+        const pieceElements = this.element.querySelectorAll('img.piece');
+        pieceElements.forEach(element => {
+            if (element.parentNode === this.element) {
+                this.element.removeChild(element);
+            }
+        });
+    }
+
+    /**
+     * Replaces the current piece with a new one efficiently
+     * @param {Piece} newPiece - The new piece to place
+     */
+    replacePiece(newPiece) {
+        // If there's an existing piece, remove it first
+        if (this.piece) {
+            this.removePiece();
+        }
+
+        // Add the new piece
+        this.putPiece(newPiece);
+
+        // Ensure the piece is properly displayed
+        newPiece.element.style.opacity = '1';
     }
 
     addEventListener(event, callback) {
@@ -66,8 +106,14 @@ class Square {
     }
 
     putPiece(piece) {
+        // If there's already a piece, remove it first, but preserve if moving
+        if (this.piece) {
+            this.removePiece(true);
+        }
         this.piece = piece;
-        this.element.appendChild(piece.element);
+        if (piece && piece.element) {
+            this.element.appendChild(piece.element);
+        }
     }
 
     putHint(catchable) {
@@ -150,6 +196,10 @@ class Square {
 
     }
 
+    hasPromotion() {
+        return this.element.querySelector('.choice') !== null;
+    }
+
     removePromotion() {
         let choice = this.element.querySelector('.choice');
         if (choice) {
@@ -159,7 +209,10 @@ class Square {
     }
 
     destroy() {
+        // Remove all piece DOM nodes and clear reference
+        this.forceRemoveAllPieces();
         this.element.remove();
+        this.piece = null;
     }
 
     hasPiece() {
@@ -177,7 +230,7 @@ class Square {
         if (this.col < 1 || this.col > 8) {
             throw new Error("Invalid square: col is out of bounds");
         }
-        
+
     }
 }
 

package/src/constants/index.js

@@ -0,0 +1,15 @@
+/**
+ * Constants module exports
+ * @module constants
+ * @since 2.0.0
+ */
+
+export {
+    STANDARD_POSITIONS,
+    DEFAULT_STARTING_POSITION,
+    PIECE_TYPES,
+    PIECE_COLORS,
+    PROMOTION_PIECES,
+    BOARD_LETTERS,
+    BOARD_SIZE
+} from './positions.js';

package/src/constants/positions.js

@@ -0,0 +1,62 @@
+/**
+ * Standard chess positions and FEN constants
+ * @module constants/positions
+ * @since 2.0.0
+ */
+
+/**
+ * Standard chess positions used throughout the application
+ * @type {Object.<string, string>}
+ * @readonly
+ */
+export const STANDARD_POSITIONS = {
+    'start': 'start',
+    'default': 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
+    'empty': '8/8/8/8/8/8/8/8 w - - 0 1'
+};
+
+/**
+ * Default starting position FEN string
+ * @type {string}
+ * @readonly
+ */
+export const DEFAULT_STARTING_POSITION = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
+
+/**
+ * Chess piece types
+ * @type {string[]}
+ * @readonly
+ */
+export const PIECE_TYPES = ['p', 'r', 'n', 'b', 'q', 'k'];
+
+/**
+ * Chess piece colors
+ * @type {string[]}
+ * @readonly
+ */
+export const PIECE_COLORS = ['w', 'b'];
+
+/**
+ * Valid promotion pieces
+ * @type {string[]}
+ * @readonly
+ */
+export const PROMOTION_PIECES = ['q', 'r', 'b', 'n'];
+
+/**
+ * Board coordinates letters
+ * @type {string}
+ * @readonly
+ */
+export const BOARD_LETTERS = 'abcdefgh';
+
+/**
+ * Board size constants
+ * @type {Object}
+ * @readonly
+ */
+export const BOARD_SIZE = {
+    ROWS: 8,
+    COLS: 8,
+    TOTAL_SQUARES: 64
+};