Upload components/CapturedPieces.js with huggingface_hub

components/CapturedPieces.js

@@ -0,0 +1,31 @@
+export default function CapturedPieces({ pieces, label }) {
+  return (
+    <div className="comic-card py-3 px-4 min-w-[140px]">
+      <h4 className="text-xs font-bold uppercase text-gray-500 mb-2 text-center">{label}</h4>
+      <div className="flex flex-wrap gap-1 justify-center min-h-[30px]">
+        {pieces.map((p, i) => (
+          <span key={i} className="text-2xl piece-3d opacity-80 hover:opacity-100 hover:scale-125 transition-transform cursor-help" title={getPieceName(p)}>
+            {getPieceSymbol(p)}
+          </span>
+        ))}
+        {pieces.length === 0 && <span className="text-xs text-gray-400 italic">None</span>}
+      </div>
+    </div>
+  );
+}
+
+const getPieceSymbol = (p) => {
+  const map = {
+    'K': '♔', 'Q': '♕', 'R': '♖', 'B': '♗', 'N': '♘', 'P': '♙',
+    'k': '♚', 'q': '♛', 'r': '♜', 'b': '♝', 'n': '♞', 'p': '♟',
+  };
+  return map[p] || '';
+};
+
+const getPieceName = (p) => {
+  const names = {
+    'P': 'Pawn', 'N': 'Knight', 'B': 'Bishop', 'R': 'Rook', 'Q': 'Queen', 'K': 'King',
+    'p': 'Pawn', 'n': 'Knight', 'b': 'Bishop', 'r': 'Rook', 'q': 'Queen', 'k': 'King',
+  };
+  return names[p] || p;
+};