feat: try a new way of mora

src/ui/NewWaitRoom/index.tsx

-import { CheckCircleFilled, LogoutOutlined } from "@ant-design/icons";
+import { CheckCircleFilled } from "@ant-design/icons";
 
 import {
   sendHsNotReady,
@@ -63,7 +63,7 @@ export const Component: React.FC = () => {
   const { decks } = useSnapshot(deckStore);
   const [deck, setDeck] = useState<IDeck>(JSON.parse(JSON.stringify(decks[0])));
   const room = useSnapshot(roomStore);
-  // const ref = useRef<MoraButtonRef>(null);
+  const ref = useRef<MoraButtonRef>(null);
   // ref.current?.getMoraResult(); // 用这个来异步获取猜拳结果
 
   useEffect(() => {
@@ -71,6 +71,10 @@ export const Component: React.FC = () => {
     window.myExtraDeckCodes = [...deck.extra];
   }, [deck]);
 
+  const onClick = async () => {
+    console.log(await ref.current?.getMoraResult());
+  };
+
   return (
     <ConfigProvider theme={theme}>
       <div
@@ -140,10 +144,15 @@ export const Component: React.FC = () => {
               />
               <PlayerZone who={Who.Op} player={room.getOpPlayer()} />
             </div>
-
-            <SpecialButton className={styles["btns-action"]}>
-              开始游戏
-            </SpecialButton>
+            <MoraPopover ref={ref}>
+              <SpecialButton
+                className={styles["btns-action"]}
+                onClick={onClick}
+              >
+                <IconFont type="icon-play" size={12} />
+                开始游戏
+              </SpecialButton>
+            </MoraPopover>
           </div>
         </div>
       </div>
@@ -164,59 +173,55 @@ interface MoraButtonRef {
   getMoraResult: () => Promise<Mora>;
 }
 
-const MoraButton = forwardRef<MoraButtonRef, {}>((props, ref) => {
-  const [open, setOpen] = useState(false);
+const MoraPopover = forwardRef<MoraButtonRef, React.PropsWithChildren>(
+  ({ children }, ref) => {
+    const [open, setOpen] = useState(false);
 
-  const resolve = useRef<(mora: Mora) => void>(() => {});
+    const resolve = useRef<(mora: Mora) => void>(() => {});
 
-  useImperativeHandle(ref, () => ({
-    async getMoraResult() {
-      setOpen(true);
-      const result = await new Promise<Mora>((rs) => (resolve.current = rs));
-      setOpen(false);
-      return result;
-    },
-  }));
+    useImperativeHandle(ref, () => ({
+      async getMoraResult() {
+        setOpen(true);
+        const result = await new Promise<Mora>((rs) => (resolve.current = rs));
+        setOpen(false);
+        return result;
+      },
+    }));
 
-  const onMoraClick = (mora: Mora) => resolve.current(mora);
+    const onMoraClick = (mora: Mora) => resolve.current(mora);
 
-  const map = {
-    [Mora.Rock]: "石头",
-    [Mora.Scissors]: "剪刀",
-    [Mora.Paper]: "布",
-  };
+    const map = {
+      [Mora.Rock]: "石头",
+      [Mora.Scissors]: "剪刀",
+      [Mora.Paper]: "布",
+    };
 
-  return (
-    <Popover
-      overlayStyle={{ backdropFilter: "blur(10px)" }}
-      content={
-        <Space>
-          {[Mora.Rock, Mora.Scissors, Mora.Paper].map((mora) => (
-            <Button
-              key={mora}
-              size="large"
-              type="text"
-              icon={<IconFont type={`icon-hand-${mora}`} size={16} />}
-              onClick={() => onMoraClick(mora)}
-            >
-              {map[mora]}
-            </Button>
-          ))}
-        </Space>
-      }
-      open={open}
-      placement="bottom"
-    >
-      <Button
-        size="large"
-        className={styles["btn-join"]}
-        icon={<IconFont type="icon-mora" size={20} />}
+    return (
+      <Popover
+        overlayStyle={{ backdropFilter: "blur(10px)" }}
+        content={
+          <Space>
+            {[Mora.Rock, Mora.Scissors, Mora.Paper].map((mora) => (
+              <Button
+                key={mora}
+                size="large"
+                type="text"
+                icon={<IconFont type={`icon-hand-${mora}`} size={16} />}
+                onClick={() => onMoraClick(mora)}
+              >
+                {map[mora]}
+              </Button>
+            ))}
+          </Space>
+        }
+        open={open}
+        placement="bottom"
       >
-        猜拳
-      </Button>
-    </Popover>
-  );
-});
+        {children}
+      </Popover>
+    );
+  }
+);
 
 const OrderPopup: React.FC<React.PropsWithChildren<{ open: boolean }>> = ({
   children,

src/ui/Shared/SpecialButton/index.module.scss

@@ -5,7 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 8px;
   padding: 12px 40px;
   border: 3px solid hsla(0, 0%, 100%, 0.3);
   border-radius: 8px;