nanocode/happy-games/games/chinese-chess/app/components/GameStatus.tsx

"use client";

import { Color, GameStatus as GameStatusType, Move } from "../types/chess";

interface GameStatusProps {
  status: GameStatusType;
  turn: Color;
  winner?: Color;
  moveHistory: Move[];
  onCloseModal?: () => void;
}

export default function GameStatus({
  status,
  turn,
  winner,
  moveHistory,
  onCloseModal,
}: GameStatusProps) {
  const getStatusMessage = () => {
    switch (status) {
      case "playing":
        return `${turn === "red" ? "红方" : "黑方"}走棋`;
      case "check":
        return `${turn === "red" ? "红方" : "黑方"}被将军！`;
      case "checkmate":
        return `${winner === "red" ? "红方" : "黑方"}获胜！`;
      case "stalemate":
      case "draw":
        return "和棋";
      default:
        return "";
    }
  };

  const getStatusColor = () => {
    switch (status) {
      case "playing":
        return "#2563eb";
      case "check":
        return "#dc2626";
      case "checkmate":
        return "#16a34a";
      case "stalemate":
      case "draw":
        return "#6b7280";
      default:
        return "#2563eb";
    }
  };

  // 只显示最近10步
  const recentMoves = moveHistory.slice(-10);

  return (
    <>
      {/* 状态显示 */}
      <div
        style={{
          padding: "12px 24px",
          backgroundColor: "#ffffff",
          borderRadius: "8px",
          boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
          textAlign: "center",
        }}
      >
        <div
          style={{
            fontSize: "18px",
            fontWeight: "bold",
            color: getStatusColor(),
          }}
        >
          {getStatusMessage()}
        </div>
        {status === "check" && (
          <div style={{ fontSize: "14px", color: "#dc2626", marginTop: "4px" }}>
            请应将！
          </div>
        )}
      </div>

      {/* 走棋记录 */}
      <div
        style={{
          padding: "12px",
          backgroundColor: "#ffffff",
          borderRadius: "8px",
          boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
          maxHeight: "150px",
          overflowY: "auto",
        }}
      >
        <div
          style={{
            fontSize: "14px",
            fontWeight: "bold",
            color: "#333",
            marginBottom: "8px",
            borderBottom: "1px solid #eee",
            paddingBottom: "4px",
          }}
        >
          走棋记录
        </div>
        {moveHistory.length === 0 ? (
          <div style={{ fontSize: "12px", color: "#999", textAlign: "center" }}>
            暂无走棋记录
          </div>
        ) : (
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(2, 1fr)",
              gap: "4px",
              fontSize: "12px",
            }}
          >
            {recentMoves.map((move, index) => {
              const moveNumber = Math.floor((moveHistory.length - recentMoves.length + index) / 2) + 1;
              const isRedMove = (moveHistory.length - recentMoves.length + index) % 2 === 0;
              return (
                <div
                  key={index}
                  style={{
                    color: isRedMove ? "#d80000" : "#111111",
                    fontWeight: index === recentMoves.length - 1 ? "bold" : "normal",
                  }}
                >
                  {isRedMove ? `${moveNumber}. ` : ""}
                  {move.notation}
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* 游戏结束弹窗 */}
      {(status === "checkmate" || status === "stalemate" || status === "draw") && (
        <div
          style={{
            position: "fixed",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: "rgba(0,0,0,0.5)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            zIndex: 100,
          }}
          onClick={onCloseModal}
        >
          <div
            style={{
              backgroundColor: "#ffffff",
              padding: "32px 48px",
              borderRadius: "16px",
              boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
              textAlign: "center",
              animation: "modalAppear 0.3s ease",
              WebkitAnimation: "modalAppear 0.3s ease",
            }}
            onClick={(e) => e.stopPropagation()}
          >
            <div
              style={{
                fontSize: "32px",
                fontWeight: "bold",
                color: status === "checkmate" ? "#16a34a" : "#6b7280",
                marginBottom: "16px",
              }}
            >
              {status === "checkmate"
                ? `${winner === "red" ? "红方" : "黑方"}获胜！`
                : "和棋"}
            </div>
            <div style={{ fontSize: "16px", color: "#666", marginBottom: "24px" }}>
              {status === "checkmate"
                ? "恭喜取得胜利！"
                : "双方势均力敌，不分胜负"}
            </div>
            <button
              onClick={onCloseModal}
              style={{
                padding: "12px 32px",
                borderRadius: "8px",
                border: "none",
                backgroundColor: "#2563eb",
                color: "white",
                fontSize: "16px",
                fontWeight: "500",
                cursor: "pointer",
              }}
            >
              确定
            </button>
          </div>
        </div>
      )}

    </>
  );
}