feat: menu

src/ui/Duel/PlayMat/LifeBar/index.scss

@@ -15,7 +15,7 @@
 .life-bar {
   width: 160px;
   color: white;
-  background-color: rgb(50, 50, 50);
+  background-color: #323232;
   font-family: var(--theme-font);
   border: 1px solid #222;
   padding: 1rem;

src/ui/Duel/PlayMat/Menu/index.scss

-#controller {
+.menu-container {
   position: fixed;
   display: flex;
-  gap: 20px;
+  // flex-direction: column;
+  gap: 6px;
   bottom: 20px;
-  right: 20px;
+  right: 35px;
   z-index: 999;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+  background-color: #323232;
+  padding: 8px;
+  border-radius: 6px;
 }

src/ui/Duel/PlayMat/Menu/index.tsx

 import "./index.scss";
 
-import { Button, Modal } from "antd";
+import {
+  Button,
+  Tooltip,
+  Dropdown,
+  type MenuProps,
+  theme,
+  Divider,
+  Space,
+  Popconfirm,
+} from "antd";
 import React, { useState } from "react";
 import { useSnapshot } from "valtio";
-
 import {
-  fetchStrings,
+  StepForwardFilled,
+  MessageFilled,
+  CloseCircleFilled,
+} from "@ant-design/icons";
+import {
   sendSelectBattleCmdResponse,
   sendSelectIdleCmdResponse,
-  sendSurrender,
   ygopro,
+  sendSurrender,
 } from "@/api";
 import { cardStore, matStore } from "@/stores";
 import PhaseType = ygopro.StocGameMessage.MsgNewPhase.PhaseType;
 
 const { phase } = matStore;
-
+const { useToken } = theme;
 export const Menu = () => {
   const snapPhase = useSnapshot(phase);
-  const enableBp = snapPhase.enableBp;
-  const enableM2 = snapPhase.enableM2;
-  const enableEp = snapPhase.enableEp;
   const currentPhase = snapPhase.currentPhase;
 
   const [modalOpen, setModalOpen] = useState(false);
@@ -40,61 +49,83 @@ export const Menu = () => {
     }
   };
 
-  const onBp = () => {
-    sendSelectIdleCmdResponse(6);
-    clearAllIdleInteractivities();
-    phase.enableBp = false;
-  };
-  const onM2 = () => {
-    sendSelectBattleCmdResponse(2);
-    clearAllIdleInteractivities();
-    phase.enableM2 = false;
-  };
-  const onEp = () => {
-    sendSelectIdleCmdResponse(response);
-    clearAllIdleInteractivities();
-    phase.enableEp = false;
-  };
-  const onSurrender = () => {
-    setModalOpen(true);
+  const phaseBind: [PhaseType, string, number][] = [
+    [PhaseType.DRAW, "抽卡阶段", -1],
+    [PhaseType.STANDBY, "准备阶段", -1],
+    [PhaseType.MAIN1, "主要阶段 1", -1],
+    [PhaseType.BATTLE, "战斗阶段", 6],
+    [PhaseType.BATTLE_START, "战斗开始", 3],
+    [PhaseType.BATTLE_STEP, "战斗步骤", 3],
+    [PhaseType.DAMAGE, "伤害步骤", 3],
+    [PhaseType.DAMAGE_GAL, "伤害步骤（伤害计算）", 3],
+    [PhaseType.MAIN2, "主要阶段 2", 2],
+    [PhaseType.END, "结束阶段", response],
+    [PhaseType.UNKNOWN, "未知阶段", response],
+  ];
+
+  const items: MenuProps["items"] = phaseBind.map(
+    ([key, value, response], i) => ({
+      key: i,
+      label: value,
+      disabled: currentPhase >= Number(key),
+      onClick: () => {
+        sendSelectIdleCmdResponse(response);
+        clearAllIdleInteractivities();
+      },
+    })
+  );
+
+  const { token } = useToken();
+
+  const contentStyle = {
+    backgroundColor: token.colorBgElevated,
+    borderRadius: token.borderRadiusLG,
+    boxShadow: token.boxShadowSecondary,
   };
 
+  const menuStyle = {
+    boxShadow: "none",
+  };
   return (
-    <div id="controller">
-      <button disabled={!enableBp} onClick={onBp}>
-        {fetchStrings("!system", 80)}
-      </button>
-      <button disabled={!enableM2} onClick={onM2}>
-        进入主要阶段2
-      </button>
-      <button disabled={!enableEp} onClick={onEp}>
-        {fetchStrings("!system", 81)}
-      </button>
-      <button onClick={onSurrender}>{fetchStrings("!system", 1351)}</button>
-      <Modal
-        title="是否确认要投降？"
-        open={modalOpen}
-        closable={false}
-        footer={
-          <>
-            <Button
-              onClick={() => {
-                sendSurrender();
-                setModalOpen(false);
-              }}
-            >
-              Yes
-            </Button>
-            <Button
-              onClick={() => {
-                setModalOpen(false);
-              }}
-            >
-              No
-            </Button>
-          </>
-        }
-      />
-    </div>
+    <>
+      <div className="menu-container">
+        <Dropdown
+          menu={{ items }}
+          dropdownRender={(menu) => (
+            <div style={contentStyle}>
+              {React.cloneElement(menu as React.ReactElement, {
+                style: menuStyle,
+              })}
+              <Divider style={{ margin: 0 }} />
+              <Space style={{ padding: 16 }}>请选择要进入的阶段</Space>
+            </div>
+          )}
+          arrow
+        >
+          <Button
+            icon={<StepForwardFilled style={{ transform: "scale(1.5)" }} />}
+            type="text"
+          >
+            {phaseBind.find(([key]) => key === currentPhase)?.[1]}
+          </Button>
+        </Dropdown>
+        <Tooltip title="聊天室">
+          <Button icon={<MessageFilled />} type="text"></Button>
+        </Tooltip>
+        <Tooltip title="投降" color="red">
+          <Popconfirm
+            title="投降"
+            description="您确认要投降？"
+            onConfirm={sendSurrender}
+            okText="确认"
+            cancelText="取消"
+            placement="topRight"
+            arrow
+          >
+            <Button icon={<CloseCircleFilled />} type="text"></Button>
+          </Popconfirm>
+        </Tooltip>
+      </div>
+    </>
   );
 };