update Main.tsx

src/ui/Duel/Main.tsx

-import * as BABYLON from "@babylonjs/core";
-import { Row } from "antd";
 import React from "react";
-import { Engine, Scene } from "react-babylonjs";
 
-import { useConfig } from "@/config";
-
-import NeosLayout from "./Layout";
 import {
   Alert,
   CardListModal,
@@ -14,39 +8,19 @@ import {
   CheckCardModalV2,
   CheckCardModalV3,
   CheckCounterModal,
-  DuelTimeLine,
   HintNotification,
   OptionModal,
-  Phase,
-  PlayerStatus,
   PositionModal,
-  SendBox,
   SortCardModal,
   YesNoModal,
 } from "./Message";
-import {
-  ExtraDeck,
-  Field,
-  Graveyard,
-  Hands,
-  Magics,
-  Monsters,
-} from "./PlayMat";
-import { BanishedZone } from "./PlayMat/BanishedZone";
-import { CommonDeck } from "./PlayMat/Deck";
+import Mat from "./PlayMat2";
 
-const NeosConfig = useConfig();
-// Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
   return (
     <>
       <Alert />
-      <NeosLayout
-        sider={<NeosSider />}
-        header={<PlayerStatus />}
-        content={<NeosCanvas />}
-        footer={<Phase />}
-      />
+      <Mat />
       <CardModal />
       <CardListModal />
       <HintNotification />
@@ -62,65 +36,4 @@ const NeosDuel = () => {
   );
 };
 
-const NeosSider = () => (
-  <>
-    <Row>
-      <DuelTimeLine />
-    </Row>
-    <Row>
-      <SendBox />
-    </Row>
-  </>
-);
-
-const NeosCanvas = () => (
-  <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
-    <Scene>
-      <Camera />
-      <Light />
-      <Hands />
-      <Monsters />
-      <Magics />
-      <Field />
-      <CommonDeck />
-      <ExtraDeck />
-      <Graveyard />
-      <BanishedZone />
-      <Field />
-      <Ground />
-    </Scene>
-  </Engine>
-);
-
-const Camera = () => (
-  <freeCamera
-    name="duel-camera"
-    position={new BABYLON.Vector3(0, 8, -10)}
-    target={BABYLON.Vector3.Zero()}
-  ></freeCamera>
-);
-
-const Light = () => (
-  <hemisphericLight
-    name="duel-light"
-    direction={new BABYLON.Vector3(1, 2.5, 1)}
-    intensity={0.7}
-  ></hemisphericLight>
-);
-
-const Ground = () => {
-  const shape = NeosConfig.ui.ground;
-  const texture = new BABYLON.Texture(`${NeosConfig.assetsPath}/newfield.png`);
-  texture.hasAlpha = true;
-
-  return (
-    <ground name="duel-ground" width={shape.width} height={shape.height}>
-      <standardMaterial
-        name="duel-ground-mat"
-        diffuseTexture={texture}
-      ></standardMaterial>
-    </ground>
-  );
-};
-
 export default NeosDuel;

src/ui/Duel/Message/Phase.tsx

-import Icon from "@ant-design/icons";
-import { Button, Modal, Space } from "antd";
-import { ReactComponent as BattleSvg } from "neos-assets/crossed-swords.svg";
-import { ReactComponent as EpSvg } from "neos-assets/power-button.svg";
-import { ReactComponent as Main2Svg } from "neos-assets/sword-in-stone.svg";
-import { ReactComponent as SurrenderSvg } from "neos-assets/truce.svg";
-import React, { useState } from "react";
-import { useSnapshot } from "valtio";
-
-import {
-  sendSelectBattleCmdResponse,
-  sendSelectIdleCmdResponse,
-  sendSurrender,
-} from "@/api";
-import {
-  clearAllIdleInteractivities as clearAllIdleInteractivities,
-  matStore,
-} from "@/stores";
-
-const IconSize = "150%";
-const SpaceSize = 16;
-
-const PhaseButton = (props: {
-  text: string;
-  enable: boolean;
-  onClick: () => void;
-  icon?: React.ReactNode;
-}) => {
-  return (
-    <Button
-      icon={props.icon}
-      disabled={!props.enable}
-      onClick={props.onClick}
-      size="large"
-    >
-      {props.text}
-    </Button>
-  );
-};
-
-const { phase } = matStore;
-
-export const Phase = () => {
-  const snapPhase = useSnapshot(phase);
-  const enableBp = snapPhase.enableBp;
-  const enableM2 = snapPhase.enableM2;
-  const enableEp = snapPhase.enableEp;
-  const currentPhase = snapPhase.currentPhase;
-
-  const [modalOpen, setModalOpen] = useState(false);
-
-  const response =
-    currentPhase === "BATTLE_START" ||
-    currentPhase === "BATTLE_STEP" ||
-    currentPhase === "DAMAGE" ||
-    currentPhase === "DAMAGE_GAL" ||
-    currentPhase === "BATTLE"
-      ? 3
-      : 7;
-
-  const onBp = () => {
-    sendSelectIdleCmdResponse(6);
-    clearAllIdleInteractivities(0); // 为什么要clear两次？
-    clearAllIdleInteractivities(0);
-    phase.enableBp = false;
-  };
-  const onM2 = () => {
-    sendSelectBattleCmdResponse(2);
-    clearAllIdleInteractivities(0);
-    clearAllIdleInteractivities(0);
-    phase.enableM2 = false;
-  };
-  const onEp = () => {
-    sendSelectIdleCmdResponse(response);
-    clearAllIdleInteractivities(0);
-    clearAllIdleInteractivities(0);
-    phase.enableEp = false;
-  };
-  const onSurrender = () => {
-    setModalOpen(true);
-  };
-
-  return (
-    <Space wrap size={SpaceSize}>
-      <PhaseButton
-        icon={<Icon component={BattleSvg} style={{ fontSize: IconSize }} />}
-        enable={enableBp}
-        text="战斗阶段"
-        onClick={onBp}
-      />
-      <PhaseButton
-        icon={<Icon component={Main2Svg} style={{ fontSize: IconSize }} />}
-        enable={enableM2}
-        text="主要阶段2"
-        onClick={onM2}
-      />
-      <PhaseButton
-        icon={<Icon component={EpSvg} style={{ fontSize: IconSize }} />}
-        enable={enableEp}
-        text="结束回合"
-        onClick={onEp}
-      />
-      <PhaseButton
-        icon={<Icon component={SurrenderSvg} style={{ fontSize: IconSize }} />}
-        enable={true}
-        text="投降"
-        onClick={onSurrender}
-      />
-      <Modal
-        title="是否确认要投降？"
-        open={modalOpen}
-        closable={false}
-        footer={
-          <>
-            <Button
-              onClick={() => {
-                sendSurrender();
-                setModalOpen(false);
-              }}
-            >
-              Yes
-            </Button>
-            <Button
-              onClick={() => {
-                setModalOpen(false);
-              }}
-            >
-              No
-            </Button>
-          </>
-        }
-      />
-    </Space>
-  );
-};

src/ui/Duel/Message/index.ts

@@ -8,7 +8,6 @@ export * from "./CheckCounterModal";
 export * from "./DragModal";
 export * from "./HintNotification";
 export * from "./OptionModal";
-export * from "./Phase";
 export * from "./PositionModal";
 export * from "./SendBox";
 export * from "./SortCardModal";

src/ui/Duel/PlayMat2/Menu.tsx

 import "@/styles/mat.css";
 
-import React from "react";
+import Icon from "@ant-design/icons";
+import { Button, Modal } from "antd";
+import { ReactComponent as BattleSvg } from "neos-assets/crossed-swords.svg";
+import { ReactComponent as EpSvg } from "neos-assets/power-button.svg";
+import { ReactComponent as Main2Svg } from "neos-assets/sword-in-stone.svg";
+import { ReactComponent as SurrenderSvg } from "neos-assets/truce.svg";
+import React, { useState } from "react";
+import { useSnapshot } from "valtio";
+
+import {
+  sendSelectBattleCmdResponse,
+  sendSelectIdleCmdResponse,
+  sendSurrender,
+} from "@/api";
+import {
+  clearAllIdleInteractivities as clearAllIdleInteractivities,
+  matStore,
+} from "@/stores";
+
+const IconSize = "150%";
+
+const PhaseButton = (props: {
+  text: string;
+  enable: boolean;
+  onClick: () => void;
+  icon?: React.ReactNode;
+}) => {
+  return (
+    <Button
+      icon={props.icon}
+      disabled={!props.enable}
+      onClick={props.onClick}
+      size="large"
+    >
+      {props.text}
+    </Button>
+  );
+};
+
+const { phase } = matStore;
 
 export const Menu = () => {
-  // TODO
+  const snapPhase = useSnapshot(phase);
+  const enableBp = snapPhase.enableBp;
+  const enableM2 = snapPhase.enableM2;
+  const enableEp = snapPhase.enableEp;
+  const currentPhase = snapPhase.currentPhase;
+
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const response =
+    currentPhase === "BATTLE_START" ||
+    currentPhase === "BATTLE_STEP" ||
+    currentPhase === "DAMAGE" ||
+    currentPhase === "DAMAGE_GAL" ||
+    currentPhase === "BATTLE"
+      ? 3
+      : 7;
+
+  const onBp = () => {
+    sendSelectIdleCmdResponse(6);
+    clearAllIdleInteractivities(0); // 为什么要clear两次？
+    clearAllIdleInteractivities(0);
+    phase.enableBp = false;
+  };
+  const onM2 = () => {
+    sendSelectBattleCmdResponse(2);
+    clearAllIdleInteractivities(0);
+    clearAllIdleInteractivities(0);
+    phase.enableM2 = false;
+  };
+  const onEp = () => {
+    sendSelectIdleCmdResponse(response);
+    clearAllIdleInteractivities(0);
+    clearAllIdleInteractivities(0);
+    phase.enableEp = false;
+  };
+  const onSurrender = () => {
+    setModalOpen(true);
+  };
 
   return (
     <div id="controller">
-      <button>A1</button>
-      <button>A2</button>
+      <PhaseButton
+        icon={<Icon component={BattleSvg} style={{ fontSize: IconSize }} />}
+        enable={enableBp}
+        text="战斗阶段"
+        onClick={onBp}
+      />
+      <PhaseButton
+        icon={<Icon component={Main2Svg} style={{ fontSize: IconSize }} />}
+        enable={enableM2}
+        text="主要阶段2"
+        onClick={onM2}
+      />
+      <PhaseButton
+        icon={<Icon component={EpSvg} style={{ fontSize: IconSize }} />}
+        enable={enableEp}
+        text="结束回合"
+        onClick={onEp}
+      />
+      <PhaseButton
+        icon={<Icon component={SurrenderSvg} style={{ fontSize: IconSize }} />}
+        enable={true}
+        text="投降"
+        onClick={onSurrender}
+      />
+      <Modal
+        title="是否确认要投降？"
+        open={modalOpen}
+        closable={false}
+        footer={
+          <>
+            <Button
+              onClick={() => {
+                sendSurrender();
+                setModalOpen(false);
+              }}
+            >
+              Yes
+            </Button>
+            <Button
+              onClick={() => {
+                setModalOpen(false);
+              }}
+            >
+              No
+            </Button>
+          </>
+        }
+      />
     </div>
   );
 };

src/ui/Neos.tsx

@@ -7,7 +7,6 @@ const Login = React.lazy(() => import("./Login"));
 const WaitRoom = React.lazy(() => import("./WaitRoom"));
 const Mora = React.lazy(() => import("./Mora"));
 const NeosDuel = React.lazy(() => import("./Duel/Main"));
-const Mat = React.lazy(() => import("./Duel/PlayMat2"));
 
 export default function () {
   return (
@@ -33,7 +32,7 @@ export default function () {
         path="/duel/:player/:passWd/:ip"
         element={
           <Suspense fallback={<Loading />}>
-            <Mat />
+            <NeosDuel />
           </Suspense>
         }
       />