update NewWaitRoom.tsx

src/api/ocgcore/ocgHelper.ts

@@ -3,8 +3,8 @@
  *
  * */
 import socketMiddleWare, { socketCmd } from "@/middleware/socket";
+import { IDeck } from "@/stores";
 
-import { IDeck } from "../deck";
 import { ygopro } from "./idl/ocgcore";
 import Chat from "./ocgAdapter/ctos/ctosChat";
 import GameMsgResponse from "./ocgAdapter/ctos/ctosGameMsgResponse/mod";

src/stores/deckStore.ts

@@ -6,7 +6,7 @@ import { type NeosStore } from "./shared";
 const IDB_NAME = "decks";
 const deckIdb = createStore(IDB_NAME, IDB_NAME);
 
-interface IDeck {
+export interface IDeck {
   deckName: string;
   main: number[];
   extra: number[];

src/stores/index.ts

@@ -2,6 +2,7 @@ export * from "./accountStore";
 export * from "./cardStore";
 export * from "./chatStore";
 export * from "./deckStore";
+export * from "./deckStore";
 export * from "./matStore";
 export * from "./placeStore";
 export * from "./replayStore";

src/stores/roomStore.ts

@@ -6,7 +6,7 @@ import StocHsPlayerChange = ygopro.StocHsPlayerChange;
 import SelfType = ygopro.StocTypeChange.SelfType;
 import { type NeosStore } from "./shared";
 
-interface Player {
+export interface Player {
   name: string; // 玩家的昵称
   state: StocHsPlayerChange.State; // 玩家当前状态
   deckInfo?: DeckInfo;

src/ui/NewWaitRoom/index.tsx

 import { CheckCircleFilled } from "@ant-design/icons";
+
+import { ygopro } from "@/api";
+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 { accountStore, type User } from "@/stores";
+import { useConfig } from "@/config";
+import { accountStore, Player, roomStore, type User } from "@/stores";
 import { Background, IconFont, Select } from "@/ui/Shared";
 
 import { Chat } from "./Chat";
 import styles from "./index.module.scss";
 
+const NeosConfig = useConfig();
+
 interface Params {
   player?: string;
   passWd?: string;
@@ -39,6 +45,7 @@ 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
@@ -64,27 +71,18 @@ export const Component: React.FC = () => {
           <Controller />
           <div className={styles["both-side-container"]}>
             <PlayerZone
-              isReady
               who={Who.Me}
-              user={user}
+              player={room.getMePlayer()}
+              avatar={user?.avatar_url}
               btn={
                 <>
-                  {/* <Button size="large" className={styles["btn-join"]}>
+                  <Button size="large" className={styles["btn-join"]}>
                     决斗准备
-                  </Button> */}
-                  <MoraButton />
+                  </Button>
                 </>
               }
             />
-            <PlayerZone
-              isReady
-              who={Who.Op}
-              btn={
-                <Button size="large" className={styles["btn-join"]}>
-                  加入决斗
-                </Button>
-              }
-            />
+            <PlayerZone who={Who.Op} player={room.getOpPlayer()} />
           </div>
         </div>
       </div>
@@ -182,21 +180,26 @@ enum Who {
 // 玩家区域: 两侧各有一个
 const PlayerZone: React.FC<{
   btn?: React.ReactNode; // 在内部右侧可以放一个按钮
-  isReady: boolean;
   who?: Who;
-  user?: User;
-}> = ({ btn, isReady, who, user }) => {
+  player?: Player;
+  avatar?: string; // 因为对手的头像目前不清楚如何获取，因此暂时这里作为一个参数传入
+}> = ({ btn, who, player, avatar }) => {
   return (
     <div className={classNames(styles["side-box"], who && styles[who])}>
       <div className={styles.inner}></div>
       <OrderPopup open={false}>
         <div style={{ position: "relative" }}>
-          <Avatar src={user?.avatar_url} size={48} />
-          {isReady && <CheckCircleFilled className={styles.check} />}
+          <Avatar
+            src={avatar ?? `${NeosConfig.assetsPath}/default-avatar.png`}
+            size={48}
+          />
+          {player?.state === PlayerState.READY && (
+            <CheckCircleFilled className={styles.check} />
+          )}
         </div>
       </OrderPopup>
       <div className={styles.name}>
-        {user ? user.username : <Skeleton.Input size="small" />}
+        {player ? player.name : <Skeleton.Input size="small" />}
       </div>
       {btn}
     </div>

src/ui/NewWaitRoom/util.ts

+import rustInit from "rust-src";
+
+import { initStrings } from "@/api";
+import { useConfig } from "@/config";
+import socketMiddleWare, { socketCmd } from "@/middleware/socket";
+import sqliteMiddleWare, { sqliteCmd } from "@/middleware/sqlite";
+
+const NeosConfig = useConfig();
+
+// 进行进入房间后的一些初始化操作
+export const init = async (params: {
+  ip: string;
+  player: string;
+  passWd: string;
+}) => {
+  // 初始化wasm
+  const url =
+    import.meta.env.BASE_URL === "/"
+      ? undefined
+      : new URL("rust_src_bg.wasm", `${import.meta.env.BASE_URL}assets/`);
+  await rustInit(url);
+
+  // 初始化sqlite
+  await sqliteMiddleWare({
+    cmd: sqliteCmd.INIT,
+    initInfo: { dbUrl: NeosConfig.cardsDbUrl },
+  });
+
+  // 初始化I18N文案
+  await initStrings();
+
+  // 页面第一次渲染时，通过socket中间件向ygopro服务端请求建立长连接
+  socketMiddleWare({
+    cmd: socketCmd.CONNECT,
+    initInfo: params,
+  });
+};