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

use local state in status.tsx

See merge request mycard/Neos!122

src/reducers/duel/initInfoSlice.ts

 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
+import { RootState } from "../../store";
 import { DuelState } from "./mod";
 import { judgeSelf } from "./util";
 
@@ -23,3 +24,6 @@ export const infoInitImpl: CaseReducer<
     state.opInitInfo = initInfo;
   }
 };
+
+export const selectMeInitInfo = (state: RootState) => state.duel.meInitInfo;
+export const selectOpInitInfo = (state: RootState) => state.duel.opInitInfo;

src/ui/Duel/main.tsx

@@ -26,6 +26,11 @@ 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 = () => {
@@ -44,13 +49,16 @@ const NeosDuel = () => {
     init();
   }, []);
 
+  const meInfo = useAppSelector(selectMeInitInfo);
+  const opInfo = useAppSelector(selectOpInitInfo);
+
   return (
     <>
       <NeosLayout
         sider={<NeosSider />}
-        header={<PlayerStatus />}
+        header={<PlayerStatus userName="UserName" hp={opInfo?.life || 0} />}
         content={<NeosCanvas />}
-        footer={<PlayerStatus />}
+        footer={<PlayerStatus userName="UserName" hp={meInfo?.life || 0} />}
       />
       <CardModal />
       <CardListModal />

src/ui/Duel/status.tsx

@@ -5,16 +5,16 @@ import { Avatar, Space, Statistic } from "antd";
 const spaceSize = 20;
 const avatarSize = 40;
 
-const PlayerStatus = () => (
+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}>
-      UserName
+      {props.userName}
     </Space>
     <Space wrap size={spaceSize}>
-      <Statistic title="Hp" value={4000} />
+      <Statistic title="Hp" value={props.hp} />
     </Space>
     <Space wrap size={spaceSize}>
       <Avatar