update Match.tsx

src/ui/Match/index.tsx

@@ -29,12 +29,53 @@ export const Component: React.FC = () => {
   );
   const { decks } = useSnapshot(deckStore);
   const [deck, setDeck] = useState<IDeck>(JSON.parse(JSON.stringify(decks[0])));
-  const { user } = useSnapshot(accountStore);
+  const user = accountStore.user;
   const { joined } = useSnapshot(roomStore);
   const [singleLoading, setSingleLoading] = useState(false); // 单人模式的loading状态
   const [matchLoading, setMatchLoading] = useState(false);
   const navigate = useNavigate();
 
+  // 竞技匹配
+  const onCompetitiveMatch = () => message.error("暂未开放，敬请期待");
+
+  // 娱乐匹配
+  const onEntertainMatch = async () => {
+    if (!user) {
+      message.error("请先登录萌卡账号");
+    } else {
+      setMatchLoading(true);
+      const matchInfo = await match(user.username, user.external_id);
+
+      if (matchInfo) {
+        await connectSrvpro({
+          ip: matchInfo.address + ":" + (matchInfo.port + 1),
+          player: user.username,
+          passWd: matchInfo.password,
+        });
+      } else {
+        message.error("匹配失败T_T");
+      }
+    }
+  };
+
+  // 单人模式
+  const onAIMatch = async () => {
+    setSingleLoading(true);
+
+    // 初始化，然后等待后端通知成功加入房间后跳转页面
+    await connectSrvpro({
+      ip: server,
+      player: user?.name ?? "Guest",
+      passWd: "AI",
+    });
+  };
+
+  // 自定义房间
+  const onCustomRoom = () => (matchStore.open = true);
+
+  // 观战列表
+  const onWatchList = () => message.error("开发中，敬请期待");
+
   useEffect(() => {
     if (joined) {
       setSingleLoading(false);
@@ -95,7 +136,7 @@ export const Component: React.FC = () => {
               title="竞技匹配"
               desc="与天梯其他数万名玩家激战，追求胜利登顶最强。每月最后一天晚上10点结算成绩，获取奖励与公布排名。"
               icon={<IconFont type="icon-battle" size={32} />}
-              onClick={() => message.error("开发中，敬请期待")}
+              onClick={onCompetitiveMatch}
             />
             <Mode
               title="娱乐匹配"
@@ -107,27 +148,7 @@ export const Component: React.FC = () => {
                   <IconFont type="icon-coffee" size={28} />
                 )
               }
-              onClick={async () => {
-                if (!user) {
-                  message.error("请先登录萌卡账号");
-                } else {
-                  setMatchLoading(true);
-                  const matchInfo = await match(
-                    user.username,
-                    user.external_id,
-                  );
-
-                  if (matchInfo) {
-                    await connectSrvpro({
-                      ip: matchInfo.address + ":" + (matchInfo.port + 1),
-                      player: user.username,
-                      passWd: matchInfo.password,
-                    });
-                  } else {
-                    message.error("匹配失败T_T");
-                  }
-                }
-              }}
+              onClick={onEntertainMatch}
             />
             <Mode
               title="单人模式"
@@ -139,22 +160,13 @@ export const Component: React.FC = () => {
                   <IconFont type="icon-chip" size={26} />
                 )
               }
-              onClick={async () => {
-                setSingleLoading(true);
-
-                // 初始化，然后等待后端通知成功加入房间后跳转页面
-                await connectSrvpro({
-                  ip: server,
-                  player: user?.name ?? "Guest",
-                  passWd: "AI",
-                });
-              }}
+              onClick={onAIMatch}
             />
             <Mode
               title="自定义房间"
               desc="创建双打TAG或自定义规则的房间，或与好友约战，甚至举办竞技比赛。"
               icon={<SettingFilled />}
-              onClick={() => (matchStore.open = true)}
+              onClick={onCustomRoom}
             />
             <Mode
               title="录像回放"
@@ -166,7 +178,7 @@ export const Component: React.FC = () => {
               title="观战列表"
               desc="观看MyCard上正在进行的决斗"
               icon={<PlayCircleOutlined />}
-              onClick={() => message.error("开发中，敬请期待")}
+              onClick={onWatchList}
             />
           </div>
         </div>