weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added ability to hide spawn menu

Browse Source
This commit is contained in:
Davide Passoni 2024-07-05 12:12:21 +02:00
parent fa48d1f905
commit 61e52efc07
11 changed files with 74 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/react/src/map/map.ts
View File

@ -763,13 +763,8 @@ export class Map extends L.Map {
if (this.#state === IDLE) {
this.deselectAllCoalitionAreas();
} else if (this.#state === MOVE_UNIT) {
getApp().getUnitsManager().clearDestinations();
getApp()
.getUnitsManager()
.addDestination(e.latlng,
false,
0
);
getApp().getUnitsManager().clearDestinations();
getApp().getUnitsManager().addDestination(e.latlng, false, 0);
} else if (this.#state === SPAWN_UNIT) {
if (this.#spawnRequestTable !== null) {
const location = e.latlng;
@ -821,9 +816,7 @@ export class Map extends L.Map {
this.setState(IDLE);
}
#onContextMenu(e: any) {
}
#onContextMenu(e: any) {}
#onSelectionStart(e: any) {
this.#selecting = true;
@ -841,9 +834,7 @@ export class Map extends L.Map {
this.#updateCursor();
}
#onMouseDown(e: any) {
}
#onMouseDown(e: any) {}
#onMouseMove(e: any) {
this.#lastMousePosition.x = e.originalEvent.x;

3
frontend/react/src/ui/components/ollabeltoggle.tsx
View File

@ -11,7 +11,7 @@ export function OlLabelToggle(props: {
onClick={props.onClick}
className={`
relative flex h-10 w-[120px] flex-none cursor-pointer select-none
flex-row justify-between rounded-md border border px-1 py-[5px] text-sm
flex-row justify-between rounded-md border px-1 py-[5px] text-sm
contents-center
dark:border-gray-600 dark:border-transparent dark:bg-gray-700
dark:hover:bg-gray-600 dark:focus:ring-blue-800
@ -33,7 +33,6 @@ export function OlLabelToggle(props: {
className={`
my-auto pl-3 font-normal transition-colors z-ui-2
dark:data-[active='false']:text-gray-400
dark:data-[active='false']:text-gray-400
dark:data-[active='true']:text-white
`}
>

5
frontend/react/src/ui/components/olstatebutton.tsx
View File

@ -13,7 +13,6 @@ import { OlTooltip } from "./oltooltip";
export function OlStateButton(props: {
className?: string;
checked: boolean;
highlighted?: boolean;
icon: IconProp;
tooltip: string;
onClick: () => void;
@ -26,8 +25,6 @@ export function OlStateButton(props: {
`
h-[40px] w-[40px] flex-none rounded-md text-lg font-medium
dark:bg-olympus-600 dark:text-gray-300 dark:hover:bg-olympus-300
dark:data-[highlighted='true']:border-[2px]
dark:data-[highlighted='true']:border-blue-800
dark:data-[checked='true']:bg-blue-500
dark:data-[checked='true']:text-white
`;
@ -41,7 +38,6 @@ export function OlStateButton(props: {
setHover(false);
}}
data-checked={props.checked}
data-highlighted={props.highlighted ?? false}
type="button"
className={className}
onMouseEnter={() => {
@ -61,7 +57,6 @@ export function OlStateButton(props: {
export function OlRoundStateButton(props: {
className?: string;
checked: boolean;
highlighted?: boolean;
icon: IconProp;
tooltip: string;
onClick: () => void;

75
frontend/react/src/ui/panels/components/menu.tsx
View File

@ -1,57 +1,78 @@
import { faArrowLeft, faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";
import React, { useState } from "react";
import { FaChevronDown, FaChevronUp } from "react-icons/fa";
export function Menu(props: {
title: string;
open: boolean;
onClose: () => void;
canBeHidden?: boolean;
onBack?: () => void;
showBackButton?: boolean;
children?: JSX.Element | JSX.Element[];
}) {
const [hide, setHide] = useState(true);
if (!props.open && hide) setHide(false);
return (
<div
data-open={props.open}
data-hide={hide}
className={`
absolute left-16 right-0 top-[58px] bg-gray-200 backdrop-grayscale
z-ui-3 h-screen overflow-y-auto backdrop-blur-lg transition-transform
z-ui-3 h-[calc(100vh-58px)] backdrop-blur-lg transition-transform
dark:bg-olympus-800/90
data-[hide='true']:-translate-y-[calc(100vh-1.5rem-58px)]
data-[open='false']:-translate-x-full
sm:w-[400px]
`}
tabIndex={-1}
>
<h5
className={`
inline-flex w-full items-center px-5 py-3 pb-2 font-semibold
text-gray-800 shadow-lg
dark:text-gray-400
`}
>
{props.showBackButton && (
<div className={`
h-[calc(100vh-58px-1.5rem)] overflow-y-auto overflow-x-hidden
`}>
<h5
className={`
inline-flex w-full items-center px-5 py-3 pb-2 font-semibold
text-gray-800 shadow-lg
dark:text-gray-400
`}
>
{props.showBackButton && (
<FontAwesomeIcon
onClick={props.onBack ?? (() => {})}
icon={faArrowLeft}
className={`
mr-1 cursor-pointer rounded-md p-2
dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white
`}
/>
)}{" "}
{props.title}
<FontAwesomeIcon
onClick={props.onBack ?? (() => {})}
icon={faArrowLeft}
onClick={props.onClose}
icon={faClose}
className={`
mr-1 cursor-pointer rounded-md p-2
ml-auto flex cursor-pointer items-center justify-center rounded-md
p-2 text-lg
dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white
hover:bg-gray-200
`}
/>
)}{" "}
{props.title}
<FontAwesomeIcon
onClick={props.onClose}
icon={faClose}
className={`
ml-auto flex cursor-pointer items-center justify-center rounded-md
p-2 text-lg
dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white
hover:bg-gray-200
`}
/>
</h5>
{props.children}
</h5>
{props.children}
</div>
{props.canBeHidden == true && (
<div className="flex h-6 justify-center" onClick={() => setHide(!hide)}>
{hide ? (
<FaChevronDown className="mx-auto my-auto text-gray-400" />
) : (
<FaChevronUp className="mx-auto my-auto text-gray-400" />
)}
</div>
)}
</div>
);
}

2
frontend/react/src/ui/panels/header.tsx
View File

@ -39,7 +39,7 @@ export function Header() {
<nav
className={`
flex w-full gap-4 border-gray-200 bg-gray-300 px-3
drop-shadow-md z-ui-2 align-center
drop-shadow-md z-ui-4 align-center
dark:border-gray-800 dark:bg-olympus-900
`}
>

6
frontend/react/src/ui/panels/minimappanel.tsx
View File

@ -72,7 +72,7 @@ export function MiniMapPanel(props: {}) {
onClick={() => setShowMissionTime(!showMissionTime)}
className={`
absolute right-[10px]
${showMinimap ? `top-[232px]` : `top-[70px]`}
${showMinimap ? `top-[232px]` : `top-[90px]`}
w-[288px] z-ui-0 flex items-center justify-between
${showMinimap ? `rounded-b-lg` : `rounded-lg`}
bg-gray-200 p-3 text-sm backdrop-blur-lg backdrop-grayscale
@ -114,13 +114,13 @@ export function MiniMapPanel(props: {}) {
onClick={() => {
getApp().getMap().setOption("showMinimap", false);
}}
></FaChevronUp>
/>
) : (
<FaChevronDown
onClick={() => {
getApp().getMap().setOption("showMinimap", true);
}}
></FaChevronDown>
/>
)}
</div>
);

1
frontend/react/src/ui/panels/sidebar.tsx
View File

@ -52,7 +52,6 @@ export function SideBar() {
checked={appState.spawnMenuVisible}
icon={faPlusSquare}
tooltip="Hide/show unit spawn menu"
highlighted={mapState === SPAWN_UNIT}
></OlStateButton>
<OlStateButton
onClick={events.toggleUnitControlMenuVisible}

10
frontend/react/src/ui/panels/spawnmenu.tsx
View File

@ -15,7 +15,7 @@ import {
olButtonsVisibilityHelicopter,
olButtonsVisibilityNavyunit,
} from "../components/olicons";
import { IDLE } from "../../constants/constants";
import { IDLE, SPAWN_UNIT } from "../../constants/constants";
library.add(faPlus);
@ -75,11 +75,19 @@ export function SpawnMenu(props: {
filteredAirDefense = filterUnits(filteredAirDefense, filterString);
filteredGroundUnits = filterUnits(filteredGroundUnits, filterString);
if (!props.open) {
if (getApp()?.getMap()?.getState() === SPAWN_UNIT)
getApp().getMap().setState(IDLE);
if (blueprint !== null)
setBlueprint(null);
}
return (
<Menu
{...props}
title="Spawn menu"
showBackButton={blueprint !== null}
canBeHidden={true}
onBack={() => {
getApp().getMap().setState(IDLE);
setBlueprint(null);

5
frontend/react/src/ui/panels/unitcontrolmenu.tsx
View File

@ -36,7 +36,8 @@ import { Coalition } from "../../types/types";
import { ftToM, knotsToMs, mToFt, msToKnots } from "../../other/utils";
export function UnitControlMenu(props: {
open: boolean
open: boolean;
onClose: () => void;
}) {
var [selectedUnits, setSelectedUnits] = useState([] as Unit[]);
@ -184,7 +185,7 @@ export function UnitControlMenu(props: {
getApp()?.getUnitsManager()?.getSelectedUnitsCategories() ?? [];
return (
<Menu open={props.open} title="Units selected (x)" onClose={() => {}}>
<Menu open={props.open} title="Units selected (x)" onClose={props.onClose}>
{/* Units list */}
<div
className={`

2
frontend/react/src/ui/panels/unitspawnmenu.tsx
View File

@ -54,7 +54,7 @@ export function UnitSpawnMenu(props: { blueprint: UnitBlueprint }) {
});
} else {
if (getApp()?.getMap()?.getState() === SPAWN_UNIT)
getApp()?.getMap()?.setState(IDLE);
getApp().getMap().setState(IDLE);
}
});

5
frontend/react/src/ui/ui.tsx
View File

@ -224,7 +224,10 @@ export function UI() {
options={mapOptions}
/>
<MiniMapPanel />
<UnitControlMenu open={unitControlMenuVisible} />
<UnitControlMenu
open={unitControlMenuVisible}
onClose={() => setUnitControlMenuVisible(false)}
/>
<div id="map-container" className="h-full w-screen" />
<UnitMouseControlBar />
</div>