web/src/components/GameInfo.tsx

/// <reference path="../react-app-env.d.ts" />
import * as React from 'react';
const { useState, useEffect } = React;
import { getGameState } from '../services/api';
import { setSoundEnabled, isSoundEnabled, playSound } from '../services/soundService';

interface GameInfoProps {
  boardTheme: 'brown' | 'grey';
  onThemeChange: (theme: 'brown' | 'grey') => void;
}

const GameInfo: React.FC<GameInfoProps> = ({ boardTheme, onThemeChange }) => {
  const [soundOn, setSoundOn] = useState(true);
  const [gameState, setGameState] = useState<any>(null);
  const [moveHistory, setMoveHistory] = useState<string[]>([]);
  const [analysis, setAnalysis] = useState<any>(null);
  const [whiteCaptured, setWhiteCaptured] = useState<string[]>([]);
  const [blackCaptured, setBlackCaptured] = useState<string[]>([]);

  useEffect(() => {
    fetchGameInfo();
    const interval = setInterval(fetchGameInfo, 2000); // Poll every 2 seconds
    
    return () => clearInterval(interval);
  }, []);

  const fetchGameInfo = async () => {
    try {
      const response = await getGameState();
      
      // Track captured pieces by comparing current board with previous board
      if (gameState && response.board_state && response.board_state.fen) {
        const previousPieces = parseFen(gameState.board_state.fen);
        const currentPieces = parseFen(response.board_state.fen);
        
        // Find pieces that were captured in the last move
        const capturedWhitePieces = findCapturedPieces(previousPieces, currentPieces, 'white');
        const capturedBlackPieces = findCapturedPieces(previousPieces, currentPieces, 'black');
        
        if (capturedWhitePieces.length > 0) {
          setWhiteCaptured(prev => [...prev, ...capturedWhitePieces]);
        }
        
        if (capturedBlackPieces.length > 0) {
          setBlackCaptured(prev => [...prev, ...capturedBlackPieces]);
        }
      }
      
      setGameState(response);
      
      if (response.last_analysis) {
        setAnalysis(response.last_analysis);
      }
      
      // Update move history if available
      if (response.board_state && response.board_state.move_count > moveHistory.length) {
        // In a real implementation, you would get the actual moves from the API
        // For now, we'll create placeholder moves with algebraic notation
        if (response.player_move && response.ai_move) {
          setMoveHistory(prev => [
            ...prev, 
            response.player_move, 
            response.ai_move
          ]);
        } else if (response.player_move) {
          setMoveHistory(prev => [...prev, response.player_move]);
        } else if (response.ai_move) {
          setMoveHistory(prev => [...prev, response.ai_move]);
        } else {
          // Fallback if no specific moves are provided
          setMoveHistory(prev => [...prev, `Move ${prev.length + 1}`]);
        }
      }
    } catch (error) {
      console.error('Error fetching game info:', error);
    }
  };
  
  // Helper function to parse FEN string and get pieces
  const parseFen = (fenString: string): {type: string, color: string}[] => {
    const pieces: {type: string, color: string}[] = [];
    const fenParts = fenString.split(' ');
    const ranks = fenParts[0].split('/');
    
    ranks.forEach((rank) => {
      let fileIndex = 0;
      
      for (let i = 0; i < rank.length; i++) {
        const char = rank[i];
        
        if (!isNaN(parseInt(char))) {
          fileIndex += parseInt(char);
        } else {
          const color = char === char.toUpperCase() ? 'white' : 'black';
          const type = char.toLowerCase();
          
          pieces.push({
            type,
            color
          });
          
          fileIndex++;
        }
      }
    });
    
    return pieces;
  };
  
  // Helper function to find captured pieces
  const findCapturedPieces = (
    previousPieces: {type: string, color: string}[], 
    currentPieces: {type: string, color: string}[], 
    color: string
  ): string[] => {
    const captured: string[] = [];
    
    // Count pieces by type in previous and current board
    const previousCount: Record<string, number> = {};
    const currentCount: Record<string, number> = {};
    
    previousPieces.forEach(piece => {
      if (piece.color === color) {
        const key = piece.type;
        previousCount[key] = (previousCount[key] || 0) + 1;
      }
    });
    
    currentPieces.forEach(piece => {
      if (piece.color === color) {
        const key = piece.type;
        currentCount[key] = (currentCount[key] || 0) + 1;
      }
    });
    
    // Find pieces that were captured (more in previous than current)
    Object.keys(previousCount).forEach(type => {
      const diff = previousCount[type] - (currentCount[type] || 0);
      for (let i = 0; i < diff; i++) {
        captured.push(type);
      }
    });
    
    return captured;
  };

  const renderGameStatus = () => {
    if (!gameState) return <p className="text-gradio-text-secondary text-lg">Loading game state...</p>;
    
    const { status, board_state, player_color } = gameState;
    
    let statusText = 'Game in progress';
    let statusClass = 'text-gradio-blue';
    
    if (status === 'game_over') {
      statusText = gameState.result === 'draw' 
        ? 'Game ended in a draw' 
        : `${gameState.winner} wins by ${gameState.reason}`;
      statusClass = 'text-gradio-red';
    } else if (board_state.game_state === 'check') {
      statusText = `${board_state.turn} is in check`;
      statusClass = 'text-gradio-orange';
    }
    
    return (
      <div className="mb-5 p-4 bg-gradio-bg rounded-lg">

        <h3 className="text-xl font-medium mb-3 text-gradio-green">Game Status</h3>

        <p className={`font-medium text-lg ${statusClass} mb-2`}>{statusText}</p>

        <div className="grid grid-cols-2 gap-3 text-lg">

          <div>Turn: <span className="font-medium text-gradio-text">{board_state.turn}</span></div>

          <div>Playing as: <span className="font-medium text-gradio-text">{player_color}</span></div>

          {gameState.difficulty && (

            <div>Difficulty: <span className="font-medium text-gradio-text">{gameState.difficulty}</span></div>

          )}

        </div>

      </div>
    );
  };

  const renderAnalysis = () => {
    if (!analysis) return null;
    
    return (
      <div className="mb-4">

        <h3 className="text-lg font-medium mb-2">Position Analysis</h3>

        

        <div className="space-y-1">

          <p>

            Evaluation: <span className="font-medium">

              {analysis.evaluation.total > 0 ? '+' : ''}{analysis.evaluation.total.toFixed(2)}

            </span>

          </p>

          

          <div className="h-2 bg-gray-200 rounded overflow-hidden">

            <div 

              className={`h-full ${analysis.evaluation.total > 0 ? 'bg-blue-600' : 'bg-black'}`}

              style={{ 

                width: `${Math.min(Math.abs(analysis.evaluation.total) * 10, 100)}%`,

                marginLeft: analysis.evaluation.total > 0 ? '50%' : undefined,

                marginRight: analysis.evaluation.total < 0 ? '50%' : undefined,

              }}

            ></div>

          </div>

          

          <p className="text-sm text-gray-600">

            Material: {analysis.evaluation.material.toFixed(2)} | 

            Position: {analysis.evaluation.positional.toFixed(2)} | 

            Safety: {analysis.evaluation.safety.toFixed(2)}

          </p>

        </div>

      </div>
    );
  };

  const renderMoveHistory = () => {
    if (moveHistory.length === 0) return <p>No moves yet</p>;
    
    // Group moves by pairs (white and black)
    const moveGroups = [];
    for (let i = 0; i < moveHistory.length; i += 2) {
      moveGroups.push({
        number: Math.floor(i / 2) + 1,
        white: moveHistory[i],
        black: i + 1 < moveHistory.length ? moveHistory[i + 1] : null
      });
    }
    
    return (
      <div className="overflow-y-auto max-h-48 border rounded">

        <table className="w-full text-sm">

          <thead className="bg-gray-100 sticky top-0">

            <tr>

              <th className="py-1 px-2 text-left">#</th>

              <th className="py-1 px-2 text-left">White</th>

              <th className="py-1 px-2 text-left">Black</th>

            </tr>

          </thead>

          <tbody>

            {moveGroups.map((group) => (

              <tr key={group.number} className="hover:bg-gray-50">

                <td className="py-1 px-2 font-medium">{group.number}.</td>

                <td className="py-1 px-2">{group.white}</td>

                <td className="py-1 px-2">{group.black}</td>

              </tr>

            ))}

          </tbody>

        </table>

      </div>
    );
  };

  // Initialize sound settings
  useEffect(() => {
    setSoundEnabled(soundOn);
  }, [soundOn]);

  return (
    <div className="bg-gradio-card rounded-lg shadow-lg p-5 text-gradio-text">

      <h2 className="text-2xl font-bold mb-5 text-gradio-text">Game Information</h2>

      

      {/* Sound Controls */}

      <div className="mb-6 p-4 bg-gradio-bg rounded-lg">

        <h3 className="text-xl font-medium mb-3 text-gradio-yellow">Settings</h3>

        

        <div className="flex flex-col space-y-4">

          {/* Theme selection removed but kept in code for future reference

          <div className="flex items-center justify-between">

            <span className="text-lg">Board Theme:</span>

            <select

              className="px-3 py-2 bg-gradio-card border border-gradio-border rounded text-gradio-text"

              value={boardTheme}

              onChange={(e) => {

                const newTheme = e.target.value as 'brown' | 'grey';

                console.log(`Theme changed to: ${newTheme}`);

                onThemeChange(newTheme);

              }}

            >

              <option value="brown">Brown</option>

              <option value="grey">Grey</option>

            </select>

          </div>

          */}

          

          <div className="flex items-center justify-between">

            <span className="text-lg">Sound Effects:</span>

            <button

              className={`px-4 py-2 ${soundOn ? 'bg-gradio-green' : 'bg-gradio-border'} text-white rounded-lg transition-colors flex items-center gap-2`}

              onClick={() => {

                setSoundOn(!soundOn);

                setSoundEnabled(!soundOn);

                if (!soundOn) {

                  // Play a test sound when turning sound back on

                  playSound('move');

                }

              }}

            >

              <span className="text-xl">{soundOn ? '🔊' : '🔇'}</span>

              <span>{soundOn ? 'On' : 'Off'}</span>

            </button>

          </div>

        </div>

      </div>

      

      {renderGameStatus()}

      

      <div className="mb-5">

        <h3 className="text-xl font-medium mb-3 text-gradio-blue">Captured Pieces</h3>

        <div className="flex justify-between p-3 bg-gradio-bg rounded-lg">

          <div>

            <p className="font-medium mb-1">White captured:</p>

            <div className="flex gap-1">

              {whiteCaptured.map((piece, index) => (

                <span key={index} className="text-lg" title={piece}>

                  {piece === 'p' ? '♙' : 

                   piece === 'r' ? '♖' : 

                   piece === 'n' ? '♘' : 

                   piece === 'b' ? '♗' : 

                   piece === 'q' ? '♕' : '♔'}

                </span>

              ))}

              {whiteCaptured.length === 0 && <span className="text-gradio-text-secondary">None</span>}

            </div>

          </div>

          <div>

            <p className="font-medium mb-1">Black captured:</p>

            <div className="flex gap-1">

              {blackCaptured.map((piece, index) => (

                <span key={index} className="text-lg" title={piece}>

                  {piece === 'p' ? '♟' : 

                   piece === 'r' ? '♜' : 

                   piece === 'n' ? '♞' : 

                   piece === 'b' ? '♝' : 

                   piece === 'q' ? '♛' : '♚'}

                </span>

              ))}

              {blackCaptured.length === 0 && <span className="text-gradio-text-secondary">None</span>}

            </div>

          </div>

        </div>

      </div>

      

      <div className="mb-5">

        <h3 className="text-xl font-medium mb-3 text-gradio-orange">Move History</h3>

        <div className="overflow-y-auto max-h-48 border border-gradio-border rounded-lg">

          <table className="w-full text-base">

            <thead className="bg-gradio-bg sticky top-0">

              <tr>

                <th className="py-2 px-3 text-left">#</th>

                <th className="py-2 px-3 text-left">White</th>

                <th className="py-2 px-3 text-left">Black</th>

              </tr>

            </thead>

            <tbody>

              {moveHistory.length === 0 ? (

                <tr>

                  <td colSpan={3} className="py-3 px-3 text-center text-gradio-text-secondary">No moves yet</td>

                </tr>

              ) : (

                Array.from({ length: Math.ceil(moveHistory.length / 2) }).map((_, i) => (

                  <tr key={i} className="hover:bg-gradio-bg transition-colors">

                    <td className="py-2 px-3 font-medium">{i + 1}.</td>

                    <td className="py-2 px-3">{moveHistory[i * 2] || ''}</td>

                    <td className="py-2 px-3">{moveHistory[i * 2 + 1] || ''}</td>

                  </tr>

                ))

              )}

            </tbody>

          </table>

        </div>

      </div>

      

      {analysis && (

        <div className="mb-5">

          <h3 className="text-xl font-medium mb-3 text-gradio-purple">Position Analysis</h3>

          <div className="p-3 bg-gradio-bg rounded-lg">

            <p className="mb-2">

              Evaluation: <span className="font-medium text-gradio-text">

                {analysis.evaluation.total > 0 ? '+' : ''}{analysis.evaluation.total.toFixed(2)}

              </span>

            </p>

            

            <div className="h-3 bg-gradio-border rounded-full overflow-hidden mb-3">

              <div 

                className={`h-full ${analysis.evaluation.total > 0 ? 'bg-gradio-blue' : 'bg-gradio-red'}`}

                style={{ 

                  width: `${Math.min(Math.abs(analysis.evaluation.total) * 10, 100)}%`,

                  marginLeft: analysis.evaluation.total > 0 ? '50%' : undefined,

                  marginRight: analysis.evaluation.total < 0 ? '50%' : undefined,

                }}

              ></div>

            </div>

            

            <div className="grid grid-cols-2 gap-2 text-sm">

              <div>Material: <span className="font-medium">{analysis.evaluation.material.toFixed(2)}</span></div>

              <div>Position: <span className="font-medium">{analysis.evaluation.positional.toFixed(2)}</span></div>

              <div>Safety: <span className="font-medium">{analysis.evaluation.safety.toFixed(2)}</span></div>

              <div>Mobility: <span className="font-medium">{analysis.evaluation.mobility.toFixed(2)}</span></div>

            </div>

          </div>

        </div>

      )}

    </div>
  );
};

export default GameInfo;