update magic slice and ui

src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/move.ts

 import { ygopro } from "../../../idl/ocgcore";
 import { BufferReader } from "../../bufferIO";
-import { cardZoneToNumber, numberToCardZone } from "../../util";
+import {
+  cardZoneToNumber,
+  numberToCardPosition,
+  numberToCardZone,
+} from "../../util";
 import MsgMove = ygopro.StocGameMessage.MsgMove;
 
 /*
@@ -28,7 +32,10 @@ export default (data: Uint8Array) => {
     });
 
     if (location != cardZoneToNumber(ygopro.CardZone.OVERLAY)) {
-      cardLocation.position = ss;
+      const position = numberToCardPosition(ss);
+      if (position) {
+        cardLocation.position = position;
+      }
     } else {
       cardLocation.overlay_sequence = ss;
     }

src/api/ocgcore/ocgAdapter/util.ts

@@ -156,3 +156,37 @@ export function numberToCardZone(
     }
   }
 }
+
+export function numberToCardPosition(
+  position: number
+): ygopro.CardPosition | undefined {
+  switch (position) {
+    case 0x1: {
+      return ygopro.CardPosition.FACEUP_ATTACK;
+    }
+    case 0x2: {
+      return ygopro.CardPosition.FACEDOWN_ATTACK;
+    }
+    case 0x3: {
+      return ygopro.CardPosition.ATTACK;
+    }
+    case 0x4: {
+      return ygopro.CardPosition.FACEUP_DEFENSE;
+    }
+    case 0x5: {
+      return ygopro.CardPosition.FACEUP;
+    }
+    case 0x8: {
+      return ygopro.CardPosition.FACEDOWN_DEFENSE;
+    }
+    case 0xa: {
+      return ygopro.CardPosition.FACEDOWN;
+    }
+    case 0xc: {
+      return ygopro.CardPosition.DEFENSE;
+    }
+    default: {
+      return undefined;
+    }
+  }
+}

src/reducers/duel/magicSlice.ts

@@ -89,13 +89,20 @@ export const clearMagicSelectInfoImpl: CaseReducer<
 // 增加魔法陷阱
 export const fetchMagicMeta = createAsyncThunk(
   "duel/fetchMagicMeta",
-  async (param: [number, number, number]) => {
-    const controler = param[0];
-    const sequence = param[1];
-    const code = param[2];
+  async (param: {
+    controler: number;
+    sequence: number;
+    position: ygopro.CardPosition;
+    code: number;
+  }) => {
+    const code = param.code;
 
     const meta = await fetchCard(code);
-    const response: [number, number, CardMeta] = [controler, sequence, meta];
+    const response = {
+      controler: param.controler,
+      sequence: param.sequence,
+      meta,
+    };
 
     return response;
   }
@@ -104,9 +111,10 @@ export const fetchMagicMeta = createAsyncThunk(
 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 controler = action.meta.arg.controler;
+    const sequence = action.meta.arg.sequence;
+    const position = action.meta.arg.position;
+    const code = action.meta.arg.code;
 
     const meta = { id: code, data: {}, text: {} };
     if (judgeSelf(controler, state)) {
@@ -114,6 +122,7 @@ export const magicCase = (builder: ActionReducerMapBuilder<DuelState>) => {
         for (const magic of state.meMagics.magics) {
           if (magic.sequence == sequence) {
             magic.occupant = meta;
+            magic.position = position;
           }
         }
       }
@@ -122,15 +131,16 @@ export const magicCase = (builder: ActionReducerMapBuilder<DuelState>) => {
         for (const magic of state.opMagics.magics) {
           if (magic.sequence == sequence) {
             magic.occupant = meta;
+            magic.position = position;
           }
         }
       }
     }
   });
   builder.addCase(fetchMagicMeta.fulfilled, (state, action) => {
-    const controler = action.payload[0];
-    const sequence = action.payload[1];
-    const meta = action.payload[2];
+    const controler = action.payload.controler;
+    const sequence = action.payload.sequence;
+    const meta = action.payload.meta;
 
     if (judgeSelf(controler, state)) {
       if (state.meMagics) {

src/service/duel/move.ts

@@ -37,7 +37,14 @@ export default (move: MsgMove, dispatch: AppDispatch) => {
       break;
     }
     case ygopro.CardZone.SZONE: {
-      dispatch(fetchMagicMeta([to.controler, to.sequence, code]));
+      dispatch(
+        fetchMagicMeta({
+          controler: to.controler,
+          sequence: to.sequence,
+          position: to.position,
+          code,
+        })
+      );
 
       break;
     }

src/ui/Duel/magics.tsx

@@ -8,6 +8,7 @@ import { useAppSelector } from "../../hook";
 import { useRef } from "react";
 import { sendSelectPlaceResponse } from "../../api/ocgcore/ocgHelper";
 import { clearMagicSelectInfo } from "../../reducers/duel/mod";
+import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 
 // TODO: use config
 const left = -2.15;
@@ -36,6 +37,10 @@ const CMagic = (props: { state: Magic }) => {
     -2.6
   );
   const rotation = CONFIG.CardSlotRotation();
+  const faceDown =
+    state.position === ygopro.CardPosition.FACEDOWN ||
+    state.position === ygopro.CardPosition.FACEDOWN_ATTACK ||
+    state.position === ygopro.CardPosition.FACEDOWN_DEFENSE;
   const edgesWidth = 2.0;
   const edgesColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Yellow());
   const dispatch = store.dispatch;
@@ -68,7 +73,13 @@ const CMagic = (props: { state: Magic }) => {
         name={`magic-mat-${props.state.sequence}`}
         diffuseTexture={
           state.occupant
-            ? new BABYLON.Texture(`http://localhost:3030/images/card_back.jpg`)
+            ? faceDown
+              ? new BABYLON.Texture(
+                  `http://localhost:3030/images/card_back.jpg`
+                )
+              : new BABYLON.Texture(
+                  `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${state.occupant.id}.jpg`
+                )
             : new BABYLON.Texture(`http://localhost:3030/images/card_slot.png`)
         }
         alpha={state.occupant ? 1 : 0}