Hugging Face's logo

Spaces:
electro-sb
/
Chess_Engine
Sleeping

App Files Community
Chess_Engine
File size: 3,476 Bytes
100a6dd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
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;