feat: action btn and side btn

src/ui/NewWaitRoom/index.module.scss

@@ -114,7 +114,23 @@
   gap: 10px;
   transition: 0.3s;
   .btn {
+    width: 32px;
     background: hsla(0, 0%, 100%, 0.1);
+    justify-content: start;
+    padding: 0 8px;
+    overflow: hidden;
+    .btn-icon {
+      display: flex;
+      align-items: center;
+      // gap: 4px;
+      .btn-text {
+        width: 0;
+        line-height: 0;
+      }
+    }
+    &:hover {
+      width: 100px;
+    }
   }
 }
 
@@ -130,22 +146,6 @@
   }
 }
 
-.status-bar {
-  position: absolute;
-  top: 40px;
-  left: 0;
-  right: 0;
-  width: fit-content;
-  margin: auto;
-  background: hsla(0, 0%, 100%, 0.1);
-  padding: 0 1.25em;
-  font-size: 13px;
-  line-height: 28px;
-  border-radius: 14px;
-  display: flex;
-  gap: 8px;
-}
-
 .fake-btn-large {
   min-width: 88px;
   height: 40px;

src/ui/NewWaitRoom/index.tsx

-import { CheckCircleFilled } from "@ant-design/icons";
+import { CheckCircleFilled, LoadingOutlined } from "@ant-design/icons";
 
 import {
   sendHsNotReady,
@@ -11,22 +11,21 @@ import {
 import socketMiddleWare, { socketCmd } from "@/middleware/socket";
 import PlayerState = ygopro.StocHsPlayerChange.State;
 import SelfType = ygopro.StocTypeChange.SelfType;
-import {
-  Avatar,
-  Button,
-  ConfigProvider,
-  Popover,
-  Skeleton,
-  Space,
-  Tooltip,
-} from "antd";
+import { Avatar, Button, ConfigProvider, Popover, Skeleton, Space } from "antd";
 import classNames from "classnames";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSnapshot } from "valtio";
 
 import { useConfig } from "@/config";
-import { accountStore, deckStore, IDeck, Player, roomStore } from "@/stores";
+import {
+  accountStore,
+  deckStore,
+  IDeck,
+  Player,
+  roomStore,
+  type RoomStage,
+} from "@/stores";
 import { Background, IconFont, Select, SpecialButton } from "@/ui/Shared";
 
 import { Chat } from "./Chat";
@@ -56,12 +55,10 @@ 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 navigate = useNavigate();
   // ref.current?.getMoraResult(); // 用这个来异步获取猜拳结果
 
   const onClick = async () => {
-    console.log(await ref.current?.getMoraResult());
+    // console.log(await ref.current?.getMoraResult());
   };
 
   return (
@@ -76,31 +73,10 @@ export const Component: React.FC = () => {
           <Chat />
         </div>
         <div className={styles.content}>
-          {/* <div className={styles["status-bar"]}>
-            <LoadingOutlined />
-            对方正在选择先后
-          </div> */}
-          <div className={styles["btns-side"]}>
-            <Tooltip title="退出房间" placement="right">
-              <Button
-                className={styles["btn"]}
-                danger
-                icon={<IconFont type="icon-exit" size={16} />}
-                onClick={() => {
-                  // 断开websocket🔗，
-                  socketMiddleWare({ cmd: socketCmd.DISCONNECT });
-                  // 返回上一个路由
-                  navigate("..");
-                }}
-              />
-            </Tooltip>
-            <Button
-              className={styles["btn"]}
-              icon={<IconFont type="icon-side-bar-fill" size={16} />}
-              onClick={() => setCollapsed(!collapsed)}
-            />
-          </div>
-
+          <SideButtons
+            collapsed={collapsed}
+            switchCollapse={() => setCollapsed(!collapsed)}
+          />
           <div className={styles.wrap}>
             <Controller
               onDeckChange={(deckName: string) => {
@@ -145,15 +121,7 @@ export const Component: React.FC = () => {
               />
               <PlayerZone who={Who.Op} player={room.getOpPlayer()} />
             </div>
-            <MoraPopover ref={ref}>
-              <SpecialButton
-                className={styles["btns-action"]}
-                onClick={onClick}
-              >
-                <IconFont type="icon-play" size={12} />
-                开始游戏
-              </SpecialButton>
-            </MoraPopover>
+            <ActionButton />
           </div>
         </div>
       </div>
@@ -167,9 +135,6 @@ enum Mora {
   Paper = "paper",
 }
 
-// TODO: 可能有更好的设计，不一定是放在这个按钮这儿
-// 思路不变，先暂时这么写
-
 interface MoraButtonRef {
   getMoraResult: () => Promise<Mora>;
 }
@@ -348,3 +313,74 @@ const Controller: React.FC<{ onDeckChange: (deckName: string) => void }> = ({
     </Space>
   );
 };
+
+const SideButtons: React.FC<{
+  switchCollapse: () => void;
+  collapsed: boolean;
+}> = ({ switchCollapse, collapsed }) => {
+  const navigate = useNavigate();
+  return (
+    <div className={styles["btns-side"]}>
+      <Button
+        className={styles["btn"]}
+        danger
+        icon={
+          <span className={styles["btn-icon"]}>
+            <IconFont type="icon-exit" size={17} />
+            <span className={styles["btn-text"]}>&#20;&#20;退出房间</span>
+          </span>
+        }
+        onClick={() => {
+          // 断开websocket🔗，
+          socketMiddleWare({ cmd: socketCmd.DISCONNECT });
+          // 返回上一个路由
+          navigate("..");
+        }}
+      />
+      <Button
+        className={styles["btn"]}
+        icon={
+          <span className={styles["btn-icon"]}>
+            <IconFont type="icon-side-bar-fill" size={16} />
+            <span className={styles["btn-text"]}>
+              &#20;&#20;{collapsed ? "展开" : "收起"}侧栏
+            </span>
+          </span>
+        }
+        onClick={switchCollapse}
+      />
+    </div>
+  );
+};
+
+const ActionButton: React.FC = () => {
+  const ref = useRef<MoraButtonRef>(null);
+  return (
+    <MoraPopover ref={ref}>
+      <SpecialButton className={styles["btns-action"]} disabled={false}>
+        <>
+          <IconFont type="icon-play" size={12} />
+          开始游戏
+        </>
+        {/* <>
+          <IconFont type="icon-mora" size={18} />
+          <span>请猜拳</span>
+        </> */}
+        <>
+          {/* 这里要把disabled设为true */}
+          {/* <LoadingOutlined size={20} />
+          <span>等待对方猜拳</span> */}
+        </>
+        {/* <>
+          <IconFont type="icon-one" size={18} />
+          <span>请选择先后手</span>
+        </> */}
+        <>
+          {/* 这里要把disabled设为true */}
+          {/* <LoadingOutlined size={20} />
+          <span>等待选择先后手</span> */}
+        </>
+      </SpecialButton>
+    </MoraPopover>
+  );
+};

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

@@ -6,7 +6,7 @@
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 12px 40px;
+  padding: 12px 0;
   border: 3px solid hsla(0, 0%, 100%, 0.3);
   border-radius: 8px;
   background-clip: padding-box;
@@ -15,7 +15,20 @@
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 0.2px;
-  transition: 0.2s;
+  transition: 0.3s;
+
+  &.disabled {
+    background: none;
+    color: rgba(255, 255, 255, 0.5);
+    cursor: not-allowed;
+    border: 1px solid hsla(0, 0%, 100%, 0.5);
+    &::before {
+      opacity: 0.1;
+    }
+    &:hover {
+      background: none;
+    }
+  }
 
   &:hover {
     background-color: hsla(0, 0%, 100%, 1.1);

src/ui/Shared/SpecialButton/index.tsx

@@ -3,9 +3,16 @@ import classNames from "classnames";
 import styles from "./index.module.scss";
 
 export const SpecialButton: React.FC<
-  React.PropsWithChildren<React.ComponentProps<"span">>
-> = ({ children, className, ...rest }) => (
-  <span className={classNames(styles["special-btn"], className)} {...rest}>
+  React.PropsWithChildren<React.ComponentProps<"span">> & {
+    disabled?: boolean;
+  }
+> = ({ children, className, disabled, ...rest }) => (
+  <span
+    className={classNames(styles["special-btn"], className, {
+      [styles.disabled]: disabled,
+    })}
+    {...rest}
+  >
     {children}
   </span>
 );