Skip to content

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

update Main.tsx

parent 6b3d0a47
Pipeline #21443 passed with stages
            in 15 minutes and 56 seconds
            Hide 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 React from "react";
            import { Engine, Scene } from "react-babylonjs";
            import { useConfig } from "@/config";
            import NeosLayout from "./Layout";
            import { import {
            Alert, Alert,
            CardListModal, CardListModal,
            ...@@ -14,39 +8,19 @@ import { ...@@ -14,39 +8,19 @@ import {
            CheckCardModalV2, CheckCardModalV2,
            CheckCardModalV3, CheckCardModalV3,
            CheckCounterModal, CheckCounterModal,
            DuelTimeLine,
            HintNotification, HintNotification,
            OptionModal, OptionModal,
            Phase,
            PlayerStatus,
            PositionModal, PositionModal,
            SendBox,
            SortCardModal, SortCardModal,
            YesNoModal, YesNoModal,
            } from "./Message"; } from "./Message";
            import { import Mat from "./PlayMat2";
            ExtraDeck,
            Field,
            Graveyard,
            Hands,
            Magics,
            Monsters,
            } from "./PlayMat";
            import { BanishedZone } from "./PlayMat/BanishedZone";
            import { CommonDeck } from "./PlayMat/Deck";
            const NeosConfig = useConfig();
            // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
            const NeosDuel = () => { const NeosDuel = () => {
            return ( return (
            <> <>
            <Alert /> <Alert />
            <NeosLayout <Mat />
            sider={<NeosSider />}
            header={<PlayerStatus />}
            content={<NeosCanvas />}
            footer={<Phase />}
            />
            <CardModal /> <CardModal />
            <CardListModal /> <CardListModal />
            <HintNotification /> <HintNotification />
            ...@@ -62,65 +36,4 @@ const NeosDuel = () => { ...@@ -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; 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"; ...@@ -8,7 +8,6 @@ export * from "./CheckCounterModal";
            export * from "./DragModal"; export * from "./DragModal";
            export * from "./HintNotification"; export * from "./HintNotification";
            export * from "./OptionModal"; export * from "./OptionModal";
            export * from "./Phase";
            export * from "./PositionModal"; export * from "./PositionModal";
            export * from "./SendBox"; export * from "./SendBox";
            export * from "./SortCardModal"; export * from "./SortCardModal";
            ......
            src/ui/Duel/PlayMat2/Menu.tsx
            View file @ c85f3045
            import "@/styles/mat.css"; 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 = () => { 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 ( return (
            <div id="controller"> <div id="controller">
            <button>A1</button> <PhaseButton
            <button>A2</button> 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> </div>
            ); );
            }; };
            src/ui/Neos.tsx
            View file @ c85f3045
            ...@@ -7,7 +7,6 @@ const Login = React.lazy(() => import("./Login")); ...@@ -7,7 +7,6 @@ const Login = React.lazy(() => import("./Login"));
            const WaitRoom = React.lazy(() => import("./WaitRoom")); const WaitRoom = React.lazy(() => import("./WaitRoom"));
            const Mora = React.lazy(() => import("./Mora")); const Mora = React.lazy(() => import("./Mora"));
            const NeosDuel = React.lazy(() => import("./Duel/Main")); const NeosDuel = React.lazy(() => import("./Duel/Main"));
            const Mat = React.lazy(() => import("./Duel/PlayMat2"));
            export default function () { export default function () {
            return ( return (
            ...@@ -33,7 +32,7 @@ export default function () { ...@@ -33,7 +32,7 @@ export default function () {
            path="/duel/:player/:passWd/:ip" path="/duel/:player/:passWd/:ip"
            element={ element={
            <Suspense fallback={<Loading />}> <Suspense fallback={<Loading />}>
            <Mat /> <NeosDuel />
            </Suspense> </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