add createAsyncMetaThunk and exclusionSlice.ts

src/reducers/duel/cemeretySlice.ts

@@ -2,14 +2,13 @@ import { judgeSelf } from "./util";
 import {
   PayloadAction,
   CaseReducer,
-  createAsyncThunk,
   ActionReducerMapBuilder,
 } from "@reduxjs/toolkit";
 import { DuelState } from "./mod";
 import { RootState } from "../../store";
-import { fetchCard } from "../../api/cards";
 import { CardState } from "./generic";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { createAsyncMetaThunk } from "./generic";
 
 export interface CemeteryState {
   cemetery: CardState[];
@@ -29,21 +28,7 @@ export const initCemeteryImpl: CaseReducer<DuelState, PayloadAction<number>> = (
 };
 
 // 增加墓地
-export const fetchCemeteryMeta = createAsyncThunk(
-  "duel/fetchCemeteryMeta",
-  async (param: { controler: number; sequence: number; code: number }) => {
-    const code = param.code;
-
-    const meta = await fetchCard(code);
-    const response = {
-      controler: param.controler,
-      sequence: param.sequence,
-      meta,
-    };
-
-    return response;
-  }
-);
+export const fetchCemeteryMeta = createAsyncMetaThunk("duel/fetchCemeteryMeta");
 
 export const cemeteryCase = (builder: ActionReducerMapBuilder<DuelState>) => {
   builder.addCase(fetchCemeteryMeta.pending, (state, action) => {

src/reducers/duel/exclusionSlice.ts

+import { judgeSelf } from "./util";
+import {
+  PayloadAction,
+  CaseReducer,
+  ActionReducerMapBuilder,
+} from "@reduxjs/toolkit";
+import { DuelState } from "./mod";
+import { RootState } from "../../store";
+import { CardState } from "./generic";
+import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { createAsyncMetaThunk } from "./generic";
+
+export interface ExclusionState {
+  exclusion: CardState[];
+}
+
+// 初始化除外区状态
+export const initExclusionImpl: CaseReducer<
+  DuelState,
+  PayloadAction<number>
+> = (state, action) => {
+  const player = action.payload;
+  if (judgeSelf(player, state)) {
+    state.meExclusion = { exclusion: [] };
+  } else {
+    state.opExclusion = { exclusion: [] };
+  }
+};
+
+// 增加除外区
+export const fetchExclusionMeta = createAsyncMetaThunk(
+  "duel/fetchExclusionMeta"
+);
+
+export const exclusionCase = (builder: ActionReducerMapBuilder<DuelState>) => {
+  builder.addCase(fetchExclusionMeta.pending, (state, action) => {
+    // Meta结果没返回之前先更新`ID`
+    const controler = action.meta.arg.controler;
+    const sequence = action.meta.arg.sequence;
+    const code = action.meta.arg.code;
+
+    const newExclusion = {
+      occupant: { id: code, data: {}, text: {} },
+      location: {
+        controler,
+        location: ygopro.CardZone.REMOVED,
+        sequence,
+      },
+      idleInteractivities: [],
+    };
+    if (judgeSelf(controler, state)) {
+      if (state.meExclusion) {
+        state.meExclusion.exclusion.push(newExclusion);
+      } else {
+        state.meExclusion = { exclusion: [newExclusion] };
+      }
+    } else {
+      if (state.opExclusion) {
+        state.opExclusion.exclusion.push(newExclusion);
+      } else {
+        state.opExclusion = { exclusion: [newExclusion] };
+      }
+    }
+  });
+  builder.addCase(fetchExclusionMeta.fulfilled, (state, action) => {
+    const controler = action.payload.controler;
+    const sequence = action.payload.sequence;
+    const meta = action.payload.meta;
+
+    if (judgeSelf(controler, state)) {
+      if (state.meExclusion) {
+        for (const exclusion of state.meExclusion.exclusion) {
+          if (exclusion.location.sequence == sequence) {
+            exclusion.occupant = meta;
+          }
+        }
+      }
+    } else {
+      if (state.opExclusion) {
+        for (const exclusion of state.opExclusion.exclusion) {
+          if (exclusion.location.sequence == sequence) {
+            exclusion.occupant = meta;
+          }
+        }
+      }
+    }
+  });
+};
+
+export const selectMeExclusion = (state: RootState) =>
+  state.duel.meExclusion || { exclusion: [] };
+export const selectopExclusion = (state: RootState) =>
+  state.duel.opExclusion || { exclusion: [] };

src/reducers/duel/generic.ts

+import { AsyncThunk, createAsyncThunk } from "@reduxjs/toolkit";
 import { CardMeta } from "../../api/cards";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { fetchCard } from "../../api/cards";
 
 export interface CardState {
   occupant?: CardMeta; // 占据此位置的卡牌元信息
@@ -42,3 +44,35 @@ export interface Interactivity<T> {
   // 用户点击后，需要回传给服务端的`response`
   response: T;
 }
+
+export function createAsyncMetaThunk(name: string): AsyncThunk<
+  { controler: number; sequence: number; meta: CardMeta },
+  {
+    controler: number;
+    sequence: number;
+    position?: ygopro.CardPosition;
+    code: number;
+  },
+  {}
+> {
+  return createAsyncThunk(
+    name,
+    async (param: {
+      controler: number;
+      sequence: number;
+      position?: ygopro.CardPosition;
+      code: number;
+    }) => {
+      const code = param.code;
+
+      const meta = await fetchCard(code);
+      const response = {
+        controler: param.controler,
+        sequence: param.sequence,
+        meta,
+      };
+
+      return response;
+    }
+  );
+}

src/reducers/duel/magicSlice.ts

@@ -9,7 +9,7 @@ import { DuelState } from "./mod";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { RootState } from "../../store";
 import { fetchCard } from "../../api/cards";
-import { CardState, InteractType } from "./generic";
+import { CardState, InteractType, createAsyncMetaThunk } from "./generic";
 
 export interface MagicState {
   magics: CardState[];
@@ -113,25 +113,8 @@ export const clearMagicPlaceInteractivitiesImpl: CaseReducer<
 };
 
 // 增加魔法陷阱
-export const fetchMagicMeta = createAsyncThunk(
+export const fetchMagicMeta = createAsyncMetaThunk(
   "duel/fetchMagicMeta",
-  async (param: {
-    controler: number;
-    sequence: number;
-    position: ygopro.CardPosition;
-    code: number;
-  }) => {
-    const code = param.code;
-
-    const meta = await fetchCard(code);
-    const response = {
-      controler: param.controler,
-      sequence: param.sequence,
-      meta,
-    };
-
-    return response;
-  }
 );
 
 export const magicCase = (builder: ActionReducerMapBuilder<DuelState>) => {

src/reducers/duel/mod.ts

@@ -56,6 +56,11 @@ import {
   magicCase,
 } from "./magicSlice";
 import { CemeteryState, initCemeteryImpl, cemeteryCase } from "./cemeretySlice";
+import {
+  ExclusionState,
+  initExclusionImpl,
+  exclusionCase,
+} from "./exclusionSlice";
 
 export interface DuelState {
   selfType?: number;
@@ -74,6 +79,9 @@ export interface DuelState {
   meCemetery?: CemeteryState; // 自己的墓地状态
   opCemetery?: CemeteryState; // 对手的墓地状态
 
+  meExclusion?: ExclusionState; // 自己的除外区状态
+  opExclusion?: ExclusionState; // 对手的除外区状态
+
   meTimeLimit?: TimeLimit; // 自己的计时
   opTimeLimit?: TimeLimit; // 对手的计时
 
@@ -128,6 +136,9 @@ const duelSlice = createSlice({
     // 墓地相关`Reducer`
     initCemetery: initCemeteryImpl,
 
+    // 除外区相关`Reducer`
+    initExclusion: initExclusionImpl,
+
     // UI相关`Reducer`
     setCardModalIsOpen: setCardModalIsOpenImpl,
     setCardModalText: setCardModalTextImpl,
@@ -154,6 +165,7 @@ const duelSlice = createSlice({
     monsterCase(builder);
     magicCase(builder);
     cemeteryCase(builder);
+    exclusionCase(builder);
     checkCardModalCase(builder);
     YesNoModalCase(builder);
     optionModalCase(builder);

src/reducers/duel/monstersSlice.ts

@@ -2,14 +2,12 @@ import { judgeSelf } from "./util";
 import {
   PayloadAction,
   CaseReducer,
-  createAsyncThunk,
   ActionReducerMapBuilder,
 } from "@reduxjs/toolkit";
 import { DuelState } from "./mod";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { RootState } from "../../store";
-import { fetchCard } from "../../api/cards";
-import { CardState, InteractType } from "./generic";
+import { CardState, InteractType, createAsyncMetaThunk } from "./generic";
 
 export interface MonsterState {
   monsters: CardState[];
@@ -117,26 +115,7 @@ export const clearMonsterPlaceInteractivitiesImpl: CaseReducer<
 };
 
 // 增加怪兽
-export const fetchMonsterMeta = createAsyncThunk(
-  "duel/fetchMonsterMeta",
-  async (param: {
-    controler: number;
-    sequence: number;
-    position: ygopro.CardPosition;
-    code: number;
-  }) => {
-    const code = param.code;
-
-    const meta = await fetchCard(code);
-    const response = {
-      controler: param.controler,
-      sequence: param.sequence,
-      meta,
-    };
-
-    return response;
-  }
-);
+export const fetchMonsterMeta = createAsyncMetaThunk("duel/fetchMonsterMeta");
 
 export const monsterCase = (builder: ActionReducerMapBuilder<DuelState>) => {
   builder.addCase(fetchMonsterMeta.pending, (state, action) => {