Skip to content

N
Neos
Commit ebe9d703 authored by Chunchi Che's avatar Chunchi Che
Browse files
Options

use waitroom v2

parent 3090b5bb
Hide whitespace changes
Inline Side-by-side
Showing with 157 additions and 260 deletions
src/ui/Neos.tsx
View file @ ebe9d703
import React from "react"; import React from "react";
import JoinRoom from "./JoinRoom"; import JoinRoom from "./JoinRoom";
import WaitRoom from "./WaitRoom";
import WaitRoomV2 from "./WaitRoomV2"; import WaitRoomV2 from "./WaitRoomV2";
import { Routes, Route } from "react-router-dom"; import { Routes, Route } from "react-router-dom";
import Mora from "./Mora"; import Mora from "./Mora";
...@@ -11,10 +10,9 @@ export default function () { ...@@ -11,10 +10,9 @@ export default function () {
return ( return (
<Routes> <Routes>
<Route path="/" element={<JoinRoom />} /> <Route path="/" element={<JoinRoom />} />
<Route path="/:player/:passWd/:ip" element={<WaitRoom />} /> <Route path="/:player/:passWd/:ip" element={<WaitRoomV2 />} />
<Route path="/mora" element={<Mora />} /> <Route path="/mora" element={<Mora />} />
<Route path="/duel" element={<NeosDuel />} /> <Route path="/duel" element={<NeosDuel />} />
<Route path="/waitroomv2" element={<WaitRoomV2 />} />
</Routes> </Routes>
); );
} }
src/ui/WaitRoom.tsx
View file @ ebe9d703
/* import {
* 等待房间页面 Modal,
* Checkbox,
* */ Avatar,
import React, { useEffect, useState } from "react"; Space,
import { Link, useParams } from "react-router-dom"; Button,
import { fetchDeck } from "../api/deck"; Dropdown,
import { useAppSelector } from "../hook"; notification,
import { selectJoined } from "../reducers/joinSlice"; } from "antd";
import { selectChat } from "../reducers/chatSlice"; import { useNavigate } from "react-router-dom";
import React, { useState, useEffect } from "react";
import socketMiddleWare, { socketCmd } from "../middleware/socket";
import sqliteMiddleWare, { sqliteCmd } from "../middleware/sqlite";
import { store } from "../store";
import { import {
selectIsHost, selectIsHost,
selectPlayer0, selectPlayer0,
selectPlayer1, selectPlayer1,
selectObserverCount,
} from "../reducers/playerSlice"; } from "../reducers/playerSlice";
import { useAppSelector } from "../hook";
import { selectJoined } from "../reducers/joinSlice";
import { selectChat } from "../reducers/chatSlice";
import { fetchDeck } from "../api/deck";
import { import {
sendUpdateDeck, sendUpdateDeck,
sendHsReady, sendHsReady,
sendHsStart, sendHsStart,
} from "../api/ocgcore/ocgHelper"; } from "../api/ocgcore/ocgHelper";
import socketMiddleWare, { socketCmd } from "../middleware/socket"; import {
import sqliteMiddleWare, { sqliteCmd } from "../middleware/sqlite"; UserOutlined,
import { Button } from "antd"; CheckCircleFilled,
import { store } from "../store"; LoginOutlined,
LogoutOutlined,
SendOutlined,
DownOutlined,
TagOutlined,
} from "@ant-design/icons";
import { initMeExtraDeckMeta } from "../reducers/duel/extraDeckSlice"; import { initMeExtraDeckMeta } from "../reducers/duel/extraDeckSlice";
import "../styles/core.scss"; import type { MenuProps } from "antd";
import { Link, useParams } from "react-router-dom";
const READY_STATE = "ready"; const READY_STATE = "ready";
export default function WaitRoom() { const WaitRoom = () => {
const params = useParams<{ const params = useParams<{
player?: string; player?: string;
passWd?: string; passWd?: string;
...@@ -68,8 +81,6 @@ export default function WaitRoom() { ...@@ -68,8 +81,6 @@ export default function WaitRoom() {
const isHost = useAppSelector(selectIsHost); const isHost = useAppSelector(selectIsHost);
const player0 = useAppSelector(selectPlayer0); const player0 = useAppSelector(selectPlayer0);
const player1 = useAppSelector(selectPlayer1); const player1 = useAppSelector(selectPlayer1);
const observerCount = useAppSelector(selectObserverCount);
const handleChoseDeck = async () => { const handleChoseDeck = async () => {
const deck = await fetchDeck("hero"); const deck = await fetchDeck("hero");
...@@ -87,51 +98,132 @@ export default function WaitRoom() { ...@@ -87,51 +98,132 @@ export default function WaitRoom() {
sendHsStart(); sendHsStart();
}; };
const navigate = useNavigate();
const items: MenuProps["items"] = [
{
label: "卡组1",
key: "1",
},
{
label: "卡组2",
key: "2",
},
{
label: "卡组3",
key: "3",
},
];
const [api, contextHolder] = notification.useNotification();
useEffect(() => {
if (joined) {
api.info({ message: "成功加入房间！", placement: "top" });
}
}, [joined]);
useEffect(() => {
if (chat != "") {
api.info({ message: "Chat", description: chat, placement: "bottom" });
}
}, [chat]);
return ( return (
<div className="wait_container"> <>
<div className="playerRegion"> <Modal
<h2>{joined ? "Room Joined!" : "Room Not Joined."}</h2> title="单局房间"
<p> open={true}
<Button disabled={!joined} onClick={handleChoseDeck}> footer={
choose hero.ydk <>
</Button> <Space direction="vertical" size={10}>
</p> <Space wrap size={10}>
<p> <Avatar size={25} icon={<CheckCircleFilled />} />
<Button disabled={!choseDeck} onClick={handleChoseReady}> <Button
ready disabled={!(choseDeck && joined)}
</Button> onClick={handleChoseReady}
</p> >
<p> 决斗准备
<Button onClick={handleChoseStart}> </Button>
<Link </Space>
to={ <Space wrap size={10}>
// 若当前玩家是房主并且对战双方都已准备完毕，跳转到猜拳页面； <Avatar size={25} icon={<LoginOutlined />} />
// 否则停留在当前页面。 <Button>到决斗者</Button>
!isHost || </Space>
player0.state !== READY_STATE || <Space wrap size={10}>
player1.state !== READY_STATE <Avatar size={25} icon={<LogoutOutlined />} />
? {} <Button>到旁观者</Button>
: { pathname: `/mora` } </Space>
} <Space wrap size={10}>
<Avatar size={25} icon={<SendOutlined />} />
<Button onClick={handleChoseStart}>
<Link
to={
// 若当前玩家是房主并且对战双方都已准备完毕，跳转到猜拳页面；
// 否则停留在当前页面。
!isHost ||
!joined ||
player0.state !== READY_STATE ||
player1.state !== READY_STATE
? {}
: { pathname: `/mora` }
}
>
开始游戏
</Link>
</Button>
</Space>
</Space>
</>
}
onCancel={() => {
// 断开websocket🔗，
socketMiddleWare({ cmd: socketCmd.DISCONNECT });
// 回到初始界面
navigate("/");
}}
>
<Space direction="vertical" size={16}>
<Space wrap size={16}>
<Avatar size={30} icon={<UserOutlined />} />
<Checkbox
defaultChecked={false}
checked={player0.state === READY_STATE}
disabled
>
{player0.name}
</Checkbox>
{player0.isHost === true ? (
<Avatar size={30} icon={<TagOutlined />} />
) : (
<></>
)}
</Space>
<Space wrap size={16}>
<Avatar size={30} icon={<UserOutlined />} />
<Checkbox
defaultChecked={false}
checked={player1.state === READY_STATE}
disabled
> >
start {player1.name}
</Link> </Checkbox>
</Button> {player1.isHost === true ? (
</p> <Avatar size={30} icon={<TagOutlined />} />
</div> ) : (
<div className="roomRegion"> <></>
<h2>Room Passwd: {passWd}</h2> )}
<p> </Space>
player0: {player0.isHost == true ? "[Host]" : ""} {player0.name}{" "} <Dropdown menu={{ items, onClick: ({ key }) => {} }}>
{player0.state} <a onClick={(e) => e.preventDefault()}>
</p> <Space>
<p> 卡组选择
player1: {player1.isHost == true ? "[Host]" : ""} {player1.name}{" "} <DownOutlined />
{player1.state} </Space>
</p> </a>
<p>observer: {observerCount}</p> </Dropdown>
<p>chat: {chat}</p> </Space>
</div> </Modal>
</div> {contextHolder}
</>
); );
} };
export default WaitRoom;
src/ui/WaitRoomV2.tsx deleted 100644 → 0
View file @ 3090b5bb
import { Modal, Checkbox, Avatar, Space, Button, Dropdown, Tag } from "antd";
import React, { useState, useEffect } from "react";
import socketMiddleWare, { socketCmd } from "../middleware/socket";
import sqliteMiddleWare, { sqliteCmd } from "../middleware/sqlite";
import { store } from "../store";
import {
selectIsHost,
selectPlayer0,
selectPlayer1,
selectObserverCount,
} from "../reducers/playerSlice";
import { useAppSelector } from "../hook";
import { selectJoined } from "../reducers/joinSlice";
import { selectChat } from "../reducers/chatSlice";
import { fetchDeck } from "../api/deck";
import {
sendUpdateDeck,
sendHsReady,
sendHsStart,
} from "../api/ocgcore/ocgHelper";
import {
UserOutlined,
CheckCircleFilled,
LoginOutlined,
LogoutOutlined,
SendOutlined,
DownOutlined,
TagOutlined,
} from "@ant-design/icons";
import { initMeExtraDeckMeta } from "../reducers/duel/extraDeckSlice";
import type { MenuProps } from "antd";
import { Link, useParams } from "react-router-dom";
const READY_STATE = "ready";
const WaitRoom = () => {
const params = useParams<{
player?: string;
passWd?: string;
ip?: string;
}>();
const [choseDeck, setChoseDeck] = useState<boolean>(false);
const { player, passWd, ip } = params;
const dispatch = store.dispatch;
const isHost = useAppSelector(selectIsHost);
const player0 = useAppSelector(selectPlayer0);
const player1 = useAppSelector(selectPlayer1);
const handleChoseDeck = async () => {
const deck = await fetchDeck("hero");
sendUpdateDeck(deck);
dispatch(initMeExtraDeckMeta({ controler: 0, codes: deck.extra || [] }));
setChoseDeck(true);
};
const handleChoseReady = () => {
sendHsReady();
};
const handleChoseStart = () => {
sendHsStart();
};
const items: MenuProps["items"] = [
{
label: "卡组1",
key: "1",
},
{
label: "卡组2",
key: "2",
},
{
label: "卡组3",
key: "3",
},
];
useEffect(() => {
if (ip && player && player.length != 0 && passWd && passWd.length != 0) {
const init = async () => {
// 页面第一次渲染时，通过socket中间件向ygopro服务端请求建立长连接
socketMiddleWare({
cmd: socketCmd.CONNECT,
initInfo: {
ip,
player,
passWd,
},
});
// 初始化sqlite
await sqliteMiddleWare({
cmd: sqliteCmd.INIT,
initInfo: { dbUrl: "/ygopro-database/locales/zh-CN/cards.cdb" },
});
};
init();
}
}, []);
return (
<Modal
title="单局房间"
open={true}
footer={
<>
<Space direction="vertical" size={10}>
<Space wrap size={10}>
<Avatar size={25} icon={<CheckCircleFilled />} />
<Button disabled={!choseDeck} onClick={handleChoseReady}>
决斗准备
</Button>
</Space>
<Space wrap size={10}>
<Avatar size={25} icon={<LoginOutlined />} />
<Button>到决斗者</Button>
</Space>
<Space wrap size={10}>
<Avatar size={25} icon={<LogoutOutlined />} />
<Button>到旁观者</Button>
</Space>
<Space wrap size={10}>
<Avatar size={25} icon={<SendOutlined />} />
<Button onClick={handleChoseStart}>
<Link
to={
// 若当前玩家是房主并且对战双方都已准备完毕，跳转到猜拳页面；
// 否则停留在当前页面。
!isHost ||
player0.state !== READY_STATE ||
player1.state !== READY_STATE
? {}
: { pathname: `/mora` }
}
>
开始游戏
</Link>
</Button>
</Space>
</Space>
</>
}
>
<Space direction="vertical" size={16}>
<Space wrap size={16}>
<Avatar size={30} icon={<UserOutlined />} />
<Checkbox
defaultChecked={false}
checked={player0.state === READY_STATE}
disabled
>
{player0.name}
</Checkbox>
{player0.isHost === true ? (
<Avatar size={30} icon={<TagOutlined />} />
) : (
<></>
)}
</Space>
<Space wrap size={16}>
<Avatar size={30} icon={<UserOutlined />} />
<Checkbox
defaultChecked={false}
checked={player1.state === READY_STATE}
disabled
>
{player1.name}
</Checkbox>
{player1.isHost === true ? (
<Avatar size={30} icon={<TagOutlined />} />
) : (
<></>
)}
</Space>
<Dropdown menu={{ items, onClick: ({ key }) => {} }}>
<a onClick={(e) => e.preventDefault()}>
<Space>
卡组选择
<DownOutlined />
</Space>
</a>
</Dropdown>
</Space>
</Modal>
);
};
export default WaitRoom;
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