render op monsters

src/reducers/duel/monstersSlice.ts

@@ -8,13 +8,13 @@ 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 MonsterState {
   monsters: Monster[];
 }
 
-// 初始化自己的怪兽区状态
+// 初始化怪兽区状态
 export const initMonstersImpl: CaseReducer<DuelState, PayloadAction<number>> = (
   state,
   action
@@ -168,3 +168,5 @@ export const monsterCase = (builder: ActionReducerMapBuilder<DuelState>) => {
 
 export const selectMeMonsters = (state: RootState) =>
   state.duel.meMonsters || { monsters: [] };
+export const selectOpMonsters = (state: RootState) =>
+  state.duel.opMonsters || { monsters: [] };

src/ui/Duel/monsters.tsx

@@ -14,7 +14,10 @@ import {
   setCardModalText,
 } from "../../reducers/duel/mod";
 import { useAppSelector } from "../../hook";
-import { selectMeMonsters } from "../../reducers/duel/monstersSlice";
+import {
+  selectMeMonsters,
+  selectOpMonsters,
+} from "../../reducers/duel/monstersSlice";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { zip } from "./util";
 
@@ -25,6 +28,8 @@ const gap = 1.05;
 const Monsters = () => {
   const meMonsters = useAppSelector(selectMeMonsters).monsters;
   const meMonsterPositions = monsterPositions(0, meMonsters);
+  const opMonsters = useAppSelector(selectOpMonsters).monsters;
+  const opMonsterPositions = monsterPositions(1, opMonsters);
 
   return (
     <>
@@ -39,6 +44,18 @@ const Monsters = () => {
           />
         );
       })}
+      {zip(opMonsters, opMonsterPositions).map(([monster, position], idx) => {
+        return (
+          <CommonMonster
+            state={monster}
+            key={idx}
+            position={position}
+            rotation={CONFIG.CardSlotRotation()}
+            deffenseRotation={CONFIG.CardSlotDefenceRotation()}
+          />
+        );
+      })}
+      <ExtraMonsters />
       <ExtraMonsters />
     </>
   );