update deck.tsx

src/service/duel/start.ts

@@ -6,6 +6,7 @@ import {
   initMonsters,
   initMagics,
   initCemetery,
+  initDeck,
 } from "../../reducers/duel/mod";
 
 export default (
@@ -39,4 +40,6 @@ export default (
   dispatch(initMagics(1));
   dispatch(initCemetery(0));
   dispatch(initCemetery(1));
+  dispatch(initDeck({ player: 0, deskSize: start.deckSize1 }));
+  dispatch(initDeck({ player: 1, deskSize: start.deckSize2 }));
 };

src/ui/Duel/deck.tsx

 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
+import { useAppSelector } from "../../hook";
+import { selectMeDeck, selectOpDeck } from "../../reducers/duel/deckSlice";
+import SingleSlot from "./singleSlot";
+
+const depth = 0.02;
 
 const Deck = () => (
   <>
@@ -9,28 +14,22 @@ const Deck = () => (
 );
 
 const CommonDeck = () => {
-  const shape = CONFIG.DeckSlotShape();
-  const position = new BABYLON.Vector3(
-    3.2,
-    shape.depth / 2 + CONFIG.Floating,
-    -3.3
-  );
-  const rotation = CONFIG.DeckSlotRotation();
+  const meDeck = useAppSelector(selectMeDeck).inner;
+  const opDeck = useAppSelector(selectOpDeck).inner;
 
   return (
-    <box
-      name="common-deck"
-      width={shape.width}
-      height={shape.height}
-      depth={shape.depth}
-      position={position}
-      rotation={rotation}
-    >
-      <standardMaterial
-        name="common-deck-mat"
-        diffuseColor={CONFIG.DeckColor()}
+    <>
+      <SingleSlot
+        state={meDeck}
+        position={deckPosition(0, meDeck.length)}
+        rotation={CONFIG.CardSlotRotation(false)}
       />
-    </box>
+      <SingleSlot
+        state={opDeck}
+        position={deckPosition(1, opDeck.length)}
+        rotation={CONFIG.CardSlotRotation(true)}
+      />
+    </>
   );
 };
 
@@ -60,4 +59,12 @@ const ExtraDeck = () => {
   );
 };
 
+const deckPosition = (player: number, deckLength: number) => {
+  const x = player == 0 ? 3.2 : -3.2;
+  const y = (depth * deckLength) / 2 + CONFIG.Floating;
+  const z = player == 0 ? -3.3 : 3.3;
+
+  return new BABYLON.Vector3(x, y, z);
+};
+
 export default Deck;