Merge branch 'feat/ui/duel' into 'main'

Feat/ui/duel

See merge request !23

src/ui/Duel/simpleDuel/cemetery.ts

+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "./config";
+
+export default (scene: BABYLON.Scene) => {
+  // 墓地
+  const shape = CONFIG.CemeterySlotShape();
+  const cemetery = BABYLON.MeshBuilder.CreateBox("cemetery", shape);
+  // 位置
+  cemetery.position = new BABYLON.Vector3(
+    3.2,
+    shape.depth / 2 + CONFIG.Floating,
+    -2.0
+  );
+  // 旋转
+  cemetery.rotation = CONFIG.CemeterySlotRotation();
+  // 材质
+  const cemeteryMaterial = new BABYLON.StandardMaterial(
+    "cemeteryMaterial",
+    scene
+  );
+  cemeteryMaterial.diffuseColor = CONFIG.CemeteryColor();
+  cemetery.material = cemeteryMaterial;
+};

src/ui/Duel/simpleDuel/config.ts

@@ -6,14 +6,44 @@
 import * as BABYLON from "@babylonjs/core";
 
 export const GroundShape = () => {
-  return { width: 6, height: 6 };
+  return { width: 9.9, height: 8 };
 };
 export const CardSlotShape = () => {
-  return { width: 0.5, height: 0.75, depth: 0.05 };
+  return { width: 0.8, height: 1, depth: 0.05 };
+};
+export const DeckSlotShape = () => {
+  return { width: 0.8, height: 1, depth: 0.5 };
+};
+export const ExtraDeckSlotShape = () => {
+  return { width: 0.8, height: 1, depth: 0.2 };
+};
+export const CemeterySlotShape = () => {
+  return { width: 0.8, height: 1, depth: 0.2 };
+};
+export const ExclusionSlotShape = () => {
+  return { width: 0.8, height: 1, depth: 0.2 };
+};
+export const FieldSlotShape = () => {
+  return { width: 0.8, height: 1, depth: 0.2 };
 };
 export const CardSlotRotation = () => {
   return new BABYLON.Vector3(1.5, 0, 0);
 };
+export const DeckSlotRotation = () => {
+  return new BABYLON.Vector3(1.5, 0, 0);
+};
+export const CemeterySlotRotation = () => {
+  return new BABYLON.Vector3(1.5, 0, 0);
+};
+export const ExclusionSlotRotation = () => {
+  return new BABYLON.Vector3(1.5, 0, 0);
+};
+export const FieldSlotRotation = () => {
+  return new BABYLON.Vector3(1.5, 0, 0);
+};
+
+// 浮空
+export const Floating = 0.02;
 
 // 手牌
 export const HandShape = () => {
@@ -37,3 +67,28 @@ export const extraMonsterColor = () => {
 export const MagicColor = () => {
   return BABYLON.Color3.Blue();
 };
+
+// 卡组
+export const DeckColor = () => {
+  return BABYLON.Color3.Gray();
+};
+
+// 额外卡组
+export const ExtraDeckColor = () => {
+  return BABYLON.Color3.Purple();
+};
+
+// 墓地
+export const CemeteryColor = () => {
+  return BABYLON.Color3.Teal();
+};
+
+// 除外区
+export const ExclusionColor = () => {
+  return BABYLON.Color3.Black();
+};
+
+// 场地
+export const FieldColor = () => {
+  return BABYLON.Color3.White();
+};

src/ui/Duel/simpleDuel/deck.ts

+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "./config";
+
+export default (scene: BABYLON.Scene) => {
+  // 卡组
+  const deck = BABYLON.MeshBuilder.CreateBox(
+    "deck",
+    CONFIG.DeckSlotShape(),
+    scene
+  );
+  // 位置
+  deck.position = new BABYLON.Vector3(
+    3.2,
+    CONFIG.DeckSlotShape().depth / 2 + CONFIG.Floating,
+    -3.3
+  );
+  // 旋转
+  deck.rotation = CONFIG.DeckSlotRotation();
+  // 材质
+  const deckMaterial = new BABYLON.StandardMaterial("deckMaterial", scene);
+  deckMaterial.diffuseColor = CONFIG.DeckColor();
+  deck.material = deckMaterial;
+
+  // 额外卡组
+
+  const extraDeck = BABYLON.MeshBuilder.CreateBox(
+    "exraDeck",
+    CONFIG.ExtraDeckSlotShape(),
+    scene
+  );
+  // 位置
+  extraDeck.position = new BABYLON.Vector3(
+    -3.3,
+    CONFIG.ExtraDeckSlotShape().depth / 2 + CONFIG.Floating,
+    -3.3
+  );
+  // 旋转
+  extraDeck.rotation = CONFIG.DeckSlotRotation();
+  // 材质
+  const extraDeckMaterial = new BABYLON.StandardMaterial(
+    "extraDeckMaterial",
+    scene
+  );
+  extraDeckMaterial.diffuseColor = CONFIG.ExtraDeckColor();
+  extraDeck.material = extraDeckMaterial;
+};

src/ui/Duel/simpleDuel/exclusion.ts

+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "./config";
+
+export default (scene: BABYLON.Scene) => {
+  // 除外区
+  const shape = CONFIG.ExclusionSlotShape();
+  const exclusion = BABYLON.MeshBuilder.CreateBox("exclusion", shape);
+  // 位置
+  exclusion.position = new BABYLON.Vector3(3.2, CONFIG.Floating, -0.7);
+  // 旋转
+  exclusion.rotation = CONFIG.ExclusionSlotRotation();
+  // 材质
+  const exclusionMaterial = new BABYLON.StandardMaterial(
+    "exclusionMaterial",
+    scene
+  );
+  exclusionMaterial.diffuseColor = CONFIG.ExclusionColor();
+  exclusion.material = exclusionMaterial;
+};

src/ui/Duel/simpleDuel/extraMonsters.ts

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

src/ui/Duel/simpleDuel/field.ts

+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "./config";
+
+export default (scene: BABYLON.Scene) => {
+  // 墓地
+  const shape = CONFIG.FieldSlotShape();
+  const field = BABYLON.MeshBuilder.CreateBox("field", shape);
+  // 位置
+  field.position = new BABYLON.Vector3(
+    -3.3,
+    shape.depth / 2 + CONFIG.Floating,
+    -2.0
+  );
+  // 旋转
+  field.rotation = CONFIG.FieldSlotRotation();
+  // 材质
+  const fieldMaterial = new BABYLON.StandardMaterial("fieldMaterial", scene);
+  fieldMaterial.diffuseColor = CONFIG.FieldColor();
+  field.material = fieldMaterial;
+};

src/ui/Duel/simpleDuel/magics.ts

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

src/ui/Duel/simpleDuel/mod.tsx

@@ -12,6 +12,10 @@ import renderHands from "./hands";
 import renderMonsters from "./monsters";
 import renderExtraMonsters from "./extraMonsters";
 import renderMagics from "./magics";
+import renderDeck from "./deck";
+import renderCemetery from "./cemetery";
+import renderExclusion from "./exclusion";
+import renderField from "./field";
 import * as CONFIG from "./config";
 import { CardMeta } from "../../../api/cards";
 
@@ -43,7 +47,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       // 创建Camera
       const camera = new BABYLON.FreeCamera(
         "camera1",
-        new BABYLON.Vector3(0, 5, -10), // 俯视方向
+        new BABYLON.Vector3(0, 8, -10), // 俯视方向
         scene
       );
       camera.setTarget(BABYLON.Vector3.Zero()); // 俯视向前
@@ -59,6 +63,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
 
       // 魔法陷阱区
       renderMagics(scene);
+
       // 怪兽区
       renderMonsters(scene);
 
@@ -68,7 +73,33 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       // 创建手牌
       renderHands(hands, scene);
 
-      // 暂时不创建地板
+      // 创建卡组
+      renderDeck(scene);
+
+      // 创建墓地
+      renderCemetery(scene);
+
+      // 创建除外区
+      renderExclusion(scene);
+
+      // 创建场地
+      renderField(scene);
+
+      // 创建地板
+      const ground = BABYLON.MeshBuilder.CreateGround(
+        "ground",
+        CONFIG.GroundShape(),
+        scene
+      );
+      const groundMaterial = new BABYLON.StandardMaterial(
+        "groundMaterial",
+        scene
+      );
+      groundMaterial.diffuseTexture = new BABYLON.Texture(
+        `http://localhost:3030/images/newfield.png`
+      );
+      groundMaterial.diffuseTexture.hasAlpha = true;
+      ground.material = groundMaterial;
 
       // 渲染循环
       engine.runRenderLoop(() => {

src/ui/Duel/simpleDuel/monsters.ts

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