generic CardState

7ef855ab · chechunchi · c1c8620d · 7ef855ab · 7ef855ab · 7ef855ab
Commit 7ef855ab authored Jan 11, 2023 by chechunchi
15 changed files
--- a/src/reducers/duel/cemeretySlice.ts
+++ b/src/reducers/duel/cemeretySlice.ts
-import { judgeSelf, Cemetery } from "./util";
+import { judgeSelf } from "./util";
 import {
  PayloadAction,
  CaseReducer,
@@ -8,9 +8,11 @@ import {
 import { DuelState } from "./mod";
 import { RootState } from "../../store";
 import { fetchCard } from "../../api/cards";
+import { CardState } from "./generic";
+import { ygopro } from "../../api/ocgcore/idl/ocgcore";

 export interface CemeteryState {
-  cemetery: Cemetery[];
+  cemetery: CardState[];
 }

 // 初始化墓地状态
@@ -50,18 +52,26 @@ export const cemeteryCase = (builder: ActionReducerMapBuilder<DuelState>) => {
    const sequence = action.meta.arg.sequence;
    const code = action.meta.arg.code;

-    const meta = { id: code, data: {}, text: {} };
+    const newCemetery = {
+      occupant: { id: code, data: {}, text: {} },
+      location: new ygopro.CardLocation({
+        controler,
+        location: ygopro.CardZone.GRAVE,
+        sequence,
+      }),
+      idleInteractivities: [],
+    };
    if (judgeSelf(controler, state)) {
      if (state.meCemetery) {
-        state.meCemetery.cemetery.push({ sequence, meta });
+        state.meCemetery.cemetery.push(newCemetery);
      } else {
-        state.meCemetery = { cemetery: [{ sequence, meta }] };
+        state.meCemetery = { cemetery: [newCemetery] };
      }
    } else {
      if (state.opCemetery) {
-        state.opCemetery.cemetery.push({ sequence, meta });
+        state.opCemetery.cemetery.push(newCemetery);
      } else {
-        state.opCemetery = { cemetery: [{ sequence, meta }] };
+        state.opCemetery = { cemetery: [newCemetery] };
      }
    }
  });
@@ -73,16 +83,16 @@ export const cemeteryCase = (builder: ActionReducerMapBuilder<DuelState>) => {
    if (judgeSelf(controler, state)) {
      if (state.meCemetery) {
        for (const cemetery of state.meCemetery.cemetery) {
-          if (cemetery.sequence == sequence) {
-            cemetery.meta = meta;
+          if (cemetery.location.sequence == sequence) {
+            cemetery.occupant = meta;
          }
        }
      }
    } else {
      if (state.opCemetery) {
        for (const cemetery of state.opCemetery.cemetery) {
-          if (cemetery.sequence == sequence) {
-            cemetery.meta = meta;
+          if (cemetery.location.sequence == sequence) {
+            cemetery.occupant = meta;
          }
        }
      }

--- a/src/reducers/duel/generic.ts
+++ b/src/reducers/duel/generic.ts
@@ -4,7 +4,7 @@ import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 export interface CardState {
  occupant?: CardMeta; // 占据此位置的卡牌元信息
  location: ygopro.CardLocation; // 位置信息
-  idleInteractivities?: Interactivity<number>[]; // IDLE状态下的互动信息
+  idleInteractivities: Interactivity<number>[]; // IDLE状态下的互动信息
  placeInteractivities?: Interactivity<{
    controler: number;
    zone: ygopro.CardZone;

--- a/src/reducers/duel/handsSlice.ts
+++ b/src/reducers/duel/handsSlice.ts
@@ -7,11 +7,13 @@ import {
 import { DuelState } from "./mod";
 import { RootState } from "../../store";
 import { fetchCard, CardMeta } from "../../api/cards";
-import { judgeSelf, Hand, Interactivity } from "./util";
+import { judgeSelf } from "./util";
+import { CardState, Interactivity } from "./generic";
+import { ygopro } from "../../api/ocgcore/idl/ocgcore";

-export interface Hands {
+export interface HandState {
  // 注意：手牌的位置顺序是有约束的
-  cards: Hand[];
+  hands: CardState[];
 }

 // 增加手牌
@@ -42,24 +44,28 @@ export const handsCase = (builder: ActionReducerMapBuilder<DuelState>) => {
    const player = action.meta.arg[0];
    const ids = action.meta.arg[1];

-    const cards = ids.map((id) => {
+    const cards = ids.map((id, idx) => {
      return {
-        meta: { id, data: {}, text: {} },
-        transform: {},
-        interactivities: [],
+        occupant: { id, data: {}, text: {} },
+        location: new ygopro.CardLocation({
+          controler: player,
+          location: ygopro.CardZone.HAND,
+          sequence: idx,
+        }),
+        idleInteractivities: [],
      };
    });
    if (judgeSelf(player, state)) {
      if (state.meHands) {
-        state.meHands.cards = state.meHands.cards.concat(cards);
+        state.meHands.hands = state.meHands.hands.concat(cards);
      } else {
-        state.meHands = { cards };
+        state.meHands = { hands: cards };
      }
    } else {
      if (state.opHands) {
-        state.opHands.cards = state.opHands.cards.concat(cards);
+        state.opHands.hands = state.opHands.hands.concat(cards);
      } else {
-        state.opHands = { cards };
+        state.opHands = { hands: cards };
      }
    }
  });
@@ -70,10 +76,10 @@ export const handsCase = (builder: ActionReducerMapBuilder<DuelState>) => {

    const hands = judgeSelf(player, state) ? state.meHands : state.opHands;
    if (hands) {
-      for (let hand of hands.cards) {
+      for (let hand of hands.hands) {
        for (let meta of metas) {
-          if (hand.meta.id === meta.id) {
-            hand.meta = meta;
+          if (hand.occupant?.id === meta.id) {
+            hand.occupant = meta;
          }
        }
      }
@@ -82,7 +88,7 @@ export const handsCase = (builder: ActionReducerMapBuilder<DuelState>) => {
 };

 // 清空手牌互动性
-export const clearHandsInteractivityImpl: CaseReducer<
+export const clearHandsIdleInteractivityImpl: CaseReducer<
  DuelState,
  PayloadAction<number>
 > = (state, action) => {
@@ -91,18 +97,18 @@ export const clearHandsInteractivityImpl: CaseReducer<
  const hands = judgeSelf(player, state) ? state.meHands : state.opHands;

  if (hands) {
-    for (let hand of hands.cards) {
-      hand.interactivities = [];
+    for (let hand of hands.hands) {
+      hand.idleInteractivities = [];
    }
  }
 };

 // 添加手牌互动性
-export const addHandsInteractivityImpl: CaseReducer<
+export const addHandsIdleInteractivityImpl: CaseReducer<
  DuelState,
  PayloadAction<{
    player: number;
-    index: number;
+    sequence: number;
    interactivity: Interactivity<number>;
  }>
 > = (state, action) => {
@@ -110,10 +116,10 @@ export const addHandsInteractivityImpl: CaseReducer<

  const hands = judgeSelf(player, state) ? state.meHands : state.opHands;
  if (hands) {
-    const index = action.payload.index;
+    const sequence = action.payload.sequence;
    const interactivity = action.payload.interactivity;

-    hands.cards[index].interactivities.push(interactivity);
+    hands.hands[sequence].idleInteractivities.push(interactivity);
  }
 };

@@ -127,11 +133,13 @@ export const removeHandImpl: CaseReducer<

  const hands = judgeSelf(controler, state) ? state.meHands : state.opHands;
  if (hands) {
-    hands.cards = hands.cards.filter((_, idx) => idx != sequence);
+    hands.hands = hands.hands.filter(
+      (card) => card.location.sequence != sequence
+    );
  }
 };

 export const selectMeHands = (state: RootState) =>
-  state.duel.meHands || { cards: [] };
+  state.duel.meHands || { hands: [] };
 export const selectOpHands = (state: RootState) =>
-  state.duel.opHands || { cards: [] };
+  state.duel.opHands || { hands: [] };
--- a/src/reducers/duel/magicSlice.ts
+++ b/src/reducers/duel/magicSlice.ts
-import { judgeSelf, Magic, InteractType } from "./util";
+import { judgeSelf } from "./util";
 import {
  PayloadAction,
  CaseReducer,
@@ -9,9 +9,10 @@ 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";

 export interface MagicState {
-  magics: Magic[];
+  magics: CardState[];
 }

 // 初始化自己的魔法陷阱区状态
@@ -23,19 +24,44 @@ export const initMagicsImpl: CaseReducer<DuelState, PayloadAction<number>> = (
  const magics = {
    magics: [
      {
-        sequence: 0,
+        location: new ygopro.CardLocation({
+          controler: player,
+          location: ygopro.CardZone.SZONE,
+          sequence: 0,
+        }),
+        idleInteractivities: [],
      },
      {
-        sequence: 1,
+        location: new ygopro.CardLocation({
+          controler: player,
+          location: ygopro.CardZone.SZONE,
+          sequence: 1,
+        }),
+        idleInteractivities: [],
      },
      {
-        sequence: 2,
+        location: new ygopro.CardLocation({
+          controler: player,
+          location: ygopro.CardZone.SZONE,
+          sequence: 2,
+        }),
+        idleInteractivities: [],
      },
      {
-        sequence: 3,
+        location: new ygopro.CardLocation({
+          controler: player,
+          location: ygopro.CardZone.SZONE,
+          sequence: 3,
+        }),
+        idleInteractivities: [],
      },
      {
-        sequence: 4,
+        location: new ygopro.CardLocation({
+          controler: player,
+          location: ygopro.CardZone.SZONE,
+          sequence: 4,
+        }),
+        idleInteractivities: [],
      },
    ],
  };
@@ -47,7 +73,7 @@ export const initMagicsImpl: CaseReducer<DuelState, PayloadAction<number>> = (
  }
 };

-export const addMagicPlaceSelectAbleImpl: CaseReducer<
+export const addMagicPlaceInteractivitiesImpl: CaseReducer<
  DuelState,
  PayloadAction<[number, number]>
 > = (state, action) => {
@@ -57,8 +83,8 @@ export const addMagicPlaceSelectAbleImpl: CaseReducer<
  const magics = judgeSelf(controler, state) ? state.meMagics : state.opMagics;
  if (magics) {
    for (const magic of magics.magics) {
-      if (magic.sequence == sequence) {
-        magic.selectInfo = {
+      if (magic.location.sequence == sequence) {
+        magic.placeInteractivities = {
          interactType: InteractType.PLACE_SELECTABLE,
          response: {
            controler,
@@ -71,7 +97,7 @@ export const addMagicPlaceSelectAbleImpl: CaseReducer<
  }
 };

-export const clearMagicSelectInfoImpl: CaseReducer<
+export const clearMagicPlaceInteractivitiesImpl: CaseReducer<
  DuelState,
  PayloadAction<number>
 > = (state, action) => {
@@ -81,7 +107,7 @@ export const clearMagicSelectInfoImpl: CaseReducer<

  if (magics) {
    for (const magic of magics.magics) {
-      magic.selectInfo = undefined;
+      magic.placeInteractivities = undefined;
    }
  }
 };
@@ -120,18 +146,18 @@ export const magicCase = (builder: ActionReducerMapBuilder<DuelState>) => {
    if (judgeSelf(controler, state)) {
      if (state.meMagics) {
        for (const magic of state.meMagics.magics) {
-          if (magic.sequence == sequence) {
+          if (magic.location.sequence == sequence) {
            magic.occupant = meta;
-            magic.position = position;
+            magic.location.position = position;
          }
        }
      }
    } else {
      if (state.opMagics) {
        for (const magic of state.opMagics.magics) {
-          if (magic.sequence == sequence) {
+          if (magic.location.sequence == sequence) {
            magic.occupant = meta;
-            magic.position = position;
+            magic.location.position = position;
          }
        }
      }
@@ -145,7 +171,7 @@ export const magicCase = (builder: ActionReducerMapBuilder<DuelState>) => {
    if (judgeSelf(controler, state)) {
      if (state.meMagics) {
        for (const magic of state.meMagics.magics) {
-          if (magic.sequence == sequence) {
+          if (magic.location.sequence == sequence) {
            magic.occupant = meta;
          }
        }
@@ -153,7 +179,7 @@ export const magicCase = (builder: ActionReducerMapBuilder<DuelState>) => {
    } else {
      if (state.opMagics) {
        for (const magic of state.opMagics.magics) {
-          if (magic.sequence == sequence) {
+          if (magic.location.sequence == sequence) {
            magic.occupant = meta;
          }
        }

--- a/src/reducers/duel/mod.ts
+++ b/src/reducers/duel/mod.ts
@@ -7,10 +7,10 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { InitInfo, infoInitImpl } from "./initInfoSlice";
 import { TimeLimit, updateTimeLimitImpl } from "./timeLimit";
 import {
-  Hands,
+  HandState,
  handsCase,
-  clearHandsInteractivityImpl,
-  addHandsInteractivityImpl,
+  clearHandsIdleInteractivityImpl,
+  addHandsIdleInteractivityImpl,
  removeHandImpl,
 } from "./handsSlice";
 import { newTurnImpl } from "./turnSlice";
@@ -44,15 +44,15 @@ import {
 import {
  MonsterState,
  initMonstersImpl,
-  addMonsterPlaceSelectAbleImpl,
-  clearMonsterSelectInfoImpl,
+  addMonsterPlaceInteractivitiesImpl,
+  clearMonsterPlaceInteractivitiesImpl,
  monsterCase,
 } from "./monstersSlice";
 import {
  MagicState,
  initMagicsImpl,
-  addMagicPlaceSelectAbleImpl,
-  clearMagicSelectInfoImpl,
+  addMagicPlaceInteractivitiesImpl,
+  clearMagicPlaceInteractivitiesImpl,
  magicCase,
 } from "./magicSlice";
 import { CemeteryState, initCemeteryImpl, cemeteryCase } from "./cemeretySlice";
@@ -62,8 +62,8 @@ export interface DuelState {
  meInitInfo?: InitInfo; // 自己的初始状态
  opInitInfo?: InitInfo; // 对手的初始状态

-  meHands?: Hands; // 自己的手牌
-  opHands?: Hands; // 对手的手牌
+  meHands?: HandState; // 自己的手牌
+  opHands?: HandState; // 对手的手牌

  meMonsters?: MonsterState; // 自己的怪兽区状态
  opMonsters?: MonsterState; // 对手的怪兽区状态
@@ -111,19 +111,19 @@ const duelSlice = createSlice({
    updateTimeLimit: updateTimeLimitImpl,

    // 手牌相关`Reducer`
-    clearHandsInteractivity: clearHandsInteractivityImpl,
-    addHandsInteractivity: addHandsInteractivityImpl,
+    clearHandsIdleInteractivity: clearHandsIdleInteractivityImpl,
+    addHandsIdleInteractivity: addHandsIdleInteractivityImpl,
    removeHand: removeHandImpl,

    // 怪兽区相关`Reducer`
    initMonsters: initMonstersImpl,
-    addMonsterPlaceSelectAble: addMonsterPlaceSelectAbleImpl,
-    clearMonsterSelectInfo: clearMonsterSelectInfoImpl,
+    addMonsterPlaceInteractivities: addMonsterPlaceInteractivitiesImpl,
+    clearMonsterPlaceInteractivities: clearMonsterPlaceInteractivitiesImpl,

    // 魔法陷阱区相关`Reducer`
    initMagics: initMagicsImpl,
-    addMagicPlaceSelectAble: addMagicPlaceSelectAbleImpl,
-    clearMagicSelectInfo: clearMagicSelectInfoImpl,
+    addMagicPlaceInteractivities: addMagicPlaceInteractivitiesImpl,
+    clearMagicPlaceInteractivities: clearMagicPlaceInteractivitiesImpl,

    // 墓地相关`Reducer`
    initCemetery: initCemeteryImpl,
@@ -165,19 +165,19 @@ export const {
  infoInit,
  updateTurn,
  updatePhase,
-  clearHandsInteractivity,
-  addHandsInteractivity,
+  clearHandsIdleInteractivity,
+  addHandsIdleInteractivity,
  updateTimeLimit,
  setCardModalIsOpen,
  setCardModalText,
  setCardModalImgUrl,
  setCardModalInteractivies,
  initMonsters,
-  addMonsterPlaceSelectAble,
-  clearMonsterSelectInfo,
+  addMonsterPlaceInteractivities,
+  clearMonsterPlaceInteractivities,
  initMagics,
-  addMagicPlaceSelectAble,
-  clearMagicSelectInfo,
+  addMagicPlaceInteractivities,
+  clearMagicPlaceInteractivities,
  removeHand,
  initCemetery,
  setCardListModalIsOpen,

--- a/src/reducers/duel/monstersSlice.ts
+++ b/src/reducers/duel/monstersSlice.ts
-import { judgeSelf, Monster, InteractType } from "./util";
+import { judgeSelf } from "./util";
 import {
  PayloadAction,
  CaseReducer,
@@ -9,9 +9,10 @@ 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";

 export interface MonsterState {
-  monsters: Monster[];
+  monsters: CardState[];
 }

 // 初始化怪兽区状态
@@ -23,19 +24,44 @@ export const initMonstersImpl: CaseReducer<DuelState, PayloadAction<number>> = (
  const monsters = {
    monsters: [
      {
-        sequence: 0,
+        location: new ygopro.CardLocation({
+          controler: player,
+          location: ygopro.CardZone.MZONE,
+          sequence: 0,
+        }),
+        idleInteractivities: [],
      },
      {
-        sequence: 1,
+        location: new ygopro.CardLocation({
+          controler: player,
+          location: ygopro.CardZone.MZONE,
+          sequence: 1,
+        }),
+        idleInteractivities: [],
      },
      {
-        sequence: 2,
+        location: new ygopro.CardLocation({
+          controler: player,
+          location: ygopro.CardZone.MZONE,
+          sequence: 2,
+        }),
+        idleInteractivities: [],
      },
      {
-        sequence: 3,
+        location: new ygopro.CardLocation({
+          controler: player,
+          location: ygopro.CardZone.MZONE,
+          sequence: 3,
+        }),
+        idleInteractivities: [],
      },
      {
-        sequence: 4,
+        location: new ygopro.CardLocation({
+          controler: player,
+          location: ygopro.CardZone.MZONE,
+          sequence: 4,
+        }),
+        idleInteractivities: [],
      },
    ],
  };
@@ -47,7 +73,7 @@ export const initMonstersImpl: CaseReducer<DuelState, PayloadAction<number>> = (
  }
 };

-export const addMonsterPlaceSelectAbleImpl: CaseReducer<
+export const addMonsterPlaceInteractivitiesImpl: CaseReducer<
  DuelState,
  PayloadAction<[number, number]>
 > = (state, action) => {
@@ -59,8 +85,8 @@ export const addMonsterPlaceSelectAbleImpl: CaseReducer<
    : state.opMonsters;
  if (monsters) {
    for (const monster of monsters.monsters) {
-      if (monster.sequence == sequence) {
-        monster.selectInfo = {
+      if (monster.location.sequence == sequence) {
+        monster.placeInteractivities = {
          interactType: InteractType.PLACE_SELECTABLE,
          response: {
            controler,
@@ -73,7 +99,7 @@ export const addMonsterPlaceSelectAbleImpl: CaseReducer<
  }
 };

-export const clearMonsterSelectInfoImpl: CaseReducer<
+export const clearMonsterPlaceInteractivitiesImpl: CaseReducer<
  DuelState,
  PayloadAction<number>
 > = (state, action) => {
@@ -85,7 +111,7 @@ export const clearMonsterSelectInfoImpl: CaseReducer<

  if (monsters) {
    for (const monster of monsters.monsters) {
-      monster.selectInfo = undefined;
+      monster.placeInteractivities = undefined;
    }
  }
 };
@@ -124,18 +150,18 @@ export const monsterCase = (builder: ActionReducerMapBuilder<DuelState>) => {
    if (judgeSelf(controler, state)) {
      if (state.meMonsters) {
        for (const monster of state.meMonsters.monsters) {
-          if (monster.sequence == sequence) {
+          if (monster.location.sequence == sequence) {
            monster.occupant = meta;
-            monster.position = position;
+            monster.location.position = position;
          }
        }
      }
    } else {
      if (state.opMonsters) {
        for (const monster of state.opMonsters.monsters) {
-          if (monster.sequence == sequence) {
+          if (monster.location.sequence == sequence) {
            monster.occupant = meta;
-            monster.position = position;
+            monster.location.position = position;
          }
        }
      }
@@ -149,7 +175,7 @@ export const monsterCase = (builder: ActionReducerMapBuilder<DuelState>) => {
    if (judgeSelf(controler, state)) {
      if (state.meMonsters) {
        for (const monster of state.meMonsters.monsters) {
-          if (monster.sequence == sequence) {
+          if (monster.location.sequence == sequence) {
            monster.occupant = meta;
          }
        }
@@ -157,7 +183,7 @@ export const monsterCase = (builder: ActionReducerMapBuilder<DuelState>) => {
    } else {
      if (state.opMonsters) {
        for (const monster of state.opMonsters.monsters) {
-          if (monster.sequence == sequence) {
+          if (monster.location.sequence == sequence) {
            monster.occupant = meta;
          }
        }

--- a/src/reducers/duel/util.ts
+++ b/src/reducers/duel/util.ts
@@ -3,10 +3,8 @@
 *
 * */

-import { CardMeta } from "../../api/cards";
 import { DuelState } from "./mod";
 import { Draft } from "@reduxjs/toolkit";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";

 /*
 * 通过`player`和`selfType`判断是应该处理自己还是对手
@@ -24,53 +22,3 @@ export function judgeSelf(player: number, state: Draft<DuelState>): boolean {
    return false;
  }
 }
-
-export interface Hand {
-  meta: CardMeta;
-  interactivities: Interactivity<number>[];
-}
-
-export enum InteractType {
-  // 可普通召唤
-  SUMMON = 1,
-  // 可特殊召唤
-  SP_SUMMON = 2,
-  // 可改变表示形式
-  POS_CHANGE = 3,
-  // 可前场放置
-  MSET = 4,
-  // 可后场放置
-  SSET = 5,
-  // 可发动效果
-  ACTIVATE = 6,
-  // 可作为位置选择
-  PLACE_SELECTABLE = 7,
-}
-
-export interface Interactivity<T> {
-  interactType: InteractType;
-  // 如果`interactType`是`ACTIVATE`，这个字段是对应的效果编号
-  activateIndex?: number;
-  // 用户点击后，需要回传给服务端的`response`
-  response: T;
-}
-
-export interface SlotState {
-  sequence: number;
-  occupant?: CardMeta;
-  position?: ygopro.CardPosition;
-  selectInfo?: Interactivity<{
-    controler: number;
-    zone: ygopro.CardZone;
-    sequence: number;
-  }>;
-}
-
-export type Monster = SlotState;
-
-export type Magic = SlotState;
-
-export interface Cemetery {
-  sequence: number;
-  meta: CardMeta;
-}
--- a/src/service/duel/selectIdleCmd.ts
+++ b/src/service/duel/selectIdleCmd.ts
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { AppDispatch } from "../../store";
-import { InteractType } from "../../reducers/duel/util";
+import { InteractType } from "../../reducers/duel/generic";
 import {
-  clearHandsInteractivity,
-  addHandsInteractivity,
+  clearHandsIdleInteractivity,
+  addHandsIdleInteractivity,
 } from "../../reducers/duel/mod";
 import MsgSelectIdleCmd = ygopro.StocGameMessage.MsgSelectIdleCmd;

@@ -12,7 +12,7 @@ export default (selectIdleCmd: MsgSelectIdleCmd, dispatch: AppDispatch) => {
  const cmds = selectIdleCmd.idle_cmds;

  // 先清掉之前的手牌互动性
-  dispatch(clearHandsInteractivity(player));
+  dispatch(clearHandsIdleInteractivity(player));

  for (let cmd of cmds) {
    let interactType;
@@ -50,9 +50,9 @@ export default (selectIdleCmd: MsgSelectIdleCmd, dispatch: AppDispatch) => {
        if (interactType === InteractType.ACTIVATE) {
          // 发动效果会多一个字段
          dispatch(
-            addHandsInteractivity({
+            addHandsIdleInteractivity({
              player,
-              index: card_info.sequence,
+              sequence: card_info.sequence,
              interactivity: {
                interactType,
                activateIndex: data.effect_description,
@@ -62,9 +62,9 @@ export default (selectIdleCmd: MsgSelectIdleCmd, dispatch: AppDispatch) => {
          );
        } else if (interactType) {
          dispatch(
-            addHandsInteractivity({
+            addHandsIdleInteractivity({
              player,
-              index: card_info.sequence,
+              sequence: card_info.sequence,
              interactivity: { interactType, response: data.response },
            })
          );

--- a/src/service/duel/selectPlace.ts
+++ b/src/service/duel/selectPlace.ts
@@ -2,8 +2,8 @@ import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { AppDispatch } from "../../store";
 import MsgSelectPlace = ygopro.StocGameMessage.MsgSelectPlace;
 import {
-  addMonsterPlaceSelectAble,
-  addMagicPlaceSelectAble,
+  addMonsterPlaceInteractivities,
+  addMagicPlaceInteractivities,
 } from "../../reducers/duel/mod";

 export default (selectPlace: MsgSelectPlace, dispatch: AppDispatch) => {
@@ -16,12 +16,16 @@ export default (selectPlace: MsgSelectPlace, dispatch: AppDispatch) => {
  for (const place of selectPlace.places) {
    switch (place.zone) {
      case ygopro.CardZone.MZONE: {
-        dispatch(addMonsterPlaceSelectAble([place.controler, place.sequence]));
+        dispatch(
+          addMonsterPlaceInteractivities([place.controler, place.sequence])
+        );

        break;
      }
      case ygopro.CardZone.SZONE: {
-        dispatch(addMagicPlaceSelectAble([place.controler, place.sequence]));
+        dispatch(
+          addMagicPlaceInteractivities([place.controler, place.sequence])
+        );

        break;
      }

--- a/src/ui/Duel/cardModal.tsx
+++ b/src/ui/Duel/cardModal.tsx
@@ -10,7 +10,7 @@ import {
 } from "../../reducers/duel/modalSlice";
 import {
  setCardModalIsOpen,
-  clearHandsInteractivity,
+  clearHandsIdleInteractivity,
 } from "../../reducers/duel/mod";
 import { Modal, Card, Button } from "antd";
 import { sendSelectIdleCmdResponse } from "../../api/ocgcore/ocgHelper";
@@ -47,7 +47,7 @@ const CardModal = () => {
            onClick={() => {
              sendSelectIdleCmdResponse(interactive.response);
              dispatch(setCardModalIsOpen(false));
-              dispatch(clearHandsInteractivity(0));
+              dispatch(clearHandsIdleInteractivity(0));
            }}
          >
            {interactive.desc}

--- a/src/ui/Duel/cemetery.tsx
+++ b/src/ui/Duel/cemetery.tsx
 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
-import { Cemetery } from "../../reducers/duel/util";
+import { CardState } from "../../reducers/duel/generic";
 import {
  selectMeCemetery,
  selectOpCemetery,
@@ -38,7 +38,7 @@ const Cemeteries = () => {
 };

 const CCemetery = (props: {
-  state: Cemetery[];
+  state: CardState[];
  position: BABYLON.Vector3;
  rotation: BABYLON.Vector3;
 }) => {
@@ -52,9 +52,9 @@ const CCemetery = (props: {
          setCardListModalInfo(
            props.state.map((cemetery) => {
              return {
-                name: cemetery.meta.text.name,
-                desc: cemetery.meta.text.desc,
-                imgUrl: `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${cemetery.meta.id}.jpg`,
+                name: cemetery.occupant?.text.name,
+                desc: cemetery.occupant?.text.desc,
+                imgUrl: `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${cemetery.occupant?.id}.jpg`,
              };
            })
          )

--- a/src/ui/Duel/hands.tsx
+++ b/src/ui/Duel/hands.tsx
@@ -2,7 +2,7 @@ import * as BABYLON from "@babylonjs/core";
 import { useAppSelector } from "../../hook";
 import { selectMeHands, selectOpHands } from "../../reducers/duel/handsSlice";
 import * as CONFIG from "../../config/ui";
-import { Hand } from "../../reducers/duel/util";
+import { CardState } from "../../reducers/duel/generic";
 import {
  setCardModalImgUrl,
  setCardModalIsOpen,
@@ -22,9 +22,9 @@ const handShape = CONFIG.HandShape();
 const handRotation = CONFIG.HandRotation();

 const Hands = () => {
-  const meHands = useAppSelector(selectMeHands).cards;
+  const meHands = useAppSelector(selectMeHands).hands;
  const meHandPositions = handPositons(0, meHands);
-  const opHands = useAppSelector(selectOpHands).cards;
+  const opHands = useAppSelector(selectOpHands).hands;
  const opHandPositions = handPositons(1, opHands);

  return (
@@ -60,7 +60,7 @@ const Hands = () => {
 };

 const CHand = (props: {
-  state: Hand;
+  state: CardState;
  sequence: number;
  position: BABYLON.Vector3;
  rotation: BABYLON.Vector3;
@@ -108,15 +108,17 @@ const CHand = (props: {

  useClick(
    () => {
-      dispatch(setCardModalText([state.meta.text.name, state.meta.text.desc]));
+      dispatch(
+        setCardModalText([state.occupant?.text.name, state.occupant?.text.desc])
+      );
      dispatch(
        setCardModalImgUrl(
-          `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${state.meta.id}.jpg`
+          `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${state.occupant?.id}.jpg`
        )
      );
      dispatch(
        setCardModalInteractivies(
-          state.interactivities.map((interactive) => {
+          state.idleInteractivities.map((interactive) => {
            return {
              desc: interactTypeToString(interactive.interactType),
              response: interactive.response,
@@ -141,19 +143,25 @@ const CHand = (props: {
        position={spring.position}
        rotation={props.rotation}
        enableEdgesRendering
-        edgesWidth={state.interactivities.length == 0 ? 0 : edgesWidth}
+        edgesWidth={
+          state.idleInteractivities.length > 0 || state.placeInteractivities
+            ? edgesWidth
+            : 0
+        }
        edgesColor={edgesColor}
      >
        <animated.standardMaterial
          name={`hand-mat-${props.sequence}`}
-          diffuseTexture={new BABYLON.Texture(props.cover(state.meta.id))}
+          diffuseTexture={
+            new BABYLON.Texture(props.cover(state.occupant?.id || 0))
+          }
        />
      </animated.plane>
    </animated.transformNode>
  );
 };

-const handPositons = (player: number, hands: Hand[]) => {
+const handPositons = (player: number, hands: CardState[]) => {
  const gap = groundShape.width / (hands.length - 1);
  const x = (idx: number) =>
    player == 0 ? left + gap * idx : -left - gap * idx;

--- a/src/ui/Duel/magics.tsx
+++ b/src/ui/Duel/magics.tsx
@@ -2,13 +2,13 @@ import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
 import { selectMeMagics, selectOpMagics } from "../../reducers/duel/magicSlice";
 import { useClick } from "./hook";
-import { Magic } from "../../reducers/duel/util";
+import { CardState } from "../../reducers/duel/generic";
 import { store } from "../../store";
 import { useAppSelector } from "../../hook";
 import { useRef } from "react";
 import { sendSelectPlaceResponse } from "../../api/ocgcore/ocgHelper";
 import {
-  clearMagicSelectInfo,
+  clearMagicPlaceInteractivities,
  setCardModalImgUrl,
  setCardModalIsOpen,
  setCardModalText,
@@ -33,7 +33,7 @@ const Magics = () => {
        return (
          <CMagic
            state={magic}
-            key={magic.sequence}
+            key={magic.location.sequence}
            position={position}
            rotation={CONFIG.CardSlotRotation(false)}
          />
@@ -43,7 +43,7 @@ const Magics = () => {
        return (
          <CMagic
            state={magic}
-            key={magic.sequence}
+            key={magic.location.sequence}
            position={position}
            rotation={CONFIG.CardSlotRotation(true)}
          />
@@ -54,26 +54,26 @@ const Magics = () => {
 };

 const CMagic = (props: {
-  state: Magic;
+  state: CardState;
  position: BABYLON.Vector3;
  rotation: BABYLON.Vector3;
 }) => {
  const state = props.state;
  const planeRef = useRef(null);
  const faceDown =
-    state.position === ygopro.CardPosition.FACEDOWN ||
-    state.position === ygopro.CardPosition.FACEDOWN_ATTACK ||
-    state.position === ygopro.CardPosition.FACEDOWN_DEFENSE;
+    state.location.position === ygopro.CardPosition.FACEDOWN ||
+    state.location.position === ygopro.CardPosition.FACEDOWN_ATTACK ||
+    state.location.position === ygopro.CardPosition.FACEDOWN_DEFENSE;
  const edgesWidth = 2.0;
  const edgesColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Yellow());
  const dispatch = store.dispatch;

  useClick(
    (_event) => {
-      if (state.selectInfo) {
-        sendSelectPlaceResponse(state.selectInfo.response);
-        dispatch(clearMagicSelectInfo(0));
-        dispatch(clearMagicSelectInfo(1));
+      if (state.placeInteractivities) {
+        sendSelectPlaceResponse(state.placeInteractivities.response);
+        dispatch(clearMagicPlaceInteractivities(0));
+        dispatch(clearMagicPlaceInteractivities(1));
      } else if (state.occupant) {
        dispatch(
          setCardModalText([state.occupant.text.name, state.occupant.text.desc])
@@ -92,18 +92,22 @@ const CMagic = (props: {

  return (
    <plane
-      name={`magic-${state.sequence}`}
+      name={`magic-${state.location.sequence}`}
      ref={planeRef}
      width={shape.width}
      height={shape.height}
      position={props.position}
      rotation={props.rotation}
      enableEdgesRendering
-      edgesWidth={state.selectInfo ? edgesWidth : 0}
+      edgesWidth={
+        state.placeInteractivities || state.idleInteractivities.length > 0
+          ? edgesWidth
+          : 0
+      }
      edgesColor={edgesColor}
    >
      <standardMaterial
-        name={`magic-mat-${props.state.sequence}`}
+        name={`magic-mat-${props.state.location.sequence}`}
        diffuseTexture={
          state.occupant
            ? faceDown
@@ -121,13 +125,15 @@ const CMagic = (props: {
  );
 };

-const magicPositions = (player: number, magics: Magic[]) => {
+const magicPositions = (player: number, magics: CardState[]) => {
  const x = (sequence: number) =>
    player == 0 ? left + gap * sequence : -left - gap * sequence;
  const y = shape.depth / 2 + CONFIG.Floating;
  const z = player == 0 ? -2.6 : 2.6;

-  return magics.map((magic) => new BABYLON.Vector3(x(magic.sequence), y, z));
+  return magics.map(
+    (magic) => new BABYLON.Vector3(x(magic.location.sequence), y, z)
+  );
 };

 export default Magics;
--- a/src/ui/Duel/monsters.tsx
+++ b/src/ui/Duel/monsters.tsx
@@ -2,12 +2,12 @@ import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
 import { useClick } from "./hook";
 import { store } from "../../store";
-import { Monster } from "../../reducers/duel/util";
+import { CardState } from "../../reducers/duel/generic";
 import "react-babylonjs";
 import { useRef } from "react";
 import { sendSelectPlaceResponse } from "../../api/ocgcore/ocgHelper";
 import {
-  clearMonsterSelectInfo,
+  clearMonsterPlaceInteractivities,
  setCardModalImgUrl,
  setCardModalInteractivies,
  setCardModalIsOpen,
@@ -62,7 +62,7 @@ const Monsters = () => {
 };

 const CommonMonster = (props: {
-  state: Monster;
+  state: CardState;
  position: BABYLON.Vector3;
  rotation: BABYLON.Vector3;
  deffenseRotation: BABYLON.Vector3;
@@ -70,9 +70,9 @@ const CommonMonster = (props: {
  const planeRef = useRef(null);

  const rotation =
-    props.state.position === ygopro.CardPosition.DEFENSE ||
-    props.state.position === ygopro.CardPosition.FACEUP_DEFENSE ||
-    props.state.position === ygopro.CardPosition.FACEDOWN_DEFENSE
+    props.state.location.position === ygopro.CardPosition.DEFENSE ||
+    props.state.location.position === ygopro.CardPosition.FACEUP_DEFENSE ||
+    props.state.location.position === ygopro.CardPosition.FACEDOWN_DEFENSE
      ? props.deffenseRotation
      : props.rotation;
  const edgesWidth = 2.0;
@@ -80,16 +80,16 @@ const CommonMonster = (props: {
  const dispatch = store.dispatch;

  const faceDown =
-    props.state.position === ygopro.CardPosition.FACEDOWN_DEFENSE ||
-    props.state.position === ygopro.CardPosition.FACEDOWN_ATTACK ||
-    props.state.position === ygopro.CardPosition.FACEDOWN;
+    props.state.location.position === ygopro.CardPosition.FACEDOWN_DEFENSE ||
+    props.state.location.position === ygopro.CardPosition.FACEDOWN_ATTACK ||
+    props.state.location.position === ygopro.CardPosition.FACEDOWN;

  useClick(
    (_event) => {
-      if (props.state.selectInfo) {
-        sendSelectPlaceResponse(props.state.selectInfo.response);
-        dispatch(clearMonsterSelectInfo(0));
-        dispatch(clearMonsterSelectInfo(1));
+      if (props.state.placeInteractivities) {
+        sendSelectPlaceResponse(props.state.placeInteractivities.response);
+        dispatch(clearMonsterPlaceInteractivities(0));
+        dispatch(clearMonsterPlaceInteractivities(1));
      } else if (props.state.occupant) {
        dispatch(
          setCardModalText([
@@ -112,18 +112,23 @@ const CommonMonster = (props: {

  return (
    <plane
-      name={`monster-${props.state.selectInfo}`}
+      name={`monster-${props.state.location.sequence}`}
      ref={planeRef}
      width={shape.width}
      height={shape.height}
      position={props.position}
      rotation={rotation}
      enableEdgesRendering
-      edgesWidth={props.state.selectInfo ? edgesWidth : 0}
+      edgesWidth={
+        props.state.placeInteractivities ||
+        props.state.idleInteractivities.length > 0
+          ? edgesWidth
+          : 0
+      }
      edgesColor={edgesColor}
    >
      <standardMaterial
-        name={`monster-mat-${props.state.sequence}`}
+        name={`monster-mat-${props.state.location.sequence}`}
        diffuseTexture={
          props.state.occupant
            ? faceDown
@@ -171,14 +176,14 @@ const ExtraMonsters = () => {
  );
 };

-const monsterPositions = (player: number, monsters: Monster[]) => {
+const monsterPositions = (player: number, monsters: CardState[]) => {
  const x = (sequence: number) =>
    player == 0 ? left + gap * sequence : -left - gap * sequence;
  const y = shape.depth / 2 + CONFIG.Floating;
  const z = player == 0 ? -1.35 : 1.35;

  return monsters.map(
-    (monster) => new BABYLON.Vector3(x(monster.sequence), y, z)
+    (monster) => new BABYLON.Vector3(x(monster.location.sequence), y, z)
  );
 };


--- a/src/ui/Duel/util.ts
+++ b/src/ui/Duel/util.ts
-import { InteractType } from "../../reducers/duel/util";
+import { InteractType } from "../../reducers/duel/generic";

 export function zip<S1, S2>(
  firstCollection: Array<S1>,