rerange monster.tsx

src/ui/Duel/monsters.tsx

@@ -16,37 +16,48 @@ import {
 import { useAppSelector } from "../../hook";
 import { selectMeMonsters } from "../../reducers/duel/monstersSlice";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { zip } from "./util";
 
+const shape = CONFIG.CardSlotShape();
 const left = -2.15; // TODO: config
 const gap = 1.05;
 
 const Monsters = () => {
-  const monsters = useAppSelector(selectMeMonsters).monsters;
+  const meMonsters = useAppSelector(selectMeMonsters).monsters;
+  const meMonsterPositions = monsterPositions(0, meMonsters);
 
   return (
     <>
-      {monsters.map((monster, idx) => {
-        return <CommonMonster state={monster} key={idx} />;
+      {zip(meMonsters, meMonsterPositions).map(([monster, position], idx) => {
+        return (
+          <CommonMonster
+            state={monster}
+            key={idx}
+            position={position}
+            rotation={CONFIG.CardSlotRotation()}
+            deffenseRotation={CONFIG.CardSlotDefenceRotation()}
+          />
+        );
       })}
       <ExtraMonsters />
     </>
   );
 };
 
-const CommonMonster = (props: { state: Monster }) => {
+const CommonMonster = (props: {
+  state: Monster;
+  position: BABYLON.Vector3;
+  rotation: BABYLON.Vector3;
+  deffenseRotation: BABYLON.Vector3;
+}) => {
   const planeRef = useRef(null);
-  const shape = CONFIG.CardSlotShape();
-  const position = new BABYLON.Vector3(
-    left + gap * props.state.sequence,
-    shape.depth / 2 + CONFIG.Floating,
-    -1.35
-  );
+
   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();
+      ? props.deffenseRotation
+      : props.rotation;
   const edgesWidth = 2.0;
   const edgesColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Yellow());
   const dispatch = store.dispatch;
@@ -88,7 +99,7 @@ const CommonMonster = (props: { state: Monster }) => {
       ref={planeRef}
       width={shape.width}
       height={shape.height}
-      position={position}
+      position={props.position}
       rotation={rotation}
       enableEdgesRendering
       edgesWidth={props.state.selectInfo ? edgesWidth : 0}
@@ -143,4 +154,15 @@ const ExtraMonsters = () => {
   );
 };
 
+const monsterPositions = (player: number, monsters: Monster[]) => {
+  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)
+  );
+};
+
 export default Monsters;