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,7 +20,9 @@ const Magics = () => {
 
   return (
     <>
-      {zip(meMagics, meMagicPositions).map(([magic, position], sequence) => {
+      {zip(meMagics, meMagicPositions)
+        .slice(0, 5)
+        .map(([magic, position], sequence) => {
           return (
             <FixedSlot
               state={magic}
@@ -32,7 +34,9 @@ const Magics = () => {
             />
           );
         })}
-      {zip(opMagics, opMagicPositions).map(([magic, position], sequence) => {
+      {zip(opMagics, opMagicPositions)
+        .slice(0, 5)
+        .map(([magic, position], sequence) => {
           return (
             <FixedSlot
               state={magic}

src/ui/Duel/monsters.tsx

@@ -23,9 +23,9 @@ const Monsters = () => {
 
   return (
     <>
-      {zip(meMonsters, meMonsterPositions).map(
-        ([monster, position], sequence) => {
-          return sequence < 5 ? (
+      {zip(meMonsters, meMonsterPositions)
+        .slice(0, 5)
+        .map(([monster, position], sequence) => (
           <FixedSlot
             state={monster}
             key={sequence}
@@ -35,14 +35,10 @@ const Monsters = () => {
             deffenseRotation={CONFIG.CardSlotDefenceRotation()}
             clearPlaceInteractivitiesAction={clearMonsterPlaceInteractivities}
           />
-          ) : (
-            <></>
-          );
-        }
-      )}
-      {zip(opMonsters, opMonsterPositions).map(
-        ([monster, position], sequence) => {
-          return sequence < 5 ? (
+        ))}
+      {zip(opMonsters, opMonsterPositions)
+        .slice(0, 5)
+        .map(([monster, position], sequence) => (
           <FixedSlot
             state={monster}
             key={sequence}
@@ -52,11 +48,7 @@ const Monsters = () => {
             deffenseRotation={CONFIG.CardSlotDefenceRotation()}
             clearPlaceInteractivitiesAction={clearMonsterPlaceInteractivities}
           />
-          ) : (
-            <></>
-          );
-        }
-      )}
+        ))}
       <ExtraMonsters meMonsters={meMonsters} opMonsters={opMonsters} />
     </>
   );