Commit 66292725 authored by Chunchi Che's avatar Chunchi Che

Merge branch 'opt/menu' into 'main'

optimize Menu.tsx

See merge request mycard/Neos!178
parents e2bf6c92 361a4f73
Pipeline #21508 passed with stages
in 15 minutes and 11 seconds
...@@ -13,9 +13,6 @@ ...@@ -13,9 +13,6 @@
<a aria-label="React" href="https://reactjs.org/"> <a aria-label="React" href="https://reactjs.org/">
<img alt="" src="https://img.shields.io/badge/react.js-%5E18.2.0-yellow?style=for-the-badge&logo=react"> <img alt="" src="https://img.shields.io/badge/react.js-%5E18.2.0-yellow?style=for-the-badge&logo=react">
</a> </a>
<a aria-label="Babylon.js" href="https://github.com/BabylonJS/Babylon.js">
<img alt="" src="https://img.shields.io/badge/babylon.js-%5E5.29.0-red?style=for-the-badge&logo=github">
</a>
<a aria-label="License" href="https://github.com/DarkNeos/neos-ts/blob/main/LICENSE"> <a aria-label="License" href="https://github.com/DarkNeos/neos-ts/blob/main/LICENSE">
<img alt="" src="https://img.shields.io/github/license/DarkNeos/neos-ts?color=&style=for-the-badge"> <img alt="" src="https://img.shields.io/github/license/DarkNeos/neos-ts?color=&style=for-the-badge">
</a> </a>
......
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000" fill-opacity="1"></path><g class="" transform="translate(0,0)" style=""><path d="M19.75 14.438c59.538 112.29 142.51 202.35 232.28 292.718l3.626 3.75.063-.062c21.827 21.93 44.04 43.923 66.405 66.25-18.856 14.813-38.974 28.2-59.938 40.312l28.532 28.53 68.717-68.717c42.337 27.636 76.286 63.646 104.094 105.81l28.064-28.06c-42.47-27.493-79.74-60.206-106.03-103.876l68.936-68.938-28.53-28.53c-11.115 21.853-24.413 42.015-39.47 60.593-43.852-43.8-86.462-85.842-130.125-125.47-.224-.203-.432-.422-.656-.625C183.624 122.75 108.515 63.91 19.75 14.437zm471.875 0c-83.038 46.28-154.122 100.78-221.97 161.156l22.814 21.562 56.81-56.812 13.22 13.187-56.438 56.44 24.594 23.186c61.802-66.92 117.6-136.92 160.97-218.72zm-329.53 125.906l200.56 200.53c-4.36 4.443-8.84 8.793-13.405 13.032L148.875 153.53l13.22-13.186zm-76.69 113.28l-28.5 28.532 68.907 68.906c-26.29 43.673-63.53 76.414-106 103.907l28.063 28.06c27.807-42.164 61.758-78.174 104.094-105.81l68.718 68.717 28.53-28.53c-20.962-12.113-41.08-25.5-59.937-40.313 17.865-17.83 35.61-35.433 53.157-52.97l-24.843-25.655-55.47 55.467c-4.565-4.238-9.014-8.62-13.374-13.062l55.844-55.844-24.53-25.374c-18.28 17.856-36.602 36.06-55.158 54.594-15.068-18.587-28.38-38.758-39.5-60.625z" fill="#fff" fill-opacity="1"></path></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000" fill-opacity="1"></path><g class="" transform="translate(0,0)" style=""><path d="M228.576 26.213v207.32h54.848V26.214h-54.848zm-28.518 45.744C108.44 96.58 41 180.215 41 279.605c0 118.74 96.258 215 215 215 118.74 0 215-96.26 215-215 0-99.39-67.44-183.025-159.057-207.647v50.47c64.6 22.994 110.85 84.684 110.85 157.177 0 92.117-74.676 166.794-166.793 166.794-92.118 0-166.794-74.678-166.794-166.795 0-72.494 46.25-134.183 110.852-157.178v-50.47z" fill="#fff" fill-opacity="1"></path></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000" fill-opacity="1"></path><g class="" transform="translate(0,0)" style=""><path d="M101.938 19.938c-8.837 0-15.813 6.978-15.813 15.812 0 7.358 4.84 13.427 11.563 15.25l23.134 55.4c-12.618 7.364-23.065 19.85-30.17 37.528L64.22 163.75l11.218 14.938 8.177-6.135c31.722-21.112 72.4-39.987 110.12-49.975l27.327-4.078-2.78-18.5-33.294 4.982c-13.01-4.957-25.152-7.096-36.113-6.607-3.67.164-7.202.62-10.6 1.334l-23.088-55.304c1.6-2.48 2.532-5.436 2.532-8.656 0-8.837-6.945-15.813-15.782-15.813zM178.81 147c-17.714 6.11-35.908 13.923-52.875 22.656l68.407 165.03 14.625-7.842 28.28-38.75L178.812 147zm169.094 111.53l-68.125 3.033-56.967 78-1.25 1.718-1.875 1.033-65.313 35.03-28.47 117.188h345.25l-15-63.686-165.56-54.688 5.874-17.75 89.905 29.688-38.47-129.563z" fill="#fff" fill-opacity="1"></path></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000" fill-opacity="1"></path><g class="" transform="translate(0,0)" style=""><path d="M145.3 23.89L89.27 257.7c5.62-4.9 12.93-5.8 19.63-4.4l54-225.21zm37 6.1l-57 231.41c1 .8 1.9 1.8 2.7 2.7 39.2-14 117.2-32 127.1 32.2 15.2 99.1 96.8 135.8 148.9 114.8-27.8-99.6 87.6-116.8 70.7-205.1 0 0-111 26.4-131.6-90.6-23.5-58.14-101.6-103.33-160.8-85.41zM101.4 270.9c-6.91 22.3-10.68 51.2.6 67.9 5.4 30.1 34 51.5 49.4 57.5-12.2 4.6-24.8 2.8-35.4-3.3-5.6 11.4-18.71 17.5-29.76 21 7.21 8.8 15.46 16.7 23.96 22.4 4.3 18.2 7.3 41.8 12.7 56.9h114.7c-31.7-18.6-56.8-42-61.3-69.9 8.6-18.2 10.5-46.2-.5-70.9-14.8-22.7-54.9-22.9-61.1-48.3-2.5-11.2 5.2-40.6-13.3-33.3zm-41.38 13c-7.17 1.5-11.98 8.3-10.24 14.7 8.66 1 17.82 2.2 26.53 3.8.38-4.1 1-8.2 1.73-12-6.18-2.5-12.48-4.8-18.02-6.5zm-16.91 32.2c-7.45 1.7-10.55 12.4-3.69 15.7 13.81.8 28.8 2.6 40.96 4.9-2-5-3.24-10.1-3.9-15.3-10.35-2.2-22.62-4.3-33.37-5.3zm-3.18 33.5c-8.95 5.5.2 16.2 4.7 18 15.57 2 29.64 2.7 41.1-1.8 4.51-2.5 4.29-4.4 2.89-8.3-16.82-3.7-33.26-6.4-48.69-7.9zm57.96 29.7c-12.54 8.9-32.12 8.5-44.89 7.4 1.64 6 7.89 9 10.92 10.2 9.37 3.7 22.37-1.1 33.47-8.4 3.21-2.7 4.51-8.7.5-9.2zm-45.46 32.2l-13.18 54.9 17.5 4.2 13-54.3c-6.59-.5-11.94-2.1-17.32-4.8z" fill="#fff" fill-opacity="1"></path></g></svg>
\ No newline at end of file
import "@/styles/mat.css"; import "@/styles/mat.css";
import Icon from "@ant-design/icons";
import { Button, Modal } from "antd"; import { Button, Modal } from "antd";
import { ReactComponent as BattleSvg } from "neos-assets/crossed-swords.svg";
import { ReactComponent as EpSvg } from "neos-assets/power-button.svg";
import { ReactComponent as Main2Svg } from "neos-assets/sword-in-stone.svg";
import { ReactComponent as SurrenderSvg } from "neos-assets/truce.svg";
import React, { useState } from "react"; import React, { useState } from "react";
import { useSnapshot } from "valtio"; import { useSnapshot } from "valtio";
...@@ -19,23 +14,15 @@ import { ...@@ -19,23 +14,15 @@ import {
matStore, matStore,
} from "@/stores"; } from "@/stores";
const IconSize = "150%";
const PhaseButton = (props: { const PhaseButton = (props: {
text: string; text: string;
enable: boolean; enable: boolean;
onClick: () => void; onClick: () => void;
icon?: React.ReactNode;
}) => { }) => {
return ( return (
<Button <button disabled={!props.enable} onClick={props.onClick}>
icon={props.icon}
disabled={!props.enable}
onClick={props.onClick}
size="large"
>
{props.text} {props.text}
</Button> </button>
); );
}; };
...@@ -61,20 +48,20 @@ export const Menu = () => { ...@@ -61,20 +48,20 @@ export const Menu = () => {
const onBp = () => { const onBp = () => {
sendSelectIdleCmdResponse(6); sendSelectIdleCmdResponse(6);
clearAllIdleInteractivities(0); // 为什么要clear两次?
clearAllIdleInteractivities(0); clearAllIdleInteractivities(0);
clearAllIdleInteractivities(1);
phase.enableBp = false; phase.enableBp = false;
}; };
const onM2 = () => { const onM2 = () => {
sendSelectBattleCmdResponse(2); sendSelectBattleCmdResponse(2);
clearAllIdleInteractivities(0); clearAllIdleInteractivities(0);
clearAllIdleInteractivities(0); clearAllIdleInteractivities(1);
phase.enableM2 = false; phase.enableM2 = false;
}; };
const onEp = () => { const onEp = () => {
sendSelectIdleCmdResponse(response); sendSelectIdleCmdResponse(response);
clearAllIdleInteractivities(0); clearAllIdleInteractivities(0);
clearAllIdleInteractivities(0); clearAllIdleInteractivities(1);
phase.enableEp = false; phase.enableEp = false;
}; };
const onSurrender = () => { const onSurrender = () => {
...@@ -83,30 +70,16 @@ export const Menu = () => { ...@@ -83,30 +70,16 @@ export const Menu = () => {
return ( return (
<div id="controller"> <div id="controller">
<PhaseButton <button disabled={!enableBp} onClick={onBp}>
icon={<Icon component={BattleSvg} style={{ fontSize: IconSize }} />} 战斗阶段
enable={enableBp} </button>
text="战斗阶段" <button disabled={!enableM2} onClick={onM2}>
onClick={onBp} 主要阶段2
/> </button>
<PhaseButton <button disabled={!enableEp} onClick={onEp}>
icon={<Icon component={Main2Svg} style={{ fontSize: IconSize }} />} 结束回合
enable={enableM2} </button>
text="主要阶段2" <button onClick={onSurrender}>投降</button>
onClick={onM2}
/>
<PhaseButton
icon={<Icon component={EpSvg} style={{ fontSize: IconSize }} />}
enable={enableEp}
text="结束回合"
onClick={onEp}
/>
<PhaseButton
icon={<Icon component={SurrenderSvg} style={{ fontSize: IconSize }} />}
enable={true}
text="投降"
onClick={onSurrender}
/>
<Modal <Modal
title="是否确认要投降?" title="是否确认要投降?"
open={modalOpen} open={modalOpen}
......
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