feat: popover 2

src/ui/NewWaitRoom/Popover.tsx

@@ -16,9 +16,9 @@ export enum Tp {
   Second = 2,
 }
 
-export const MoraPopover: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
+export const MoraPopover: React.FC<
+  React.PropsWithChildren<{ onSelect?: (result: Mora) => void }>
+> = ({ children, onSelect }) => {
   const [open, setOpen] = useState(false);
 
   // 需要在mora的service之中，emit一个事件，让这个组件监听到，然后打开popover
@@ -28,6 +28,7 @@ export const MoraPopover: React.FC<React.PropsWithChildren> = ({
 
   const onClick = (result: Mora) => {
     result; // 这里send猜拳的结果给服务器
+    onSelect?.(result);
     setOpen(false);
   };
 
@@ -63,7 +64,9 @@ export const MoraPopover: React.FC<React.PropsWithChildren> = ({
   );
 };
 
-export const TpPopover: React.FC<React.PropsWithChildren> = ({ children }) => {
+export const TpPopover: React.FC<
+  React.PropsWithChildren<{ onSelect?: (result: Tp) => void }>
+> = ({ children, onSelect }) => {
   const [open, setOpen] = useState(false);
 
   // 需要在mora的service之中，emit一个事件，让这个组件监听到，然后打开popover
@@ -73,6 +76,7 @@ export const TpPopover: React.FC<React.PropsWithChildren> = ({ children }) => {
 
   const onClick = (result: Tp) => {
     result; // 这里send结果给服务器
+    onSelect?.(result);
     setOpen(false);
   };
 

src/ui/NewWaitRoom/index.tsx

@@ -23,7 +23,7 @@ import { Background, IconFont, Select, SpecialButton } from "@/ui/Shared";
 
 import { Chat } from "./Chat";
 import styles from "./index.module.scss";
-import { MoraPopover, TpPopover } from "./Popover";
+import { Mora, MoraPopover, Tp, TpPopover } from "./Popover";
 
 const NeosConfig = useConfig();
 
@@ -50,6 +50,9 @@ export const Component: React.FC = () => {
   const [deck, setDeck] = useState<IDeck>(JSON.parse(JSON.stringify(decks[0])));
   const room = useSnapshot(roomStore);
 
+  const [myMora, setMyMora] = useState<Mora>();
+  const [opponentMora, setOpponentMora] = useState<Mora>();
+
   return (
     <ConfigProvider theme={theme}>
       <div
@@ -85,7 +88,8 @@ export const Component: React.FC = () => {
                 avatar={user?.avatar_url}
                 btn={
                   <>
-                    <Button
+                    {/* 根据stage显示结果 */}
+                    {/* <Button
                       size="large"
                       className={styles["btn-join"]}
                       onClick={() => {
@@ -103,13 +107,41 @@ export const Component: React.FC = () => {
                       {room.getMePlayer()?.state === PlayerState.NO_READY
                         ? "决斗准备"
                         : "取消准备"}
-                    </Button>
+                    </Button> */}
+                    <div style={{ marginLeft: "auto" }}>
+                      {/* 根据是否有了猜拳结果而显示 */}
+                      <Avatar
+                        style={{ marginLeft: "auto" }}
+                        size={48}
+                        icon={<IconFont type="icon-hand-rock" />}
+                      />
+                      {/* <Skeleton.Avatar active size={48} /> */}
+                    </div>
                   </>
                 }
               />
-              <PlayerZone who={Who.Op} player={room.getOpPlayer()} />
+              <PlayerZone
+                who={Who.Op}
+                player={room.getOpPlayer()}
+                btn={
+                  <div style={{ marginLeft: "auto" }}>
+                    {/* 根据是否有了猜拳结果而显示 */}
+                    {/* <Avatar
+                      style={{ marginLeft: "auto" }}
+                      size={48}
+                      icon={<IconFont type="icon-hand-rock" />}
+                    /> */}
+                    <Skeleton.Avatar active size={48} />
+                  </div>
+                }
+              />
             </div>
-            <ActionButton />
+            <ActionButton
+              onMoraSelect={setMyMora}
+              onTpSelect={() => {
+                // 暂时不知道需不需要 先放着
+              }}
+            />
           </div>
         </div>
       </div>
@@ -245,10 +277,13 @@ const SideButtons: React.FC<{
   );
 };
 
-const ActionButton: React.FC = () => {
+const ActionButton: React.FC<{
+  onMoraSelect: (mora: Mora) => void;
+  onTpSelect: (tp: Tp) => void;
+}> = ({ onMoraSelect, onTpSelect }) => {
   return (
-    <MoraPopover>
-      <TpPopover>
+    <MoraPopover onSelect={onMoraSelect}>
+      <TpPopover onSelect={onTpSelect}>
         <SpecialButton className={styles["btns-action"]} disabled={false}>
           <>
             <IconFont type="icon-play" size={12} />