udpate singleSlot.tsx and cardListModal.tsx

src/reducers/duel/modal/cardListModalSlice.ts

@@ -13,7 +13,14 @@ export const setCardListModalIsOpenImpl: CaseReducer<
 // 更新卡牌列表数据
 export const setCardListModalInfoImpl: CaseReducer<
   DuelState,
-  PayloadAction<{ name?: string; desc?: string; imgUrl?: string }[]>
+  PayloadAction<
+    {
+      name?: string;
+      desc?: string;
+      imgUrl?: string;
+      interactivies: { desc: string; response: number }[];
+    }[]
+  >
 > = (state, action) => {
   const list = action.payload;
 

src/reducers/duel/modal/mod.ts

@@ -16,6 +16,7 @@ export interface ModalState {
       name?: string;
       desc?: string;
       imgUrl?: string;
+      interactivies: { desc: string; response: number }[];
     }[];
   };
   // 卡牌选择弹窗

src/ui/Duel/cardListModal.tsx

@@ -5,10 +5,13 @@ import {
   selectCardListModalIsOpen,
   selectCardListModalInfo,
 } from "../../reducers/duel/modal/mod";
-import { setCardListModalIsOpen } from "../../reducers/duel/mod";
-import { Modal, List, Popover, Card } from "antd";
+import {
+  clearAllIdleInteractivities,
+  setCardListModalIsOpen,
+} from "../../reducers/duel/mod";
+import { Modal, List, Button } from "antd";
+import { sendSelectIdleCmdResponse } from "../../api/ocgcore/ocgHelper";
 
-const { Meta } = Card;
 const CARD_WIDTH = 100;
 
 const CardListModal = () => {
@@ -26,21 +29,30 @@ const CardListModal = () => {
         itemLayout="horizontal"
         dataSource={list}
         renderItem={(item) => (
-          <Popover
-            content={
-              <Card
-                hoverable
-                style={{ width: CARD_WIDTH }}
-                cover={<img alt={item.name} src={item.imgUrl} />}
+          <List.Item
+            actions={item.interactivies.map((interactivy, idx) => (
+              <Button
+                key={idx}
+                onClick={() => {
+                  sendSelectIdleCmdResponse(interactivy.response);
+                  dispatch(setCardListModalIsOpen(false));
+                  dispatch(clearAllIdleInteractivities(0));
+                  dispatch(clearAllIdleInteractivities(1));
+                }}
               >
-                <Meta title={item.name} />
-              </Card>
+                {interactivy.desc}
+              </Button>
+            ))}
+            extra={
+              <img
+                alt={item.name}
+                src={item.imgUrl}
+                style={{ width: CARD_WIDTH }}
+              />
             }
           >
-            <List.Item>
-              <List.Item.Meta title={item.name} description={item.desc} />
-            </List.Item>
-          </Popover>
+            <List.Item.Meta title={item.name} description={item.desc} />
+          </List.Item>
         )}
       ></List>
     </Modal>

src/ui/Duel/singleSlot.tsx

@@ -8,6 +8,7 @@ import {
   setCardListModalInfo,
   setCardListModalIsOpen,
 } from "../../reducers/duel/mod";
+import { interactTypeToString } from "./util";
 
 const shape = CONFIG.SingleSlotShape;
 export const Depth = 0.005;
@@ -20,8 +21,8 @@ const SingleSlot = (props: {
   const boxRef = useRef(null);
   const dispatch = store.dispatch;
   const edgeRender =
-    props.state.find(
-      (item) => item.placeInteractivities || item.idleInteractivities.length > 0
+    props.state.find((item) =>
+      item === undefined ? false : item.idleInteractivities.length > 0
     ) !== undefined;
   const edgesWidth = 2.0;
 
@@ -39,6 +40,12 @@ const SingleSlot = (props: {
                   name: item.occupant?.text.name,
                   desc: item.occupant?.text.desc,
                   imgUrl: `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${item.occupant?.id}.jpg`,
+                  interactivies: item.idleInteractivities.map((interactivy) => {
+                    return {
+                      desc: interactTypeToString(interactivy.interactType),
+                      response: interactivy.response,
+                    };
+                  }),
                 };
               })
           )