change

chess_game/static/room.js

@@ -63,10 +63,22 @@
       return;
     }
     chess = new Chess();
-    // chessboard.js prefers element id string in many setups
+    const pieceSvg = (piece) => {
+      const glyphs = { wK:'♔', wQ:'♕', wR:'♖', wB:'♗', wN:'♘', wP:'♙', bK:'♚', bQ:'♛', bR:'♜', bB:'♝', bN:'♞', bP:'♟' };
+      const isWhite = piece && piece[0] === 'w';
+      const glyph = glyphs[piece] || '?';
+      const fill = isWhite ? '#ffffff' : '#111827';
+      const stroke = isWhite ? '#e5e7eb' : '#0b0f19';
+      const svg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'>
+  <rect x='0' y='0' width='64' height='64' fill='transparent'/>
+  <text x='50%' y='62%' font-size='48' text-anchor='middle' fill='${fill}' stroke='${stroke}' stroke-width='1.5' font-family='Segoe UI Symbol, DejaVu Sans, Noto Sans Symbols, Arial, sans-serif'>${glyph}</text>
+</svg>`;
+      return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
+    };
     board = Chessboard('boardUI', {
       position: 'start', draggable: true, dropOffBoard: 'snapback',
-      pieceTheme: 'https://cdnjs.cloudflare.com/ajax/libs/chessboard.js/1.0.0/img/chesspieces/wikipedia/{piece}.png',
+      pieceTheme: (p) => pieceSvg(p),
       onDragStart, onDrop, onSnapEnd
     });
     await syncFromServer();

chess_game/static/style.css

@@ -9,4 +9,20 @@ button:hover { background: #1d4ed8; }
 input, select { padding: 8px; border-radius: 6px; border: 1px solid #334155; background: #0f172a; color: #e5e7eb; }
 ul { padding-left: 20px; }
 
+/* Minimal fallback styles for chessboard.js if CDN CSS fails to load */
+.chessboard-63f37 { border: 1px solid #334155; background: #111827; }
+.board-b72b1 { position: relative; width: 100%; padding-bottom: 100%; }
+.square-55d63 { position: absolute; width: 12.5%; height: 12.5%; }
+.white-1e1d7 { background: #f0d9b5; }
+.black-3c85d { background: #b58863; }
+img.piece-417db { position: absolute; width: 12.5%; height: 12.5%; user-select: none; -webkit-user-drag: none; }
+
+/* Fallback board using CSS grid + Unicode pieces */
+#boardUI.fallback { width: 520px; height: 520px; max-width: 90vw; max-height: 90vw; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border: 1px solid #334155; }
+#boardUI.fallback .sq { display: flex; align-items: center; justify-content: center; font-size: calc(520px / 10); user-select: none; }
+#boardUI.fallback .light { background: #f0d9b5; color: #111827; }
+#boardUI.fallback .dark { background: #b58863; color: #111827; }
+#boardUI.fallback .pc { cursor: grab; }
+#boardUI.fallback .pc:active { cursor: grabbing; }
+