update cemetery ui

src/ui/Duel/cemetery.tsx

 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
+import { Cemetery } from "../../reducers/duel/util";
+import {
+  selectMeCemetery,
+  selectOpCemetery,
+} from "../../reducers/duel/cemeretySlice";
+import { useAppSelector } from "../../hook";
 
-const Cemetery = () => {
-  const shape = CONFIG.CemeterySlotShape();
-  const position = new BABYLON.Vector3(
-    3.2,
-    shape.depth / 2 + CONFIG.Floating,
-    -2.0
+const shape = CONFIG.CemeterySlotShape();
+const depth = 0.2;
+
+const Cemeteries = () => {
+  const meCemetery = useAppSelector(selectMeCemetery).cemetery;
+  const opCemetery = useAppSelector(selectOpCemetery).cemetery;
+
+  return (
+    <>
+      <CCemetery
+        state={meCemetery}
+        position={cemeteryPosition(0, meCemetery.length)}
+        rotation={CONFIG.CardSlotRotation(false)}
+      />
+      <CCemetery
+        state={opCemetery}
+        position={cemeteryPosition(1, opCemetery.length)}
+        rotation={CONFIG.CardSlotRotation(true)}
+      />
+    </>
   );
-  const rotation = CONFIG.CemeterySlotRotation();
+};
 
+const CCemetery = (props: {
+  state: Cemetery[];
+  position: BABYLON.Vector3;
+  rotation: BABYLON.Vector3;
+}) => {
   return (
     <box
       name="cemetery"
       width={shape.width}
       height={shape.height}
-      depth={shape.depth}
-      position={position}
-      rotation={rotation}
+      depth={depth * props.state.length}
+      position={props.position}
+      rotation={props.rotation}
     >
       <standardMaterial
         name="cemetery-mat"
-        diffuseColor={CONFIG.CemeteryColor()}
+        diffuseTexture={
+          new BABYLON.Texture(`http://localhost:3030/images/card_back.jpg`)
+        }
+        alpha={props.state.length == 0 ? 0 : 1}
       />
     </box>
   );
 };
 
-export default Cemetery;
+const cemeteryPosition = (player: number, cemeteryLength: number) => {
+  const x = player == 0 ? 3.2 : -3.2;
+  const y = (depth * cemeteryLength) / 2 + CONFIG.Floating;
+  const z = player == 0 ? -2.0 : 2.0;
+
+  return new BABYLON.Vector3(x, y, z);
+};
+
+export default Cemeteries;

src/ui/Duel/main.tsx

@@ -11,6 +11,7 @@ import Magics from "./magics";
 import Field from "./field";
 import Deck from "./deck";
 import Exclusion from "./exclusion";
+import Cemeteries from "./cemetery";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => (
@@ -27,6 +28,7 @@ const NeosDuel = () => (
               <Magics />
               <Field />
               <Deck />
+              <Cemeteries />
               <Exclusion />
               <Ground />
             </Provider>