add extraDeck.tsx

src/ui/Duel/deck.tsx

@@ -4,13 +4,6 @@ import { useAppSelector } from "../../hook";
 import { selectMeDeck, selectOpDeck } from "../../reducers/duel/deckSlice";
 import SingleSlot, { Depth } from "./singleSlot";
 
-const Deck = () => (
-  <>
-    <CommonDeck />
-    <ExtraDeck />
-  </>
-);
-
 const CommonDeck = () => {
   const meDeck = useAppSelector(selectMeDeck).inner;
   const opDeck = useAppSelector(selectOpDeck).inner;
@@ -31,32 +24,6 @@ const CommonDeck = () => {
   );
 };
 
-const ExtraDeck = () => {
-  const shape = CONFIG.ExtraDeckSlotShape();
-  const position = new BABYLON.Vector3(
-    -3.3,
-    shape.depth / 2 + CONFIG.Floating,
-    -3.3
-  );
-  const rotation = CONFIG.DeckSlotRotation();
-
-  return (
-    <box
-      name="extra-deck"
-      width={shape.width}
-      height={shape.height}
-      depth={shape.depth}
-      position={position}
-      rotation={rotation}
-    >
-      <standardMaterial
-        name="extra-deck-mat"
-        diffuseColor={CONFIG.ExtraDeckColor()}
-      />
-    </box>
-  );
-};
-
 const deckPosition = (player: number, deckLength: number) => {
   const x = player == 0 ? 3.2 : -3.2;
   const y = (Depth * deckLength) / 2 + CONFIG.Floating;
@@ -65,4 +32,4 @@ const deckPosition = (player: number, deckLength: number) => {
   return new BABYLON.Vector3(x, y, z);
 };
 
-export default Deck;
+export default CommonDeck;

src/ui/Duel/extraDeck.tsx

+import SingleSlot, { Depth } from "./singleSlot";
+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "../../config/ui";
+import { useAppSelector } from "../../hook";
+import {
+  selectMeExtraDeck,
+  selectOpExtraDeck,
+} from "../../reducers/duel/extraDeckSlice";
+
+const ExtraDeck = () => {
+  const meExtraDeck = useAppSelector(selectMeExtraDeck).inner;
+  const opExtraDeck = useAppSelector(selectOpExtraDeck).inner;
+
+  return (
+    <>
+      <SingleSlot
+        state={meExtraDeck}
+        position={extraDeckPosition(0, meExtraDeck.length)}
+        rotation={CONFIG.CardSlotRotation(false)}
+      />
+      <SingleSlot
+        state={opExtraDeck}
+        position={extraDeckPosition(1, opExtraDeck.length)}
+        rotation={CONFIG.CardSlotRotation(true)}
+      />
+    </>
+  );
+};
+
+const extraDeckPosition = (player: number, deckLength: number) => {
+  const x = player == 0 ? -3.3 : 3.3;
+  const y = (Depth & deckLength) / 2 + CONFIG.Floating;
+  const z = player == 0 ? -3.3 : 3.3;
+
+  return new BABYLON.Vector3(x, y, z);
+};
+
+export default ExtraDeck;

src/ui/Duel/main.tsx

@@ -9,7 +9,7 @@ import CardModal from "./cardModal";
 import HintNotification from "./hintNotification";
 import Magics from "./magics";
 import Field from "./field";
-import Deck from "./deck";
+import CommonDeck from "./deck";
 import Exclusion from "./exclusion";
 import Cemeteries from "./cemetery";
 import CardListModal from "./cardListModal";
@@ -19,6 +19,7 @@ import PositionModal from "./positionModal";
 import OptionModal from "./optionModal";
 import Phase from "./phase";
 import CheckCardModalV2 from "./checkCardModalV2";
+import ExtraDeck from "./extraDeck";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => (
@@ -34,7 +35,8 @@ const NeosDuel = () => (
               <Monsters />
               <Magics />
               <Field />
-              <Deck />
+              <CommonDeck />
+              <ExtraDeck />
               <Cemeteries />
               <Exclusion />
               <Field />