Skip to content

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

更新一下匹配页的文案和调整一下编辑卡组按钮的位置

parent 8c020819
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 118 deletions
src/ui/Match/index.tsx
View file @ a0527f68
import { EditFilled, SettingFilled } from "@ant-design/icons"; import {
import { Space } from "antd"; EditOutlined,
PlayCircleOutlined,
SettingFilled,
} from "@ant-design/icons";
import { Button, Space } from "antd";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useSnapshot } from "valtio"; import { useSnapshot } from "valtio";
...@@ -72,17 +76,24 @@ export const Component: React.FC = () => { ...@@ -72,17 +76,24 @@ export const Component: React.FC = () => {
label: deck.deckName, label: deck.deckName,
}))} }))}
/> />
<Button
style={{ width: 150, fontSize: "14px" }}
icon={<EditOutlined />}
onClick={() => navigate("/build")}
>
卡组编辑
</Button>
</Space> </Space>
<div className={styles["mode-select"]}> <div className={styles["mode-select"]}>
<Mode <Mode
title="竞技匹配" title="竞技匹配"
desc="与世界上其他玩家在线匹配，您的排名将实时显示在排行榜上。" desc="与天梯其他数万名玩家激战，追求胜利登顶最强。每月最后一天晚上10点结算成绩，获取奖励与公布排名。"
icon={<IconFont type="icon-battle" size={32} />} icon={<IconFont type="icon-battle" size={32} />}
onClick={() => alert("开发中，敬请期待")} onClick={() => alert("开发中，敬请期待")}
/> />
<Mode <Mode
title="休闲匹配" title="娱乐匹配"
desc="使用任意卡组进行对战，将胜负暂且搁置，尽情享受决斗的乐趣。" desc="过去一周竞技匹配使用数最靠前的20个卡组被禁止使用。将胜负暂且搁置，尽情享受决斗的乐趣。"
icon={<IconFont type="icon-coffee" size={28} />} icon={<IconFont type="icon-coffee" size={28} />}
onClick={() => alert("开发中，敬请期待")} onClick={() => alert("开发中，敬请期待")}
/> />
...@@ -103,7 +114,7 @@ export const Component: React.FC = () => { ...@@ -103,7 +114,7 @@ export const Component: React.FC = () => {
/> />
<Mode <Mode
title="自定义房间" title="自定义房间"
desc="创建一个自定义的对战房间，便捷地与好友进行对战，甚至是举办一场竞技比赛。" desc="创建双打TAG或自定义规则的房间，或与好友约战，甚至举办竞技比赛。"
icon={<SettingFilled />} icon={<SettingFilled />}
onClick={() => (matchStore.open = true)} onClick={() => (matchStore.open = true)}
/> />
...@@ -114,10 +125,10 @@ export const Component: React.FC = () => { ...@@ -114,10 +125,10 @@ export const Component: React.FC = () => {
onClick={replayOpen} onClick={replayOpen}
/> />
<Mode <Mode
title="卡组编辑" title="观战列表"
desc="创建和编辑卡组，在上万种卡片中选择，组建独一无二的构筑。" desc="观看MyCard上正在进行的决斗"
icon={<EditFilled />} icon={<PlayCircleOutlined />}
onClick={() => navigate("/build")} onClick={() => alert("开发中，敬请期待")}
/> />
</div> </div>
</div> </div>
......
src/ui/WaitRoom/index.tsx
View file @ a0527f68
...@@ -14,7 +14,7 @@ import { ...@@ -14,7 +14,7 @@ import {
import socketMiddleWare, { socketCmd } from "@/middleware/socket"; import socketMiddleWare, { socketCmd } from "@/middleware/socket";
import PlayerState = ygopro.StocHsPlayerChange.State; import PlayerState = ygopro.StocHsPlayerChange.State;
import SelfType = ygopro.StocTypeChange.SelfType; import SelfType = ygopro.StocTypeChange.SelfType;
import { Avatar, Button, ConfigProvider, Skeleton, Space } from "antd"; import { Avatar, Button, Skeleton, Space } from "antd";
import classNames from "classnames"; import classNames from "classnames";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
...@@ -38,22 +38,6 @@ import { Mora, MoraPopover, Tp, TpPopover } from "./Popover"; ...@@ -38,22 +38,6 @@ import { Mora, MoraPopover, Tp, TpPopover } from "./Popover";
const NeosConfig = useConfig(); const NeosConfig = useConfig();
const theme = {
components: {
Button: {
lineWidth: 0,
fontSizeLG: 14,
fontSize: 12,
colorBgContainer: "hsla(0, 0%, 100%, 0.05)",
colorPrimaryHover: "#ccc",
colorPrimaryActive: "#aaa",
},
Popover: {
colorBgElevated: "hsla(0, 0%, 100%, 0.1)",
},
},
};
export const Component: React.FC = () => { export const Component: React.FC = () => {
const { user } = useSnapshot(accountStore); const { user } = useSnapshot(accountStore);
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
...@@ -73,105 +57,103 @@ export const Component: React.FC = () => { ...@@ -73,105 +57,103 @@ export const Component: React.FC = () => {
}, [room.stage]); }, [room.stage]);
return ( return (
<ConfigProvider theme={theme}> <div
<div className={classNames(styles.container, {
className={classNames(styles.container, { [styles.collapsed]: collapsed,
[styles.collapsed]: collapsed, })}
})} >
> <Background />
<Background /> <div className={styles.sider}>
<div className={styles.sider}> <Chat />
<Chat /> </div>
</div> <div className={styles.content}>
<div className={styles.content}> <SideButtons
<SideButtons collapsed={collapsed}
collapsed={collapsed} switchCollapse={() => setCollapsed(!collapsed)}
switchCollapse={() => setCollapsed(!collapsed)} />
<div className={styles.wrap}>
<Controller
onDeckChange={(deckName: string) => {
const deck = deckStore.get(deckName);
// 同步后端
if (deck) {
setDeck(deck);
} else {
alert(`Deck ${deckName} not found`);
}
}}
/> />
<div className={styles.wrap}> <div className={styles["both-side-container"]}>
<Controller <PlayerZone
onDeckChange={(deckName: string) => { who={Who.Me}
const deck = deckStore.get(deckName); player={me}
// 同步后端 avatar={user?.avatar_url}
if (deck) { btn={
setDeck(deck); room.stage === RoomStage.WAITING ? (
} else { <Button
alert(`Deck ${deckName} not found`); size="large"
} className={styles["btn-join"]}
}} onClick={() => {
/> if (me?.state === PlayerState.NO_READY) {
<div className={styles["both-side-container"]}> sendUpdateDeck(deck);
<PlayerZone window.myExtraDeckCodes = [...deck.extra];
who={Who.Me} sendHsReady();
player={me} } else {
avatar={user?.avatar_url} sendHsNotReady();
btn={
room.stage === RoomStage.WAITING ? (
<Button
size="large"
className={styles["btn-join"]}
onClick={() => {
if (me?.state === PlayerState.NO_READY) {
sendUpdateDeck(deck);
window.myExtraDeckCodes = [...deck.extra];
sendHsReady();
} else {
sendHsNotReady();
}
}}
>
{me?.state === PlayerState.NO_READY
? "决斗准备"
: "取消准备"}
</Button>
) : (
<MoraAvatar
mora={
me?.moraResult !== undefined &&
me.moraResult !== HandType.UNKNOWN
? Object.values(Mora)[me.moraResult - 1]
: undefined
} }
/> }}
) >
} {me?.state === PlayerState.NO_READY
/> ? "决斗准备"
{room.players : "取消准备"}
.filter((player) => player !== undefined && !player.isMe) </Button>
.map((player, idx) => ( ) : (
<PlayerZone <MoraAvatar
key={idx} mora={
who={Who.Op} me?.moraResult !== undefined &&
player={player} me.moraResult !== HandType.UNKNOWN
btn={ ? Object.values(Mora)[me.moraResult - 1]
room.stage === RoomStage.WAITING ? null : ( : undefined
<MoraAvatar
mora={
op?.moraResult !== undefined &&
op.moraResult !== HandType.UNKNOWN
? Object.values(Mora)[op.moraResult - 1]
: undefined
}
/>
)
} }
/> />
))} )
</div> }
<ActionButton
onMoraSelect={(mora) => {
sendHandResult(mora);
roomStore.stage = RoomStage.HAND_SELECTED;
}}
onTpSelect={(tp) => {
sendTpResult(tp === Tp.First);
roomStore.stage = RoomStage.TP_SELECTED;
}}
/> />
{room.players
.filter((player) => player !== undefined && !player.isMe)
.map((player, idx) => (
<PlayerZone
key={idx}
who={Who.Op}
player={player}
btn={
room.stage === RoomStage.WAITING ? null : (
<MoraAvatar
mora={
op?.moraResult !== undefined &&
op.moraResult !== HandType.UNKNOWN
? Object.values(Mora)[op.moraResult - 1]
: undefined
}
/>
)
}
/>
))}
</div> </div>
<ActionButton
onMoraSelect={(mora) => {
sendHandResult(mora);
roomStore.stage = RoomStage.HAND_SELECTED;
}}
onTpSelect={(tp) => {
sendTpResult(tp === Tp.First);
roomStore.stage = RoomStage.TP_SELECTED;
}}
/>
</div> </div>
</div> </div>
</ConfigProvider> </div>
); );
}; };
......
src/ui/theme.ts
View file @ a0527f68
...@@ -41,5 +41,16 @@ export const theme: ThemeConfig = { ...@@ -41,5 +41,16 @@ export const theme: ThemeConfig = {
Layout: { Layout: {
colorBgBody: "transparent", colorBgBody: "transparent",
}, },
Button: {
lineWidth: 0,
fontSizeLG: 14,
fontSize: 12,
colorBgContainer: "hsla(0, 0%, 100%, 0.05)",
colorPrimaryHover: "#ccc",
colorPrimaryActive: "#aaa",
},
Popover: {
colorBgElevated: "hsla(0, 0%, 100%, 0.1)",
},
}, },
}; };
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