web/src/components/CapturedPieces.tsx

import * as React from 'react';

interface CapturedPiecesProps {
  whiteCaptured: string[];
  blackCaptured: string[];
}

const CapturedPieces: React.FC<CapturedPiecesProps> = ({ whiteCaptured, blackCaptured }) => {
  // Helper function to get piece value for sorting
  const getPieceValue = (piece: string): number => {
    switch (piece) {
      case 'q': return 9;
      case 'r': return 5;
      case 'b': 
      case 'n': return 3;
      case 'p': return 1;
      default: return 0;
    }
  };

  // Sort pieces by value (highest first)
  const sortedWhiteCaptured = [...whiteCaptured].sort((a, b) => getPieceValue(b) - getPieceValue(a));
  const sortedBlackCaptured = [...blackCaptured].sort((a, b) => getPieceValue(b) - getPieceValue(a));

  // Helper function to get piece name for display
  const getPieceName = (piece: string): string => {
    switch (piece) {
      case 'p': return 'pawn';
      case 'r': return 'rook';
      case 'n': return 'knight';
      case 'b': return 'bishop';
      case 'q': return 'queen';
      case 'k': return 'king';
      default: return piece;
    }
  };

  // Calculate material advantage
  const calculateAdvantage = (): number => {
    let advantage = 0;
    
    whiteCaptured.forEach(piece => {
      advantage -= getPieceValue(piece);
    });
    
    blackCaptured.forEach(piece => {
      advantage += getPieceValue(piece);
    });
    
    return advantage;
  };
  
  const advantage = calculateAdvantage();
  
  return (
    <div className="mb-4">
      <h3 className="text-lg font-medium mb-2">Captured Pieces</h3>
      
      <div className="flex justify-between items-center mb-2">
        <div className="flex items-center">
          <div className="w-4 h-4 bg-black rounded-full mr-2"></div>
          <span className="font-medium">Black captured:</span>
        </div>
        <div className="flex space-x-1">
          {sortedBlackCaptured.map((piece, index) => (
            <div 
              key={`black-${index}`}
              className="w-6 h-6 bg-contain bg-center bg-no-repeat"
              style={{ backgroundImage: `url(/assets/pieces/b_${getPieceName(piece)}_1x.png)` }}
              title={`Black ${getPieceName(piece)}`}
            />
          ))}
        </div>
      </div>
      
      <div className="flex justify-between items-center">
        <div className="flex items-center">
          <div className="w-4 h-4 bg-white border border-gray-300 rounded-full mr-2"></div>
          <span className="font-medium">White captured:</span>
        </div>
        <div className="flex space-x-1">
          {sortedWhiteCaptured.map((piece, index) => (
            <div 
              key={`white-${index}`}
              className="w-6 h-6 bg-contain bg-center bg-no-repeat"
              style={{ backgroundImage: `url(/assets/pieces/w_${getPieceName(piece)}_1x.png)` }}
              title={`White ${getPieceName(piece)}`}
            />
          ))}
        </div>
      </div>
      
      {advantage !== 0 && (
        <div className="mt-2 text-right">
          <span className="font-medium">
            Material advantage: 
            <span className={advantage > 0 ? 'text-blue-600 ml-1' : 'text-red-600 ml-1'}>
              {advantage > 0 ? '+' : ''}{advantage}
            </span>
          </span>
        </div>
      )}
    </div>
  );
};

export default CapturedPieces;