optimize status ui

neos.config.json

@@ -61,6 +61,11 @@
       "footer": {
         "height": 80
       }
+    },
+    "status": {
+      "avatarSize": 40,
+      "meAvatarColor": "#0e63e1",
+      "opAvatarColor": "#e10e68"
     }
   }
 }

neos.config.prod.json

@@ -61,6 +61,11 @@
       "footer": {
         "height": 80
       }
+    },
+    "status": {
+      "avatarSize": 40,
+      "meAvatarColor": "#0e63e1",
+      "opAvatarColor": "#e10e68"
     }
   }
 }

src/ui/Duel/main.tsx

@@ -25,24 +25,16 @@ import DuelTimeLine from "./timeLine";
 import { Row } from "antd";
 import SendBox from "./sendBox";
 import PlayerStatus from "./status";
-import { useAppSelector } from "../../hook";
-import {
-  selectMeInitInfo,
-  selectOpInitInfo,
-} from "../../reducers/duel/initInfoSlice";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
-  const meInfo = useAppSelector(selectMeInitInfo);
-  const opInfo = useAppSelector(selectOpInitInfo);
-
   return (
     <>
       <NeosLayout
         sider={<NeosSider />}
-        header={<PlayerStatus userName="UserName" hp={opInfo?.life || 0} />}
+        header={<PlayerStatus />}
         content={<NeosCanvas />}
-        footer={<PlayerStatus userName="UserName" hp={meInfo?.life || 0} />}
+        footer={<></>}
       />
       <CardModal />
       <CardListModal />

src/ui/Duel/status.tsx

 import React from "react";
-import { UserOutlined, BackwardOutlined } from "@ant-design/icons";
-import { Avatar, Space, Statistic } from "antd";
+import { UserOutlined } from "@ant-design/icons";
+import { Avatar } from "antd";
+import { CheckCard } from "@ant-design/pro-components";
+import NeosConfig from "../../../neos.config.json";
+import { useAppSelector } from "../../hook";
+import {
+  selectMeInitInfo,
+  selectOpInitInfo,
+} from "../../reducers/duel/initInfoSlice";
 
-const spaceSize = 20;
+const Config = NeosConfig.ui.status;
 const avatarSize = 40;
 
-const PlayerStatus = (props: { userName: string; hp: number }) => (
-  <Space size={spaceSize} direction="horizontal">
-    <Space wrap size={spaceSize}>
-      <Avatar size={avatarSize} icon={<UserOutlined />} />
-    </Space>
-    <Space wrap size={spaceSize}>
-      {props.userName}
-    </Space>
-    <Space wrap size={spaceSize}>
-      <Statistic title="Hp" value={props.hp} />
-    </Space>
-    <Space wrap size={spaceSize}>
-      <Avatar
-        size={avatarSize}
-        style={{ color: "red" }}
-        icon={<BackwardOutlined />}
+const PlayerStatus = () => {
+  const meInfo = useAppSelector(selectMeInitInfo);
+  const opInfo = useAppSelector(selectOpInitInfo);
+
+  return (
+    <CheckCard.Group
+      bordered
+      style={{ height: `${NeosConfig.ui.layout.header.height}` }}
+    >
+      <CheckCard
+        avatar={
+          <Avatar
+            size={avatarSize}
+            style={{ backgroundColor: Config.opAvatarColor }}
+            icon={<UserOutlined />}
+          />
+        }
+        title={`opponent`}
+        description={`Hp: ${opInfo?.life || 0}`}
+        value="opponent"
+        style={{
+          position: "absolute",
+          left: `${NeosConfig.ui.layout.sider.width}px`,
+        }}
+      />
+      <CheckCard
+        avatar={
+          <Avatar
+            size={avatarSize}
+            style={{ backgroundColor: Config.meAvatarColor }}
+            icon={<UserOutlined />}
+          />
+        }
+        title={`myself`}
+        description={`Hp: ${meInfo?.life || 0}`}
+        value="myself"
+        style={{
+          position: "absolute",
+          right: "0px",
+        }}
       />
-    </Space>
-  </Space>
-);
+    </CheckCard.Group>
+  );
+};
 
 export default PlayerStatus;

src/ui/Neos.tsx

@@ -35,6 +35,14 @@ export default function () {
           </Suspense>
         }
       />
+      <Route
+        path="/test"
+        element={
+          <Suspense fallback={<Loading />}>
+            <NeosDuel />
+          </Suspense>
+        }
+      />
     </Routes>
   );
 }