add op magic ui

src/reducers/duel/magicSlice.ts

@@ -8,7 +8,7 @@ import {
 import { DuelState } from "./mod";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { RootState } from "../../store";
-import { CardMeta, fetchCard } from "../../api/cards";
+import { fetchCard } from "../../api/cards";
 
 export interface MagicState {
   magics: Magic[];
@@ -164,3 +164,5 @@ export const magicCase = (builder: ActionReducerMapBuilder<DuelState>) => {
 
 export const selectMeMagics = (state: RootState) =>
   state.duel.meMagics || { magics: [] };
+export const selectOpMagics = (state: RootState) =>
+  state.duel.opMagics || { magics: [] };

src/ui/Duel/magics.tsx

 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
-import { selectMeMagics } from "../../reducers/duel/magicSlice";
+import { selectMeMagics, selectOpMagics } from "../../reducers/duel/magicSlice";
 import { useClick } from "./hook";
 import { Magic } from "../../reducers/duel/util";
 import { store } from "../../store";
@@ -14,34 +14,52 @@ import {
   setCardModalText,
 } from "../../reducers/duel/mod";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { zip } from "./util";
 
 // TODO: use config
 const left = -2.15;
 const gap = 1.05;
+const shape = CONFIG.CardSlotShape();
 
 const Magics = () => {
-  const magics = useAppSelector(selectMeMagics).magics;
+  const meMagics = useAppSelector(selectMeMagics).magics;
+  const meMagicPositions = magicPositions(0, meMagics);
+  const opMagics = useAppSelector(selectOpMagics).magics;
+  const opMagicPositions = magicPositions(1, opMagics);
 
   return (
     <>
-      {magics.map((magic) => {
-        return <CMagic state={magic} key={magic.sequence} />;
+      {zip(meMagics, meMagicPositions).map(([magic, position]) => {
+        return (
+          <CMagic
+            state={magic}
+            key={magic.sequence}
+            position={position}
+            rotation={CONFIG.CardSlotRotation(false)}
+          />
+        );
+      })}
+      {zip(opMagics, opMagicPositions).map(([magic, position]) => {
+        return (
+          <CMagic
+            state={magic}
+            key={magic.sequence}
+            position={position}
+            rotation={CONFIG.CardSlotRotation(true)}
+          />
+        );
       })}
     </>
   );
 };
 
-const CMagic = (props: { state: Magic }) => {
+const CMagic = (props: {
+  state: Magic;
+  position: BABYLON.Vector3;
+  rotation: BABYLON.Vector3;
+}) => {
   const state = props.state;
-
   const planeRef = useRef(null);
-  const shape = CONFIG.CardSlotShape();
-  const position = new BABYLON.Vector3(
-    left + gap * state.sequence,
-    shape.depth / 2 + CONFIG.Floating,
-    -2.6
-  );
-  const rotation = CONFIG.CardSlotRotation();
   const faceDown =
     state.position === ygopro.CardPosition.FACEDOWN ||
     state.position === ygopro.CardPosition.FACEDOWN_ATTACK ||
@@ -78,8 +96,8 @@ const CMagic = (props: { state: Magic }) => {
       ref={planeRef}
       width={shape.width}
       height={shape.height}
-      position={position}
-      rotation={rotation}
+      position={props.position}
+      rotation={props.rotation}
       enableEdgesRendering
       edgesWidth={state.selectInfo ? edgesWidth : 0}
       edgesColor={edgesColor}
@@ -103,4 +121,13 @@ const CMagic = (props: { state: Magic }) => {
   );
 };
 
+const magicPositions = (player: number, magics: Magic[]) => {
+  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));
+};
+
 export default Magics;