feat: new start btn in waitroom

neos-protobuf @ 30f4ea7a

-Subproject commit d6c01dd88fd72f22c432a52ba74eee9ece267499
+Subproject commit 30f4ea7acd79b9cb18a358548520ca939e22dc5f

src/ui/NewWaitRoom/index.module.scss

 .container {
   height: 100%;
   display: flex;
-  --side-box-width: 400px;
-  --battle-icon-width: 50px;
-  --gap-between-side-and-battle: 30px;
+  align-items: center;
+  --side-box-width: 500px;
   --border-radius: 10px;
   --sider-width: 300px;
-  .main {
+  .content {
+    height: 500px; // TODO: 修正这里的高度，或者说修正全局的高度设置。高度不应该超过100%
     position: relative;
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding-bottom: 5%;
+    // padding-bottom: 5%;
     transition: transform 0.3s;
   }
   .sider {
@@ -30,11 +30,12 @@
 
 .both-side-container {
   display: flex;
-  gap: var(--gap-between-side-and-battle);
+  flex-direction: column;
+  gap: 30px;
   align-items: center;
   margin-top: 80px;
   .side-box {
-    height: 120px;
+    height: 100px;
     width: var(--side-box-width);
     border-radius: var(--border-radius);
     background: hsla(0, 0%, 100%, 0.1);
@@ -161,3 +162,7 @@
   }
   overflow: hidden;
 }
+
+.btn-action {
+  margin-top: auto;
+}

src/ui/NewWaitRoom/index.tsx

@@ -26,7 +26,7 @@ import { useSnapshot } from "valtio";
 
 import { useConfig } from "@/config";
 import { accountStore, deckStore, IDeck, Player, roomStore } from "@/stores";
-import { Background, IconFont, Select } from "@/ui/Shared";
+import { Background, IconFont, Select, SpecialButton } from "@/ui/Shared";
 
 import { Chat } from "./Chat";
 import styles from "./index.module.scss";
@@ -79,7 +79,7 @@ export const Component: React.FC = () => {
           />
           <Chat />
         </div>
-        <div className={styles.main}>
+        <div className={styles.content}>
           {/* <div className={styles["status-bar"]}>
             <LoadingOutlined />
             对方正在选择先后
@@ -121,6 +121,10 @@ export const Component: React.FC = () => {
             />
             <PlayerZone who={Who.Op} player={room.getOpPlayer()} />
           </div>
+
+          <SpecialButton className={styles["btn-action"]}>
+            开始游戏
+          </SpecialButton>
         </div>
       </div>
     </ConfigProvider>
@@ -283,7 +287,7 @@ const Controller: React.FC<{ onDeckChange: (deckName: string) => void }> = ({
       <Select
         title="卡组"
         showSearch
-        style={{ width: 300 }}
+        style={{ width: 250 }}
         defaultValue={snapDeck.decks[0].deckName}
         options={snapDeck.decks.map((deck) => ({
           value: deck.deckName,
@@ -336,6 +340,9 @@ const Controller: React.FC<{ onDeckChange: (deckName: string) => void }> = ({
       >
         退出房间
       </Button>
+      {/* <Button size="large" icon={<IconFont type="icon-play" size={12} />}>
+        开始游戏
+      </Button> */}
     </Space>
   );
 };

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

+.special-btn {
+  cursor: pointer;
+  width: 200px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 12px 40px;
+  border: 3px solid hsla(0, 0%, 100%, 0.3);
+  border-radius: 8px;
+  background-clip: padding-box;
+  background-color: hsla(0, 0%, 100%, 0.9);
+  color: #0d0d0d;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  transition: 0.2s;
+
+  &:hover {
+    background-color: hsla(0, 0%, 100%, 1.1);
+  }
+
+  &::before {
+    position: absolute;
+    z-index: -1;
+    top: 5px;
+    right: 5px;
+    bottom: 0;
+    left: 5px;
+    border-radius: 6px;
+    background: conic-gradient(
+      from 147.14deg at 50% 50%,
+      #0294fe -55.68deg,
+      #ff2136 113.23deg,
+      #9b4dff 195deg,
+      #0294fe 304.32deg,
+      #ff2136 473.23deg
+    );
+    content: "";
+    filter: blur(20px);
+    opacity: 0.6;
+  }
+}

src/ui/Shared/SpecialButton/index.tsx

+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}>
+    {children}
+  </span>
+);

src/ui/Shared/index.ts

@@ -2,4 +2,5 @@ export * from "./Background";
 export * from "./css";
 export * from "./IconFont";
 export * from "./Select";
+export * from "./SpecialButton";
 export * from "./YgoCard";

src/ui/Start/index.module.scss

@@ -31,51 +31,6 @@
   }
 }
 
-.start-btn {
-  cursor: pointer;
-  width: 200px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 12px 40px;
-  border: 3px solid hsla(0, 0%, 100%, 0.3);
-  border-radius: 8px;
-  background-clip: padding-box;
-  background-color: hsla(0, 0%, 100%, 0.9);
-  color: #0d0d0d;
-  font-size: 14px;
-  font-weight: 500;
-  letter-spacing: 0.2px;
-  transition: 0.2s;
-
-  &:hover {
-    background-color: hsla(0, 0%, 100%, 1.1);
-  }
-
-  &::before {
-    position: absolute;
-    z-index: -1;
-    top: 5px;
-    right: 5px;
-    bottom: 0;
-    left: 5px;
-    border-radius: 6px;
-    background: conic-gradient(
-      from 147.14deg at 50% 50%,
-      #0294fe -55.68deg,
-      #ff2136 113.23deg,
-      #9b4dff 195deg,
-      #0294fe 304.32deg,
-      #ff2136 473.23deg
-    );
-    content: "";
-    filter: blur(20px);
-    opacity: 0.6;
-  }
-}
-
 // 以下是粒子动画的样式
 
 .particles-container {

src/ui/Start/index.tsx

@@ -4,7 +4,7 @@ import { useSnapshot } from "valtio";
 
 import { useConfig } from "@/config";
 import { accountStore } from "@/stores";
-import { Background } from "@/ui/Shared";
+import { Background, SpecialButton } from "@/ui/Shared";
 
 import styles from "./index.module.scss";
 
@@ -54,13 +54,10 @@ const LoginBtn: React.FC<{ logined: boolean }> = ({ logined }) => {
   const goToMatch = () => navigate("/match");
 
   return (
-    <span
-      className={styles["start-btn"]}
-      onClick={logined ? goToMatch : loginViaSSO}
-    >
+    <SpecialButton onClick={logined ? goToMatch : loginViaSSO}>
       <span>{logined ? "开始游戏" : "登录游戏"}</span>
       <RightOutlined />
-    </span>
+    </SpecialButton>
   );
 };