add Magics Component

src/ui/Duel/babylon.tsx

@@ -7,6 +7,7 @@ import Hands from "./hands_";
 import Monsters from "./monsters_";
 import CardModal from "./cardModal";
 import HintNotification from "./hintNotification";
+import Magics from "./magics_";
 
 const BabylonCanvas = () => (
   <>
@@ -19,6 +20,7 @@ const BabylonCanvas = () => (
               <Light />
               <Hands />
               <Monsters />
+              <Magics />
               <Ground />
             </Provider>
           </Scene>

src/ui/Duel/magics_.tsx

+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "../../config/ui";
+
+// TODO: use config
+const left = -2.15;
+const gap = 1.05;
+
+const Magics = () => {
+  return (
+    <>
+      {[0, 1, 2, 3, 4].map((idx) => {
+        return <Magic idx={idx} />;
+      })}
+    </>
+  );
+};
+
+const Magic = (props: { idx: number }) => {
+  const shape = CONFIG.CardSlotShape();
+  const position = new BABYLON.Vector3(
+    left + gap * props.idx,
+    shape.depth / 2 + CONFIG.Floating,
+    -2.6
+  );
+  const rotation = CONFIG.CardSlotRotation();
+
+  return (
+    <plane
+      name={`magic-${props.idx}`}
+      width={shape.width}
+      height={shape.height}
+      position={position}
+      rotation={rotation}
+    >
+      <standardMaterial
+        name={`magic-mat-${props.idx}`}
+        diffuseTexture={
+          new BABYLON.Texture(`http://localhost:3030/images/card_slot.png`)
+        }
+        alpha={0.2}
+      ></standardMaterial>
+    </plane>
+  );
+};
+
+export default Magics;

src/ui/Duel/monsters_.tsx

@@ -27,9 +27,10 @@ const Monsters = () => {
 
 const CMonster = (props: { state: Monster }) => {
   const planeRef = useRef(null);
+  const shape = CONFIG.CardSlotShape();
   const position = new BABYLON.Vector3(
     left + gap * props.state.sequence,
-    CONFIG.CardSlotShape().depth / 2 + CONFIG.Floating,
+    shape.depth / 2 + CONFIG.Floating,
     -1.35
   );
   const rotation = CONFIG.CardSlotRotation();
@@ -53,6 +54,8 @@ const CMonster = (props: { state: Monster }) => {
     <plane
       name={`monster-${props.state.selectInfo}`}
       ref={planeRef}
+      width={shape.width}
+      height={shape.height}
       position={position}
       rotation={rotation}
       enableEdgesRendering