Skip to content

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

update Main.tsx

parent 6b3d0a47
Show whitespace changes
Inline Side-by-side
Showing with 129 additions and 231 deletions
src/ui/Duel/Main.tsx
View file @ c85f3045
import * as BABYLON from "@babylonjs/core";
import { Row } from "antd";
import React from "react";
import { Engine, Scene } from "react-babylonjs";
import { useConfig } from "@/config";
import NeosLayout from "./Layout";
import {
Alert,
CardListModal,
......@@ -14,39 +8,19 @@ import {
CheckCardModalV2,
CheckCardModalV3,
CheckCounterModal,
DuelTimeLine,
HintNotification,
OptionModal,
Phase,
PlayerStatus,
PositionModal,
SendBox,
SortCardModal,
YesNoModal,
} from "./Message";
import {
ExtraDeck,
Field,
Graveyard,
Hands,
Magics,
Monsters,
} from "./PlayMat";
import { BanishedZone } from "./PlayMat/BanishedZone";
import { CommonDeck } from "./PlayMat/Deck";
import Mat from "./PlayMat2";
const NeosConfig = useConfig();
// Ref: https://github.com/brianzinn/react-babylonjs/issues/126
const NeosDuel = () => {
return (
<>
<Alert />
<NeosLayout
sider={<NeosSider />}
header={<PlayerStatus />}
content={<NeosCanvas />}
footer={<Phase />}
/>
<Mat />
<CardModal />
<CardListModal />
<HintNotification />
......@@ -62,65 +36,4 @@ const NeosDuel = () => {
);
};
const NeosSider = () => (
<>
<Row>
<DuelTimeLine />
</Row>
<Row>
<SendBox />
</Row>
</>
);
const NeosCanvas = () => (
<Engine antialias adaptToDeviceRatio canvasId="babylonJS">
<Scene>
<Camera />
<Light />
<Hands />
<Monsters />
<Magics />
<Field />
<CommonDeck />
<ExtraDeck />
<Graveyard />
<BanishedZone />
<Field />
<Ground />
</Scene>
</Engine>
);
const Camera = () => (
<freeCamera
name="duel-camera"
position={new BABYLON.Vector3(0, 8, -10)}
target={BABYLON.Vector3.Zero()}
></freeCamera>
);
const Light = () => (
<hemisphericLight
name="duel-light"
direction={new BABYLON.Vector3(1, 2.5, 1)}
intensity={0.7}
></hemisphericLight>
);
const Ground = () => {
const shape = NeosConfig.ui.ground;
const texture = new BABYLON.Texture(`${NeosConfig.assetsPath}/newfield.png`);
texture.hasAlpha = true;
return (
<ground name="duel-ground" width={shape.width} height={shape.height}>
<standardMaterial
name="duel-ground-mat"
diffuseTexture={texture}
></standardMaterial>
</ground>
);
};
export default NeosDuel;
src/ui/Duel/Message/Phase.tsx deleted 100644 → 0
View file @ 6b3d0a47
import Icon from "@ant-design/icons";
import { Button, Modal, Space } 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 { useSnapshot } from "valtio";
import {
sendSelectBattleCmdResponse,
sendSelectIdleCmdResponse,
sendSurrender,
} from "@/api";
import {
clearAllIdleInteractivities as clearAllIdleInteractivities,
matStore,
} from "@/stores";
const IconSize = "150%";
const SpaceSize = 16;
const PhaseButton = (props: {
text: string;
enable: boolean;
onClick: () => void;
icon?: React.ReactNode;
}) => {
return (
<Button
icon={props.icon}
disabled={!props.enable}
onClick={props.onClick}
size="large"
>
{props.text}
</Button>
);
};
const { phase } = matStore;
export const Phase = () => {
const snapPhase = useSnapshot(phase);
const enableBp = snapPhase.enableBp;
const enableM2 = snapPhase.enableM2;
const enableEp = snapPhase.enableEp;
const currentPhase = snapPhase.currentPhase;
const [modalOpen, setModalOpen] = useState(false);
const response =
currentPhase === "BATTLE_START" ||
currentPhase === "BATTLE_STEP" ||
currentPhase === "DAMAGE" ||
currentPhase === "DAMAGE_GAL" ||
currentPhase === "BATTLE"
? 3
: 7;
const onBp = () => {
sendSelectIdleCmdResponse(6);
clearAllIdleInteractivities(0); // 为什么要clear两次？
clearAllIdleInteractivities(0);
phase.enableBp = false;
};
const onM2 = () => {
sendSelectBattleCmdResponse(2);
clearAllIdleInteractivities(0);
clearAllIdleInteractivities(0);
phase.enableM2 = false;
};
const onEp = () => {
sendSelectIdleCmdResponse(response);
clearAllIdleInteractivities(0);
clearAllIdleInteractivities(0);
phase.enableEp = false;
};
const onSurrender = () => {
setModalOpen(true);
};
return (
<Space wrap size={SpaceSize}>
<PhaseButton
icon={<Icon component={BattleSvg} style={{ fontSize: IconSize }} />}
enable={enableBp}
text="战斗阶段"
onClick={onBp}
/>
<PhaseButton
icon={<Icon component={Main2Svg} style={{ fontSize: IconSize }} />}
enable={enableM2}
text="主要阶段2"
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
title="是否确认要投降？"
open={modalOpen}
closable={false}
footer={
<>
<Button
onClick={() => {
sendSurrender();
setModalOpen(false);
}}
>
Yes
</Button>
<Button
onClick={() => {
setModalOpen(false);
}}
>
No
</Button>
</>
}
/>
</Space>
);
};
src/ui/Duel/Message/index.ts
View file @ c85f3045
......@@ -8,7 +8,6 @@ export * from "./CheckCounterModal";
export * from "./DragModal";
export * from "./HintNotification";
export * from "./OptionModal";
export * from "./Phase";
export * from "./PositionModal";
export * from "./SendBox";
export * from "./SortCardModal";
......
src/ui/Duel/PlayMat2/Menu.tsx
View file @ c85f3045
import "@/styles/mat.css";
import React from "react";
import Icon from "@ant-design/icons";
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 { useSnapshot } from "valtio";
import {
sendSelectBattleCmdResponse,
sendSelectIdleCmdResponse,
sendSurrender,
} from "@/api";
import {
clearAllIdleInteractivities as clearAllIdleInteractivities,
matStore,
} from "@/stores";
const IconSize = "150%";
const PhaseButton = (props: {
text: string;
enable: boolean;
onClick: () => void;
icon?: React.ReactNode;
}) => {
return (
<Button
icon={props.icon}
disabled={!props.enable}
onClick={props.onClick}
size="large"
>
{props.text}
</Button>
);
};
const { phase } = matStore;
export const Menu = () => {
// TODO
const snapPhase = useSnapshot(phase);
const enableBp = snapPhase.enableBp;
const enableM2 = snapPhase.enableM2;
const enableEp = snapPhase.enableEp;
const currentPhase = snapPhase.currentPhase;
const [modalOpen, setModalOpen] = useState(false);
const response =
currentPhase === "BATTLE_START" ||
currentPhase === "BATTLE_STEP" ||
currentPhase === "DAMAGE" ||
currentPhase === "DAMAGE_GAL" ||
currentPhase === "BATTLE"
? 3
: 7;
const onBp = () => {
sendSelectIdleCmdResponse(6);
clearAllIdleInteractivities(0); // 为什么要clear两次？
clearAllIdleInteractivities(0);
phase.enableBp = false;
};
const onM2 = () => {
sendSelectBattleCmdResponse(2);
clearAllIdleInteractivities(0);
clearAllIdleInteractivities(0);
phase.enableM2 = false;
};
const onEp = () => {
sendSelectIdleCmdResponse(response);
clearAllIdleInteractivities(0);
clearAllIdleInteractivities(0);
phase.enableEp = false;
};
const onSurrender = () => {
setModalOpen(true);
};
return (
<div id="controller">
<button>A1</button>
<button>A2</button>
<PhaseButton
icon={<Icon component={BattleSvg} style={{ fontSize: IconSize }} />}
enable={enableBp}
text="战斗阶段"
onClick={onBp}
/>
<PhaseButton
icon={<Icon component={Main2Svg} style={{ fontSize: IconSize }} />}
enable={enableM2}
text="主要阶段2"
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
title="是否确认要投降？"
open={modalOpen}
closable={false}
footer={
<>
<Button
onClick={() => {
sendSurrender();
setModalOpen(false);
}}
>
Yes
</Button>
<Button
onClick={() => {
setModalOpen(false);
}}
>
No
</Button>
</>
}
/>
</div>
);
};
src/ui/Neos.tsx
View file @ c85f3045
......@@ -7,7 +7,6 @@ const Login = React.lazy(() => import("./Login"));
const WaitRoom = React.lazy(() => import("./WaitRoom"));
const Mora = React.lazy(() => import("./Mora"));
const NeosDuel = React.lazy(() => import("./Duel/Main"));
const Mat = React.lazy(() => import("./Duel/PlayMat2"));
export default function () {
return (
......@@ -33,7 +32,7 @@ export default function () {
path="/duel/:player/:passWd/:ip"
element={
<Suspense fallback={<Loading />}>
<Mat />
<NeosDuel />
</Suspense>
}
/>
......
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