migrate position modal

src/service/duel/gameMsg.ts

@@ -140,7 +140,7 @@ async function _handleGameMsg(pb: ygopro.YgoStocMsg) {
       break;
     }
     case "select_position": {
-      onMsgSelectPosition(msg.select_position);
+      await onMsgSelectPosition(msg.select_position);
 
       break;
     }

src/service/duel/selectPosition.ts

 import { ygopro } from "@/api";
-import { messageStore } from "@/stores";
+import { displayPositionModal } from "@/ui/Duel/Message";
 
 type MsgSelectPosition = ygopro.StocGameMessage.MsgSelectPosition;
 
-export default (selectPosition: MsgSelectPosition) => {
+export default async (selectPosition: MsgSelectPosition) => {
   const _player = selectPosition.player;
-  const positions = selectPosition.positions;
-
-  messageStore.positionModal.positions = positions.map(
+  const positions = selectPosition.positions.map(
     (position) => position.position
   );
-  messageStore.positionModal.isOpen = true;
+  await displayPositionModal(positions);
 };

src/stores/messageStore/store.ts

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

src/stores/messageStore/types.ts

 import type { CardMeta, ygopro } from "@/api";
 
 export interface ModalState {
-  // 表示形式选择弹窗
-  positionModal: {
-    isOpen: boolean;
-    positions: ygopro.CardPosition[];
-  };
   // 指示器选择弹窗
   checkCounterModal: {
     isOpen: boolean;

src/ui/Duel/Message/PositionModal.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 { sendSelectPositionResponse, ygopro } from "@/api";
-import { messageStore } from "@/stores";
 
-import { DragModal } from "./DragModal";
+import { NeosModal } from "./NeosModal";
 
-const { positionModal } = messageStore;
+interface PositionModalProps {
+  isOpen: boolean;
+  positions: ygopro.CardPosition[];
+}
+const defaultProps = { isOpen: false, positions: [] };
 
-export const PositionModal = () => {
-  const snapPositionModal = useSnapshot(positionModal);
-  const isOpen = snapPositionModal.isOpen;
-  const positions = snapPositionModal.positions;
+const localStore = proxy<PositionModalProps>(defaultProps);
 
+export const PositionModal = () => {
+  const { isOpen, positions } = useSnapshot(localStore);
   const [selected, setSelected] = useState<ygopro.CardPosition | undefined>(
     undefined
   );
 
   return (
-    <DragModal
+    <NeosModal
       title="请选择表示形式"
       open={isOpen}
       closable={false}
@@ -30,8 +33,7 @@ export const PositionModal = () => {
           onClick={() => {
             if (selected !== undefined) {
               sendSelectPositionResponse(selected);
-              positionModal.isOpen = false;
-              positionModal.positions = [];
+              rs();
             }
           }}
         >
@@ -55,12 +57,13 @@ export const PositionModal = () => {
           />
         ))}
       </CheckCard.Group>
-    </DragModal>
+    </NeosModal>
   );
 };
 
 function cardPositionToChinese(position: ygopro.CardPosition): string {
   switch (position) {
+    // TODO: i18n
     case ygopro.CardPosition.FACEUP_ATTACK: {
       return "正面攻击形式";
     }
@@ -78,3 +81,15 @@ function cardPositionToChinese(position: ygopro.CardPosition): string {
     }
   }
 }
+
+let rs: (arg?: any) => void = () => {};
+
+export const displayPositionModal = async (
+  positions: ygopro.CardPosition[]
+) => {
+  localStore.positions = positions;
+  localStore.isOpen = true;
+  await new Promise<void>((resolve) => (rs = resolve));
+  localStore.isOpen = false;
+  localStore.positions = [];
+};

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

 import "./index.scss";
 
+import {
+  ArrowRightOutlined,
+  CheckOutlined,
+  CloseCircleFilled,
+  MessageFilled,
+  StepForwardFilled,
+} from "@ant-design/icons";
 import {
   Button,
-  Tooltip,
+  Divider,
   Dropdown,
   type MenuProps,
-  theme,
-  Divider,
-  Space,
   type DropdownProps,
+  Popconfirm,
+  Space,
+  theme,
+  Tooltip,
 } from "antd";
 import { useState, cloneElement } from "react";
 import { useSnapshot } from "valtio";
-import {
-  StepForwardFilled,
-  MessageFilled,
-  CloseCircleFilled,
-  ArrowRightOutlined,
-  CheckOutlined,
-} from "@ant-design/icons";
+
 import {
   sendSelectBattleCmdResponse,
   sendSelectIdleCmdResponse,
-  ygopro,
   sendSurrender,
+  ygopro,
 } from "@/api";
 import { cardStore, matStore } from "@/stores";
 import PhaseType = ygopro.StocGameMessage.MsgNewPhase.PhaseType;