Add captured pieces display to UI

Co-authored-by: mgierschdev <62764972+mgierschdev@users.noreply.github.com>

Author: Copilot

frontend/src/app/_client_components/CapturedPieces.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React from 'react';
+import {ChessPiece} from "@/app/_models/ChessPiece";
+
+interface CapturedPiecesProps {
+    pieces: ChessPiece[];
+    color: 'White' | 'Black';
+}
+
+export default function CapturedPieces({pieces, color}: CapturedPiecesProps) {
+    if (!pieces || pieces.length === 0) {
+        return <div style={{ fontSize: '14px', color: '#666' }}>None</div>;
+    }
+
+    // Count pieces by type
+    const pieceCounts: { [key: string]: number } = {};
+    pieces.forEach(piece => {
+        if (piece.type && piece.type !== 'Empty' && piece.type !== 'Invalid') {
+            pieceCounts[piece.type] = (pieceCounts[piece.type] || 0) + 1;
+        }
+    });
+
+    // Map piece types to symbols (Unicode chess pieces)
+    const pieceSymbols: { [key: string]: string } = {
+        'Pawn': color === 'White' ? '♙' : '♟',
+        'Knight': color === 'White' ? '♘' : '♞',
+        'Bishop': color === 'White' ? '♗' : '♝',
+        'Rook': color === 'White' ? '♖' : '♜',
+        'Queen': color === 'White' ? '♕' : '♛',
+        'King': color === 'White' ? '♔' : '♚'
+    };
+
+    return (
+        <div style={{ 
+            display: 'flex', 
+            flexWrap: 'wrap', 
+            gap: '4px',
+            fontSize: '24px',
+            minHeight: '30px',
+            alignItems: 'center'
+        }}>
+            {Object.entries(pieceCounts).map(([type, count]) => (
+                <div key={type} style={{ display: 'flex', alignItems: 'center' }}>
+                    {Array.from({ length: count }).map((_, index) => (
+                        <span 
+                            key={`${type}-${index}`}
+                            style={{ 
+                                marginRight: '2px',
+                                filter: color === 'White' ? 'invert(1)' : 'none'
+                            }}
+                        >
+                            {pieceSymbols[type] || ''}
+                        </span>
+                    ))}
+                </div>
+            ))}
+        </div>
+    );
+}

frontend/src/app/_client_components/RightSidePanel.tsx

@@ -5,6 +5,7 @@ import {ChessService} from "@/app/_services/ChessService";
 import {ChessGame} from "@/app/_models/ChessGame";
 import {GameState} from "@/app/_models/enums";
 import MoveHistory from "./MoveHistory";
+import CapturedPieces from "./CapturedPieces";
 
 // Game Service
 let gameService: ChessService = new ChessService();
@@ -74,14 +75,22 @@ export default function RightSidePanel({gameInfoProp, onBotModeChange, onGameInf
                 <MoveHistory moves={gameInfo.moveHistory || []} />
             </div>
 
-            <div
-                className="right-side-panel-item">
-                Black Pieces:
+            <div className="right-side-panel-item" style={{ marginTop: '20px' }}>
+                <strong>Captured Pieces</strong>
             </div>
 
-            <div
-                className="right-side-panel-item">
-                White Pieces:
+            <div className="right-side-panel-item" style={{ marginTop: '10px' }}>
+                <div style={{ marginBottom: '5px', fontSize: '14px', fontWeight: 'bold' }}>
+                    Black Pieces:
+                </div>
+                <CapturedPieces pieces={gameInfo.capturedBlack || []} color="Black" />
+            </div>
+
+            <div className="right-side-panel-item" style={{ marginTop: '10px' }}>
+                <div style={{ marginBottom: '5px', fontSize: '14px', fontWeight: 'bold' }}>
+                    White Pieces:
+                </div>
+                <CapturedPieces pieces={gameInfo.capturedWhite || []} color="White" />
             </div>
         </div>
     );