feat: mora

src/ui/NewWaitRoom/index.tsx

@@ -4,7 +4,7 @@ import { ygopro } from "@/api";
 import PlayerState = ygopro.StocHsPlayerChange.State;
 import { Avatar, Button, ConfigProvider, Popover, Skeleton, Space } from "antd";
 import classNames from "classnames";
-import React, { useState } from "react";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import { useSnapshot } from "valtio";
 
 import { useConfig } from "@/config";
@@ -36,6 +36,8 @@ export const Component: React.FC = () => {
   const { user } = useSnapshot(accountStore);
   const [collapsed, setCollapsed] = useState(false);
   const room = useSnapshot(roomStore);
+  // const ref = useRef<MoraButtonRef>(null);
+  // ref.current?.getMoraResult(); // 用这个来异步获取猜拳结果
 
   return (
     <ConfigProvider theme={theme}>
@@ -51,7 +53,6 @@ export const Component: React.FC = () => {
             icon={<IconFont type="icon-side-bar-fill" size={16} />}
             onClick={() => setCollapsed(!collapsed)}
           />
-
           <Chat />
         </div>
         <div className={styles.main}>
@@ -70,6 +71,7 @@ export const Component: React.FC = () => {
                   <Button size="large" className={styles["btn-join"]}>
                     决斗准备
                   </Button>
+                  {/* <MoraButton ref={ref} /> */}
                 </>
               }
             />
@@ -87,11 +89,28 @@ enum Mora {
   Paper = "paper",
 }
 
-const MoraButton: React.FC<{
-  onClick?: () => Promise<Mora>;
-}> = () => {
-  // TODO: 实现这个onclick
-  // 防抖
+// TODO: 可能有更好的设计，不一定是放在这个按钮这儿
+// 思路不变，先暂时这么写
+
+interface MoraButtonRef {
+  getMoraResult: () => Promise<Mora>;
+}
+
+const MoraButton = forwardRef<MoraButtonRef, {}>((props, ref) => {
+  const [open, setOpen] = useState(false);
+
+  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;
+    },
+  }));
+
+  const onMoraClick = (mora: Mora) => resolve.current(mora);
 
   const map = {
     [Mora.Rock]: "石头",
@@ -106,16 +125,18 @@ const MoraButton: React.FC<{
         <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>
       }
-      trigger="focus"
+      open={open}
       placement="bottom"
     >
       <Button
@@ -127,7 +148,7 @@ const MoraButton: React.FC<{
       </Button>
     </Popover>
   );
-};
+});
 
 const OrderPopup: React.FC<React.PropsWithChildren<{ open: boolean }>> = ({
   children,