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

Optimize/duel/status

See merge request !114

neos.config.json

@@ -47,7 +47,7 @@
         "height": 800
       },
       "sider": {
-        "width": 400
+        "width": 300
       },
       "footer": {
         "height": 80

src/ui/Duel/layout.tsx

@@ -7,10 +7,9 @@ const { Header, Footer, Sider, Content } = Layout;
 
 const headerStyle: React.CSSProperties = {
   textAlign: "center",
+  alignContent: "center",
   color: "#fff",
   height: layoutConfig.header.height,
-  paddingInline: 50,
-  lineHeight: "64px",
 };
 
 const contentStyle: React.CSSProperties = {
@@ -18,6 +17,7 @@ const contentStyle: React.CSSProperties = {
   minHeight: 120,
   height: layoutConfig.content.height,
   lineHeight: "120px",
+  paddingLeft: `${layoutConfig.sider.width}px`,
 };
 
 const siderStyle: React.CSSProperties = {
@@ -42,7 +42,7 @@ const NeosLayout = (props: {
   footer: React.ReactNode;
 }) => {
   return (
-    <Layout>
+    <Layout hasSider>
       <Sider style={siderStyle} width={layoutConfig.sider.width}>
         {props.sider}
       </Sider>

src/ui/Duel/main.tsx

@@ -25,6 +25,7 @@ import NeosConfig from "../../../neos.config.json";
 import DuelTimeLine from "./timeLine";
 import { Row } from "antd";
 import SendBox from "./sendBox";
+import PlayerStatus from "./status";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
@@ -47,9 +48,9 @@ const NeosDuel = () => {
     <>
       <NeosLayout
         sider={<NeosSider />}
-        header={<div>header</div>}
+        header={<PlayerStatus />}
         content={<NeosCanvas />}
-        footer={<div>footer</div>}
+        footer={<PlayerStatus />}
       />
       <CardModal />
       <CardListModal />

src/ui/Duel/status.tsx

+import React from "react";
+import { UserOutlined, BackwardOutlined } from "@ant-design/icons";
+import { Avatar, Space, Statistic } from "antd";
+
+const spaceSize = 20;
+const avatarSize = 40;
+
+const PlayerStatus = () => (
+  <Space size={spaceSize} direction="horizontal">
+    <Space wrap size={spaceSize}>
+      <Avatar size={avatarSize} icon={<UserOutlined />} />
+    </Space>
+    <Space wrap size={spaceSize}>
+      UserName
+    </Space>
+    <Space wrap size={spaceSize}>
+      <Statistic title="Hp" value={4000} />
+    </Space>
+    <Space wrap size={spaceSize}>
+      <Avatar
+        size={avatarSize}
+        style={{ color: "red" }}
+        icon={<BackwardOutlined />}
+      />
+    </Space>
+  </Space>
+);
+
+export default PlayerStatus;