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"]}>
+            <MoraPopover ref={ref}>
+              <SpecialButton
+                className={styles["btns-action"]}
+                onClick={onClick}
+              >
+                <IconFont type="icon-play" size={12} />
                 开始游戏
               </SpecialButton>
+            </MoraPopover>
           </div>
         </div>
       </div>
@@ -164,7 +173,8 @@ interface MoraButtonRef {
   getMoraResult: () => Promise<Mora>;
 }
 
-const MoraButton = forwardRef<MoraButtonRef, {}>((props, ref) => {
+const MoraPopover = forwardRef<MoraButtonRef, React.PropsWithChildren>(
+  ({ children }, ref) => {
     const [open, setOpen] = useState(false);
 
     const resolve = useRef<(mora: Mora) => void>(() => {});
@@ -207,16 +217,11 @@ const MoraButton = forwardRef<MoraButtonRef, {}>((props, ref) => {
         open={open}
         placement="bottom"
       >
-      <Button
-        size="large"
-        className={styles["btn-join"]}
-        icon={<IconFont type="icon-mora" size={20} />}
-      >
-        猜拳
-      </Button>
+        {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;