add Deck component

src/ui/Duel/deck.ts

-import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../config/ui";
-
-export default (scene: BABYLON.Scene) => {
-  // 卡组
-  const deck = BABYLON.MeshBuilder.CreateBox(
-    "deck",
-    CONFIG.DeckSlotShape(),
-    scene
-  );
-  // 位置
-  deck.position = new BABYLON.Vector3(
-    3.2,
-    CONFIG.DeckSlotShape().depth / 2 + CONFIG.Floating,
-    -3.3
-  );
-  // 旋转
-  deck.rotation = CONFIG.DeckSlotRotation();
-  // 材质
-  const deckMaterial = new BABYLON.StandardMaterial("deckMaterial", scene);
-  deckMaterial.diffuseColor = CONFIG.DeckColor();
-  deck.material = deckMaterial;
-
-  // 额外卡组
-
-  const extraDeck = BABYLON.MeshBuilder.CreateBox(
-    "exraDeck",
-    CONFIG.ExtraDeckSlotShape(),
-    scene
-  );
-  // 位置
-  extraDeck.position = new BABYLON.Vector3(
-    -3.3,
-    CONFIG.ExtraDeckSlotShape().depth / 2 + CONFIG.Floating,
-    -3.3
-  );
-  // 旋转
-  extraDeck.rotation = CONFIG.DeckSlotRotation();
-  // 材质
-  const extraDeckMaterial = new BABYLON.StandardMaterial(
-    "extraDeckMaterial",
-    scene
-  );
-  extraDeckMaterial.diffuseColor = CONFIG.ExtraDeckColor();
-  extraDeck.material = extraDeckMaterial;
-};

src/ui/Duel/deck_.tsx

+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "../../config/ui";
+
+const Deck = () => (
+  <>
+    <CommonDeck />
+    <ExtraDeck />
+  </>
+);
+
+const CommonDeck = () => {
+  const shape = CONFIG.DeckSlotShape();
+  const position = new BABYLON.Vector3(
+    3.2,
+    shape.depth / 2 + CONFIG.Floating,
+    -3.3
+  );
+  const rotation = CONFIG.DeckSlotRotation();
+
+  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()}
+      />
+    </box>
+  );
+};
+
+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>
+  );
+};
+
+export default Deck;

src/ui/Duel/main.tsx

@@ -9,6 +9,7 @@ import CardModal from "./cardModal";
 import HintNotification from "./hintNotification";
 import Magics from "./magics_";
 import Field from "./field_";
+import Deck from "./deck_";
 
 const NeosDuel = () => (
   <>
@@ -23,6 +24,7 @@ const NeosDuel = () => (
               <Monsters />
               <Magics />
               <Field />
+              <Deck />
               <Ground />
             </Provider>
           </Scene>