Skip to content

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

Merge branch 'feat/text' into 'main' 

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

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