feat: option modal

src/service/duel/selectOption.ts

 import { fetchCard, getCardStr, ygopro } from "@/api";
 import MsgSelectOption = ygopro.StocGameMessage.MsgSelectOption;
-import { messageStore } from "@/stores";
+import { displayOptionModal } from "@/ui/Duel/Message";
 
 export default async (selectOption: MsgSelectOption) => {
   const options = selectOption.options;
-
-  await Promise.all(
-    options.map(async ({ code, response }) => {
-      const meta = await fetchCard(code >> 4);
-      const msg = getCardStr(meta, code & 0xf) || "[?]";
-      const newResponse = { msg, response };
-      messageStore.optionModal.options.push(newResponse);
-    })
+  await displayOptionModal(
+    await Promise.all(
+      options.map(async ({ code, response }) => {
+        const meta = await fetchCard(code >> 4);
+        const msg = getCardStr(meta, code & 0xf) || "[?]";
+        return { msg, response };
+      })
+    )
   );
-
-  messageStore.optionModal.isOpen = true;
 };

src/stores/matStore/store.ts

@@ -80,7 +80,6 @@ export const matStore: MatState = proxy<MatState>({
     enableM2: false, // 允许进入M2阶段
     enableEp: false, // 允许回合结束
   },
-  waiting: false,
   unimplemented: 0,
   // methods
   isMe,

src/stores/messageStore/store.ts

@@ -16,7 +16,6 @@ export const messageStore = proxy<ModalState>({
   },
   yesNoModal: { isOpen: false },
   positionModal: { isOpen: false, positions: [] },
-  optionModal: { isOpen: false, options: [] },
   checkCounterModal: {
     isOpen: false,
     options: [],

src/stores/messageStore/types.ts

@@ -64,11 +64,6 @@ export interface ModalState {
     isOpen: boolean;
     positions: ygopro.CardPosition[];
   };
-  // 选项选择弹窗
-  optionModal: {
-    isOpen: boolean;
-    options: { msg: string; response: number }[];
-  };
   // 指示器选择弹窗
   checkCounterModal: {
     isOpen: boolean;

src/ui/Duel/Message/CardModal/index.tsx

@@ -167,7 +167,7 @@ const AtkLine = (props: { atk?: number; def?: number }) => (
   </Space>
 );
 
-// TODO: 未完成
+// TODO: 未完成，研究一下怎么展示这个信息
 const CounterLine = (props: { counters: { [type: number]: number } }) => {
   const counters = [];
   for (const counterType in props.counters) {

src/ui/Duel/Message/NewSelectActionModal/index.tsx

@@ -25,7 +25,7 @@ import { matStore } from "@/stores";
 
 import { groupBy } from "../../utils";
 
-import { NeosModal } from "../NewModal";
+import { NeosModal } from "../NeosModal";
 import { YgoCard } from "@/ui/Shared";
 import "./index.scss";
 import { showCardModal } from "../CardModal";
@@ -191,6 +191,7 @@ export const NewSelectActionsModal: FC = () => {
                         placement="bottom"
                         key={j}
                       >
+                        {/* 这儿必须有一个div，不然tooltip不生效 */}
                         <div>
                           <CheckCard
                             cover={

src/ui/Duel/Message/OptionModal.tsx

 import { CheckCard } from "@ant-design/pro-components";
 import { Button } from "antd";
 import React, { useState } from "react";
-import { useSnapshot } from "valtio";
+import { useSnapshot, proxy } from "valtio";
 
 import { sendSelectOptionResponse } from "@/api";
-import { messageStore } from "@/stores";
+import { NeosModal } from "./NeosModal";
 
-import { DragModal } from "./DragModal";
+type Options = { msg: string; response: number }[];
 
-const { optionModal } = messageStore;
+const defaultStore = {
+  isOpen: false,
+  options: [] satisfies Options as Options,
+};
+const store = proxy(defaultStore);
 
 export const OptionModal = () => {
-  const snapOptionModal = useSnapshot(optionModal);
+  const snap = useSnapshot(store);
 
-  const isOpen = snapOptionModal.isOpen;
-  const options = snapOptionModal.options;
+  const { isOpen, options } = snap;
 
   const [selected, setSelected] = useState<number | undefined>(undefined);
 
+  const onClick = () => {
+    if (selected !== undefined) {
+      sendSelectOptionResponse(selected);
+      rs();
+    }
+  };
+
   return (
-    <DragModal
+    <NeosModal
       title="请选择需要发动的效果"
       open={isOpen}
-      closable={false}
       footer={
-        <Button
-          disabled={selected === undefined}
-          onClick={() => {
-            if (selected !== undefined) {
-              sendSelectOptionResponse(selected);
-              optionModal.isOpen = false;
-              optionModal.options = [];
-            }
-          }}
-        >
-          submit
+        <Button disabled={selected === undefined} onClick={onClick}>
+          确定
         </Button>
       }
     >
-      <CheckCard.Group
-        bordered
-        size="small"
-        onChange={(value) => {
-          // @ts-ignore
-          setSelected(value);
-        }}
-      >
+      <CheckCard.Group bordered size="small" onChange={setSelected as any}>
         {options.map((option, idx) => (
           <CheckCard key={idx} title={option.msg} value={option.response} />
         ))}
       </CheckCard.Group>
-    </DragModal>
+    </NeosModal>
   );
 };
+
+let rs: (v?: any) => void = () => {};
+export const displayOptionModal = async (options: Options) => {
+  store.isOpen = true;
+  store.options = options;
+  await new Promise((resolve) => (rs = resolve));
+  store.isOpen = false;
+};

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

@@ -5,7 +5,7 @@ import classnames from "classnames";
 import React, { type CSSProperties, type FC, useEffect, useState } from "react";
 import { useSnapshot } from "valtio";
 
-import { ygopro } from "@/api";
+import { getCardStr, ygopro } from "@/api";
 import { useConfig } from "@/config";
 import { eventbus, Task } from "@/infra";
 import { cardStore, CardType, messageStore } from "@/stores";
@@ -31,6 +31,7 @@ import {
   UpOutlined,
 } from "@ant-design/icons";
 import { fetchStrings, sendSelectIdleCmdResponse, type CardMeta } from "@/api";
+import { displayOptionModal } from "../../Message";
 const NeosConfig = useConfig();
 
 const { HAND, GRAVE, REMOVED, DECK, EXTRA, MZONE, SZONE, TZONE } =
@@ -182,6 +183,17 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
       sendSelectIdleCmdResponse(effectInteractivies[0].response);
     } else {
       // optionsModal
+      const options = effectInteractivies.map((effect) => {
+        const effectMsg =
+          snap.meta && effect.effectCode
+            ? getCardStr(snap.meta, effect.effectCode & 0xf) ?? "[:?]"
+            : "[:?]";
+        return {
+          msg: effectMsg,
+          response: effect.response,
+        };
+      });
+      displayOptionModal(options); // 主动发动效果，所以不需要await，但是以后可能要留心
     }
   };
   // <<< 效果 <<<