finsh enter room logic

src/service/room/hsPlayerEnter.ts

@@ -7,7 +7,12 @@ export default function handleHsPlayerEnter(pb: ygopro.YgoStocMsg) {
 
   if (pos > 1) {
     console.log("Currently only supported 2v2 mode.");
-  } else {
+  } else if (pos < roomStore.players.length) {
     roomStore.players[pos].name = name;
+  } else {
+    roomStore.players.push({
+      name,
+      state: ygopro.StocHsPlayerChange.State.NO_READY,
+    });
   }
 }

src/service/room/typeChange.ts

@@ -17,8 +17,13 @@ export default function handleTypeChange(pb: ygopro.YgoStocMsg) {
         break;
       }
       default: {
-        roomStore.players[selfType - 1].state =
-          ygopro.StocHsPlayerChange.State.NO_READY;
+        const player = roomStore.players[selfType - 1];
+        const state = ygopro.StocHsPlayerChange.State.NO_READY;
+        if (player) {
+          player.state = state;
+        } else {
+          roomStore.players.push({ name: "?", state });
+        }
         break;
       }
     }

src/ui/Layout/index.tsx

@@ -37,7 +37,6 @@ export const Component = () => {
         <NavLink to="/">主页</NavLink>
         <NavLink to="/match">匹配</NavLink>
         <NavLink to="/build">组卡</NavLink>
-        <NavLink to="/waitroom">waitroom(temp)</NavLink>
         <span style={{ flexGrow: 1 }} />
         <span className={styles.profile}>
           <NeosAvatar />

src/ui/NeosRouter.tsx

 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-// import LazyLoad, { Loading } from "./LazyLoad";
-
-// const Match = React.lazy(() => import("./Match"));
-// const WaitRoom = React.lazy(() => import("./WaitRoom"));
-// const Mora = React.lazy(() => import("./Mora"));
-// const NeosDuel = React.lazy(() => import("./Duel/Main"));
-// const Replay = React.lazy(() => import("./Replay"));
-// const SSO = React.lazy(() => import("./SSO"));
-// const Profile = React.lazy(() => import("./Profile"));
-// const Build = React.lazy(() => import("./Build"));
-
 // TODO: finish this
 const _router = createBrowserRouter([
   {
@@ -34,7 +23,7 @@ const _router = createBrowserRouter([
         lazy: () => import("./NewProfile"),
       },
       {
-        path: "/waitroom/:ip?/:player?/:passWd?",
+        path: "/waitroom",
         lazy: () => import("./NewWaitRoom"),
       },
       {
@@ -44,41 +33,4 @@ const _router = createBrowserRouter([
   },
 ]);
 
-// 暂且先这么写，为后重构为createBrowserRouter打基础
-// const router = createBrowserRouter(
-//   createRoutesFromElements(
-//     <Route path="/" element={<NeosLayout />}>
-//       <Route path="/" element={<LazyLoad lazy={<Start />} />} />
-//       <Route path="/profile" element={<LazyLoad lazy={<Profile />} />} />
-//       <Route path="/match" element={<LazyLoad lazy={<Match />} />} />
-//       <Route
-//         path="/room/:player/:passWd/:ip"
-//         element={
-//           <Suspense fallback={<Loading />}>
-//             <WaitRoom />
-//           </Suspense>
-//         }
-//       />
-//       <Route
-//         path="/mora/:player/:passWd/:ip"
-//         element={
-//           <Suspense fallback={<Loading />}>
-//             <Mora />
-//           </Suspense>
-//         }
-//       />
-//       <Route path="/replay" element={<LazyLoad lazy={<Replay />} />} />
-//       <Route
-//         path="/duel/:player/:passWd/:ip"
-//         element={
-//           <Suspense fallback={<Loading />}>
-//             <NeosDuel />
-//           </Suspense>
-//         }
-//       />
-//       <Route path="/sso/*" element={<LazyLoad lazy={<SSO />} />} />
-//     </Route>
-//   )
-// );
-
 export const NeosRouter = () => <RouterProvider router={_router} />;

src/ui/NewMatch/Modal.tsx

@@ -4,9 +4,10 @@ import { useNavigate } from "react-router-dom";
 import { proxy, useSnapshot } from "valtio";
 
 import { useConfig } from "@/config";
-import { accountStore } from "@/stores";
+import { accountStore, roomStore } from "@/stores";
 
 import styles from "./Modal.module.scss";
+import { init } from "./util";
 const NeosConfig = useConfig();
 const serverConfig = NeosConfig.servers;
 
@@ -28,6 +29,7 @@ export const localStore = proxy<Props>(defaultProps);
 export const MatchModal: React.FC = ({}) => {
   const { open } = useSnapshot(localStore);
   const { user } = useSnapshot(accountStore);
+  const { joined } = useSnapshot(roomStore);
   const [player, setPlayer] = useState(user?.name ?? defaultPlayer);
   const [passwd, setPasswd] = useState(defaultPassword);
   const [server, setServer] = useState(
@@ -47,10 +49,9 @@ export const MatchModal: React.FC = ({}) => {
   };
 
   // 因为萌卡服务器的房间密码会有`#`等特殊字符，因此这里用`encodeURIComponent`做下转义
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     setConfirmLoading(true);
-    // TODO: 这里应该进行WASM，websocket等的初始化，成功加入房间后才跳转
-    // navigate(`/room/${player}/${encodeURIComponent(passwd)}/${server}`);
+    await init({ player, ip: server, passWd: passwd });
   };
 
   useEffect(() => {
@@ -60,6 +61,13 @@ export const MatchModal: React.FC = ({}) => {
     }
   }, []);
 
+  useEffect(() => {
+    // 如果一切顺利的话，后端传来已加入房间的信号，这时候跳转到房间页面
+    if (joined) {
+      navigate(`/waitroom`);
+    }
+  }, [joined]);
+
   return (
     <Modal
       open={open}

src/ui/NewWaitRoom/util.ts → src/ui/NewMatch/util.ts

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

src/ui/NewWaitRoom/index.module.scss

@@ -65,7 +65,7 @@
       }
     }
     .name {
-      font-size: 14px;
+      font-size: 18px;
       color: white;
       z-index: 1;
     }

src/ui/NewWaitRoom/index.tsx

@@ -5,11 +5,10 @@ import PlayerState = ygopro.StocHsPlayerChange.State;
 import { Avatar, Button, ConfigProvider, Popover, Skeleton, Space } from "antd";
 import classNames from "classnames";
 import React, { useState } from "react";
-import { type LoaderFunction, useLoaderData } from "react-router-dom";
 import { useSnapshot } from "valtio";
 
 import { useConfig } from "@/config";
-import { accountStore, Player, roomStore, type User } from "@/stores";
+import { accountStore, Player, roomStore } from "@/stores";
 import { Background, IconFont, Select } from "@/ui/Shared";
 
 import { Chat } from "./Chat";
@@ -17,14 +16,6 @@ import styles from "./index.module.scss";
 
 const NeosConfig = useConfig();
 
-interface Params {
-  player?: string;
-  passWd?: string;
-  ip?: string;
-}
-
-export const loader: LoaderFunction = async ({ params }) => params;
-
 const theme = {
   components: {
     Button: {
@@ -42,10 +33,10 @@ const theme = {
 };
 
 export const Component: React.FC = () => {
-  const _params = useLoaderData<Params>();
   const { user } = useSnapshot(accountStore);
   const [collapsed, setCollapsed] = useState(false);
   const room = useSnapshot(roomStore);
+
   return (
     <ConfigProvider theme={theme}>
       <div