Merge branch 'optimize/duel/layout' into 'main'

Optimize/duel/layout

See merge request mycard/Neos!113

neos.config.json

@@ -38,6 +38,20 @@
         "z": 1
       },
       "floating": 0.02
+    },
+    "layout": {
+      "header": {
+        "height": 80
+      },
+      "content": {
+        "height": 800
+      },
+      "sider": {
+        "width": 400
+      },
+      "footer": {
+        "height": 80
+      }
     }
   }
 }

package.json

@@ -17,7 +17,7 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-redux": "^7.1.24",
     "@types/sql.js": "^1.4.4",
-    "antd": "^5.0.7",
+    "antd": "^5.2.3",
     "axios": "^0.27.2",
     "google-protobuf": "^3.21.0",
     "react": "^18.2.0",

src/ui/Duel/layout.tsx

+import React from "react";
+import { Layout } from "antd";
+import NeosConfig from "../../../neos.config.json";
+
+const layoutConfig = NeosConfig.ui.layout;
+const { Header, Footer, Sider, Content } = Layout;
+
+const headerStyle: React.CSSProperties = {
+  textAlign: "center",
+  color: "#fff",
+  height: layoutConfig.header.height,
+  paddingInline: 50,
+  lineHeight: "64px",
+};
+
+const contentStyle: React.CSSProperties = {
+  textAlign: "center",
+  minHeight: 120,
+  height: layoutConfig.content.height,
+  lineHeight: "120px",
+};
+
+const siderStyle: React.CSSProperties = {
+  lineHeight: "120px",
+  position: "fixed",
+  overflow: "auto",
+  height: "100vh",
+  padding: "50px 20px",
+  color: "#fff",
+};
+
+const footerStyle: React.CSSProperties = {
+  textAlign: "center",
+  height: layoutConfig.footer.height,
+  color: "#fff",
+};
+
+const NeosLayout = (props: {
+  sider: React.ReactNode;
+  header: React.ReactNode;
+  content: React.ReactNode;
+  footer: React.ReactNode;
+}) => {
+  return (
+    <Layout>
+      <Sider style={siderStyle} width={layoutConfig.sider.width}>
+        {props.sider}
+      </Sider>
+      <Layout>
+        <Header style={headerStyle}>{props.header}</Header>
+        <Content style={contentStyle}>{props.content}</Content>
+        <Footer style={footerStyle}>{props.footer}</Footer>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default NeosLayout;

src/ui/Duel/main.tsx

@@ -19,8 +19,12 @@ import OptionModal from "./optionModal";
 import Phase from "./phase";
 import CheckCardModalV2 from "./checkCardModalV2";
 import ExtraDeck from "./extraDeck";
+import NeosLayout from "./layout";
 import { initStrings } from "../../api/strings";
 import NeosConfig from "../../../neos.config.json";
+import DuelTimeLine from "./timeLine";
+import { Row } from "antd";
+import SendBox from "./sendBox";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
@@ -41,29 +45,12 @@ const NeosDuel = () => {
 
   return (
     <>
-      <ReactReduxContext.Consumer>
-        {({ store }) => (
-          <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
-            <Scene>
-              <Provider store={store}>
-                <Camera />
-                <Light />
-                <Hands />
-                <Monsters />
-                <Magics />
-                <Field />
-                <CommonDeck />
-                <ExtraDeck />
-                <Cemeteries />
-                <Exclusion />
-                <Field />
-                <Phase />
-                <Ground />
-              </Provider>
-            </Scene>
-          </Engine>
-        )}
-      </ReactReduxContext.Consumer>
+      <NeosLayout
+        sider={<NeosSider />}
+        header={<div>header</div>}
+        content={<NeosCanvas />}
+        footer={<div>footer</div>}
+      />
       <CardModal />
       <CardListModal />
       <HintNotification />
@@ -76,6 +63,43 @@ const NeosDuel = () => {
   );
 };
 
+const NeosSider = () => (
+  <div>
+    <Row>
+      <DuelTimeLine />
+    </Row>
+    <Row>
+      <SendBox />
+    </Row>
+  </div>
+);
+
+const NeosCanvas = () => (
+  <ReactReduxContext.Consumer>
+    {({ store }) => (
+      <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
+        <Scene>
+          <Provider store={store}>
+            <Camera />
+            <Light />
+            <Hands />
+            <Monsters />
+            <Magics />
+            <Field />
+            <CommonDeck />
+            <ExtraDeck />
+            <Cemeteries />
+            <Exclusion />
+            <Field />
+            <Phase />
+            <Ground />
+          </Provider>
+        </Scene>
+      </Engine>
+    )}
+  </ReactReduxContext.Consumer>
+);
+
 const Camera = () => (
   <freeCamera
     name="duel-camera"

src/ui/Duel/sendBox.tsx

+import React, { useState } from "react";
+import { Input, Button, Row, Col } from "antd";
+import { SendOutlined } from "@ant-design/icons";
+
+const SendBox = () => {
+  const [content, setContent] = useState("");
+  return (
+    <>
+      <Row>
+        <Input.TextArea
+          placeholder="Message to sent..."
+          autoSize={{ minRows: 3, maxRows: 4 }}
+          value={content}
+          onChange={(e) => {
+            setContent(e.target.value);
+          }}
+        />
+      </Row>
+      <Row>
+        <Col>
+          <Button
+            icon={<SendOutlined />}
+            onClick={() => {}}
+            disabled={!content}
+          />
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default SendBox;

src/ui/Duel/timeLine.tsx

+import React from "react";
+import { Timeline } from "antd";
+import { UserOutlined, SettingOutlined } from "@ant-design/icons";
+
+const DuelTimeLine = () => (
+  <Timeline
+    items={[
+      {
+        dot: <UserOutlined />,
+        children: "对手消息",
+        color: "red",
+      },
+      {
+        dot: <UserOutlined />,
+        children: "自己消息",
+        color: "green",
+      },
+      {
+        dot: <SettingOutlined />,
+        children: "系统消息",
+      },
+    ]}
+  />
+);
+
+export default DuelTimeLine;