Merge branch 'feat/text' into 'main'

更新一下匹配页的文案和调整一下编辑卡组按钮的位置

See merge request mycard/Neos!269

src/ui/Match/index.tsx

-import { EditFilled, SettingFilled } from "@ant-design/icons";
-import { Space } from "antd";
+import {
+  EditOutlined,
+  PlayCircleOutlined,
+  SettingFilled,
+} from "@ant-design/icons";
+import { Button, Space } from "antd";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSnapshot } from "valtio";
@@ -72,17 +76,24 @@ export const Component: React.FC = () => {
                 label: deck.deckName,
               }))}
             />
+            <Button
+              style={{ width: 150, fontSize: "14px" }}
+              icon={<EditOutlined />}
+              onClick={() => navigate("/build")}
+            >
+              卡组编辑
+            </Button>
           </Space>
           <div className={styles["mode-select"]}>
             <Mode
               title="竞技匹配"
-              desc="与世界上其他玩家在线匹配，您的排名将实时显示在排行榜上。"
+              desc="与天梯其他数万名玩家激战，追求胜利登顶最强。每月最后一天晚上10点结算成绩，获取奖励与公布排名。"
               icon={<IconFont type="icon-battle" size={32} />}
               onClick={() => alert("开发中，敬请期待")}
             />
             <Mode
-              title="休闲匹配"
-              desc="使用任意卡组进行对战，将胜负暂且搁置，尽情享受决斗的乐趣。"
+              title="娱乐匹配"
+              desc="过去一周竞技匹配使用数最靠前的20个卡组被禁止使用。将胜负暂且搁置，尽情享受决斗的乐趣。"
               icon={<IconFont type="icon-coffee" size={28} />}
               onClick={() => alert("开发中，敬请期待")}
             />
@@ -103,7 +114,7 @@ export const Component: React.FC = () => {
             />
             <Mode
               title="自定义房间"
-              desc="创建一个自定义的对战房间，便捷地与好友进行对战，甚至是举办一场竞技比赛。"
+              desc="创建双打TAG或自定义规则的房间，或与好友约战，甚至举办竞技比赛。"
               icon={<SettingFilled />}
               onClick={() => (matchStore.open = true)}
             />
@@ -114,10 +125,10 @@ export const Component: React.FC = () => {
               onClick={replayOpen}
             />
             <Mode
-              title="卡组编辑"
-              desc="创建和编辑卡组，在上万种卡片中选择，组建独一无二的构筑。"
-              icon={<EditFilled />}
-              onClick={() => navigate("/build")}
+              title="观战列表"
+              desc="观看MyCard上正在进行的决斗"
+              icon={<PlayCircleOutlined />}
+              onClick={() => alert("开发中，敬请期待")}
             />
           </div>
         </div>

src/ui/WaitRoom/index.tsx

@@ -14,7 +14,7 @@ import {
 import socketMiddleWare, { socketCmd } from "@/middleware/socket";
 import PlayerState = ygopro.StocHsPlayerChange.State;
 import SelfType = ygopro.StocTypeChange.SelfType;
-import { Avatar, Button, ConfigProvider, Skeleton, Space } from "antd";
+import { Avatar, Button, Skeleton, Space } from "antd";
 import classNames from "classnames";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -38,22 +38,6 @@ import { Mora, MoraPopover, Tp, TpPopover } from "./Popover";
 
 const NeosConfig = useConfig();
 
-const theme = {
-  components: {
-    Button: {
-      lineWidth: 0,
-      fontSizeLG: 14,
-      fontSize: 12,
-      colorBgContainer: "hsla(0, 0%, 100%, 0.05)",
-      colorPrimaryHover: "#ccc",
-      colorPrimaryActive: "#aaa",
-    },
-    Popover: {
-      colorBgElevated: "hsla(0, 0%, 100%, 0.1)",
-    },
-  },
-};
-
 export const Component: React.FC = () => {
   const { user } = useSnapshot(accountStore);
   const [collapsed, setCollapsed] = useState(false);
@@ -73,105 +57,103 @@ export const Component: React.FC = () => {
   }, [room.stage]);
 
   return (
-    <ConfigProvider theme={theme}>
-      <div
-        className={classNames(styles.container, {
-          [styles.collapsed]: collapsed,
-        })}
-      >
-        <Background />
-        <div className={styles.sider}>
-          <Chat />
-        </div>
-        <div className={styles.content}>
-          <SideButtons
-            collapsed={collapsed}
-            switchCollapse={() => setCollapsed(!collapsed)}
+    <div
+      className={classNames(styles.container, {
+        [styles.collapsed]: collapsed,
+      })}
+    >
+      <Background />
+      <div className={styles.sider}>
+        <Chat />
+      </div>
+      <div className={styles.content}>
+        <SideButtons
+          collapsed={collapsed}
+          switchCollapse={() => setCollapsed(!collapsed)}
+        />
+        <div className={styles.wrap}>
+          <Controller
+            onDeckChange={(deckName: string) => {
+              const deck = deckStore.get(deckName);
+              // 同步后端
+              if (deck) {
+                setDeck(deck);
+              } else {
+                alert(`Deck ${deckName} not found`);
+              }
+            }}
           />
-          <div className={styles.wrap}>
-            <Controller
-              onDeckChange={(deckName: string) => {
-                const deck = deckStore.get(deckName);
-                // 同步后端
-                if (deck) {
-                  setDeck(deck);
-                } else {
-                  alert(`Deck ${deckName} not found`);
-                }
-              }}
-            />
-            <div className={styles["both-side-container"]}>
-              <PlayerZone
-                who={Who.Me}
-                player={me}
-                avatar={user?.avatar_url}
-                btn={
-                  room.stage === RoomStage.WAITING ? (
-                    <Button
-                      size="large"
-                      className={styles["btn-join"]}
-                      onClick={() => {
-                        if (me?.state === PlayerState.NO_READY) {
-                          sendUpdateDeck(deck);
-                          window.myExtraDeckCodes = [...deck.extra];
-                          sendHsReady();
-                        } else {
-                          sendHsNotReady();
-                        }
-                      }}
-                    >
-                      {me?.state === PlayerState.NO_READY
-                        ? "决斗准备"
-                        : "取消准备"}
-                    </Button>
-                  ) : (
-                    <MoraAvatar
-                      mora={
-                        me?.moraResult !== undefined &&
-                        me.moraResult !== HandType.UNKNOWN
-                          ? Object.values(Mora)[me.moraResult - 1]
-                          : undefined
+          <div className={styles["both-side-container"]}>
+            <PlayerZone
+              who={Who.Me}
+              player={me}
+              avatar={user?.avatar_url}
+              btn={
+                room.stage === RoomStage.WAITING ? (
+                  <Button
+                    size="large"
+                    className={styles["btn-join"]}
+                    onClick={() => {
+                      if (me?.state === PlayerState.NO_READY) {
+                        sendUpdateDeck(deck);
+                        window.myExtraDeckCodes = [...deck.extra];
+                        sendHsReady();
+                      } else {
+                        sendHsNotReady();
                       }
-                    />
-                  )
-                }
-              />
-              {room.players
-                .filter((player) => player !== undefined && !player.isMe)
-                .map((player, idx) => (
-                  <PlayerZone
-                    key={idx}
-                    who={Who.Op}
-                    player={player}
-                    btn={
-                      room.stage === RoomStage.WAITING ? null : (
-                        <MoraAvatar
-                          mora={
-                            op?.moraResult !== undefined &&
-                            op.moraResult !== HandType.UNKNOWN
-                              ? Object.values(Mora)[op.moraResult - 1]
-                              : undefined
-                          }
-                        />
-                      )
+                    }}
+                  >
+                    {me?.state === PlayerState.NO_READY
+                      ? "决斗准备"
+                      : "取消准备"}
+                  </Button>
+                ) : (
+                  <MoraAvatar
+                    mora={
+                      me?.moraResult !== undefined &&
+                      me.moraResult !== HandType.UNKNOWN
+                        ? Object.values(Mora)[me.moraResult - 1]
+                        : undefined
                     }
                   />
-                ))}
-            </div>
-            <ActionButton
-              onMoraSelect={(mora) => {
-                sendHandResult(mora);
-                roomStore.stage = RoomStage.HAND_SELECTED;
-              }}
-              onTpSelect={(tp) => {
-                sendTpResult(tp === Tp.First);
-                roomStore.stage = RoomStage.TP_SELECTED;
-              }}
+                )
+              }
             />
+            {room.players
+              .filter((player) => player !== undefined && !player.isMe)
+              .map((player, idx) => (
+                <PlayerZone
+                  key={idx}
+                  who={Who.Op}
+                  player={player}
+                  btn={
+                    room.stage === RoomStage.WAITING ? null : (
+                      <MoraAvatar
+                        mora={
+                          op?.moraResult !== undefined &&
+                          op.moraResult !== HandType.UNKNOWN
+                            ? Object.values(Mora)[op.moraResult - 1]
+                            : undefined
+                        }
+                      />
+                    )
+                  }
+                />
+              ))}
           </div>
+          <ActionButton
+            onMoraSelect={(mora) => {
+              sendHandResult(mora);
+              roomStore.stage = RoomStage.HAND_SELECTED;
+            }}
+            onTpSelect={(tp) => {
+              sendTpResult(tp === Tp.First);
+              roomStore.stage = RoomStage.TP_SELECTED;
+            }}
+          />
         </div>
       </div>
-    </ConfigProvider>
+    </div>
   );
 };
 

src/ui/theme.ts

@@ -41,5 +41,16 @@ export const theme: ThemeConfig = {
     Layout: {
       colorBgBody: "transparent",
     },
+    Button: {
+      lineWidth: 0,
+      fontSizeLG: 14,
+      fontSize: 12,
+      colorBgContainer: "hsla(0, 0%, 100%, 0.05)",
+      colorPrimaryHover: "#ccc",
+      colorPrimaryActive: "#aaa",
+    },
+    Popover: {
+      colorBgElevated: "hsla(0, 0%, 100%, 0.1)",
+    },
   },
 };