handle entertain match in Match.tsx

src/service/onSocketOpen.ts

@@ -23,6 +23,6 @@ export default function handleSocketOpen(
     ws.binaryType = "arraybuffer";
 
     sendPlayerInfo(ws, player);
-    sendJoinGame(ws, NeosConfig.version, passWd); // todo: version use config
+    sendJoinGame(ws, NeosConfig.version, passWd);
   }
 }

src/ui/Match/MatchModal.tsx

@@ -7,7 +7,7 @@ import { useConfig } from "@/config";
 import { accountStore, roomStore } from "@/stores";
 
 import styles from "./MatchModal.module.scss";
-import { init } from "./util";
+import { connectSrvpro } from "./util";
 const NeosConfig = useConfig();
 const serverConfig = NeosConfig.servers;
 
@@ -50,7 +50,7 @@ export const MatchModal: React.FC = ({}) => {
 
   const handleSubmit = async () => {
     setConfirmLoading(true);
-    await init({ player, ip: server, passWd: passwd });
+    await connectSrvpro({ player, ip: server, passWd: passwd });
   };
 
   useEffect(() => {

src/ui/Match/ReplayModal.tsx

@@ -6,7 +6,7 @@ import { proxy, useSnapshot } from "valtio";
 import { matStore } from "@/stores";
 
 import { Uploader } from "../Shared";
-import { init } from "./util";
+import { connectSrvpro } from "./util";
 
 const localStore = proxy({
   open: false,
@@ -45,7 +45,7 @@ export const ReplayModal: React.FC = () => {
       // FIXME: 这样写应该不对，有空来修
       window.myExtraDeckCodes = [];
 
-      await init({
+      await connectSrvpro({
         ip: "",
         player: "",
         passWd: "",

src/ui/Match/index.tsx

@@ -9,6 +9,7 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSnapshot } from "valtio";
 
+import { match } from "@/api";
 import { useConfig } from "@/config";
 import { accountStore, deckStore, IDeck, roomStore } from "@/stores";
 import { Background, IconFont, Select } from "@/ui/Shared";
@@ -16,7 +17,7 @@ import { Background, IconFont, Select } from "@/ui/Shared";
 import styles from "./index.module.scss";
 import { MatchModal, matchStore } from "./MatchModal";
 import { ReplayModal, replayOpen } from "./ReplayModal";
-import { init } from "./util";
+import { connectSrvpro } from "./util";
 
 const NeosConfig = useConfig();
 
@@ -30,12 +31,13 @@ export const Component: React.FC = () => {
   const { user } = useSnapshot(accountStore);
   const { joined } = useSnapshot(roomStore);
   const [singleLoading, setSingleLoading] = useState(false); // 单人模式的loading状态
+  const [matchLoading, setMatchLoading] = useState(false);
   const navigate = useNavigate();
 
   useEffect(() => {
-    // 人机对战跳转
     if (joined) {
       setSingleLoading(false);
+      setMatchLoading(false);
       navigate(`/waitroom`);
     }
   }, [joined]);
@@ -97,8 +99,31 @@ export const Component: React.FC = () => {
             <Mode
               title="娱乐匹配"
               desc="过去一周竞技匹配使用数最靠前的20个卡组被禁止使用。将胜负暂且搁置，尽情享受决斗的乐趣。"
-              icon={<IconFont type="icon-coffee" size={28} />}
-              onClick={() => alert("开发中，敬请期待")}
+              icon={
+                matchLoading ? (
+                  <LoadingOutlined />
+                ) : (
+                  <IconFont type="icon-coffee" size={28} />
+                )
+              }
+              onClick={async () => {
+                if (!user) {
+                  alert("请先登录萌卡账号");
+                } else {
+                  setMatchLoading(true);
+                  const matchInfo = await match(user.name, user.external_id);
+
+                  if (matchInfo) {
+                    await connectSrvpro({
+                      ip: matchInfo.address + ":" + (matchInfo.port + 1),
+                      player: user.name,
+                      passWd: matchInfo.password,
+                    });
+                  } else {
+                    alert("匹配失败T_T");
+                  }
+                }
+              }}
             />
             <Mode
               title="单人模式"
@@ -114,7 +139,7 @@ export const Component: React.FC = () => {
                 setSingleLoading(true);
 
                 // 初始化，然后等待后端通知成功加入房间后跳转页面
-                await init({
+                await connectSrvpro({
                   ip: server,
                   player: user?.name ?? "Guest",
                   passWd: "AI",

src/ui/Match/util.ts

@@ -7,8 +7,8 @@ import sqliteMiddleWare, { sqliteCmd } from "@/middleware/sqlite";
 
 const NeosConfig = useConfig();
 
-// 进行进入房间/回放前的一些初始化操作
-export const init = async (params: {
+// 连接SRVPRO服务
+export const connectSrvpro = async (params: {
   ip: string;
   player: string;
   passWd: string;