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

"use client";

import { GameMode, Difficulty } from "../types/chess";

interface GameControlsProps {
  mode: GameMode;
  difficulty: Difficulty;
  onModeChange: (mode: GameMode) => void;
  onDifficultyChange: (difficulty: Difficulty) => void;
  onNewGame: () => void;
  onUndo: () => void;
  onSurrender: () => void;
  canUndo: boolean;
  isPlaying: boolean;
}

export default function GameControls({
  mode,
  difficulty,
  onModeChange,
  onDifficultyChange,
  onNewGame,
  onUndo,
  onSurrender,
  canUndo,
  isPlaying,
}: GameControlsProps) {
  const modes: GameMode[] = ["人vsA*", "人vsDeepseek", "A*vsDeepseek"];
  const difficulties: Difficulty[] = ["容易", "一般", "困难"];

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: "10px",
        padding: "12px 16px",
        backgroundColor: "#ffffff",
        borderRadius: "8px",
        boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
      }}
    >
      {/* 模式和难度选择 - 标签和下拉框同一行 */}
      <div
        style={{
          display: "flex",
          gap: "16px",
          flexWrap: "wrap",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
          <label
            style={{
              fontSize: "13px",
              color: "#666",
              fontWeight: 500,
              whiteSpace: "nowrap",
            }}
          >
            对弈模式
          </label>
          <select
            value={mode}
            onChange={(e) => onModeChange(e.target.value as GameMode)}
            style={{
              padding: "6px 10px",
              borderRadius: "6px",
              border: "1px solid #ddd",
              backgroundColor: "#f9f9f9",
              fontSize: "13px",
              cursor: "pointer",
              minWidth: "120px",
            }}
          >
            {modes.map((m) => (
              <option key={m} value={m}>
                {m}
              </option>
            ))}
          </select>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
          <label
            style={{
              fontSize: "13px",
              color: "#666",
              fontWeight: 500,
              whiteSpace: "nowrap",
            }}
          >
            AI难度
          </label>
          <select
            value={difficulty}
            onChange={(e) => onDifficultyChange(e.target.value as Difficulty)}
            style={{
              padding: "6px 10px",
              borderRadius: "6px",
              border: "1px solid #ddd",
              backgroundColor: "#f9f9f9",
              fontSize: "13px",
              cursor: "pointer",
              minWidth: "80px",
            }}
          >
            {difficulties.map((d) => (
              <option key={d} value={d}>
                {d}
              </option>
            ))}
          </select>
        </div>
      </div>

      {/* 操作按钮 */}
      <div
        style={{
          display: "flex",
          gap: "8px",
          justifyContent: "center",
          flexWrap: "wrap",
        }}
      >
        <button
          onClick={onNewGame}
          style={{
            padding: "8px 16px",
            borderRadius: "6px",
            border: "none",
            backgroundColor: "#2563eb",
            color: "white",
            fontSize: "13px",
            fontWeight: 500,
            cursor: "pointer",
            transition: "background-color 0.2s",
          }}
          onMouseEnter={(e) =>
            (e.currentTarget.style.backgroundColor = "#1d4ed8")
          }
          onMouseLeave={(e) =>
            (e.currentTarget.style.backgroundColor = "#2563eb")
          }
        >
          新局
        </button>

        <button
          onClick={onUndo}
          disabled={!canUndo || !isPlaying}
          style={{
            padding: "8px 16px",
            borderRadius: "6px",
            border: "none",
            backgroundColor: canUndo && isPlaying ? "#6b7280" : "#d1d5db",
            color: "white",
            fontSize: "13px",
            fontWeight: 500,
            cursor: canUndo && isPlaying ? "pointer" : "not-allowed",
            transition: "background-color 0.2s",
          }}
          onMouseEnter={(e) => {
            if (canUndo && isPlaying) {
              e.currentTarget.style.backgroundColor = "#4b5563";
            }
          }}
          onMouseLeave={(e) => {
            if (canUndo && isPlaying) {
              e.currentTarget.style.backgroundColor = "#6b7280";
            }
          }}
        >
          悔棋
        </button>

        <button
          onClick={onSurrender}
          disabled={!isPlaying}
          style={{
            padding: "8px 16px",
            borderRadius: "6px",
            border: "none",
            backgroundColor: isPlaying ? "#dc2626" : "#d1d5db",
            color: "white",
            fontSize: "13px",
            fontWeight: 500,
            cursor: isPlaying ? "pointer" : "not-allowed",
            transition: "background-color 0.2s",
          }}
          onMouseEnter={(e) => {
            if (isPlaying) {
              e.currentTarget.style.backgroundColor = "#b91c1c";
            }
          }}
          onMouseLeave={(e) => {
            if (isPlaying) {
              e.currentTarget.style.backgroundColor = "#dc2626";
            }
          }}
        >
          认输
        </button>
      </div>
    </div>
  );
}