fix monster.tsx and magic.tsx

src/reducers/duel/commonSlice.ts

-import { clearIdleInteractivities, clearPlaceInteractivities, DuelReducer } from "./generic";
+import {
+  clearIdleInteractivities,
+  clearPlaceInteractivities,
+  DuelReducer,
+} from "./generic";
 import { judgeSelf } from "./util";
 
 export const clearAllIdleInteractivitiesImpl: DuelReducer<number> = (

src/reducers/duel/mod.ts

@@ -90,7 +90,10 @@ import {
   exclusionCase,
 } from "./exclusionSlice";
 import { DeckState, initDeckImpl } from "./deckSlice";
-import { clearAllIdleInteractivitiesImpl, clearAllPlaceInteractivitiesImpl } from "./commonSlice";
+import {
+  clearAllIdleInteractivitiesImpl,
+  clearAllPlaceInteractivitiesImpl,
+} from "./commonSlice";
 
 export interface DuelState {
   selfType?: number;
@@ -301,7 +304,7 @@ export const {
   resetCheckCardModalV2,
   setCheckCardModalV2ResponseAble,
   clearAllIdleInteractivities,
-  clearAllPlaceInteractivities
+  clearAllPlaceInteractivities,
 } = duelSlice.actions;
 export const selectDuelHsStart = (state: RootState) => {
   return state.duel.meInitInfo != null;

src/ui/Duel/magics.tsx

@@ -20,30 +20,34 @@ const Magics = () => {
 
   return (
     <>
-      {zip(meMagics, meMagicPositions).map(([magic, position], sequence) => {
-        return (
-          <FixedSlot
-            state={magic}
-            key={sequence}
-            sequence={sequence}
-            position={position}
-            rotation={CONFIG.CardSlotRotation(false)}
-            clearPlaceInteractivitiesAction={clearMagicPlaceInteractivities}
-          />
-        );
-      })}
-      {zip(opMagics, opMagicPositions).map(([magic, position], sequence) => {
-        return (
-          <FixedSlot
-            state={magic}
-            key={sequence}
-            sequence={sequence}
-            position={position}
-            rotation={CONFIG.CardSlotRotation(true)}
-            clearPlaceInteractivitiesAction={clearMagicPlaceInteractivities}
-          />
-        );
-      })}
+      {zip(meMagics, meMagicPositions)
+        .slice(0, 5)
+        .map(([magic, position], sequence) => {
+          return (
+            <FixedSlot
+              state={magic}
+              key={sequence}
+              sequence={sequence}
+              position={position}
+              rotation={CONFIG.CardSlotRotation(false)}
+              clearPlaceInteractivitiesAction={clearMagicPlaceInteractivities}
+            />
+          );
+        })}
+      {zip(opMagics, opMagicPositions)
+        .slice(0, 5)
+        .map(([magic, position], sequence) => {
+          return (
+            <FixedSlot
+              state={magic}
+              key={sequence}
+              sequence={sequence}
+              position={position}
+              rotation={CONFIG.CardSlotRotation(true)}
+              clearPlaceInteractivitiesAction={clearMagicPlaceInteractivities}
+            />
+          );
+        })}
     </>
   );
 };

src/ui/Duel/monsters.tsx

@@ -23,40 +23,32 @@ const Monsters = () => {
 
   return (
     <>
-      {zip(meMonsters, meMonsterPositions).map(
-        ([monster, position], sequence) => {
-          return sequence < 5 ? (
-            <FixedSlot
-              state={monster}
-              key={sequence}
-              sequence={sequence}
-              position={position}
-              rotation={CONFIG.CardSlotRotation(false)}
-              deffenseRotation={CONFIG.CardSlotDefenceRotation()}
-              clearPlaceInteractivitiesAction={clearMonsterPlaceInteractivities}
-            />
-          ) : (
-            <></>
-          );
-        }
-      )}
-      {zip(opMonsters, opMonsterPositions).map(
-        ([monster, position], sequence) => {
-          return sequence < 5 ? (
-            <FixedSlot
-              state={monster}
-              key={sequence}
-              sequence={sequence}
-              position={position}
-              rotation={CONFIG.CardSlotRotation(true)}
-              deffenseRotation={CONFIG.CardSlotDefenceRotation()}
-              clearPlaceInteractivitiesAction={clearMonsterPlaceInteractivities}
-            />
-          ) : (
-            <></>
-          );
-        }
-      )}
+      {zip(meMonsters, meMonsterPositions)
+        .slice(0, 5)
+        .map(([monster, position], sequence) => (
+          <FixedSlot
+            state={monster}
+            key={sequence}
+            sequence={sequence}
+            position={position}
+            rotation={CONFIG.CardSlotRotation(false)}
+            deffenseRotation={CONFIG.CardSlotDefenceRotation()}
+            clearPlaceInteractivitiesAction={clearMonsterPlaceInteractivities}
+          />
+        ))}
+      {zip(opMonsters, opMonsterPositions)
+        .slice(0, 5)
+        .map(([monster, position], sequence) => (
+          <FixedSlot
+            state={monster}
+            key={sequence}
+            sequence={sequence}
+            position={position}
+            rotation={CONFIG.CardSlotRotation(true)}
+            deffenseRotation={CONFIG.CardSlotDefenceRotation()}
+            clearPlaceInteractivitiesAction={clearMonsterPlaceInteractivities}
+          />
+        ))}
       <ExtraMonsters meMonsters={meMonsters} opMonsters={opMonsters} />
     </>
   );