feat: cardModal complete

src/ui/Duel/Message/CardListModal.tsx

@@ -7,6 +7,8 @@ import { messageStore } from "@/stores";
 
 import { EffectButton } from "./EffectButton";
 
+import { showCardModal } from "./CardModal";
+
 const NeosConfig = useConfig();
 
 const CARD_WIDTH = 100;
@@ -47,10 +49,7 @@ export const CardListModal = () => {
               />
             }
             onClick={() => {
-              messageStore.cardModal.meta = item.meta;
-              messageStore.cardModal.interactivies = item.interactivies;
-              messageStore.cardModal.counters = [];
-              messageStore.cardModal.isOpen = true;
+              showCardModal(item);
             }}
           >
             <List.Item.Meta

src/ui/Duel/Message/CardModal/index.tsx

@@ -2,11 +2,11 @@ import "@/styles/card-modal.scss";
 
 import classnames from "classnames";
 import React, { FC } from "react";
-import { useSnapshot } from "valtio";
+import { useSnapshot, proxy } from "valtio";
 
-import { fetchStrings, sendSelectIdleCmdResponse } from "@/api";
+import { fetchStrings, sendSelectIdleCmdResponse, type CardMeta } from "@/api";
 import { useConfig } from "@/config";
-import { cardStore, messageStore } from "@/stores";
+import { cardStore, messageStore, type CardType } from "@/stores";
 
 import {
   Attribute2StringCodeMap,
@@ -25,15 +25,33 @@ import { YgoCard } from "@/ui/Shared";
 import { Desc } from "./Desc";
 
 const { cardModal } = messageStore;
-const NeosConfig = useConfig();
+
 const CARD_WIDTH = 140;
-const { Title, Paragraph, Text, Link } = Typography;
+
+const defaultStore = {
+  isOpen: false,
+  meta: {
+    id: 0,
+    data: {},
+    text: {
+      name: "",
+      desc: "",
+    },
+  } satisfies CardMeta as CardMeta,
+  interactivies: [] as {
+    desc: string;
+    response: number;
+    effectCode?: number;
+  }[],
+  counters: {} as Record<number, number>,
+};
+
+const store = proxy(defaultStore);
 
 export const CardModal = () => {
-  const snap = useSnapshot(cardModal);
+  const snap = useSnapshot(store);
 
-  const isOpen = snap.isOpen;
-  const meta = snap.meta;
+  const { isOpen, meta, counters } = snap;
 
   const name = meta?.text.name;
   const types = meta?.data.type;
@@ -42,7 +60,6 @@ export const CardModal = () => {
   const desc = meta?.text.desc;
   const atk = meta?.data.atk;
   const def = meta?.data.def;
-  const counters = snap.counters;
 
   const nonEffectInteractivies = snap.interactivies.filter(
     (item) => item.desc != "发动效果"
@@ -56,10 +73,9 @@ export const CardModal = () => {
     <Drawer
       open={isOpen}
       placement="left"
-      onClose={() => (cardModal.isOpen = false)}
+      onClose={() => (store.isOpen = false)}
       rootClassName="card-modal-root"
       className="card-modal-drawer"
-      headerStyle={{}}
       mask={false}
       title={name}
       closeIcon={<LeftOutlined />}
@@ -83,6 +99,7 @@ export const CardModal = () => {
               attribute={attribute}
             />
             {/* TODO: 只有怪兽卡需要展示攻击防御 */}
+            {/* TODO: 展示星级/LINK数 */}
             {/* <CounterLine counters={counters} /> */}
           </Space>
         </Space>
@@ -168,3 +185,15 @@ const CounterLine = (props: { counters: { [type: number]: number } }) => {
     </>
   );
 };
+
+export const showCardModal = (
+  card: Partial<Pick<typeof store, "meta" | "counters">>
+) => {
+  store.isOpen = true;
+  store.meta = card?.meta ?? defaultStore.meta;
+  store.counters = card?.counters ?? defaultStore.counters;
+};
+
+export const closeCardModal = () => {
+  store.isOpen = false;
+};

src/ui/Duel/Message/NewSelectActionModal/index.tsx

@@ -28,6 +28,7 @@ import { groupBy } from "../../utils";
 import { NeosModal } from "../NewModal";
 import { YgoCard } from "@/ui/Shared";
 import "./index.scss";
+import { showCardModal } from "../CardModal";
 
 const CANCEL_RESPONSE = -1;
 const FINISH_RESPONSE = -1;
@@ -206,6 +207,9 @@ export const NewSelectActionsModal: FC = () => {
                           flexShrink: 0,
                         }}
                         value={card}
+                        onClick={() => {
+                          showCardModal(card);
+                        }}
                       />
                     </div>
                   </Tooltip>

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

@@ -22,7 +22,7 @@ import {
 import type { SpringApiProps } from "./springs/types";
 
 import { YgoCard } from "@/ui/Shared";
-
+import { showCardModal } from "@/ui/Duel/Message/CardModal";
 const NeosConfig = useConfig();
 
 const { HAND, GRAVE, REMOVED, DECK, EXTRA, MZONE, SZONE, TZONE } =
@@ -173,20 +173,9 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
 
 const onCardClick = (card: CardType) => {
   // 中央弹窗展示选中卡牌信息
-  messageStore.cardModal.meta = {
-    id: card.code,
-    text: card.meta.text,
-    data: card.meta.data,
-  };
-  messageStore.cardModal.interactivies = card.idleInteractivities.map(
-    (interactivity) => ({
-      desc: interactTypeToString(interactivity.interactType),
-      response: interactivity.response,
-      effectCode: interactivity.activateIndex,
-    })
-  );
-  messageStore.cardModal.counters = card.counters;
-  messageStore.cardModal.isOpen = true;
+  // TODO: 对方的卡片/未知的卡片，点击应该是没有效果的
+  // TODO: 同一张卡片，是否重复点击会关闭CardModal？
+  showCardModal(card);
 
   // 侧边栏展示超量素材信息
   const overlayMaterials = cardStore.findOverlay(