migrate sortcard modal

src/service/duel/gameMsg.ts

@@ -220,7 +220,7 @@ async function _handleGameMsg(pb: ygopro.YgoStocMsg) {
       break;
     }
     case "sort_card": {
-      onMsgSortCard(msg.sort_card);
+      await onMsgSortCard(msg.sort_card);
 
       break;
     }

src/service/duel/sortCard.ts

 import { fetchCard, ygopro } from "@/api";
-import { messageStore } from "@/stores";
+import { displaySortCardModal } from "@/ui/Duel/Message";
 
 type MsgSortCard = ygopro.StocGameMessage.MsgSortCard;
 
 export default async (sortCard: MsgSortCard) => {
-  await Promise.all(
+  const options = await Promise.all(
     sortCard.options.map(async ({ code, response }) => {
       const meta = await fetchCard(code!);
-      messageStore.sortCardModal.options.push({
+      return {
         meta,
         response: response!,
-      });
+      };
     })
   );
-  messageStore.sortCardModal.isOpen = true;
+  await displaySortCardModal(options);
 };

src/stores/messageStore/store.ts

@@ -7,10 +7,6 @@ export const messageStore = proxy<ModalState>({
     isOpen: false,
     options: [],
   },
-  sortCardModal: {
-    isOpen: false,
-    options: [],
-  },
   announceModal: {
     isOpen: false,
     min: 1,

src/stores/messageStore/types.ts

-import type { CardMeta, ygopro } from "@/api";
-
 export interface ModalState {
   // 指示器选择弹窗
   checkCounterModal: {
@@ -11,14 +9,6 @@ export interface ModalState {
       max: number;
     }[];
   };
-  // 卡牌排序弹窗
-  sortCardModal: {
-    isOpen: boolean;
-    options: {
-      meta: CardMeta;
-      response: number;
-    }[];
-  };
   // 宣言弹窗
   announceModal: {
     isOpen: boolean;

src/ui/Duel/Message/SortCardModal.tsx

+// 卡牌排序弹窗
 import {
   closestCenter,
   DndContext,
@@ -15,23 +16,35 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { Button, Card, Modal } from "antd";
+import { Button, Card } from "antd";
 import React, { useEffect, useState } from "react";
-import { useSnapshot } from "valtio";
+import { proxy, useSnapshot } from "valtio";
 
 import { sendSortCardResponse } from "@/api";
 import { CardMeta } from "@/api/cards";
 import { useConfig } from "@/config";
-import { messageStore } from "@/stores";
+
+import { NeosModal } from "./NeosModal";
 
 const NeosConfig = useConfig();
 
-const { sortCardModal } = messageStore;
+interface SortOption {
+  meta: CardMeta;
+  response: number;
+}
+interface SortCardModalProps {
+  isOpen: boolean;
+  options: SortOption[];
+}
+const defaultProps = {
+  isOpen: false,
+  options: [],
+};
+
+const localStore = proxy<SortCardModalProps>(defaultProps);
 
 export const SortCardModal = () => {
-  const snapSortCardModal = useSnapshot(sortCardModal);
-  const isOpen = snapSortCardModal.isOpen;
-  const options = snapSortCardModal.options;
+  const { isOpen, options } = useSnapshot(localStore);
   const [items, setItems] = useState(options);
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -42,8 +55,7 @@ export const SortCardModal = () => {
 
   const onFinish = () => {
     sendSortCardResponse(items.map((item) => item.response));
-    sortCardModal.isOpen = false;
-    sortCardModal.options = [];
+    rs();
   };
   const onDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
@@ -63,7 +75,7 @@ export const SortCardModal = () => {
   }, [options]);
 
   return (
-    <Modal
+    <NeosModal
       title="请为下列卡牌排序"
       open={isOpen}
       closable={false}
@@ -87,7 +99,7 @@ export const SortCardModal = () => {
           ))}
         </SortableContext>
       </DndContext>
-    </Modal>
+    </NeosModal>
   );
 };
 
@@ -114,3 +126,13 @@ const SortableItem = (props: { id: number; meta: CardMeta }) => {
     </div>
   );
 };
+
+let rs: (arg?: any) => void = () => {};
+
+export const displaySortCardModal = async (options: SortOption[]) => {
+  localStore.options = options;
+  localStore.isOpen = true;
+  await new Promise<void>((resolve) => (rs = resolve));
+  localStore.isOpen = false;
+  localStore.options = [];
+};