Merge branch 'dev/async_yesno_modal' into 'dev/async'

migrate yesno modal

See merge request !236

src/service/duel/gameMsg.ts

@@ -135,7 +135,7 @@ async function _handleGameMsg(pb: ygopro.YgoStocMsg) {
       break;
     }
     case "select_effect_yn": {
-      onMsgSelectEffectYn(msg.select_effect_yn);
+      await onMsgSelectEffectYn(msg.select_effect_yn);
 
       break;
     }
@@ -170,7 +170,7 @@ async function _handleGameMsg(pb: ygopro.YgoStocMsg) {
       break;
     }
     case "select_yes_no": {
-      onMsgSelectYesNo(msg.select_yes_no);
+      await onMsgSelectYesNo(msg.select_yes_no);
 
       break;
     }

src/service/duel/selectEffectYn.ts

 import { fetchStrings, ygopro } from "@/api";
 import { CardMeta, fetchCard } from "@/api/cards";
-import { messageStore } from "@/stores";
+import { displayYesNoModal } from "@/ui/Duel/Message";
 
 type MsgSelectEffectYn = ygopro.StocGameMessage.MsgSelectEffectYn;
 
@@ -33,6 +33,5 @@ export default async (selectEffectYn: MsgSelectEffectYn) => {
 
   const desc = fetchStrings("!system", effect_description);
   const meta = await fetchCard(code);
-  messageStore.yesNoModal.msg = textGenerator(desc, meta, location);
-  messageStore.yesNoModal.isOpen = true;
+  await displayYesNoModal(textGenerator(desc, meta, location));
 };

src/service/duel/selectYesNo.ts

 import { getStrings, ygopro } from "@/api";
-import { messageStore } from "@/stores";
+import { displayYesNoModal } from "@/ui/Duel/Message";
 
 type MsgSelectYesNo = ygopro.StocGameMessage.MsgSelectYesNo;
 
@@ -7,6 +7,6 @@ export default async (selectYesNo: MsgSelectYesNo) => {
   const _player = selectYesNo.player;
   const effect_description = selectYesNo.effect_description;
 
-  messageStore.yesNoModal.msg = await getStrings(effect_description);
-  messageStore.yesNoModal.isOpen = true;
+  const msg = await getStrings(effect_description);
+  await displayYesNoModal(msg);
 };

src/service/utils/fetchCheckCardMeta.ts

 import type { ygopro } from "@/api";
 import { fetchCard, getCardStr } from "@/api/cards";
 import { cardStore } from "@/stores";
-import type { Option } from "@/ui/Duel/Message/SelectActionsModal";
+import type { Option } from "@/ui/Duel/Message";
 
 const helper = async (
   {

src/stores/messageStore/store.ts

@@ -3,7 +3,6 @@ import { proxy } from "valtio";
 import type { ModalState } from "./types";
 
 export const messageStore = proxy<ModalState>({
-  yesNoModal: { isOpen: false },
   positionModal: { isOpen: false, positions: [] },
   checkCounterModal: {
     isOpen: false,

src/stores/messageStore/types.ts

 import type { CardMeta, ygopro } from "@/api";
 
 export interface ModalState {
-  // Yes or No弹窗
-  yesNoModal: {
-    isOpen: boolean;
-    msg?: string;
-  };
   // 表示形式选择弹窗
   positionModal: {
     isOpen: boolean;

src/ui/Duel/Message/YesNoModal.tsx → src/ui/Duel/Message/YesNoModal/index.tsx

 import { Button } from "antd";
 import React from "react";
-import { useSnapshot } from "valtio";
+import { proxy, useSnapshot } from "valtio";
 
 import { sendSelectEffectYnResponse } from "@/api";
-import { matStore, messageStore } from "@/stores";
+import { matStore } from "@/stores";
 
-import { DragModal } from "./DragModal";
+import { NeosModal } from "../NeosModal";
 
-const { yesNoModal } = messageStore;
+interface YesNoModalProps {
+  isOpen: boolean;
+  msg?: string;
+}
+const defaultProps = { isOpen: false };
 
-export const YesNoModal = () => {
-  const snapYesNoModal = useSnapshot(yesNoModal);
-  const isOpen = snapYesNoModal.isOpen;
-  const msg = snapYesNoModal.msg;
+const localStore = proxy<YesNoModalProps>(defaultProps);
+
+export const YesNoModal: React.FC = () => {
+  const { isOpen, msg } = useSnapshot(localStore);
   const hint = useSnapshot(matStore.hint);
 
   const preHintMsg = hint?.esHint || "";
 
   return (
-    <DragModal
+    <NeosModal
       title={`${preHintMsg} ${msg}`}
       open={isOpen}
       closable={false}
@@ -27,8 +31,7 @@ export const YesNoModal = () => {
           <Button
             onClick={() => {
               sendSelectEffectYnResponse(true);
-              // dispatch(setYesNoModalIsOpen(false));
-              yesNoModal.isOpen = false;
+              rs();
             }}
           >
             Yes
@@ -36,8 +39,7 @@ export const YesNoModal = () => {
           <Button
             onClick={() => {
               sendSelectEffectYnResponse(false);
-              // dispatch(setYesNoModalIsOpen(false));
-              yesNoModal.isOpen = false;
+              rs();
             }}
           >
             No
@@ -47,3 +49,12 @@ export const YesNoModal = () => {
     />
   );
 };
+
+let rs: (arg?: any) => void = () => {};
+
+export const displayYesNoModal = async (msg: string) => {
+  localStore.msg = msg;
+  localStore.isOpen = true;
+  await new Promise<void>((resolve) => (rs = resolve)); // 等待在组件内resolve
+  localStore.isOpen = false;
+};

src/ui/Duel/Message/index.ts

@@ -8,6 +8,7 @@ export * from "./HintNotification";
 export * from "./OptionModal";
 export * from "./PositionModal";
 export * from "./SelectActionsModal";
+export { type Option } from "./SelectCardsModal";
 export * from "./SimpleSelectCardsModal";
 export * from "./SortCardModal";
 export * from "./YesNoModal";