Commit 00588b78 authored by timel's avatar timel

feat: menu

parent 938dea2a
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
.life-bar { .life-bar {
width: 160px; width: 160px;
color: white; color: white;
background-color: rgb(50, 50, 50); background-color: #323232;
font-family: var(--theme-font); font-family: var(--theme-font);
border: 1px solid #222; border: 1px solid #222;
padding: 1rem; padding: 1rem;
......
#controller { .menu-container {
position: fixed; position: fixed;
display: flex; display: flex;
gap: 20px; // flex-direction: column;
gap: 6px;
bottom: 20px; bottom: 20px;
right: 20px; right: 35px;
z-index: 999; z-index: 999;
} background-color: #323232;
padding: 8px;
button { border-radius: 6px;
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
} }
import "./index.scss"; import "./index.scss";
import { Button, Modal } from "antd"; import {
Button,
Tooltip,
Dropdown,
type MenuProps,
theme,
Divider,
Space,
Popconfirm,
} from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useSnapshot } from "valtio"; import { useSnapshot } from "valtio";
import { import {
fetchStrings, StepForwardFilled,
MessageFilled,
CloseCircleFilled,
} from "@ant-design/icons";
import {
sendSelectBattleCmdResponse, sendSelectBattleCmdResponse,
sendSelectIdleCmdResponse, sendSelectIdleCmdResponse,
sendSurrender,
ygopro, ygopro,
sendSurrender,
} from "@/api"; } from "@/api";
import { cardStore, matStore } from "@/stores"; import { cardStore, matStore } from "@/stores";
import PhaseType = ygopro.StocGameMessage.MsgNewPhase.PhaseType; import PhaseType = ygopro.StocGameMessage.MsgNewPhase.PhaseType;
const { phase } = matStore; const { phase } = matStore;
const { useToken } = theme;
export const Menu = () => { export const Menu = () => {
const snapPhase = useSnapshot(phase); const snapPhase = useSnapshot(phase);
const enableBp = snapPhase.enableBp;
const enableM2 = snapPhase.enableM2;
const enableEp = snapPhase.enableEp;
const currentPhase = snapPhase.currentPhase; const currentPhase = snapPhase.currentPhase;
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
...@@ -40,61 +49,83 @@ export const Menu = () => { ...@@ -40,61 +49,83 @@ export const Menu = () => {
} }
}; };
const onBp = () => { const phaseBind: [PhaseType, string, number][] = [
sendSelectIdleCmdResponse(6); [PhaseType.DRAW, "抽卡阶段", -1],
clearAllIdleInteractivities(); [PhaseType.STANDBY, "准备阶段", -1],
phase.enableBp = false; [PhaseType.MAIN1, "主要阶段 1", -1],
}; [PhaseType.BATTLE, "战斗阶段", 6],
const onM2 = () => { [PhaseType.BATTLE_START, "战斗开始", 3],
sendSelectBattleCmdResponse(2); [PhaseType.BATTLE_STEP, "战斗步骤", 3],
clearAllIdleInteractivities(); [PhaseType.DAMAGE, "伤害步骤", 3],
phase.enableM2 = false; [PhaseType.DAMAGE_GAL, "伤害步骤(伤害计算)", 3],
}; [PhaseType.MAIN2, "主要阶段 2", 2],
const onEp = () => { [PhaseType.END, "结束阶段", response],
[PhaseType.UNKNOWN, "未知阶段", response],
];
const items: MenuProps["items"] = phaseBind.map(
([key, value, response], i) => ({
key: i,
label: value,
disabled: currentPhase >= Number(key),
onClick: () => {
sendSelectIdleCmdResponse(response); sendSelectIdleCmdResponse(response);
clearAllIdleInteractivities(); clearAllIdleInteractivities();
phase.enableEp = false; },
}; })
const onSurrender = () => { );
setModalOpen(true);
const { token } = useToken();
const contentStyle = {
backgroundColor: token.colorBgElevated,
borderRadius: token.borderRadiusLG,
boxShadow: token.boxShadowSecondary,
}; };
const menuStyle = {
boxShadow: "none",
};
return ( return (
<div id="controller">
<button disabled={!enableBp} onClick={onBp}>
{fetchStrings("!system", 80)}
</button>
<button disabled={!enableM2} onClick={onM2}>
进入主要阶段2
</button>
<button disabled={!enableEp} onClick={onEp}>
{fetchStrings("!system", 81)}
</button>
<button onClick={onSurrender}>{fetchStrings("!system", 1351)}</button>
<Modal
title="是否确认要投降?"
open={modalOpen}
closable={false}
footer={
<> <>
<Button <div className="menu-container">
onClick={() => { <Dropdown
sendSurrender(); menu={{ items }}
setModalOpen(false); dropdownRender={(menu) => (
}} <div style={contentStyle}>
{React.cloneElement(menu as React.ReactElement, {
style: menuStyle,
})}
<Divider style={{ margin: 0 }} />
<Space style={{ padding: 16 }}>请选择要进入的阶段</Space>
</div>
)}
arrow
> >
Yes
</Button>
<Button <Button
onClick={() => { icon={<StepForwardFilled style={{ transform: "scale(1.5)" }} />}
setModalOpen(false); type="text"
}}
> >
No {phaseBind.find(([key]) => key === currentPhase)?.[1]}
</Button> </Button>
</> </Dropdown>
} <Tooltip title="聊天室">
/> <Button icon={<MessageFilled />} type="text"></Button>
</Tooltip>
<Tooltip title="投降" color="red">
<Popconfirm
title="投降"
description="您确认要投降?"
onConfirm={sendSurrender}
okText="确认"
cancelText="取消"
placement="topRight"
arrow
>
<Button icon={<CloseCircleFilled />} type="text"></Button>
</Popconfirm>
</Tooltip>
</div> </div>
</>
); );
}; };
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