Commit ab0be43d authored by Chunchi Che's avatar Chunchi Che

add MatchModal.tsx

parent d6f16bf0
Pipeline #22929 failed with stages
in 11 minutes and 42 seconds
......@@ -2,7 +2,6 @@ export * from "./accountStore";
export * from "./cardStore";
export * from "./chatStore";
export * from "./deckStore";
export * from "./deckStore";
export * from "./matStore";
export * from "./placeStore";
export * from "./replayStore";
......
.inputs-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
.input {
font-size: 18px;
font-family: var(--theme-font);
color: #2885fff2;
height: 50px;
margin: 4px;
}
}
import { Button, Input, Modal } from "antd";
import React, { ChangeEvent, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { proxy, useSnapshot } from "valtio";
import { useConfig } from "@/config";
import { accountStore } from "@/stores";
import styles from "./Modal.module.scss";
const NeosConfig = useConfig();
const serverConfig = NeosConfig.servers;
const {
defaults: { defaultPlayer, defaultPassword },
automation: { isAiMode },
} = useConfig();
interface Props {
open?: boolean;
}
const defaultProps: Props = {
open: false,
};
export const localStore = proxy<Props>(defaultProps);
export const MatchModal: React.FC = ({}) => {
const { open } = useSnapshot(localStore);
const { user } = useSnapshot(accountStore);
const [player, setPlayer] = useState(user?.name ?? defaultPlayer);
const [passwd, setPasswd] = useState(defaultPassword);
const [server, setServer] = useState(
`${serverConfig[0].ip}:${serverConfig[0].port}`
);
const [confirmLoading, setConfirmLoading] = useState(false);
const navigate = useNavigate();
let handlePlayerChange = (event: ChangeEvent<HTMLInputElement>) => {
setPlayer(event.target.value);
};
let handleServerChange = (event: ChangeEvent<HTMLInputElement>) => {
setServer(event.target.value);
};
let handlePasswdChange = (event: ChangeEvent<HTMLInputElement>) => {
setPasswd(event.target.value);
};
// 因为萌卡服务器的房间密码会有`#`等特殊字符,因此这里用`encodeURIComponent`做下转义
const handleSubmit = () => {
setConfirmLoading(true);
// TODO: 这里应该进行WASM,websocket等的初始化,成功加入房间后才跳转
// navigate(`/room/${player}/${encodeURIComponent(passwd)}/${server}`);
};
useEffect(() => {
// 如果开启了AI模式,直接进入房间
if (isAiMode) {
handleSubmit();
}
}, []);
return (
<Modal
open={open}
title="请输入自定义房间信息"
onCancel={() => (localStore.open = false)}
footer={
<Button onClick={handleSubmit} loading={confirmLoading}>
加入房间
</Button>
}
confirmLoading={confirmLoading}
centered
>
<div className={styles["inputs-container"]}>
<Input
className={styles.input}
type="text"
placeholder="玩家昵称"
value={player}
onChange={handlePlayerChange}
required
/>
<Input
className={styles.input}
type="text"
placeholder="服务器(IP+端口)"
value={server}
onChange={handleServerChange}
required
/>
<Input
className={styles.input}
type="password"
autoCorrect="off"
placeholder="房间密码(可选)"
value={passwd}
onChange={handlePasswdChange}
/>
</div>
</Modal>
);
};
......@@ -7,6 +7,7 @@ import { accountStore, type User } from "@/stores";
import { Background, IconFont, Select } from "@/ui/Shared";
import styles from "./index.module.scss";
import { localStore, MatchModal } from "./Modal";
export const loader: LoaderFunction = () => {
const sso = new URLSearchParams(location.search).get("sso");
......@@ -71,6 +72,7 @@ export const Component: React.FC = () => {
title="自定义房间"
desc="创建一个自定义的对战房间,便捷地与好友进行对战,甚至是举办一场竞技比赛。"
icon={<SettingFilled />}
onClick={() => (localStore.open = true)}
/>
<Mode
title="录像回放"
......@@ -85,6 +87,7 @@ export const Component: React.FC = () => {
</div>
</div>
</div>
<MatchModal />
</>
);
};
......
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