add magic case and update magic ui

src/reducers/duel/magicSlice.ts

 import { judgeSelf, Magic, InteractType } from "./util";
-import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
+import {
+  PayloadAction,
+  CaseReducer,
+  createAsyncThunk,
+  ActionReducerMapBuilder,
+} from "@reduxjs/toolkit";
 import { DuelState } from "./mod";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { RootState } from "../../store";
+import { CardMeta, fetchCard } from "../../api/cards";
 
 export interface MagicState {
   magics: Magic[];
@@ -74,8 +80,76 @@ export const clearMagicSelectInfoImpl: CaseReducer<
   const magics = judgeSelf(player, state) ? state.meMagics : state.opMagics;
 
   if (magics) {
-    magics.magics = [];
+    for (const magic of magics.magics) {
+      magic.selectInfo = undefined;
+    }
+  }
+};
+
+// 增加魔法陷阱
+export const fetchMagicMeta = createAsyncThunk(
+  "duel/fetchMagicMeta",
+  async (param: [number, number, number]) => {
+    const controler = param[0];
+    const sequence = param[1];
+    const code = param[2];
+
+    const meta = await fetchCard(code);
+    const response: [number, number, CardMeta] = [controler, sequence, meta];
+
+    return response;
   }
+);
+
+export const magicCase = (builder: ActionReducerMapBuilder<DuelState>) => {
+  builder.addCase(fetchMagicMeta.pending, (state, action) => {
+    // Meta结果没返回之前先更新`ID`
+    const controler = action.meta.arg[0];
+    const sequence = action.meta.arg[1];
+    const code = action.meta.arg[2];
+
+    const meta = { id: code, data: {}, text: {} };
+    if (judgeSelf(controler, state)) {
+      if (state.meMagics) {
+        for (const magic of state.meMagics.magics) {
+          if (magic.sequence == sequence) {
+            magic.occupant = meta;
+          }
+        }
+      }
+    } else {
+      if (state.opMagics) {
+        for (const magic of state.opMagics.magics) {
+          if (magic.sequence == sequence) {
+            magic.occupant = meta;
+          }
+        }
+      }
+    }
+  });
+  builder.addCase(fetchMagicMeta.fulfilled, (state, action) => {
+    const controler = action.payload[0];
+    const sequence = action.payload[1];
+    const meta = action.payload[2];
+
+    if (judgeSelf(controler, state)) {
+      if (state.meMagics) {
+        for (const magic of state.meMagics.magics) {
+          if (magic.sequence == sequence) {
+            magic.occupant = meta;
+          }
+        }
+      }
+    } else {
+      if (state.opMagics) {
+        for (const magic of state.opMagics.magics) {
+          if (magic.sequence == sequence) {
+            magic.occupant = meta;
+          }
+        }
+      }
+    }
+  });
 };
 
 export const selectMeMagics = (state: RootState) =>

src/reducers/duel/mod.ts

@@ -36,6 +36,7 @@ import {
   initMagicsImpl,
   addMagicPlaceSelectAbleImpl,
   clearMagicSelectInfoImpl,
+  magicCase,
 } from "./magicSlice";
 
 export interface DuelState {
@@ -108,6 +109,7 @@ const duelSlice = createSlice({
     handsCase(builder);
     hintCase(builder);
     monsterCase(builder);
+    magicCase(builder);
   },
 });
 

src/service/duel/move.ts

@@ -3,6 +3,7 @@ import MsgMove = ygopro.StocGameMessage.MsgMove;
 import { AppDispatch } from "../../store";
 import { fetchMonsterMeta } from "../../reducers/duel/monstersSlice";
 import { removeHand } from "../../reducers/duel/mod";
+import { fetchMagicMeta } from "../../reducers/duel/magicSlice";
 
 export default (move: MsgMove, dispatch: AppDispatch) => {
   const code = move.code;
@@ -28,6 +29,11 @@ export default (move: MsgMove, dispatch: AppDispatch) => {
 
       break;
     }
+    case ygopro.CardZone.SZONE: {
+      dispatch(fetchMagicMeta([to.controler, to.sequence, code]));
+
+      break;
+    }
     default: {
       console.log(`Unhandled zone type ${to.location}`);
 

src/ui/Duel/magics.tsx

@@ -71,7 +71,7 @@ const CMagic = (props: { state: Magic }) => {
             ? new BABYLON.Texture(`http://localhost:3030/images/card_back.jpg`)
             : new BABYLON.Texture(`http://localhost:3030/images/card_slot.png`)
         }
-        alpha={0.2}
+        alpha={state.occupant ? 1 : 0}
       ></standardMaterial>
     </plane>
   );