simpleDuelPlate 10%

src/ui/Duel/simpleDuel/config.ts

@@ -5,10 +5,35 @@
 
 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 GroundShape = () => {
+  return { width: 6, height: 6 };
+};
+export const CardSlotShape = () => {
+  return { width: 0.5, height: 0.75, depth: 0.05 };
+};
+export const CardSlotRotation = () => {
+  return new BABYLON.Vector3(1.5, 0, 0);
+};
 
 // 手牌
-export const HandShape = { width: 0.5, height: 0.75 };
-export const HandColor = BABYLON.Color3.White();
+export const HandShape = () => {
+  return { width: 0.5, height: 0.75 };
+};
+export const HandColor = () => {
+  return BABYLON.Color3.White();
+};
+
+// 怪兽区
+export const MonsterColor = () => {
+  return BABYLON.Color3.Red();
+};
+
+// 额外怪兽区
+export const extraMonsterColor = () => {
+  return BABYLON.Color3.Yellow();
+};
+
+// 魔法陷阱区
+export const MagicColor = () => {
+  return BABYLON.Color3.Blue();
+};

src/ui/Duel/simpleDuel/extraMonsters.ts

+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "./config";
+
+export default (scene: BABYLON.Scene) => {
+  const xs = [-1, 1];
+  for (let i in xs) {
+    const slot = BABYLON.MeshBuilder.CreateBox(
+      `extraMonster${i}`,
+      CONFIG.CardSlotShape(),
+      scene
+    );
+    // 位置
+    slot.position = new BABYLON.Vector3(xs[i], 0.5, -1);
+    // 旋转
+    slot.rotation = CONFIG.CardSlotRotation();
+    // 材质
+    const extraMonsterMaterial = new BABYLON.StandardMaterial(
+      "extraMonsterMaterial",
+      scene
+    );
+    extraMonsterMaterial.diffuseColor = CONFIG.extraMonsterColor();
+    slot.material = extraMonsterMaterial;
+  }
+};

src/ui/Duel/simpleDuel/hands.ts

@@ -3,24 +3,26 @@ 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);
+  const groundShape = CONFIG.GroundShape();
+  const handShape = CONFIG.HandShape();
+  const gap = groundShape.width / hands.length;
+  const left = -(groundShape.width / 2);
   hands.forEach((item, idx, _) => {
     const hand = BABYLON.MeshBuilder.CreatePlane(
       `hand${idx}`,
-      CONFIG.HandShape,
+      handShape,
       scene
     );
     // 位置
     hand.position = new BABYLON.Vector3(
       left + gap * idx,
-      CONFIG.HandShape.height / 2,
-      -(CONFIG.GroundShape.height / 2) - 1
+      handShape.height / 2,
+      -(groundShape.height / 2) - 1
     );
     // 材质
     const handMaterial = new BABYLON.StandardMaterial("handMaterial", scene);
     // 材质颜色
-    handMaterial.diffuseColor = CONFIG.HandColor;
+    handMaterial.diffuseColor = CONFIG.HandColor();
     hand.material = handMaterial;
     // 事件管理
     hand.actionManager = new BABYLON.ActionManager(scene);

src/ui/Duel/simpleDuel/magics.ts

+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "./config";
+
+export default (scene: BABYLON.Scene) => {
+  const left = -2;
+  const gap = 1;
+  for (let i = 0; i < 5; i++) {
+    const slot = BABYLON.MeshBuilder.CreateBox(
+      `magic${i}`,
+      CONFIG.CardSlotShape(),
+      scene
+    );
+    // 位置
+    slot.position = new BABYLON.Vector3(left + gap * i, 0.5, -3);
+    // 旋转
+    slot.rotation = CONFIG.CardSlotRotation();
+    // 材质
+    const magicMaterial = new BABYLON.StandardMaterial("magicMaterial", scene);
+    magicMaterial.diffuseColor = CONFIG.MagicColor();
+    slot.material = magicMaterial;
+  }
+};

src/ui/Duel/simpleDuel/mod.tsx

@@ -10,12 +10,12 @@ import React, { useEffect, useRef } from "react";
 import type { RootState } from "../../../store";
 import * as BABYLON from "@babylonjs/core";
 import renderHands from "./hands";
+import renderMonsters from "./monsters";
+import renderExtraMonsters from "./extraMonsters";
+import renderMagics from "./magics";
+import * as CONFIG from "./config";
 
 // CONFIG
-const GroundShape = { width: 6, height: 6 };
-const CardSlotShape = { width: 0.5, height: 0.75, depth: 0.05 };
-const CardSlotRotation = new BABYLON.Vector3(1.5, 0, 0);
-const HandSlotShape = { width: 0.5, height: 0.75 };
 
 export default class SimpleDuelPlateImpl implements IDuelPlate {
   handsSelector?: TypeSelector<DuelData.Card[]>;
@@ -34,26 +34,6 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
     // ----- WebGL渲染 -----
     const canvasRef = useRef<HTMLCanvasElement>(null);
 
-    const createCardSlot = (
-      name: string,
-      position: BABYLON.Vector3,
-      color: BABYLON.Color3,
-      scene: BABYLON.Scene
-    ) => {
-      const cardSlot = BABYLON.MeshBuilder.CreateBox(
-        name,
-        CardSlotShape,
-        scene
-      );
-      cardSlot.position = position;
-      cardSlot.rotation = CardSlotRotation;
-      const boxMaterail = new BABYLON.StandardMaterial("boxMaterail", scene);
-      boxMaterail.diffuseColor = color;
-      cardSlot.material = boxMaterail;
-
-      return cardSlot;
-    };
-
     useEffect(() => {
       // 初始化Scene
       const canvasCurrent = canvasRef.current;
@@ -77,83 +57,13 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       );
       light.intensity = 0.7;
 
-      // 创建魔法陷阱区
-      createCardSlot(
-        "cardSlot0",
-        new BABYLON.Vector3(-2, 0.5, -3),
-        BABYLON.Color3.Blue(),
-        scene
-      );
-      createCardSlot(
-        "cardSlot1",
-        new BABYLON.Vector3(-1, 0.5, -3),
-        BABYLON.Color3.Blue(),
-        scene
-      );
-      createCardSlot(
-        "cardSlot2",
-        new BABYLON.Vector3(0, 0.5, -3),
-        BABYLON.Color3.Blue(),
-        scene
-      );
-      createCardSlot(
-        "cardSlot3",
-        new BABYLON.Vector3(1, 0.5, -3),
-        BABYLON.Color3.Blue(),
-        scene
-      );
-      createCardSlot(
-        "cardSlot4",
-        new BABYLON.Vector3(2, 0.5, -3),
-        BABYLON.Color3.Blue(),
-        scene
-      );
-
-      // 创建怪兽区
-      createCardSlot(
-        "cardSlot5",
-        new BABYLON.Vector3(-2, 0.5, -2),
-        BABYLON.Color3.Red(),
-        scene
-      );
-      createCardSlot(
-        "cardSlot6",
-        new BABYLON.Vector3(-1, 0.5, -2),
-        BABYLON.Color3.Red(),
-        scene
-      );
-      createCardSlot(
-        "cardSlot7",
-        new BABYLON.Vector3(0, 0.5, -2),
-        BABYLON.Color3.Red(),
-        scene
-      );
-      createCardSlot(
-        "cardSlot8",
-        new BABYLON.Vector3(1, 0.5, -2),
-        BABYLON.Color3.Red(),
-        scene
-      );
-      createCardSlot(
-        "cardSlot9",
-        new BABYLON.Vector3(2, 0.5, -2),
-        BABYLON.Color3.Red(),
-        scene
-      );
+      // 魔法陷阱区
+      renderMagics(scene);
+      // 怪兽区
+      renderMonsters(scene);
 
       // 创建额外怪兽区
-      createCardSlot(
-        "cardSlot10",
-        new BABYLON.Vector3(-1, 0.5, -1),
-        BABYLON.Color3.Yellow(),
-        scene
-      );
-      createCardSlot(
-        "cardSlot11",
-        new BABYLON.Vector3(1, 0.5, -1),
-        BABYLON.Color3.Yellow(),
-        scene
-      );
+      renderExtraMonsters(scene);
 
       // 创建手牌
       renderHands(hands, scene);
@@ -161,7 +71,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       // 创建地板
       const ground = BABYLON.MeshBuilder.CreateGround(
         "ground",
-        GroundShape,
+        CONFIG.GroundShape(),
         scene
       );
 

src/ui/Duel/simpleDuel/monsters.ts

+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "./config";
+
+export default (scene: BABYLON.Scene) => {
+  const left = -2;
+  const gap = 1;
+  for (let i = 0; i < 5; i++) {
+    const slot = BABYLON.MeshBuilder.CreateBox(
+      `monster${i}`,
+      CONFIG.CardSlotShape(),
+      scene
+    );
+    // 位置
+    slot.position = new BABYLON.Vector3(left + gap * i, 0.5, -2);
+    // 旋转
+    slot.rotation = CONFIG.CardSlotRotation();
+    // 材质
+    const monsterMaterial = new BABYLON.StandardMaterial(
+      "monsterMaterial",
+      scene
+    );
+    monsterMaterial.diffuseColor = CONFIG.MonsterColor();
+    slot.material = monsterMaterial;
+  }
+};