migrate checkcounter modal

src/service/duel/gameMsg.ts

@@ -215,7 +215,7 @@ async function _handleGameMsg(pb: ygopro.YgoStocMsg) {
       break;
     }
     case "select_counter": {
-      onMsgSelectCounter(msg.select_counter);
+      await onMsgSelectCounter(msg.select_counter);
 
       break;
     }

src/service/duel/selectCounter.ts

 import { ygopro } from "@/api";
-import { cardStore, messageStore } from "@/stores";
+import { cardStore } from "@/stores";
+import { displayCheckCounterModal } from "@/ui/Duel/Message";
 type MsgSelectCounter = ygopro.StocGameMessage.MsgSelectCounter;
 
-export default (selectCounter: MsgSelectCounter) => {
-  messageStore.checkCounterModal.counterType = selectCounter.counter_type;
-  messageStore.checkCounterModal.min = selectCounter.min;
-  messageStore.checkCounterModal.options = selectCounter.options!.map(
-    ({ location, code, counter_count }) => {
+export default async (selectCounter: MsgSelectCounter) => {
+  await displayCheckCounterModal({
+    counterType: selectCounter.counter_type,
+    min: selectCounter.min,
+    options: selectCounter.options!.map(({ location, code, counter_count }) => {
       const id = cardStore.find(location)?.code;
       const newCode = code ? code : id || 0;
 
@@ -14,7 +15,6 @@ export default (selectCounter: MsgSelectCounter) => {
         code: newCode,
         max: counter_count!,
       };
-    }
-  );
-  messageStore.checkCounterModal.isOpen = true;
+    }),
+  });
 };

src/stores/messageStore/store.ts

@@ -3,10 +3,6 @@ import { proxy } from "valtio";
 import type { ModalState } from "./types";
 
 export const messageStore = proxy<ModalState>({
-  checkCounterModal: {
-    isOpen: false,
-    options: [],
-  },
   announceModal: {
     isOpen: false,
     min: 1,

src/stores/messageStore/types.ts

 export interface ModalState {
-  // 指示器选择弹窗
-  checkCounterModal: {
-    isOpen: boolean;
-    counterType?: number;
-    min?: number;
-    options: {
-      code: number;
-      max: number;
-    }[];
-  };
   // 宣言弹窗
   announceModal: {
     isOpen: boolean;

src/ui/Duel/Message/CheckCounterModal.tsx

+// 指示器选择弹窗
+import { Omit } from "@react-spring/web";
 import { Button, Card, Col, InputNumber, Row } from "antd";
 import React, { useState } from "react";
-import { useSnapshot } from "valtio";
+import { proxy, useSnapshot } from "valtio";
 
 import { fetchStrings, sendSelectCounterResponse } from "@/api";
 import { useConfig } from "@/config";
-import { messageStore } from "@/stores";
 
-import { DragModal } from "./DragModal";
+import { NeosModal } from "./NeosModal";
 
-const { checkCounterModal } = messageStore;
+interface CheckCounterModalProps {
+  isOpen: boolean;
+  counterType?: number;
+  min?: number;
+  options: {
+    code: number;
+    max: number;
+  }[];
+}
+const defaultProps = {
+  isOpen: false,
+  options: [],
+};
+
+const localStore = proxy<CheckCounterModalProps>(defaultProps);
 
 const NeosConfig = useConfig();
 export const CheckCounterModal = () => {
-  const snapCheckCounterModal = useSnapshot(checkCounterModal);
+  const snapCheckCounterModal = useSnapshot(localStore);
 
   const isOpen = snapCheckCounterModal.isOpen;
   const min = snapCheckCounterModal.min || 0;
@@ -28,14 +43,11 @@ export const CheckCounterModal = () => {
 
   const onFinish = () => {
     sendSelectCounterResponse(selected);
-    messageStore.checkCounterModal.isOpen = false;
-    messageStore.checkCounterModal.min = undefined;
-    messageStore.checkCounterModal.counterType = undefined;
-    messageStore.checkCounterModal.options = [];
+    rs();
   };
 
   return (
-    <DragModal
+    <NeosModal
       title={`请移除${min}个${counterName}`}
       open={isOpen}
       closable={false}
@@ -75,6 +87,23 @@ export const CheckCounterModal = () => {
           );
         })}
       </Row>
-    </DragModal>
+    </NeosModal>
   );
 };
+
+let rs: (arg?: any) => void = () => {};
+
+export const displayCheckCounterModal = async (
+  args: Omit<CheckCounterModalProps, "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.options = [];
+  localStore.min = undefined;
+  localStore.counterType = undefined;
+};