rerange simpleDuel code

src/ui/Duel/main.tsx

@@ -3,7 +3,7 @@
  *
  * */
 
-import SimpleDuelPlateImpl from "./simpleDuel";
+import SimpleDuelPlateImpl from "./simpleDuel/mod";
 
 export default function Duel() {
   return new SimpleDuelPlateImpl().render();

src/ui/Duel/simpleDuel/config.ts

+/*
+ * SimpleDuelPlateImpl的一些配置
+ *
+ * */
+
+import * as BABYLON from "@babylonjs/core";
+
+export const GroundShape = { width: 6, height: 6 };
+export const CardSlotShape = { width: 0.5, height: 0.75, depth: 0.05 };
+export const CardSlotRotation = new BABYLON.Vector3(1.5, 0, 0);
+
+// 手牌
+export const HandShape = { width: 0.5, height: 0.75 };
+export const HandColor = BABYLON.Color3.White();

src/ui/Duel/simpleDuel/hands.ts

+import { Card } from "../data";
+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "./config";
+
+export default (hands: Card[], scene: BABYLON.Scene) => {
+  const gap = CONFIG.GroundShape.width / hands.length;
+  const left = -(CONFIG.GroundShape.width / 2);
+  hands.forEach((item, idx, _) => {
+    const hand = BABYLON.MeshBuilder.CreatePlane(
+      `hand${idx}`,
+      CONFIG.HandShape,
+      scene
+    );
+    // 位置
+    hand.position = new BABYLON.Vector3(
+      left + gap * idx,
+      CONFIG.HandShape.height / 2,
+      -(CONFIG.GroundShape.height / 2) - 1
+    );
+    // 材质
+    const handMaterial = new BABYLON.StandardMaterial("handMaterial", scene);
+    // 材质颜色
+    handMaterial.diffuseColor = CONFIG.HandColor;
+    hand.material = handMaterial;
+    // 事件管理
+    hand.actionManager = new BABYLON.ActionManager(scene);
+    // 监听点击事件
+    hand.actionManager.registerAction(
+      new BABYLON.ExecuteCodeAction(
+        BABYLON.ActionManager.OnPickTrigger,
+        (event) => {
+          console.log(`<Click>hand: ${idx}`, "card:", item, "event:", event);
+        }
+      )
+    );
+  });
+};

src/ui/Duel/simpleDuel.tsx → src/ui/Duel/simpleDuel/mod.tsx

@@ -3,12 +3,13 @@
  *
  * */
 
-import { IDuelPlate, TypeSelector } from "./duel";
-import * as DuelData from "./data";
-import { useAppSelector } from "../../hook";
+import { IDuelPlate, TypeSelector } from "../duel";
+import * as DuelData from "../data";
+import { useAppSelector } from "../../../hook";
 import React, { useEffect, useRef } from "react";
-import type { RootState } from "../../store";
+import type { RootState } from "../../../store";
 import * as BABYLON from "@babylonjs/core";
+import renderHands from "./hands";
 
 // CONFIG
 const GroundShape = { width: 6, height: 6 };
@@ -53,36 +54,6 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       return cardSlot;
     };
 
-    const createHandSlot = (
-      name: string,
-      position: BABYLON.Vector3,
-      scene: BABYLON.Scene
-    ) => {
-      const handSlot = BABYLON.MeshBuilder.CreatePlane(
-        name,
-        HandSlotShape,
-        scene
-      );
-      handSlot.position = position;
-      const planeMaterial = new BABYLON.StandardMaterial(
-        "planeMaterial",
-        scene
-      );
-      planeMaterial.diffuseColor = BABYLON.Color3.White();
-      handSlot.material = planeMaterial;
-      handSlot.actionManager = new BABYLON.ActionManager(scene);
-      handSlot.actionManager.registerAction(
-        new BABYLON.ExecuteCodeAction(
-          BABYLON.ActionManager.OnPickTrigger,
-          (event) => {
-            console.log(event.source + "is clicked");
-          }
-        )
-      );
-
-      return handSlot;
-    };
-
     useEffect(() => {
       // 初始化Scene
       const canvasCurrent = canvasRef.current;
@@ -185,11 +156,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       );
 
       // 创建手牌
-      createHandSlot("handSlot0", new BABYLON.Vector3(-2, 0.5, -4), scene);
-      createHandSlot("handSlot1", new BABYLON.Vector3(-1, 0.5, -4), scene);
-      createHandSlot("handSlot2", new BABYLON.Vector3(0, 0.5, -4), scene);
-      createHandSlot("handSlot3", new BABYLON.Vector3(1, 0.5, -4), scene);
-      createHandSlot("handSlot4", new BABYLON.Vector3(2, 0.5, -4), scene);
+      renderHands(hands, scene);
 
       // 创建地板
       const ground = BABYLON.MeshBuilder.CreateGround(