Commit 679c2d85 authored by timel's avatar timel

feat: small

parent bfe20ce5
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -11,3 +11,7 @@
border-radius: 6px;
overflow: hidden;
}
:global(.ant-dropdown-menu-item) {
gap: 8px;
}
......@@ -2,8 +2,8 @@ import {
ArrowRightOutlined,
CheckOutlined,
CloseCircleFilled,
createFromIconfontCN,
MessageFilled,
SettingOutlined,
StepForwardFilled,
} from "@ant-design/icons";
import {
......@@ -25,11 +25,15 @@ import {
sendSurrender,
ygopro,
} from "@/api";
import { cardStore, matStore } from "@/stores";
import { cardStore, ChainSetting, matStore } from "@/stores";
import styles from "./index.module.scss";
import PhaseType = ygopro.StocGameMessage.MsgNewPhase.PhaseType;
const IconFont = createFromIconfontCN({
scriptUrl: ["//at.alicdn.com/t/c/font_4188978_z6f9ellbtoc.js"],
});
const { phase } = matStore;
const { useToken } = theme;
export const Menu = () => {
......@@ -38,8 +42,7 @@ export const Menu = () => {
const enableBp = snapPhase.enableBp;
const enableM2 = snapPhase.enableM2;
const enableEp = snapPhase.enableEp;
const { currentPlayer } = useSnapshot(matStore);
const { chainSetting } = useSnapshot(matStore);
const { currentPlayer, chainSetting } = useSnapshot(matStore);
const clearAllIdleInteractivities = () => {
for (const card of cardStore.inner) {
......@@ -110,15 +113,21 @@ export const Menu = () => {
danger: phase === PhaseType.END,
}));
const chainSettingTexts = ["全部连锁", "忽略连锁", "智能连锁"];
const chainSettingItems: MenuProps["items"] = chainSettingTexts
.map((text, i) => ({
const chainSettingTexts = [
[ChainSetting.CHAIN_ALL, "全部连锁"],
[ChainSetting.CHAIN_IGNORE, "忽略连锁"],
[ChainSetting.CHAIN_SMART, "智能连锁"],
] as const;
const chainSettingItems: MenuProps["items"] = chainSettingTexts.map(
([key, text]) => ({
label: text,
icon: <ChainIcon chainSetting={key} />,
key,
onClick: () => {
matStore.chainSetting = i;
matStore.chainSetting = key;
},
}))
.map((item, i) => ({ key: i, ...item }));
})
);
const surrenderMenuItems: MenuProps["items"] = [
{
......@@ -148,14 +157,14 @@ export const Menu = () => {
</Button>
</DropdownWithTitle>
<DropdownWithTitle
title={chainSettingTexts[chainSetting]}
menu={{
items: chainSettingItems,
selectable: true,
defaultSelectedKeys: ["3"],
}}
>
<Button icon={<SettingOutlined />} type="text"></Button>
<Button
icon={<ChainIcon chainSetting={chainSetting} />}
type="text"
></Button>
</DropdownWithTitle>
<Tooltip title="聊天室">
<Button icon={<MessageFilled />} type="text"></Button>
......@@ -170,7 +179,7 @@ export const Menu = () => {
);
};
const DropdownWithTitle: React.FC<DropdownProps & { title: string }> = (
const DropdownWithTitle: React.FC<DropdownProps & { title?: string }> = (
props
) => {
const { token } = useToken();
......@@ -187,17 +196,37 @@ const DropdownWithTitle: React.FC<DropdownProps & { title: string }> = (
{...props}
dropdownRender={(menu) => (
<div style={contentStyle}>
<Space style={{ padding: "12px 16px" }}>{props.title}</Space>
{props.title && (
<>
<Space style={{ padding: "12px 16px", fontSize: 12 }}>
{props.title}
</Space>
<Divider style={{ margin: 0 }} />
</>
)}
{cloneElement(menu as React.ReactElement, {
style: menuStyle,
})}
</div>
)}
arrow
trigger={["click", "hover"]}
trigger={["click"]}
>
{props.children}
</Dropdown>
);
};
const ChainIcon: React.FC<{ chainSetting: ChainSetting }> = ({
chainSetting,
}) => {
switch (chainSetting) {
case ChainSetting.CHAIN_ALL:
return <IconFont type="icon-chain-all" />;
case ChainSetting.CHAIN_SMART:
return <IconFont type="icon-chain" />;
case ChainSetting.CHAIN_IGNORE:
default:
return <IconFont type="icon-chain-broken" />;
}
};
body {
background: #0f131e;
text-align: center;
position: relative;
margin: 0;
padding: 0;
......@@ -13,6 +12,7 @@ body * {
.wrapper {
position: relative;
text-align: center;
}
.wrapper > * {
......
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