update cardModal

src/reducers/duel/mod.ts

@@ -27,8 +27,7 @@ import { HintState, hintCase } from "./hintSlice";
 import {
   ModalState,
   setCardModalIsOpenImpl,
-  setCardModalTextImpl,
-  setCardModalImgUrlImpl,
+  setCardModalMetaImpl,
   setCardModalInteractiviesImpl,
   setCardListModalIsOpenImpl,
   setCardListModalInfoImpl,
@@ -227,8 +226,7 @@ const duelSlice = createSlice({
 
     // UI相关`Reducer`
     setCardModalIsOpen: setCardModalIsOpenImpl,
-    setCardModalText: setCardModalTextImpl,
-    setCardModalImgUrl: setCardModalImgUrlImpl,
+    setCardModalMeta: setCardModalMetaImpl,
     setCardModalInteractivies: setCardModalInteractiviesImpl,
     setCardListModalIsOpen: setCardListModalIsOpenImpl,
     setCardListModalInfo: setCardListModalInfoImpl,
@@ -288,8 +286,7 @@ export const {
   addHandsIdleInteractivity,
   updateTimeLimit,
   setCardModalIsOpen,
-  setCardModalText,
-  setCardModalImgUrl,
+  setCardModalMeta,
   setCardModalInteractivies,
   initMonsters,
   addMonsterPlaceInteractivities,

src/reducers/duel/modal/cardModalSlice.ts

 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
 import { DuelState } from "../mod";
 import { RootState } from "../../../store";
+import { CardMeta } from "../../../api/cards";
 
 // 更新卡牌弹窗打开状态
 export const setCardModalIsOpenImpl: CaseReducer<
@@ -11,23 +12,11 @@ export const setCardModalIsOpenImpl: CaseReducer<
 };
 
 // 更新卡牌弹窗文本
-export const setCardModalTextImpl: CaseReducer<
+export const setCardModalMetaImpl: CaseReducer<
   DuelState,
-  PayloadAction<[string?, string?]>
+  PayloadAction<CardMeta>
 > = (state, action) => {
-  const name = action.payload[0];
-  const desc = action.payload[1];
-
-  state.modalState.cardModal.name = name;
-  state.modalState.cardModal.desc = desc;
-};
-
-// 更新卡牌弹窗图片Url
-export const setCardModalImgUrlImpl: CaseReducer<
-  DuelState,
-  PayloadAction<string>
-> = (state, action) => {
-  state.modalState.cardModal.imgUrl = action.payload;
+  state.modalState.cardModal.meta = action.payload;
 };
 
 // 更新卡牌弹窗互动选项
@@ -40,11 +29,7 @@ export const setCardModalInteractiviesImpl: CaseReducer<
 
 export const selectCardModalIsOpen = (state: RootState) =>
   state.duel.modalState.cardModal.isOpen;
-export const selectCardModalName = (state: RootState) =>
-  state.duel.modalState.cardModal.name;
-export const selectCardModalDesc = (state: RootState) =>
-  state.duel.modalState.cardModal.desc;
-export const selectCardModalImgUrl = (state: RootState) =>
-  state.duel.modalState.cardModal.imgUrl;
+export const selectCardModalMeta = (state: RootState) =>
+  state.duel.modalState.cardModal.meta;
 export const selectCardModalInteractivies = (state: RootState) =>
   state.duel.modalState.cardModal.interactivies;

src/reducers/duel/modal/mod.ts

+import { CardMeta } from "../../../api/cards";
 import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
 
 export interface ModalState {
   // 卡牌弹窗
   cardModal: {
     isOpen: boolean;
-    name?: string;
-    desc?: string;
-    imgUrl?: string;
+    meta?: CardMeta;
     interactivies: { desc: string; response: number }[];
   };
   // 卡牌列表弹窗

src/ui/Duel/cardModal.tsx

@@ -3,10 +3,8 @@ import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import {
   selectCardModalIsOpen,
-  selectCardModalName,
-  selectCardModalDesc,
-  selectCardModalImgUrl,
   selectCardModalInteractivies,
+  selectCardModalMeta,
 } from "../../reducers/duel/modal/mod";
 import {
   setCardModalIsOpen,
@@ -14,6 +12,7 @@ import {
 } from "../../reducers/duel/mod";
 import { Modal, Card, Button } from "antd";
 import { sendSelectIdleCmdResponse } from "../../api/ocgcore/ocgHelper";
+import NeosConfig from "../../../neos.config.json";
 
 const { Meta } = Card;
 const CARD_WIDTH = 240;
@@ -21,9 +20,12 @@ const CARD_WIDTH = 240;
 const CardModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectCardModalIsOpen);
-  const name = useAppSelector(selectCardModalName);
-  const desc = useAppSelector(selectCardModalDesc);
-  const imgUrl = useAppSelector(selectCardModalImgUrl);
+  const meta = useAppSelector(selectCardModalMeta);
+  const name = meta?.text.name;
+  const desc = meta?.text.desc;
+  const imgUrl = meta?.id
+    ? `${NeosConfig.cardImgUrl}/${meta.id}.jpg`
+    : undefined;
   const interactivies = useAppSelector(selectCardModalInteractivies);
 
   const handleOkOrCancel = () => {

src/ui/Duel/fixedSlot.tsx

@@ -6,10 +6,9 @@ import { useClick } from "./hook";
 import { sendSelectPlaceResponse } from "../../api/ocgcore/ocgHelper";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import {
-  setCardModalImgUrl,
   setCardModalInteractivies,
   setCardModalIsOpen,
-  setCardModalText,
+  setCardModalMeta,
 } from "../../reducers/duel/mod";
 import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
 import { interactTypeToString } from "./util";
@@ -55,17 +54,7 @@ const FixedSlot = (props: {
         dispatch(props.clearPlaceInteractivitiesAction(0));
         dispatch(props.clearPlaceInteractivitiesAction(1));
       } else if (props.state.occupant) {
-        dispatch(
-          setCardModalText([
-            props.state.occupant.text.name,
-            props.state.occupant.text.desc,
-          ])
-        );
-        dispatch(
-          setCardModalImgUrl(
-            `${NeosConfig.cardImgUrl}/${props.state.occupant.id}.jpg`
-          )
-        );
+        dispatch(setCardModalMeta(props.state.occupant));
         dispatch(
           setCardModalInteractivies(
             props.state.idleInteractivities.map((interactivity) => {

src/ui/Duel/hands.tsx

@@ -3,9 +3,8 @@ import { useAppSelector } from "../../hook";
 import { selectMeHands, selectOpHands } from "../../reducers/duel/handsSlice";
 import { CardState } from "../../reducers/duel/generic";
 import {
-  setCardModalImgUrl,
   setCardModalIsOpen,
-  setCardModalText,
+  setCardModalMeta,
   setCardModalInteractivies,
 } from "../../reducers/duel/mod";
 import { store } from "../../store";
@@ -112,12 +111,9 @@ const CHand = (props: {
 
   useClick(
     () => {
-      dispatch(
-        setCardModalText([state.occupant?.text.name, state.occupant?.text.desc])
-      );
-      dispatch(
-        setCardModalImgUrl(`${NeosConfig.cardImgUrl}/${state.occupant?.id}.jpg`)
-      );
+      if (state.occupant) {
+        dispatch(setCardModalMeta(state.occupant));
+      }
       dispatch(
         setCardModalInteractivies(
           state.idleInteractivities.map((interactive) => {