Merge branch 'optimize/ui/move' into 'main'

Optimize/ui/move

See merge request mycard/Neos!55

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/config/ui.ts

@@ -27,19 +27,22 @@ export const FieldSlotShape = () => {
   return { width: 0.8, height: 1, depth: 0.2 };
 };
 export const CardSlotRotation = () => {
-  return new BABYLON.Vector3(1.5, 0, 0);
+  return new BABYLON.Vector3(1.55, 0, 0);
+};
+export const CardSlotDefenceRotation = () => {
+  return new BABYLON.Vector3(1.55, 1.55, 0);
 };
 export const DeckSlotRotation = () => {
-  return new BABYLON.Vector3(1.5, 0, 0);
+  return new BABYLON.Vector3(1.55, 0, 0);
 };
 export const CemeterySlotRotation = () => {
-  return new BABYLON.Vector3(1.5, 0, 0);
+  return new BABYLON.Vector3(1.55, 0, 0);
 };
 export const ExclusionSlotRotation = () => {
-  return new BABYLON.Vector3(1.5, 0, 0);
+  return new BABYLON.Vector3(1.55, 0, 0);
 };
 export const FieldSlotRotation = () => {
-  return new BABYLON.Vector3(1.5, 0, 0);
+  return new BABYLON.Vector3(1.55, 0, 0);
 };
 
 // 浮空

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/reducers/duel/monstersSlice.ts

@@ -93,13 +93,20 @@ export const clearMonsterSelectInfoImpl: CaseReducer<
 // 增加怪兽
 export const fetchMonsterMeta = createAsyncThunk(
   "duel/fetchMonsterMeta",
-  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;
   }
@@ -108,16 +115,18 @@ export const fetchMonsterMeta = createAsyncThunk(
 export const monsterCase = (builder: ActionReducerMapBuilder<DuelState>) => {
   builder.addCase(fetchMonsterMeta.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 cardMeta = { id: code, data: {}, text: {} };
+    const meta = { id: code, data: {}, text: {} };
     if (judgeSelf(controler, state)) {
       if (state.meMonsters) {
         for (const monster of state.meMonsters.monsters) {
           if (monster.sequence == sequence) {
-            monster.occupant = cardMeta;
+            monster.occupant = meta;
+            monster.position = position;
           }
         }
       }
@@ -125,16 +134,17 @@ export const monsterCase = (builder: ActionReducerMapBuilder<DuelState>) => {
       if (state.opMonsters) {
         for (const monster of state.opMonsters.monsters) {
           if (monster.sequence == sequence) {
-            monster.occupant = cardMeta;
+            monster.occupant = meta;
+            monster.position = position;
           }
         }
       }
     }
   });
   builder.addCase(fetchMonsterMeta.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.meMonsters) {

src/reducers/duel/util.ts

@@ -72,6 +72,7 @@ export interface Interactivity<T> {
 export interface SlotState {
   sequence: number;
   occupant?: CardMeta;
+  position?: ygopro.CardPosition;
   selectInfo?: Interactivity<{
     controler: number;
     zone: ygopro.CardZone;

src/service/duel/move.ts

@@ -25,12 +25,26 @@ export default (move: MsgMove, dispatch: AppDispatch) => {
 
   switch (to.location) {
     case ygopro.CardZone.MZONE: {
-      dispatch(fetchMonsterMeta([to.controler, to.sequence, code]));
+      dispatch(
+        fetchMonsterMeta({
+          controler: to.controler,
+          sequence: to.sequence,
+          position: to.position,
+          code,
+        })
+      );
 
       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;
@@ -19,7 +20,7 @@ const Magics = () => {
   return (
     <>
       {magics.map((magic) => {
-        return <CMagic state={magic} />;
+        return <CMagic state={magic} key={magic.sequence} />;
       })}
     </>
   );
@@ -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}

src/ui/Duel/monsters.tsx

@@ -9,6 +9,7 @@ import { sendSelectPlaceResponse } from "../../api/ocgcore/ocgHelper";
 import { clearMonsterSelectInfo } from "../../reducers/duel/mod";
 import { useAppSelector } from "../../hook";
 import { selectMeMonsters } from "../../reducers/duel/monstersSlice";
+import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 
 const left = -2.15; // TODO: config
 const gap = 1.05;
@@ -34,11 +35,21 @@ const CommonMonster = (props: { state: Monster }) => {
     shape.depth / 2 + CONFIG.Floating,
     -1.35
   );
-  const rotation = CONFIG.CardSlotRotation();
+  const rotation =
+    props.state.position === ygopro.CardPosition.DEFENSE ||
+    props.state.position === ygopro.CardPosition.FACEUP_DEFENSE ||
+    props.state.position === ygopro.CardPosition.FACEDOWN_DEFENSE
+      ? CONFIG.CardSlotDefenceRotation()
+      : CONFIG.CardSlotRotation();
   const edgesWidth = 2.0;
   const edgesColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Yellow());
   const dispatch = store.dispatch;
 
+  const faceDown =
+    props.state.position === ygopro.CardPosition.FACEDOWN_DEFENSE ||
+    ygopro.CardPosition.FACEDOWN_ATTACK ||
+    ygopro.CardPosition.FACEDOWN;
+
   useClick(
     (_event) => {
       if (props.state.selectInfo) {
@@ -67,9 +78,13 @@ const CommonMonster = (props: { state: Monster }) => {
         name={`monster-mat-${props.state.sequence}`}
         diffuseTexture={
           props.state.occupant
-            ? new BABYLON.Texture(
-                `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${props.state.occupant.id}.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/${props.state.occupant.id}.jpg`
+                )
             : new BABYLON.Texture(`http://localhost:3030/images/card_slot.png`)
         }
         alpha={props.state.occupant ? 1 : 0}
@@ -91,6 +106,7 @@ const ExtraMonsters = () => {
       {xs.map((x, idx) => (
         <plane
           name={`extra-monster-${idx}`}
+          key={idx}
           position={position(x)}
           rotation={rotation}
         >