add Monsters Compoment

src/ui/Duel/babylon.tsx

@@ -3,7 +3,8 @@ import { Engine, Scene } from "react-babylonjs";
 import { ReactReduxContext, Provider } from "react-redux";
 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
-import DuelHands from "./hands_";
+import Hands from "./hands_";
+import Monsters from "./monsters_";
 import CardModal from "./cardModal";
 import HintNotification from "./hintNotification";
 
@@ -14,10 +15,11 @@ const BabylonCanvas = () => (
         <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
           <Scene>
             <Provider store={store}>
-              <DuelCamera />
-              <DuelLight />
-              <DuelHands />
-              <DuelGround />
+              <Camera />
+              <Light />
+              <Hands />
+              <Monsters />
+              <Ground />
             </Provider>
           </Scene>
         </Engine>
@@ -28,7 +30,7 @@ const BabylonCanvas = () => (
   </>
 );
 
-const DuelCamera = () => (
+const Camera = () => (
   <freeCamera
     name="duel-camera"
     position={new BABYLON.Vector3(0, 8, -10)}
@@ -36,7 +38,7 @@ const DuelCamera = () => (
   ></freeCamera>
 );
 
-const DuelLight = () => (
+const Light = () => (
   <hemisphericLight
     name="duel-light"
     direction={new BABYLON.Vector3(1, 2.5, 1)}
@@ -44,7 +46,7 @@ const DuelLight = () => (
   ></hemisphericLight>
 );
 
-const DuelGround = () => {
+const Ground = () => {
   const shape = CONFIG.GroundShape();
   const texture = new BABYLON.Texture(
     `http://localhost:3030/images/newfield.png`

src/ui/Duel/hands_.tsx

@@ -14,19 +14,19 @@ import { useHover } from "react-babylonjs";
 import { useClick } from "./hook";
 import { useState, useRef } from "react";
 
-const DuelHands = () => {
+const Hands = () => {
   const hands = useAppSelector(selectMeHands).cards;
 
   return (
     <>
       {hands.map((hand, idx) => {
-        return <DuelHand state={hand} idx={idx} key={idx} />;
+        return <Hand state={hand} idx={idx} key={idx} />;
       })}
     </>
   );
 };
 
-const DuelHand = (props: { state: Card; idx: number }) => {
+const Hand = (props: { state: Card; idx: number }) => {
   const handShape = CONFIG.HandShape();
   const hoverScale = CONFIG.HandHoverScaling();
   const defaultScale = new BABYLON.Vector3(1, 1, 1);
@@ -88,7 +88,7 @@ const DuelHand = (props: { state: Card; idx: number }) => {
         }
       >
         <standardMaterial
-          name={`handMaterial-${idx}`}
+          name={`hand-mat-${idx}`}
           diffuseTexture={
             new BABYLON.Texture(
               `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${state.meta.id}.jpg`
@@ -126,4 +126,4 @@ function interactTypeToString(t: InteractType): string {
   }
 }
 
-export default DuelHands;
+export default Hands;

src/ui/Duel/monsters_.tsx

+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "../../config/ui";
+import { useClick } from "./hook";
+import { store } from "../../store";
+import { Monster } from "../../reducers/duel/util";
+import "react-babylonjs";
+import { useRef } from "react";
+import { sendSelectPlaceResponse } from "../../api/ocgcore/ocgHelper";
+import { clearMonsterSelectInfo } from "../../reducers/duel/mod";
+import { useAppSelector } from "../../hook";
+import { selectMeMonsters } from "../../reducers/duel/monstersSlice";
+
+const left = -2.15; // TODO: config
+const gap = 1.05;
+
+const Monsters = () => {
+  const monsters = useAppSelector(selectMeMonsters).monsters;
+
+  return (
+    <>
+      {monsters.map((monster, idx) => {
+        return <CMonster state={monster} key={idx} />;
+      })}
+    </>
+  );
+};
+
+const CMonster = (props: { state: Monster }) => {
+  const planeRef = useRef(null);
+  const position = new BABYLON.Vector3(
+    left + gap * props.state.sequence,
+    CONFIG.CardSlotShape().depth / 2 + CONFIG.Floating,
+    -1.35
+  );
+  const rotation = CONFIG.CardSlotRotation();
+  const edgesWidth = 2.0;
+  const edgesColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Yellow());
+  const dispatch = store.dispatch;
+
+  useClick(
+    (_event) => {
+      if (props.state.selectInfo) {
+        sendSelectPlaceResponse(props.state.selectInfo?.response);
+        dispatch(clearMonsterSelectInfo(0));
+        dispatch(clearMonsterSelectInfo(1));
+      }
+    },
+    planeRef,
+    [props.state]
+  );
+
+  return (
+    <plane
+      name={`monster-${props.state.selectInfo}`}
+      ref={planeRef}
+      position={position}
+      rotation={rotation}
+      enableEdgesRendering
+      edgesWidth={props.state.selectInfo ? edgesWidth : 0}
+      edgesColor={edgesColor}
+    >
+      <standardMaterial
+        name={`monster-mat-${props.state.sequence}`}
+        diffuseTexture={
+          props.state.occupant
+            ? new BABYLON.Texture(
+                `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${props.state.occupant.id}.jpg`
+              )
+            : new BABYLON.Texture(`http://localhost:3030/images/card_slot.png`)
+        }
+        alpha={0.2}
+      ></standardMaterial>
+    </plane>
+  );
+};
+
+export default Monsters;