add sortCardModalSlice

src/reducers/duel/mod.ts

@@ -63,6 +63,9 @@ import {
   setCardModalCountersImpl,
   setCheckCounterImpl,
   clearCheckCounterImpl,
+  setSortCardModalIsOpenImpl,
+  resetSortCardModalImpl,
+  sortCardModalCase,
 } from "./modal/mod";
 import {
   MonsterState,
@@ -190,6 +193,10 @@ const initialState: DuelState = {
       isOpen: false,
       options: [],
     },
+    sortCardModal: {
+      isOpen: false,
+      options: [],
+    },
   },
 };
 
@@ -286,6 +293,8 @@ const duelSlice = createSlice({
     setCardModalCounters: setCardModalCountersImpl,
     setCheckCounter: setCheckCounterImpl,
     clearCheckCounter: clearCheckCounterImpl,
+    setSortCardModalIsOpen: setSortCardModalIsOpenImpl,
+    resetSortCardModal: resetSortCardModalImpl,
 
     // 通用的`Reducer`
     clearAllIdleInteractivities: clearAllIdleInteractivitiesImpl,
@@ -321,6 +330,7 @@ const duelSlice = createSlice({
     optionModalCase(builder);
     checkCardModalV2Case(builder);
     checkCardModalV3Case(builder);
+    sortCardModalCase(builder);
   },
 });
 
@@ -401,6 +411,8 @@ export const {
   setCardModalCounters,
   setCheckCounter,
   clearCheckCounter,
+  setSortCardModalIsOpen,
+  resetSortCardModal,
 } = duelSlice.actions;
 export const selectDuelHsStart = (state: RootState) => {
   return state.duel.meInitInfo != null;

src/reducers/duel/modal/mod.ts

@@ -103,6 +103,14 @@ export interface ModalState {
       max: number;
     }[];
   };
+  // 卡牌排序弹窗
+  sortCardModal: {
+    isOpen: boolean;
+    options: {
+      meta: CardMeta;
+      response: number;
+    }[];
+  };
 }
 
 export * from "./cardModalSlice";
@@ -114,3 +122,4 @@ export * from "./optionModalSlice";
 export * from "./checkCardModalV2Slice";
 export * from "./checkCardModalV3Slice";
 export * from "./checkCounterModalSlice";
+export * from "./sortCardModalSlice";

src/reducers/duel/modal/sortCardModalSlice.ts

+import {
+  ActionReducerMapBuilder,
+  CaseReducer,
+  createAsyncThunk,
+} from "@reduxjs/toolkit";
+import { fetchCard } from "../../../api/cards";
+import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
+import { RootState } from "../../../store";
+import { DuelReducer } from "../generic";
+import { DuelState } from "../mod";
+type SortCard = ReturnType<
+  typeof ygopro.StocGameMessage.MsgSortCard.Info.prototype.toObject
+>;
+
+export const setSortCardModalIsOpenImpl: DuelReducer<boolean> = (
+  state,
+  action
+) => {
+  state.modalState.sortCardModal.isOpen = action.payload;
+};
+
+export const resetSortCardModalImpl: CaseReducer<DuelState> = (state) => {
+  state.modalState.sortCardModal.isOpen = false;
+  state.modalState.sortCardModal.options = [];
+};
+
+export const fetchSortCardMeta = createAsyncThunk(
+  "duel/fetchSortCardMeta",
+  async (param: SortCard) => {
+    const meta = await fetchCard(param.code!, true);
+    return {
+      meta,
+      response: param.response!,
+    };
+  }
+);
+
+export const sortCardModalCase = (
+  builder: ActionReducerMapBuilder<DuelState>
+) => {
+  // 这里更合理的做法是`pending`的时候先更新`options`，等`meta`数据返回后再异步更新`meta`
+  builder.addCase(fetchSortCardMeta.fulfilled, (state, action) => {
+    state.modalState.sortCardModal.options.push(action.payload);
+  });
+};
+
+export const selectSortCardModal = (state: RootState) =>
+  state.duel.modalState.sortCardModal;

src/service/duel/sortCard.ts

 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { fetchSortCardMeta } from "../../reducers/duel/modal/sortCardModalSlice";
 import { AppDispatch } from "../../store";
 import MsgSortCard = ygopro.StocGameMessage.MsgSortCard;
 
 export default (sortCard: MsgSortCard, dispatch: AppDispatch) => {
-  console.log(sortCard);
+  for (const option of sortCard.options) {
+    dispatch(fetchSortCardMeta(option.toObject()));
+  }
 };