add checkCounterSlice.ts

src/reducers/duel/mod.ts

@@ -61,6 +61,8 @@ import {
   resetCheckCardModalV3Impl,
   checkCardModalV3Case,
   setCardModalCountersImpl,
+  setCheckCounterImpl,
+  clearCheckCounterImpl,
 } from "./modal/mod";
 import {
   MonsterState,
@@ -184,6 +186,10 @@ const initialState: DuelState = {
       mustSelectList: [],
       selectAbleList: [],
     },
+    checkCounterModal: {
+      isOpen: false,
+      options: [],
+    },
   },
 };
 
@@ -278,6 +284,8 @@ const duelSlice = createSlice({
     setCheckCardModalV3ResponseAble: setCheckCardModalV3ResponseAbleImpl,
     resetCheckCardModalV3: resetCheckCardModalV3Impl,
     setCardModalCounters: setCardModalCountersImpl,
+    setCheckCounter: setCheckCounterImpl,
+    clearCheckCounter: clearCheckCounterImpl,
 
     // 通用的`Reducer`
     clearAllIdleInteractivities: clearAllIdleInteractivitiesImpl,
@@ -391,6 +399,8 @@ export const {
   setCheckCardModalV3ResponseAble,
   resetCheckCardModalV3,
   setCardModalCounters,
+  setCheckCounter,
+  clearCheckCounter,
 } = duelSlice.actions;
 export const selectDuelHsStart = (state: RootState) => {
   return state.duel.meInitInfo != null;

src/reducers/duel/modal/checkCounterModalSlice.tsx

+// 后续对于`MSG_SELECT_XXX`的处理UI都尽量用`Babylon.js`实现而不会通过`Antd`的`Modal`实现，因此这里不追求工程质量，暂时简单实现下。
+import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
+import { RootState } from "../../../store";
+import { DuelState } from "../mod";
+import { findCardByLocation } from "../util";
+import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
+type SelectCounter = ReturnType<
+  typeof ygopro.StocGameMessage.MsgSelectCounter.prototype.toObject
+>;
+
+export const setCheckCounterImpl: CaseReducer<
+  DuelState,
+  PayloadAction<SelectCounter>
+> = (state, action) => {
+  const modal = state.modalState.checkCounterModal;
+  const payload = action.payload;
+
+  modal.counterType = payload.counter_type;
+  modal.min = payload.min;
+  modal.options = payload.options!.map((option) => {
+    const code = option.code
+      ? option.code
+      : findCardByLocation(state, option.location!)?.occupant?.id || 0;
+
+    return {
+      code,
+      max: option.counter_count!,
+    };
+  });
+  modal.isOpen = true;
+};
+
+export const clearCheckCounterImpl: CaseReducer<DuelState> = (state) => {
+  state.modalState.checkCounterModal.isOpen = false;
+  state.modalState.checkCounterModal.min = undefined;
+  state.modalState.checkCounterModal.counterType = undefined;
+  state.modalState.checkCounterModal.options = [];
+};
+
+export const selectCheckCounterModal = (state: RootState) =>
+  state.duel.modalState.checkCounterModal;

src/reducers/duel/modal/mod.ts

@@ -93,6 +93,16 @@ export interface ModalState {
       response: number;
     }[];
   };
+  // 指示器选择弹窗
+  checkCounterModal: {
+    isOpen: boolean;
+    counterType?: number;
+    min?: number;
+    options: {
+      code: number;
+      max: number;
+    }[];
+  };
 }
 
 export * from "./cardModalSlice";
@@ -103,3 +113,4 @@ export * from "./positionModalSlice";
 export * from "./optionModalSlice";
 export * from "./checkCardModalV2Slice";
 export * from "./checkCardModalV3Slice";
+export * from "./checkCounterModalSlice";

src/reducers/duel/util.ts

@@ -29,9 +29,11 @@ export function judgeSelf(player: number, state: Draft<DuelState>): boolean {
  * 通过`controler`,`zone`和`sequence`获取卡牌状态*/
 export function findCardByLocation(
   state: Draft<DuelState>,
-  location: ygopro.CardLocation
+  location:
+    | ygopro.CardLocation
+    | ReturnType<typeof ygopro.CardLocation.prototype.toObject>
 ): CardState | undefined {
-  const controler = location.controler;
+  const controler = location.controler!;
   const zone = location.location;
   const sequence = location.sequence;
 

src/service/duel/selectCounter.ts

 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { setCheckCounter } from "../../reducers/duel/mod";
 import { AppDispatch } from "../../store";
 import MsgSelectCounter = ygopro.StocGameMessage.MsgSelectCounter;
 
 export default (selectCounter: MsgSelectCounter, dispatch: AppDispatch) => {
-  console.log(selectCounter);
+  dispatch(setCheckCounter(selectCounter.toObject()));
 };