Commit 42a9b174 authored by Chunchi Che's avatar Chunchi Che

update NewWaitRoom.tsx

parent 261c838e
Pipeline #22926 failed with stages
in 13 minutes and 46 seconds
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
* *
* */ * */
import socketMiddleWare, { socketCmd } from "@/middleware/socket"; import socketMiddleWare, { socketCmd } from "@/middleware/socket";
import { IDeck } from "@/stores";
import { IDeck } from "../deck";
import { ygopro } from "./idl/ocgcore"; import { ygopro } from "./idl/ocgcore";
import Chat from "./ocgAdapter/ctos/ctosChat"; import Chat from "./ocgAdapter/ctos/ctosChat";
import GameMsgResponse from "./ocgAdapter/ctos/ctosGameMsgResponse/mod"; import GameMsgResponse from "./ocgAdapter/ctos/ctosGameMsgResponse/mod";
......
...@@ -6,7 +6,7 @@ import { type NeosStore } from "./shared"; ...@@ -6,7 +6,7 @@ import { type NeosStore } from "./shared";
const IDB_NAME = "decks"; const IDB_NAME = "decks";
const deckIdb = createStore(IDB_NAME, IDB_NAME); const deckIdb = createStore(IDB_NAME, IDB_NAME);
interface IDeck { export interface IDeck {
deckName: string; deckName: string;
main: number[]; main: number[];
extra: number[]; extra: number[];
......
...@@ -2,6 +2,7 @@ export * from "./accountStore"; ...@@ -2,6 +2,7 @@ export * from "./accountStore";
export * from "./cardStore"; export * from "./cardStore";
export * from "./chatStore"; export * from "./chatStore";
export * from "./deckStore"; export * from "./deckStore";
export * from "./deckStore";
export * from "./matStore"; export * from "./matStore";
export * from "./placeStore"; export * from "./placeStore";
export * from "./replayStore"; export * from "./replayStore";
......
...@@ -6,7 +6,7 @@ import StocHsPlayerChange = ygopro.StocHsPlayerChange; ...@@ -6,7 +6,7 @@ import StocHsPlayerChange = ygopro.StocHsPlayerChange;
import SelfType = ygopro.StocTypeChange.SelfType; import SelfType = ygopro.StocTypeChange.SelfType;
import { type NeosStore } from "./shared"; import { type NeosStore } from "./shared";
interface Player { export interface Player {
name: string; // 玩家的昵称 name: string; // 玩家的昵称
state: StocHsPlayerChange.State; // 玩家当前状态 state: StocHsPlayerChange.State; // 玩家当前状态
deckInfo?: DeckInfo; deckInfo?: DeckInfo;
......
import { CheckCircleFilled } from "@ant-design/icons"; 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 { Avatar, Button, ConfigProvider, Popover, Skeleton, Space } from "antd";
import classNames from "classnames"; import classNames from "classnames";
import React, { useState } from "react"; import React, { useState } from "react";
import { type LoaderFunction, useLoaderData } from "react-router-dom"; import { type LoaderFunction, useLoaderData } from "react-router-dom";
import { useSnapshot } from "valtio"; 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 { Background, IconFont, Select } from "@/ui/Shared";
import { Chat } from "./Chat"; import { Chat } from "./Chat";
import styles from "./index.module.scss"; import styles from "./index.module.scss";
const NeosConfig = useConfig();
interface Params { interface Params {
player?: string; player?: string;
passWd?: string; passWd?: string;
...@@ -39,6 +45,7 @@ export const Component: React.FC = () => { ...@@ -39,6 +45,7 @@ export const Component: React.FC = () => {
const _params = useLoaderData<Params>(); const _params = useLoaderData<Params>();
const { user } = useSnapshot(accountStore); const { user } = useSnapshot(accountStore);
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
const room = useSnapshot(roomStore);
return ( return (
<ConfigProvider theme={theme}> <ConfigProvider theme={theme}>
<div <div
...@@ -64,27 +71,18 @@ export const Component: React.FC = () => { ...@@ -64,27 +71,18 @@ export const Component: React.FC = () => {
<Controller /> <Controller />
<div className={styles["both-side-container"]}> <div className={styles["both-side-container"]}>
<PlayerZone <PlayerZone
isReady
who={Who.Me} who={Who.Me}
user={user} player={room.getMePlayer()}
avatar={user?.avatar_url}
btn={ btn={
<> <>
{/* <Button size="large" className={styles["btn-join"]}> <Button size="large" className={styles["btn-join"]}>
决斗准备 决斗准备
</Button> */} </Button>
<MoraButton />
</> </>
} }
/> />
<PlayerZone <PlayerZone who={Who.Op} player={room.getOpPlayer()} />
isReady
who={Who.Op}
btn={
<Button size="large" className={styles["btn-join"]}>
加入决斗
</Button>
}
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -182,21 +180,26 @@ enum Who { ...@@ -182,21 +180,26 @@ enum Who {
// 玩家区域: 两侧各有一个 // 玩家区域: 两侧各有一个
const PlayerZone: React.FC<{ const PlayerZone: React.FC<{
btn?: React.ReactNode; // 在内部右侧可以放一个按钮 btn?: React.ReactNode; // 在内部右侧可以放一个按钮
isReady: boolean;
who?: Who; who?: Who;
user?: User; player?: Player;
}> = ({ btn, isReady, who, user }) => { avatar?: string; // 因为对手的头像目前不清楚如何获取,因此暂时这里作为一个参数传入
}> = ({ btn, who, player, avatar }) => {
return ( return (
<div className={classNames(styles["side-box"], who && styles[who])}> <div className={classNames(styles["side-box"], who && styles[who])}>
<div className={styles.inner}></div> <div className={styles.inner}></div>
<OrderPopup open={false}> <OrderPopup open={false}>
<div style={{ position: "relative" }}> <div style={{ position: "relative" }}>
<Avatar src={user?.avatar_url} size={48} /> <Avatar
{isReady && <CheckCircleFilled className={styles.check} />} src={avatar ?? `${NeosConfig.assetsPath}/default-avatar.png`}
size={48}
/>
{player?.state === PlayerState.READY && (
<CheckCircleFilled className={styles.check} />
)}
</div> </div>
</OrderPopup> </OrderPopup>
<div className={styles.name}> <div className={styles.name}>
{user ? user.username : <Skeleton.Input size="small" />} {player ? player.name : <Skeleton.Input size="small" />}
</div> </div>
{btn} {btn}
</div> </div>
......
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,
});
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment