update Exclusion.tsx

src/config/ui.ts

@@ -17,6 +17,7 @@ export const DeckSlotShape = () => {
 export const ExtraDeckSlotShape = () => {
   return { width: 0.8, height: 1, depth: 0.2 };
 };
+export const SingleSlotShape = { width: 0.8, height: 1, depth: 0.2 };
 export const CemeterySlotShape = () => {
   return { width: 0.8, height: 1, depth: 0.2 };
 };

src/reducers/duel/exclusionSlice.ts

@@ -69,5 +69,7 @@ export const exclusionCase = (builder: ActionReducerMapBuilder<DuelState>) => {
   });
 };
 
-export const selectMeExclusion = (state: RootState) => state.duel.meExclusion;
-export const selectopExclusion = (state: RootState) => state.duel.opExclusion;
+export const selectMeExclusion = (state: RootState) =>
+  state.duel.meExclusion || { inner: [] };
+export const selectopExclusion = (state: RootState) =>
+  state.duel.opExclusion || { inner: [] };

src/ui/Duel/cemetery.tsx

 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
-import { CardState } from "../../reducers/duel/generic";
 import {
   selectMeCemetery,
   selectOpCemetery,
 } from "../../reducers/duel/cemeretySlice";
-import { store } from "../../store";
 import { useAppSelector } from "../../hook";
-import { useClick } from "./hook";
-import { useRef } from "react";
-import {
-  setCardListModalInfo,
-  setCardListModalIsOpen,
-} from "../../reducers/duel/mod";
+import SingleSlot from "./singleSlot";
 
-const shape = CONFIG.CemeterySlotShape();
 const depth = 0.02;
 
 const Cemeteries = () => {
@@ -23,12 +15,12 @@ const Cemeteries = () => {
 
   return (
     <>
-      <CCemetery
+      <SingleSlot
         state={meCemetery}
         position={cemeteryPosition(0, meCemetery.length)}
         rotation={CONFIG.CardSlotRotation(false)}
       />
-      <CCemetery
+      <SingleSlot
         state={opCemetery}
         position={cemeteryPosition(1, opCemetery.length)}
         rotation={CONFIG.CardSlotRotation(true)}
@@ -37,60 +29,6 @@ const Cemeteries = () => {
   );
 };
 
-const CCemetery = (props: {
-  state: CardState[];
-  position: BABYLON.Vector3;
-  rotation: BABYLON.Vector3;
-}) => {
-  const boxRef = useRef(null);
-  const dispatch = store.dispatch;
-
-  useClick(
-    (_event) => {
-      if (props.state.length != 0) {
-        dispatch(
-          setCardListModalInfo(
-            props.state.map((cemetery) => {
-              return {
-                name: cemetery.occupant?.text.name,
-                desc: cemetery.occupant?.text.desc,
-                imgUrl: `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${cemetery.occupant?.id}.jpg`,
-              };
-            })
-          )
-        );
-        dispatch(setCardListModalIsOpen(true));
-      }
-    },
-    boxRef,
-    [props.state]
-  );
-
-  return (
-    <box
-      name="cemetery"
-      ref={boxRef}
-      scaling={
-        new BABYLON.Vector3(
-          shape.width,
-          shape.height,
-          depth * props.state.length
-        )
-      }
-      position={props.position}
-      rotation={props.rotation}
-    >
-      <standardMaterial
-        name="cemetery-mat"
-        diffuseTexture={
-          new BABYLON.Texture(`http://localhost:3030/images/card_back.jpg`)
-        }
-        alpha={props.state.length == 0 ? 0 : 1}
-      />
-    </box>
-  );
-};
-
 const cemeteryPosition = (player: number, cemeteryLength: number) => {
   const x = player == 0 ? 3.2 : -3.2;
   const y = (depth * cemeteryLength) / 2 + CONFIG.Floating;

src/ui/Duel/exclusion.tsx

 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
+import { useAppSelector } from "../../hook";
+import {
+  selectMeExclusion,
+  selectopExclusion,
+} from "../../reducers/duel/exclusionSlice";
+import SingleSlot from "./singleSlot";
+
+const depth = 0.02;
 
 const Exclusion = () => {
-  const shape = CONFIG.ExclusionSlotShape();
-  const position = new BABYLON.Vector3(3.2, CONFIG.Floating, -0.7);
-  const rotation = CONFIG.ExclusionSlotRotation();
+  const meExclusion = useAppSelector(selectMeExclusion).inner;
+  const opExclusion = useAppSelector(selectopExclusion).inner;
 
   return (
-    <box
-      name="exclusion"
-      width={shape.width}
-      height={shape.height}
-      depth={shape.depth}
-      position={position}
-      rotation={rotation}
-    >
-      <standardMaterial
-        name="exclusion-mat"
-        diffuseColor={CONFIG.ExclusionColor()}
-      ></standardMaterial>
-    </box>
+    <>
+      <SingleSlot
+        state={meExclusion}
+        position={exclusionPosition(0, meExclusion.length)}
+        rotation={CONFIG.CardSlotRotation(false)}
+      />
+      <SingleSlot
+        state={opExclusion}
+        position={exclusionPosition(1, opExclusion.length)}
+        rotation={CONFIG.CardSlotRotation(true)}
+      />
+    </>
   );
 };
 
+const exclusionPosition = (player: number, exclusionLength: number) => {
+  const x = player == 0 ? 3.2 : -3.2;
+  const y = (depth * exclusionLength) / 2 + CONFIG.Floating;
+  const z = player == 0 ? -0.7 : 0.7;
+
+  return new BABYLON.Vector3(x, y, z);
+};
+
 export default Exclusion;

src/ui/Duel/singleSlot.tsx

+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "../../config/ui";
+import { CardState } from "../../reducers/duel/generic";
+import { store } from "../../store";
+import { useClick } from "./hook";
+import { useRef } from "react";
+import {
+  setCardListModalInfo,
+  setCardListModalIsOpen,
+} from "../../reducers/duel/mod";
+
+const shape = CONFIG.SingleSlotShape;
+const depth = 0.02;
+
+const SingleSlot = (props: {
+  state: CardState[];
+  position: BABYLON.Vector3;
+  rotation: BABYLON.Vector3;
+}) => {
+  const boxRef = useRef(null);
+  const dispatch = store.dispatch;
+
+  useClick(
+    (_event) => {
+      if (props.state.length != 0) {
+        dispatch(
+          setCardListModalInfo(
+            props.state.map((item) => {
+              return {
+                name: item.occupant?.text.name,
+                desc: item.occupant?.text.desc,
+                imgUrl: `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${item.occupant?.id}.jpg`,
+              };
+            })
+          )
+        );
+        dispatch(setCardListModalIsOpen(true));
+      }
+    },
+    boxRef,
+    [props.state]
+  );
+
+  return (
+    <box
+      name="single-slot"
+      ref={boxRef}
+      scaling={
+        new BABYLON.Vector3(
+          shape.width,
+          shape.height,
+          depth * props.state.length
+        )
+      }
+      position={props.position}
+      rotation={props.rotation}
+    >
+      <standardMaterial
+        name="single-slot-mat"
+        diffuseTexture={
+          new BABYLON.Texture(`http://localhost:3030/images/card_back.jpg`)
+        }
+        alpha={props.state.length == 0 ? 0 : 1}
+      />
+    </box>
+  );
+};
+
+export default SingleSlot;