@alepot55/chessboardjs 2.2.1 → 2.2.2

package/src/styles/animations.css

@@ -0,0 +1,46 @@
+/* Animation styles */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes slideIn {
+  from { transform: translateY(-10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes bounce {
+  0%, 20%, 53%, 80%, 100% {
+    transform: translate3d(0, 0, 0);
+  }
+  40%, 43% {
+    transform: translate3d(0, -5px, 0);
+  }
+  70% {
+    transform: translate3d(0, -3px, 0);
+  }
+  90% {
+    transform: translate3d(0, -1px, 0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn var(--fade-time, 150ms) var(--fade-animation, ease);
+}
+
+.fade-out {
+  animation: fadeOut var(--fade-time, 150ms) var(--fade-animation, ease);
+}
+
+.slide-in {
+  animation: slideIn var(--fade-time, 150ms) var(--fade-animation, ease);
+}
+
+.bounce {
+  animation: bounce 1s ease;
+}

package/{chessboard.css → src/styles/board.css}

@@ -1,6 +1,7 @@
 :root {
     --dimBoard: 600px;
     --pieceRatio: 0.9;
+    --square-size: calc(var(--dimBoard) / 8);
 
     --blackSquare: #b58863;
     --whiteSquare: #f0d9b5;
@@ -19,11 +20,14 @@
     grid-template: repeat(8, 1fr) / repeat(8, 1fr);
     width: var(--dimBoard);
     height: var(--dimBoard);
+    /* Enable hardware acceleration for better performance */
+    transform: translateZ(0);
+    will-change: auto;
 }
 
 .square {
-    width: calc(var(--dimBoard) / 8);
-    height: calc(var(--dimBoard) / 8);
+    width: var(--square-size);
+    height: var(--square-size);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -32,8 +36,8 @@
 .piece {
     position: absolute;
     z-index: 10;
-    width: calc(calc(var(--dimBoard) / 8) * var(--pieceRatio));
-    height: calc(calc(var(--dimBoard) / 8) * var(--pieceRatio));
+    width: calc(var(--square-size) * var(--pieceRatio));
+    height: calc(var(--square-size) * var(--pieceRatio));
 
     /* No selection */
     -webkit-user-select: none;

package/src/styles/index.css

@@ -0,0 +1,4 @@
+/* Main stylesheet for Chessboard.js */
+@import './board.css';
+@import './pieces.css';
+@import './animations.css';

package/src/styles/pieces.css

@@ -0,0 +1,70 @@
+/* Piece-specific styles */
+.piece {
+  position: absolute;
+  cursor: pointer;
+  /* Solo transizioni specifiche, non "all" */
+  transition: opacity var(--fade-time, 150ms) var(--fade-animation, ease);
+  z-index: 10;
+  /* Hint al browser per ottimizzazioni */
+  will-change: auto;
+}
+
+.piece.dragging {
+  z-index: 100;
+  /* Disabilita completamente le transizioni durante il drag */
+  transition: none !important;
+  /* Hint per ottimizzazione durante drag */
+  will-change: left, top, transform;
+  /* Mantiene le dimensioni originali del pezzo durante il drag */
+  width: calc(var(--square-size) * var(--pieceRatio)) !important;
+  height: calc(var(--square-size) * var(--pieceRatio)) !important;
+  /* Assicura che il pezzo mantenga le proporzioni corrette */
+  box-sizing: border-box;
+}
+
+.piece.fading {
+  opacity: 0;
+  transition: opacity var(--fade-time, 150ms) var(--fade-animation, ease);
+}
+
+.piece.moving {
+  /* Solo transizione per transform, non position */
+  transition: transform var(--move-time, 200ms) var(--move-animation, ease);
+}
+
+/* Piece replacement during promotion - no transitions to avoid flickering */
+.piece.replacing {
+  transition: none !important;
+  opacity: 1;
+  transform: none;
+}
+
+/* Piece transformation during promotion - smooth scaling animation */
+.piece.transforming {
+  transition: none !important;
+  transform-origin: center center;
+  will-change: transform, opacity;
+  z-index: 50;
+}
+
+/* Subtle bounce effect after transformation */
+.piece.transform-complete {
+  animation: transformBounce 0.4s ease-out;
+}
+
+@keyframes transformBounce {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+/* Piece sizing */
+.piece img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  /* Previene conflitti di drag dell'immagine */
+  pointer-events: none;
+  /* Migliore rendering */
+  image-rendering: crisp-edges;
+}

package/src/utils/animations.js

@@ -0,0 +1,37 @@
+/**
+ * Animation utilities for Chessboard.js
+ */
+
+/**
+ * Get the CSS transition duration in milliseconds
+ * @param {string|number} time - Time value ('fast', 'slow', or number in ms)
+ * @returns {number} Duration in milliseconds
+ */
+export function parseTime(time) {
+  if (typeof time === 'number') return time;
+  
+  switch (time) {
+    case 'fast': return 150;
+    case 'slow': return 500;
+    default: return 200;
+  }
+}
+
+/**
+ * Get the CSS transition function
+ * @param {string} animation - Animation type ('ease', 'linear', etc.)
+ * @returns {string} CSS transition function
+ */
+export function parseAnimation(animation) {
+  const validAnimations = ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'];
+  return validAnimations.includes(animation) ? animation : 'ease';
+}
+
+/**
+ * Create a promise that resolves after animation completion
+ * @param {number} duration - Duration in milliseconds
+ * @returns {Promise} Promise that resolves after the duration
+ */
+export function animationPromise(duration) {
+  return new Promise(resolve => setTimeout(resolve, duration));
+}

package/{chess.js → src/utils/chess.js}

@@ -914,8 +914,8 @@ export class Chess {
             return true;
         }
         else if (
-        // k vs. kn .... or .... k vs. kb
-        numPieces === 3 &&
+            // k vs. kn .... or .... k vs. kb
+            numPieces === 3 &&
             (pieces[BISHOP] === 1 || pieces[KNIGHT] === 1)) {
             return true;
         }
@@ -1548,14 +1548,14 @@ export class Chess {
         function toHex(s) {
             return Array.from(s)
                 .map(function (c) {
-                /*
-                 * encodeURI doesn't transform most ASCII characters, so we handle
-                 * these ourselves
-                 */
-                return c.charCodeAt(0) < 128
-                    ? c.charCodeAt(0).toString(16)
-                    : encodeURIComponent(c).replace(/%/g, '').toLowerCase();
-            })
+                    /*
+                     * encodeURI doesn't transform most ASCII characters, so we handle
+                     * these ourselves
+                     */
+                    return c.charCodeAt(0) < 128
+                        ? c.charCodeAt(0).toString(16)
+                        : encodeURIComponent(c).replace(/%/g, '').toLowerCase();
+                })
                 .join('');
         }
         function fromHex(s) {
@@ -1576,12 +1576,12 @@ export class Chess {
         let ms = pgn
             .replace(headerString, '')
             .replace(
-        // encode comments so they don't get deleted below
-        new RegExp(`({[^}]*})+?|;([^${mask(newlineChar)}]*)`, 'g'), function (_match, bracket, semicolon) {
-            return bracket !== undefined
-                ? encodeComment(bracket)
-                : ' ' + encodeComment(`{${semicolon.slice(1)}}`);
-        })
+                // encode comments so they don't get deleted below
+                new RegExp(`({[^}]*})+?|;([^${mask(newlineChar)}]*)`, 'g'), function (_match, bracket, semicolon) {
+                    return bracket !== undefined
+                        ? encodeComment(bracket)
+                        : ' ' + encodeComment(`{${semicolon.slice(1)}}`);
+                })
             .replace(new RegExp(mask(newlineChar), 'g'), ' ');
         // delete recursive annotation variations
         const ravRegex = /(\([^()]+\))+?/g;

package/src/utils/coordinates.js

@@ -0,0 +1,62 @@
+/**
+ * Coordinate utilities for Chessboard.js
+ */
+
+/**
+ * Convert algebraic notation to array coordinates
+ * @param {string} square - Square in algebraic notation (e.g., 'a1', 'h8')
+ * @returns {Object} Object with row and col properties
+ */
+export function algebraicToCoords(square) {
+  const file = square.charCodeAt(0) - 97; // 'a' = 0, 'b' = 1, etc.
+  const rank = parseInt(square[1]) - 1;    // '1' = 0, '2' = 1, etc.
+  
+  return { row: 7 - rank, col: file };
+}
+
+/**
+ * Convert array coordinates to algebraic notation
+ * @param {number} row - Row index (0-7)
+ * @param {number} col - Column index (0-7)
+ * @returns {string} Square in algebraic notation
+ */
+export function coordsToAlgebraic(row, col) {
+  const file = String.fromCharCode(97 + col); // 0 = 'a', 1 = 'b', etc.
+  const rank = (8 - row).toString();          // 0 = '8', 1 = '7', etc.
+  
+  return file + rank;
+}
+
+/**
+ * Get the color of a square
+ * @param {string} square - Square in algebraic notation
+ * @returns {string} 'light' or 'dark'
+ */
+export function getSquareColor(square) {
+  const { row, col } = algebraicToCoords(square);
+  return (row + col) % 2 === 0 ? 'dark' : 'light';
+}
+
+/**
+ * Check if coordinates are valid
+ * @param {number} row - Row index
+ * @param {number} col - Column index
+ * @returns {boolean} True if coordinates are valid
+ */
+export function isValidCoords(row, col) {
+  return row >= 0 && row <= 7 && col >= 0 && col <= 7;
+}
+
+/**
+ * Check if algebraic notation is valid
+ * @param {string} square - Square in algebraic notation
+ * @returns {boolean} True if square notation is valid
+ */
+export function isValidSquare(square) {
+  if (typeof square !== 'string' || square.length !== 2) return false;
+  
+  const file = square[0];
+  const rank = square[1];
+  
+  return file >= 'a' && file <= 'h' && rank >= '1' && rank <= '8';
+}

package/src/utils/cross-browser.js

@@ -0,0 +1,150 @@
+/**
+ * Cross-browser utilities for consistent drag & drop behavior
+ */
+
+/**
+ * Detect browser type and version
+ * @returns {Object} Browser information
+ */
+export function getBrowserInfo() {
+    const ua = navigator.userAgent;
+    const isChrome = ua.includes('Chrome') && !ua.includes('Edg');
+    const isFirefox = ua.includes('Firefox');
+    const isSafari = ua.includes('Safari') && !ua.includes('Chrome');
+    const isEdge = ua.includes('Edg');
+    
+    return {
+        isChrome,
+        isFirefox,
+        isSafari,
+        isEdge,
+        devicePixelRatio: window.devicePixelRatio || 1,
+        userAgent: ua
+    };
+}
+
+/**
+ * Get accurate mouse coordinates accounting for browser differences
+ * @param {MouseEvent} event - Mouse event
+ * @returns {Object} Normalized coordinates
+ */
+export function getNormalizedCoordinates(event) {
+    const browserInfo = getBrowserInfo();
+    
+    // Base coordinates
+    let x = event.clientX;
+    let y = event.clientY;
+    
+    // Add scroll offset for absolute positioning
+    x += window.scrollX || window.pageXOffset || 0;
+    y += window.scrollY || window.pageYOffset || 0;
+    
+    // Chrome-specific adjustments if needed
+    if (browserInfo.isChrome) {
+        // Chrome sometimes has sub-pixel rendering differences
+        x = Math.round(x);
+        y = Math.round(y);
+    }
+    
+    return { x, y };
+}
+
+/**
+ * Set element position using the most compatible method
+ * @param {HTMLElement} element - Element to position
+ * @param {number} x - X coordinate
+ * @param {number} y - Y coordinate
+ */
+export function setElementPosition(element, x, y) {
+    // Ensure pixel-perfect positioning
+    element.style.left = `${Math.round(x)}px`;
+    element.style.top = `${Math.round(y)}px`;
+}
+
+/**
+ * Calculate offset from center for drag positioning
+ * @param {HTMLElement} element - Element being dragged
+ * @param {number} mouseX - Mouse X coordinate
+ * @param {number} mouseY - Mouse Y coordinate
+ * @returns {Object} Position coordinates
+ */
+export function calculateDragPosition(element, mouseX, mouseY) {
+    const rect = element.getBoundingClientRect();
+    const halfWidth = rect.width / 2;
+    const halfHeight = rect.height / 2;
+    
+    return {
+        x: mouseX - halfWidth,
+        y: mouseY - halfHeight
+    };
+}
+
+/**
+ * Enhanced mouse coordinate tracking for cross-browser compatibility
+ */
+export class MouseTracker {
+    constructor() {
+        this.lastKnownPosition = { x: 0, y: 0 };
+        this.browserInfo = getBrowserInfo();
+    }
+    
+    /**
+     * Update position from mouse event
+     * @param {MouseEvent} event - Mouse event
+     * @returns {Object} Normalized position
+     */
+    updatePosition(event) {
+        const coords = getNormalizedCoordinates(event);
+        this.lastKnownPosition = coords;
+        return coords;
+    }
+    
+    /**
+     * Get element position for dragging
+     * @param {HTMLElement} element - Element to position
+     * @param {MouseEvent} event - Mouse event
+     * @returns {Object} Position for the element
+     */
+    getDragPosition(element, event) {
+        const mousePos = this.updatePosition(event);
+        return calculateDragPosition(element, mousePos.x, mousePos.y);
+    }
+}
+
+/**
+ * Browser-specific drag optimizations
+ */
+export const DragOptimizations = {
+    /**
+     * Apply browser-specific optimizations to an element
+     * @param {HTMLElement} element - Element to optimize
+     */
+    enableForDrag(element) {
+        const browserInfo = getBrowserInfo();
+        
+        // Base optimizations for all browsers
+        element.style.willChange = 'left, top';
+        element.style.pointerEvents = 'none'; // Prevent conflicts
+        
+        // Chrome-specific optimizations
+        if (browserInfo.isChrome) {
+            element.style.transform = 'translateZ(0)'; // Force hardware acceleration
+        }
+        
+        // Firefox-specific optimizations
+        if (browserInfo.isFirefox) {
+            element.style.backfaceVisibility = 'hidden';
+        }
+    },
+    
+    /**
+     * Clean up optimizations after drag
+     * @param {HTMLElement} element - Element to clean up
+     */
+    cleanupAfterDrag(element) {
+        element.style.willChange = 'auto';
+        element.style.pointerEvents = '';
+        element.style.transform = '';
+        element.style.backfaceVisibility = '';
+    }
+};