generic

src/reducers/duel/cemeretySlice.ts

@@ -6,13 +6,15 @@ import {
 } 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";
+import {
+  createAsyncMetaThunk,
+  DuelFieldState,
+  extendState,
+  extendMeta,
+} from "./generic";
 
-export interface CemeteryState {
-  cemetery: CardState[];
-}
+export interface CemeteryState extends DuelFieldState {}
 
 // 初始化墓地状态
 export const initCemeteryImpl: CaseReducer<DuelState, PayloadAction<number>> = (
@@ -21,9 +23,9 @@ export const initCemeteryImpl: CaseReducer<DuelState, PayloadAction<number>> = (
 ) => {
   const player = action.payload;
   if (judgeSelf(player, state)) {
-    state.meCemetery = { cemetery: [] };
+    state.meCemetery = { inner: [] };
   } else {
-    state.opCemetery = { cemetery: [] };
+    state.opCemetery = { inner: [] };
   }
 };
 
@@ -47,17 +49,9 @@ export const cemeteryCase = (builder: ActionReducerMapBuilder<DuelState>) => {
       idleInteractivities: [],
     };
     if (judgeSelf(controler, state)) {
-      if (state.meCemetery) {
-        state.meCemetery.cemetery.push(newCemetery);
-      } else {
-        state.meCemetery = { cemetery: [newCemetery] };
-      }
+      extendState(state.meCemetery, newCemetery);
     } else {
-      if (state.opCemetery) {
-        state.opCemetery.cemetery.push(newCemetery);
-      } else {
-        state.opCemetery = { cemetery: [newCemetery] };
-      }
+      extendState(state.opCemetery, newCemetery);
     }
   });
   builder.addCase(fetchCemeteryMeta.fulfilled, (state, action) => {
@@ -66,26 +60,14 @@ export const cemeteryCase = (builder: ActionReducerMapBuilder<DuelState>) => {
     const meta = action.payload.meta;
 
     if (judgeSelf(controler, state)) {
-      if (state.meCemetery) {
-        for (const cemetery of state.meCemetery.cemetery) {
-          if (cemetery.location.sequence == sequence) {
-            cemetery.occupant = meta;
-          }
-        }
-      }
+      extendMeta(state.meCemetery, meta, sequence);
     } else {
-      if (state.opCemetery) {
-        for (const cemetery of state.opCemetery.cemetery) {
-          if (cemetery.location.sequence == sequence) {
-            cemetery.occupant = meta;
-          }
-        }
-      }
+      extendMeta(state.opCemetery, meta, sequence);
     }
   });
 };
 
 export const selectMeCemetery = (state: RootState) =>
-  state.duel.meCemetery || { cemetery: [] };
+  state.duel.meCemetery || { inner: [] };
 export const selectOpCemetery = (state: RootState) =>
-  state.duel.opCemetery || { cemetery: [] };
+  state.duel.opCemetery || { inner: [] };

src/reducers/duel/exclusionSlice.ts

@@ -6,13 +6,15 @@ import {
 } 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";
+import {
+  createAsyncMetaThunk,
+  DuelFieldState,
+  extendState,
+  extendMeta,
+} from "./generic";
 
-export interface ExclusionState {
-  exclusion: CardState[];
-}
+export interface ExclusionState extends DuelFieldState {}
 
 // 初始化除外区状态
 export const initExclusionImpl: CaseReducer<
@@ -21,9 +23,9 @@ export const initExclusionImpl: CaseReducer<
 > = (state, action) => {
   const player = action.payload;
   if (judgeSelf(player, state)) {
-    state.meExclusion = { exclusion: [] };
+    state.meExclusion = { inner: [] };
   } else {
-    state.opExclusion = { exclusion: [] };
+    state.opExclusion = { inner: [] };
   }
 };
 
@@ -49,17 +51,9 @@ export const exclusionCase = (builder: ActionReducerMapBuilder<DuelState>) => {
       idleInteractivities: [],
     };
     if (judgeSelf(controler, state)) {
-      if (state.meExclusion) {
-        state.meExclusion.exclusion.push(newExclusion);
-      } else {
-        state.meExclusion = { exclusion: [newExclusion] };
-      }
+      extendState(state.meExclusion, newExclusion);
     } else {
-      if (state.opExclusion) {
-        state.opExclusion.exclusion.push(newExclusion);
-      } else {
-        state.opExclusion = { exclusion: [newExclusion] };
-      }
+      extendState(state.opExclusion, newExclusion);
     }
   });
   builder.addCase(fetchExclusionMeta.fulfilled, (state, action) => {
@@ -68,26 +62,12 @@ export const exclusionCase = (builder: ActionReducerMapBuilder<DuelState>) => {
     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;
-          }
-        }
-      }
+      extendMeta(state.meExclusion, meta, sequence);
     } else {
-      if (state.opExclusion) {
-        for (const exclusion of state.opExclusion.exclusion) {
-          if (exclusion.location.sequence == sequence) {
-            exclusion.occupant = meta;
-          }
-        }
-      }
+      extendMeta(state.opExclusion, meta, sequence);
     }
   });
 };
 
-export const selectMeExclusion = (state: RootState) =>
-  state.duel.meExclusion || { exclusion: [] };
-export const selectopExclusion = (state: RootState) =>
-  state.duel.opExclusion || { exclusion: [] };
+export const selectMeExclusion = (state: RootState) => state.duel.meExclusion;
+export const selectopExclusion = (state: RootState) => state.duel.opExclusion;

src/reducers/duel/generic.ts

@@ -2,6 +2,11 @@ import { AsyncThunk, createAsyncThunk } from "@reduxjs/toolkit";
 import { CardMeta } from "../../api/cards";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { fetchCard } from "../../api/cards";
+import { DuelState } from "./mod";
+
+export interface DuelFieldState {
+  inner: CardState[];
+}
 
 export interface CardState {
   occupant?: CardMeta; // 占据此位置的卡牌元信息
@@ -76,3 +81,44 @@ export function createAsyncMetaThunk(name: string): AsyncThunk<
     }
   );
 }
+
+export function extendState<T extends DuelFieldState>(
+  state: T | undefined,
+  newState: CardState
+) {
+  if (state) {
+    state.inner.push(newState);
+  }
+}
+
+export function extendOccupant<T extends DuelFieldState>(
+  state: T | undefined,
+  newMeta: CardMeta,
+  sequence: number,
+  position?: ygopro.CardPosition
+) {
+  if (state) {
+    for (const item of state.inner) {
+      if (item.location.sequence == sequence) {
+        item.occupant = newMeta;
+        if (position) {
+          item.location.position = position;
+        }
+      }
+    }
+  }
+}
+
+export function extendMeta<T extends DuelFieldState>(
+  state: T | undefined,
+  newMeta: CardMeta,
+  sequence: number
+) {
+  if (state) {
+    for (const item of state.inner) {
+      if (item.location.sequence == sequence) {
+        item.occupant = newMeta;
+      }
+    }
+  }
+}

src/reducers/duel/magicSlice.ts

@@ -2,18 +2,19 @@ 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, createAsyncMetaThunk } from "./generic";
+import {
+  InteractType,
+  createAsyncMetaThunk,
+  DuelFieldState,
+  extendOccupant,
+} from "./generic";
 
-export interface MagicState {
-  magics: CardState[];
-}
+export interface MagicState extends DuelFieldState {}
 
 // 初始化自己的魔法陷阱区状态
 export const initMagicsImpl: CaseReducer<DuelState, PayloadAction<number>> = (
@@ -22,7 +23,7 @@ export const initMagicsImpl: CaseReducer<DuelState, PayloadAction<number>> = (
 ) => {
   const player = action.payload;
   const magics = {
-    magics: [
+    inner: [
       {
         location: {
           controler: player,
@@ -82,7 +83,7 @@ export const addMagicPlaceInteractivitiesImpl: CaseReducer<
 
   const magics = judgeSelf(controler, state) ? state.meMagics : state.opMagics;
   if (magics) {
-    for (const magic of magics.magics) {
+    for (const magic of magics.inner) {
       if (magic.location.sequence == sequence) {
         magic.placeInteractivities = {
           interactType: InteractType.PLACE_SELECTABLE,
@@ -106,16 +107,14 @@ export const clearMagicPlaceInteractivitiesImpl: CaseReducer<
   const magics = judgeSelf(player, state) ? state.meMagics : state.opMagics;
 
   if (magics) {
-    for (const magic of magics.magics) {
+    for (const magic of magics.inner) {
       magic.placeInteractivities = undefined;
     }
   }
 };
 
 // 增加魔法陷阱
-export const fetchMagicMeta = createAsyncMetaThunk(
-  "duel/fetchMagicMeta",
-);
+export const fetchMagicMeta = createAsyncMetaThunk("duel/fetchMagicMeta");
 
 export const magicCase = (builder: ActionReducerMapBuilder<DuelState>) => {
   builder.addCase(fetchMagicMeta.pending, (state, action) => {
@@ -127,23 +126,9 @@ export const magicCase = (builder: ActionReducerMapBuilder<DuelState>) => {
 
     const meta = { id: code, data: {}, text: {} };
     if (judgeSelf(controler, state)) {
-      if (state.meMagics) {
-        for (const magic of state.meMagics.magics) {
-          if (magic.location.sequence == sequence) {
-            magic.occupant = meta;
-            magic.location.position = position;
-          }
-        }
-      }
+      extendOccupant(state.meMagics, meta, sequence, position);
     } else {
-      if (state.opMagics) {
-        for (const magic of state.opMagics.magics) {
-          if (magic.location.sequence == sequence) {
-            magic.occupant = meta;
-            magic.location.position = position;
-          }
-        }
-      }
+      extendOccupant(state.opMagics, meta, sequence, position);
     }
   });
   builder.addCase(fetchMagicMeta.fulfilled, (state, action) => {
@@ -152,26 +137,14 @@ export const magicCase = (builder: ActionReducerMapBuilder<DuelState>) => {
     const meta = action.payload.meta;
 
     if (judgeSelf(controler, state)) {
-      if (state.meMagics) {
-        for (const magic of state.meMagics.magics) {
-          if (magic.location.sequence == sequence) {
-            magic.occupant = meta;
-          }
-        }
-      }
+      extendOccupant(state.meMagics, meta, sequence);
     } else {
-      if (state.opMagics) {
-        for (const magic of state.opMagics.magics) {
-          if (magic.location.sequence == sequence) {
-            magic.occupant = meta;
-          }
-        }
-      }
+      extendOccupant(state.opMagics, meta, sequence);
     }
   });
 };
 
 export const selectMeMagics = (state: RootState) =>
-  state.duel.meMagics || { magics: [] };
+  state.duel.meMagics || { inner: [] };
 export const selectOpMagics = (state: RootState) =>
-  state.duel.opMagics || { magics: [] };
+  state.duel.opMagics || { inner: [] };

src/reducers/duel/monstersSlice.ts

@@ -7,11 +7,14 @@ import {
 import { DuelState } from "./mod";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { RootState } from "../../store";
-import { CardState, InteractType, createAsyncMetaThunk } from "./generic";
+import {
+  DuelFieldState,
+  InteractType,
+  createAsyncMetaThunk,
+  extendOccupant,
+} from "./generic";
 
-export interface MonsterState {
-  monsters: CardState[];
-}
+export interface MonsterState extends DuelFieldState {}
 
 // 初始化怪兽区状态
 export const initMonstersImpl: CaseReducer<DuelState, PayloadAction<number>> = (
@@ -20,7 +23,7 @@ export const initMonstersImpl: CaseReducer<DuelState, PayloadAction<number>> = (
 ) => {
   const player = action.payload;
   const monsters = {
-    monsters: [
+    inner: [
       {
         location: {
           controler: player,
@@ -82,7 +85,7 @@ export const addMonsterPlaceInteractivitiesImpl: CaseReducer<
     ? state.meMonsters
     : state.opMonsters;
   if (monsters) {
-    for (const monster of monsters.monsters) {
+    for (const monster of monsters.inner) {
       if (monster.location.sequence == sequence) {
         monster.placeInteractivities = {
           interactType: InteractType.PLACE_SELECTABLE,
@@ -108,7 +111,7 @@ export const clearMonsterPlaceInteractivitiesImpl: CaseReducer<
     : state.opMonsters;
 
   if (monsters) {
-    for (const monster of monsters.monsters) {
+    for (const monster of monsters.inner) {
       monster.placeInteractivities = undefined;
     }
   }
@@ -127,23 +130,9 @@ export const monsterCase = (builder: ActionReducerMapBuilder<DuelState>) => {
 
     const meta = { id: code, data: {}, text: {} };
     if (judgeSelf(controler, state)) {
-      if (state.meMonsters) {
-        for (const monster of state.meMonsters.monsters) {
-          if (monster.location.sequence == sequence) {
-            monster.occupant = meta;
-            monster.location.position = position;
-          }
-        }
-      }
+      extendOccupant(state.meMonsters, meta, sequence, position);
     } else {
-      if (state.opMonsters) {
-        for (const monster of state.opMonsters.monsters) {
-          if (monster.location.sequence == sequence) {
-            monster.occupant = meta;
-            monster.location.position = position;
-          }
-        }
-      }
+      extendOccupant(state.opMonsters, meta, sequence, position);
     }
   });
   builder.addCase(fetchMonsterMeta.fulfilled, (state, action) => {
@@ -152,26 +141,14 @@ export const monsterCase = (builder: ActionReducerMapBuilder<DuelState>) => {
     const meta = action.payload.meta;
 
     if (judgeSelf(controler, state)) {
-      if (state.meMonsters) {
-        for (const monster of state.meMonsters.monsters) {
-          if (monster.location.sequence == sequence) {
-            monster.occupant = meta;
-          }
-        }
-      }
+      extendOccupant(state.meMonsters, meta, sequence);
     } else {
-      if (state.opMonsters) {
-        for (const monster of state.opMonsters.monsters) {
-          if (monster.location.sequence == sequence) {
-            monster.occupant = meta;
-          }
-        }
-      }
+      extendOccupant(state.opMonsters, meta, sequence);
     }
   });
 };
 
 export const selectMeMonsters = (state: RootState) =>
-  state.duel.meMonsters || { monsters: [] };
+  state.duel.meMonsters || { inner: [] };
 export const selectOpMonsters = (state: RootState) =>
-  state.duel.opMonsters || { monsters: [] };
+  state.duel.opMonsters || { inner: [] };

src/ui/Duel/cemetery.tsx

@@ -18,8 +18,8 @@ const shape = CONFIG.CemeterySlotShape();
 const depth = 0.02;
 
 const Cemeteries = () => {
-  const meCemetery = useAppSelector(selectMeCemetery).cemetery;
-  const opCemetery = useAppSelector(selectOpCemetery).cemetery;
+  const meCemetery = useAppSelector(selectMeCemetery).inner;
+  const opCemetery = useAppSelector(selectOpCemetery).inner;
 
   return (
     <>

src/ui/Duel/magics.tsx

@@ -22,9 +22,9 @@ const gap = 1.05;
 const shape = CONFIG.CardSlotShape();
 
 const Magics = () => {
-  const meMagics = useAppSelector(selectMeMagics).magics;
+  const meMagics = useAppSelector(selectMeMagics).inner;
   const meMagicPositions = magicPositions(0, meMagics);
-  const opMagics = useAppSelector(selectOpMagics).magics;
+  const opMagics = useAppSelector(selectOpMagics).inner;
   const opMagicPositions = magicPositions(1, opMagics);
 
   return (

src/ui/Duel/monsters.tsx

@@ -26,9 +26,9 @@ const left = -2.15; // TODO: config
 const gap = 1.05;
 
 const Monsters = () => {
-  const meMonsters = useAppSelector(selectMeMonsters).monsters;
+  const meMonsters = useAppSelector(selectMeMonsters).inner;
   const meMonsterPositions = monsterPositions(0, meMonsters);
-  const opMonsters = useAppSelector(selectOpMonsters).monsters;
+  const opMonsters = useAppSelector(selectOpMonsters).inner;
   const opMonsterPositions = monsterPositions(1, opMonsters);
 
   return (