update ui

src/reducers/duel/mod.ts

@@ -61,6 +61,7 @@ import {
   resetCheckCardModalV3Impl,
   setCheckCardModalV3SelectedImpl,
   checkCardModalV3Case,
+  setCardModalCountersImpl,
 } from "./modal/mod";
 import {
   MonsterState,
@@ -163,7 +164,7 @@ export interface DuelState {
 
 const initialState: DuelState = {
   modalState: {
-    cardModal: { isOpen: false, interactivies: [] },
+    cardModal: { isOpen: false, interactivies: [], counters: {} },
     cardListModal: { isOpen: false, list: [] },
     checkCardModal: { isOpen: false, cancelAble: false, tags: [] },
     yesNoModal: { isOpen: false },
@@ -279,6 +280,7 @@ const duelSlice = createSlice({
     setCheckCardModalV3ResponseAble: setCheckCardModalV3ResponseAbleImpl,
     resetCheckCardModalV3: resetCheckCardModalV3Impl,
     setCheckCardModalV3Selected: setCheckCardModalV3SelectedImpl,
+    setCardModalCounters: setCardModalCountersImpl,
 
     // 通用的`Reducer`
     clearAllIdleInteractivities: clearAllIdleInteractivitiesImpl,
@@ -392,6 +394,7 @@ export const {
   setCheckCardModalV3ResponseAble,
   resetCheckCardModalV3,
   setCheckCardModalV3Selected,
+  setCardModalCounters,
 } = duelSlice.actions;
 export const selectDuelHsStart = (state: RootState) => {
   return state.duel.meInitInfo != null;

src/reducers/duel/modal/cardModalSlice.ts

@@ -27,9 +27,19 @@ export const setCardModalInteractiviesImpl: CaseReducer<
   state.modalState.cardModal.interactivies = action.payload;
 };
 
+// 更新卡牌弹窗指示器
+export const setCardModalCountersImpl: CaseReducer<
+  DuelState,
+  PayloadAction<{ [type: number]: number }>
+> = (state, action) => {
+  state.modalState.cardModal.counters = action.payload;
+};
+
 export const selectCardModalIsOpen = (state: RootState) =>
   state.duel.modalState.cardModal.isOpen;
 export const selectCardModalMeta = (state: RootState) =>
   state.duel.modalState.cardModal.meta;
 export const selectCardModalInteractivies = (state: RootState) =>
   state.duel.modalState.cardModal.interactivies;
+export const selectCardModalCounters = (state: RootState) =>
+  state.duel.modalState.cardModal.counters;

src/reducers/duel/modal/mod.ts

@@ -7,6 +7,7 @@ export interface ModalState {
     isOpen: boolean;
     meta?: CardMeta;
     interactivies: { desc: string; response: number }[];
+    counters: { [type: number]: number };
   };
   // 卡牌列表弹窗
   cardListModal: {

src/ui/Duel/cardModal.tsx

@@ -5,6 +5,7 @@ import {
   selectCardModalIsOpen,
   selectCardModalInteractivies,
   selectCardModalMeta,
+  selectCardModalCounters,
 } from "../../reducers/duel/modal/mod";
 import {
   setCardModalIsOpen,
@@ -39,6 +40,7 @@ const CardModal = () => {
   const desc = meta?.text.desc;
   const atk = meta?.data.atk;
   const def = meta?.data.def;
+  const counters = useAppSelector(selectCardModalCounters);
   const imgUrl = meta?.id
     ? `${NeosConfig.cardImgUrl}/${meta.id}.jpg`
     : undefined;
@@ -66,6 +68,9 @@ const CardModal = () => {
         <p>
           <AtkLine level={level} atk={atk} def={def} />
         </p>
+        <p>
+          <CounterLine counters={counters} />
+        </p>
         <p>{desc}</p>
       </Card>
       {interactivies.map((interactive, idx) => {
@@ -141,4 +146,25 @@ const AttLine = (props: {
   );
 };
 
+const CounterLine = (props: { counters: { [type: number]: number } }) => {
+  const counters = [];
+  for (const counterType in props.counters) {
+    const count = props.counters[counterType];
+    if (count > 0) {
+      const counterStr = fetchStrings("!counter", Number(counterType));
+      counters.push(`${counterStr}: ${count}`);
+    }
+  }
+
+  return counters.length > 0 ? (
+    <Row gutter={8}>
+      {counters.map((counter) => (
+        <Col>{counter}</Col>
+      ))}
+    </Row>
+  ) : (
+    <></>
+  );
+};
+
 export default CardModal;

src/ui/Duel/fixedSlot.tsx

@@ -8,6 +8,7 @@ import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import {
   setCardListModalInfo,
   setCardListModalIsOpen,
+  setCardModalCounters,
   setCardModalInteractivies,
   setCardModalIsOpen,
   setCardModalMeta,
@@ -68,6 +69,7 @@ const FixedSlot = (props: {
             })
           )
         );
+        dispatch(setCardModalCounters(props.state.counters));
         dispatch(setCardModalIsOpen(true));
 
         // 侧边栏展示超量素材信息