migrate announce modal

src/service/duel/announce.ts

 import { fetchCard, fetchStrings, ygopro } from "@/api";
-import { messageStore } from "@/stores";
+import { displayAnnounceModal } from "@/ui/Duel/Message";
 import MsgAnnounce = ygopro.StocGameMessage.MsgAnnounce;
 
-const { announceModal } = messageStore;
-
 export default async (announce: MsgAnnounce) => {
   const type_ = announce.announce_type;
   let min = announce.min;
@@ -13,51 +11,60 @@ export default async (announce: MsgAnnounce) => {
   ) {
     min = 1;
   }
-  announceModal.min = min;
 
   switch (type_) {
     case MsgAnnounce.AnnounceType.RACE: {
-      announceModal.title = fetchStrings("!system", 563);
-      announceModal.options = announce.options.map((option) => ({
-        info: fetchStrings("!system", 1200 + option.code),
-        response: option.response,
-      }));
-      announceModal.isOpen = true;
+      await displayAnnounceModal({
+        min,
+        title: fetchStrings("!system", 563),
+        options: announce.options.map((option) => ({
+          info: fetchStrings("!system", 1200 + option.code),
+          response: option.response,
+        })),
+      });
 
       break;
     }
     case MsgAnnounce.AnnounceType.Attribute: {
-      announceModal.title = fetchStrings("!system", 562);
-      announceModal.options = announce.options.map((option) => ({
-        info: fetchStrings("!system", 1010 + option.code),
-        response: option.response,
-      }));
-      announceModal.isOpen = true;
+      await displayAnnounceModal({
+        min,
+        title: fetchStrings("!system", 562),
+        options: announce.options.map((option) => ({
+          info: fetchStrings("!system", 1010 + option.code),
+          response: option.response,
+        })),
+      });
 
       break;
     }
     case MsgAnnounce.AnnounceType.Card: {
-      announceModal.title = fetchStrings("!system", 564);
+      const options = [];
       for (const option of announce.options) {
         const meta = await fetchCard(option.code);
         if (meta.text.name) {
-          announceModal.options.push({
+          options.push({
             info: meta.text.name,
             response: option.response,
           });
         }
       }
-      announceModal.isOpen = true;
+      await displayAnnounceModal({
+        min,
+        title: fetchStrings("!system", 564),
+        options,
+      });
 
       break;
     }
     case MsgAnnounce.AnnounceType.Number: {
-      announceModal.title = fetchStrings("!system", 565);
-      announceModal.options = announce.options.map((option) => ({
-        info: option.code.toString(),
-        response: option.response,
-      }));
-      announceModal.isOpen = true;
+      await displayAnnounceModal({
+        min,
+        title: fetchStrings("!system", 565),
+        options: announce.options.map((option) => ({
+          info: option.code.toString(),
+          response: option.response,
+        })),
+      });
 
       break;
     }

src/stores/index.ts

@@ -2,7 +2,6 @@ export * from "./cardStore";
 export * from "./chatStore";
 export * from "./joinStore";
 export * from "./matStore";
-export * from "./messageStore";
 export * from "./moraStore";
 export * from "./placeStore";
 export * from "./playerStore";
@@ -13,7 +12,6 @@ import { cardStore } from "./cardStore";
 import { chatStore } from "./chatStore";
 import { joinStore } from "./joinStore";
 import { matStore } from "./matStore";
-import { messageStore } from "./messageStore";
 import { moraStore } from "./moraStore";
 import { placeStore } from "./placeStore";
 import { playerStore } from "./playerStore";
@@ -23,6 +21,5 @@ devtools(chatStore, { name: "chat", enabled: true });
 devtools(joinStore, { name: "join", enabled: true });
 devtools(moraStore, { name: "mora", enabled: true });
 devtools(matStore, { name: "mat", enabled: true });
-devtools(messageStore, { name: "message", enabled: true });
 devtools(cardStore, { name: "card", enabled: true });
 devtools(placeStore, { name: "place", enabled: true });

src/stores/messageStore/index.ts

-export * from "./store";

src/stores/messageStore/store.ts

-import { proxy } from "valtio";
-
-import type { ModalState } from "./types";
-
-export const messageStore = proxy<ModalState>({
-  announceModal: {
-    isOpen: false,
-    min: 1,
-    options: [],
-  },
-});
-
-// >>> modal types >>>

src/stores/messageStore/types.ts

-export interface ModalState {
-  // 宣言弹窗
-  announceModal: {
-    isOpen: boolean;
-    title?: string;
-    min: number;
-    options: {
-      info: string;
-      response: number;
-    }[];
-  };
-}

src/ui/Duel/Message/AnnounceModal.tsx

 import { CheckCard } from "@ant-design/pro-components";
 import { Button } from "antd";
 import React, { useState } from "react";
-import { useSnapshot } from "valtio";
+import { proxy, useSnapshot } from "valtio";
 
 import { sendSelectOptionResponse } from "@/api";
-import { messageStore } from "@/stores";
 
 import { DragModal } from "./DragModal";
 
-const { announceModal } = messageStore;
+interface AnnounceModalProps {
+  isOpen: boolean;
+  title?: string;
+  min: number;
+  options: {
+    info: string;
+    response: number;
+  }[];
+}
+const defaultProps = {
+  isOpen: false,
+  min: 1,
+  options: [],
+};
+
+const localStore = proxy<AnnounceModalProps>(defaultProps);
 
 export const AnnounceModal = () => {
-  const snap = useSnapshot(announceModal);
+  const { isOpen, title, min, options } = useSnapshot(localStore);
 
-  const isOpen = snap.isOpen;
-  const title = snap.title;
-  const min = snap.min;
-  const options = snap.options;
   const [selected, setSelected] = useState<number[]>([]);
 
   return (
@@ -30,9 +40,7 @@ export const AnnounceModal = () => {
           onClick={() => {
             let response = selected.reduce((res, current) => res | current, 0); // 多个选择求或
             sendSelectOptionResponse(response);
-            announceModal.isOpen = false;
-            announceModal.title = undefined;
-            announceModal.options = [];
+            rs();
           }}
         >
           submit
@@ -54,3 +62,20 @@ export const AnnounceModal = () => {
     </DragModal>
   );
 };
+
+let rs: (arg?: any) => void = () => {};
+
+export const displayAnnounceModal = async (
+  args: Omit<AnnounceModalProps, "isOpen">
+) => {
+  Object.entries(args).forEach(([key, value]) => {
+    // @ts-ignore
+    localStore[key] = value;
+  });
+  localStore.isOpen = true;
+  await new Promise<void>((resolve) => (rs = resolve)); // 等待在组件内resolve
+  localStore.isOpen = false;
+  localStore.min = 1;
+  localStore.options = [];
+  localStore.title = undefined;
+};