Merge branch 'optimize/cardListModal' into 'main'

Optimize/card list modal

See merge request !191

src/ui/Duel/Message/CardListModal.tsx

-import { Button, Drawer, List } from "antd";
+import { Drawer, List } from "antd";
 import React from "react";
 import { useSnapshot } from "valtio";
 
-import { sendSelectIdleCmdResponse } from "@/api";
 import { useConfig } from "@/config";
-import {
-  clearAllIdleInteractivities as clearAllIdleInteractivities,
-  messageStore,
-} from "@/stores";
+import { messageStore } from "@/stores";
+
+import { EffectButton } from "./EffectButton";
 
 const NeosConfig = useConfig();
 
@@ -16,9 +14,9 @@ const CARD_WIDTH = 100;
 const { cardListModal } = messageStore;
 
 export const CardListModal = () => {
-  const snapCardListModal = useSnapshot(cardListModal);
-  const isOpen = snapCardListModal.isOpen;
-  const list = snapCardListModal.list as typeof cardListModal.list;
+  const snap = useSnapshot(cardListModal);
+  const isOpen = snap.isOpen;
+  const list = snap.list as typeof cardListModal.list;
 
   const handleOkOrCancel = () => {
     cardListModal.isOpen = false;
@@ -31,19 +29,12 @@ export const CardListModal = () => {
         dataSource={list}
         renderItem={(item) => (
           <List.Item
-            actions={item.interactivies.map((interactivy, idx) => (
-              <Button
-                key={idx}
-                onClick={() => {
-                  sendSelectIdleCmdResponse(interactivy.response);
-                  cardListModal.isOpen = false;
-                  clearAllIdleInteractivities(0);
-                  clearAllIdleInteractivities(1);
-                }}
-              >
-                {interactivy.desc}
-              </Button>
-            ))}
+            actions={[
+              <EffectButton
+                effectInteractivies={item.interactivies}
+                meta={item.meta}
+              />,
+            ]}
             extra={
               <img
                 alt={item.meta?.text.name}
@@ -55,6 +46,10 @@ export const CardListModal = () => {
                 style={{ width: CARD_WIDTH }}
               />
             }
+            onClick={() => {
+              messageStore.cardModal.meta = item.meta;
+              messageStore.cardModal.isOpen = true;
+            }}
           >
             <List.Item.Meta
               title={item.meta?.text.name}

src/ui/Duel/Message/CardModal.tsx

@@ -4,7 +4,7 @@ import classnames from "classnames";
 import React from "react";
 import { useSnapshot } from "valtio";
 
-import { fetchStrings, getCardStr, sendSelectIdleCmdResponse } from "@/api";
+import { fetchStrings, sendSelectIdleCmdResponse } from "@/api";
 import { useConfig } from "@/config";
 import {
   clearAllIdleInteractivities as clearAllIdleInteractivities,
@@ -17,6 +17,7 @@ import {
   Race2StringCodeMap,
   Type2StringCodeMap,
 } from "../../../common";
+import { EffectButton } from "./EffectButton";
 
 const { cardModal } = messageStore;
 const NeosConfig = useConfig();
@@ -84,47 +85,7 @@ export const CardModal = () => {
             </button>
           );
         })}
-        {effectInteractivies.length > 0 ? (
-          effectInteractivies.length == 1 ? (
-            // 如果只有一个效果，点击直接触发
-            <button
-              className="card-modal-btn"
-              onClick={() => {
-                sendSelectIdleCmdResponse(effectInteractivies[0].response);
-                cardModal.isOpen = false;
-                clearAllIdleInteractivities(0);
-                clearAllIdleInteractivities(1);
-              }}
-            >
-              {effectInteractivies[0].desc}
-            </button>
-          ) : (
-            // 如果有多个效果，点击后进入`OptionModal`选择
-            <button
-              className="card-modal-btn"
-              onClick={() => {
-                for (const effect of effectInteractivies) {
-                  const effectMsg =
-                    meta && effect.effectCode
-                      ? getCardStr(meta, effect.effectCode & 0xf) ?? "[:?]"
-                      : "[:?]";
-                  messageStore.optionModal.options.push({
-                    msg: effectMsg,
-                    response: effect.response,
-                  });
-                }
-                cardModal.isOpen = false;
-                clearAllIdleInteractivities(0);
-                clearAllIdleInteractivities(1);
-                messageStore.optionModal.isOpen = true;
-              }}
-            >
-              发动效果
-            </button>
-          )
-        ) : (
-          <></>
-        )}
+        <EffectButton meta={meta} effectInteractivies={effectInteractivies} />
       </div>
     </div>
   );

src/ui/Duel/Message/EffectButton.tsx

+import "@/styles/card-modal.scss";
+
+import React from "react";
+
+import { CardMeta, getCardStr, sendSelectIdleCmdResponse } from "@/api";
+import {
+  clearAllIdleInteractivities as clearAllIdleInteractivities,
+  messageStore,
+} from "@/stores";
+
+const { cardModal } = messageStore;
+export const EffectButton = (props: {
+  meta?: CardMeta;
+  effectInteractivies: {
+    desc: string;
+    response: number;
+    effectCode?: number;
+  }[];
+}) => (
+  <>
+    {props.effectInteractivies.length > 0 ? (
+      props.effectInteractivies.length == 1 ? (
+        // 如果只有一个效果，点击直接触发
+        <button
+          className="card-modal-btn"
+          onClick={() => {
+            sendSelectIdleCmdResponse(props.effectInteractivies[0].response);
+            cardModal.isOpen = false;
+            clearAllIdleInteractivities(0);
+            clearAllIdleInteractivities(1);
+          }}
+        >
+          {props.effectInteractivies[0].desc}
+        </button>
+      ) : (
+        // 如果有多个效果，点击后进入`OptionModal`选择
+        <button
+          className="card-modal-btn"
+          onClick={() => {
+            for (const effect of props.effectInteractivies) {
+              const effectMsg =
+                props.meta && effect.effectCode
+                  ? getCardStr(props.meta, effect.effectCode & 0xf) ?? "[:?]"
+                  : "[:?]";
+              messageStore.optionModal.options.push({
+                msg: effectMsg,
+                response: effect.response,
+              });
+            }
+            cardModal.isOpen = false;
+            clearAllIdleInteractivities(0);
+            clearAllIdleInteractivities(1);
+            messageStore.optionModal.isOpen = true;
+          }}
+        >
+          发动效果
+        </button>
+      )
+    ) : (
+      <></>
+    )}
+  </>
+);