Refactor chess piece styling and rendering logic

- Simplified CSS by removing SVG background rules; core styles now handled in board.js.
- Updated board.js to dynamically set piece backgrounds with cache-busting for improved loading.
- Added console logs for better debugging of piece rendering and loading status.

Author: TMHSDigital

css/pieces.css

@@ -1,21 +1,16 @@
 /**
- * Chess piece styling using SVG files for reliable cross-browser rendering
+ * Chess piece styling - core styles only
+ * All piece-specific styling handled by inline styles in board.js
  */
 
-/* Base piece styling */
 .piece {
     width: 80%;
     height: 80%;
     cursor: grab;
     user-select: none;
     position: relative;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
     transition: transform 0.15s ease;
     will-change: transform;
-    
-    /* Disable any content-based display */
     color: transparent !important;
 }
 
@@ -42,22 +37,6 @@
     z-index: 100;
 }
 
-/* WHITE PIECES */
-.piece.w.p { background-image: url("../assets/wp.svg") !important; }
-.piece.w.r { background-image: url("../assets/wr.svg") !important; }
-.piece.w.n { background-image: url("../assets/wn.svg") !important; }
-.piece.w.b { background-image: url("../assets/wb.svg") !important; }
-.piece.w.q { background-image: url("../assets/wq.svg") !important; }
-.piece.w.k { background-image: url("../assets/wk.svg") !important; }
-
-/* BLACK PIECES */
-.piece.b.p { background-image: url("../assets/bp.svg") !important; }
-.piece.b.r { background-image: url("../assets/br.svg") !important; }
-.piece.b.n { background-image: url("../assets/bn.svg") !important; }
-.piece.b.b { background-image: url("../assets/bb.svg") !important; }
-.piece.b.q { background-image: url("../assets/bq.svg") !important; }
-.piece.b.k { background-image: url("../assets/bk.svg") !important; }
-
 /* Move animations */
 @keyframes move-piece {
     0% { transform: scale(1); }

js/board.js

@@ -32,14 +32,36 @@ function renderPieces(boardState, movedPiece = null) {
     // Clear existing pieces first
     document.querySelectorAll('.piece').forEach(p => p.remove());
 
+    // Generate a cache-busting token
+    const cacheBuster = Date.now();
+    console.log("Rendering pieces with cache buster:", cacheBuster);
+
     for (let row = 0; row < 8; row++) {
         for (let col = 0; col < 8; col++) {
             const piece = boardState[row][col];
             if (piece) {
                 const squareElement = getSquareElement(row, col);
                 if (squareElement) {
                     const pieceElement = document.createElement('div');
-                    pieceElement.classList.add('piece', piece.color, piece.type);
+                    pieceElement.classList.add('piece');
+                    
+                    // Add piece color and type as classes for potential styling
+                    pieceElement.classList.add(piece.color, piece.type);
+                    
+                    // Use absolute path with cache busting
+                    const svgPath = `assets/${piece.color}${piece.type}.svg?v=${cacheBuster}`;
+                    console.log(`Setting background for ${piece.color}${piece.type} at [${row},${col}] to: ${svgPath}`);
+                    
+                    pieceElement.style.backgroundImage = `url('${svgPath}')`;
+                    pieceElement.style.backgroundSize = 'contain';
+                    pieceElement.style.backgroundRepeat = 'no-repeat';
+                    pieceElement.style.backgroundPosition = 'center';
+                    
+                    // Force image preload to debug loading issues
+                    const img = new Image();
+                    img.onload = () => console.log(`✓ Successfully loaded: ${svgPath}`);
+                    img.onerror = () => console.error(`✗ Failed to load: ${svgPath}`);
+                    img.src = svgPath;
 
                     // Add animation class if this is the piece that just moved
                     if (movedPiece && movedPiece.row === row && movedPiece.col === col) {
@@ -53,6 +75,9 @@ function renderPieces(boardState, movedPiece = null) {
 
                     // Add data attributes for easier identification if needed
                     pieceElement.dataset.piece = `${piece.color}${piece.type}`;
+                    pieceElement.dataset.color = piece.color;
+                    pieceElement.dataset.type = piece.type;
+                    
                     squareElement.appendChild(pieceElement);
                 }
             }