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

More work on small screens

Browse Source
This commit is contained in:
Pax1601
2024-07-03 19:38:32 +02:00
parent 5f3dbbf94e
commit fa48d1f905
13 changed files with 140 additions and 1425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/react/src/index.css
View File

@@ -36,3 +36,8 @@
z-index: 2005;
}
.z-ui-6 {
z-index: 2006;
}

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

@@ -75,7 +75,6 @@ export class Map extends L.Map {
#lastMouseCoordinates: L.LatLng = new L.LatLng(0, 0);
#shiftKey: boolean = false;
#ctrlKey: boolean = false;
#centerUnit: Unit | null = null;
#miniMap: ClickableMiniMap | null = null;
@@ -94,27 +93,11 @@ export class Map extends L.Map {
#cameraControlPort: number = 3003;
#cameraControlMode: string = "map";
#destinationGroupRotation: number = 0;
#computeDestinationRotation: boolean = false;
#destinationRotationCenter: L.LatLng | null = null;
#coalitionAreas: CoalitionArea[] = [];
#destinationPreviewCursors: DestinationPreviewMarker[] = [];
#drawingCursor: DrawingCursor = new DrawingCursor();
#destinationPreviewHandle: DestinationPreviewHandle =
new DestinationPreviewHandle(new L.LatLng(0, 0));
#destinationPreviewHandleLine: L.Polyline = new L.Polyline([], {
color: "#000000",
weight: 3,
opacity: 0.5,
smoothFactor: 1,
dashArray: "4, 8",
});
#spawnCursor: TemporaryUnitMarker | null = null;
#longPressHandled: boolean = false;
#longPressTimer: number = 0;
#mapLayers: any = defaultMapLayers;
#mapMirrors: any = defaultMapMirrors;
#layerName: string = "";
@@ -124,6 +107,8 @@ export class Map extends L.Map {
#contextAction: null | ContextAction = null;
#theatre: string = "";
#waitingForDoubleClick: boolean = false;
#doubleClickTimer: number = 0;
/**
*
@@ -172,7 +157,6 @@ export class Map extends L.Map {
this.on("selectionstart", (e: any) => this.#onSelectionStart(e));
this.on("selectionend", (e: any) => this.#onSelectionEnd(e));
this.on("mousedown", (e: any) => this.#onMouseDown(e));
this.on("mouseup", (e: any) => this.#onMouseUp(e));
this.on("mousemove", (e: any) => this.#onMouseMove(e));
this.on("keydown", (e: any) => this.#onKeyDown(e));
this.on("keyup", (e: any) => this.#onKeyUp(e));
@@ -763,106 +747,82 @@ export class Map extends L.Map {
/* Event handlers */
#onClick(e: any) {
if (!this.#preventLeftClick) {
this.hideAllContextMenus();
if (this.#state === IDLE) {
this.deselectAllCoalitionAreas();
} else if (this.#state === SPAWN_UNIT) {
if (this.#spawnRequestTable !== null) {
const location = e.latlng;
this.#spawnRequestTable.unit.location = e.latlng;
getApp()
.getUnitsManager()
.spawnUnits(
this.#spawnRequestTable.category,
[this.#spawnRequestTable.unit],
this.#spawnRequestTable.coalition,
false,
undefined,
undefined,
(hash) => {
this.addTemporaryMarker(
location,
this.#spawnRequestTable?.unit.unitType ?? "unknown",
this.#spawnRequestTable?.coalition ?? "blue",
hash
);
}
);
}
} else if (this.#state === COALITIONAREA_DRAW_POLYGON) {
if (this.getSelectedCoalitionArea()?.getEditing()) {
this.getSelectedCoalitionArea()?.addTemporaryLatLng(e.latlng);
} else {
this.deselectAllCoalitionAreas();
}
} else if (this.#state === CONTEXT_ACTION) {
this.executeContextAction(null, e.latlng);
} else {
this.setState(IDLE);
getApp().getUnitsManager().deselectAllUnits();
}
/* Exit if we were waiting for a doubleclick */
if (this.#waitingForDoubleClick) {
return;
}
/* We'll wait for a doubleclick */
this.#waitingForDoubleClick = true;
this.#doubleClickTimer = window.setTimeout(() => {
/* Still waiting so no doubleclick; do the click action */
if (this.#waitingForDoubleClick) {
if (!this.#preventLeftClick) {
this.hideAllContextMenus();
if (this.#state === IDLE) {
this.deselectAllCoalitionAreas();
} else if (this.#state === MOVE_UNIT) {
getApp().getUnitsManager().clearDestinations();
getApp()
.getUnitsManager()
.addDestination(e.latlng,
false,
0
);
} else if (this.#state === SPAWN_UNIT) {
if (this.#spawnRequestTable !== null) {
const location = e.latlng;
this.#spawnRequestTable.unit.location = e.latlng;
getApp()
.getUnitsManager()
.spawnUnits(
this.#spawnRequestTable.category,
[this.#spawnRequestTable.unit],
this.#spawnRequestTable.coalition,
false,
undefined,
undefined,
(hash) => {
this.addTemporaryMarker(
location,
this.#spawnRequestTable?.unit.unitType ?? "unknown",
this.#spawnRequestTable?.coalition ?? "blue",
hash
);
}
);
}
} else if (this.#state === COALITIONAREA_DRAW_POLYGON) {
if (this.getSelectedCoalitionArea()?.getEditing()) {
this.getSelectedCoalitionArea()?.addTemporaryLatLng(e.latlng);
} else {
this.deselectAllCoalitionAreas();
}
} else if (this.#state === CONTEXT_ACTION) {
this.executeContextAction(null, e.latlng);
} else {
this.setState(IDLE);
getApp().getUnitsManager().deselectAllUnits();
}
}
}
/* No longer waiting for a doubleclick */
this.#waitingForDoubleClick = false;
}, 200);
}
#onDoubleClick(e: any) {
/* Let single clicks work again */
this.#waitingForDoubleClick = false;
clearTimeout(this.#doubleClickTimer);
this.setState(IDLE);
}
#onContextMenu(e: any) {
/* A long press will show the point action context menu */
window.clearInterval(this.#longPressTimer);
if (this.#longPressHandled) {
this.#longPressHandled = false;
return;
}
this.hideMapContextMenu();
if (this.#state === IDLE) {
if (this.#state == IDLE) {
this.showMapContextMenu(e.originalEvent.x, e.originalEvent.y, e.latlng);
var clickedCoalitionArea: CoalitionArea | null = null;
/* Coalition areas are ordered in the #coalitionAreas array according to their zindex. Select the upper one */
for (let coalitionArea of this.#coalitionAreas) {
if (polyContains(e.latlng, coalitionArea)) {
if (coalitionArea.getSelected())
clickedCoalitionArea = coalitionArea;
//else
// this.getMapContextMenu()?.setCoalitionArea(coalitionArea);
}
}
if (clickedCoalitionArea)
this.showCoalitionAreaContextMenu(
e.originalEvent.x,
e.originalEvent.y,
e.latlng,
clickedCoalitionArea
);
}
} else if (this.#state === MOVE_UNIT) {
if (!e.originalEvent.shiftKey) {
if (!e.originalEvent.ctrlKey) {
getApp().getUnitsManager().clearDestinations();
}
getApp()
.getUnitsManager()
.addDestination(
this.#computeDestinationRotation &&
this.#destinationRotationCenter != null
? this.#destinationRotationCenter
: e.latlng,
this.#shiftKey,
this.#destinationGroupRotation
);
this.#destinationGroupRotation = 0;
this.#destinationRotationCenter = null;
this.#computeDestinationRotation = false;
}
} else {
this.setState(IDLE);
}
}
#onSelectionStart(e: any) {
@@ -882,63 +842,7 @@ export class Map extends L.Map {
}
#onMouseDown(e: any) {
this.hideAllContextMenus();
if (this.#state == MOVE_UNIT) {
this.#destinationGroupRotation = 0;
this.#destinationRotationCenter = null;
this.#computeDestinationRotation = false;
if (e.originalEvent.button == 2) {
this.#computeDestinationRotation = true;
this.#destinationRotationCenter = this.getMouseCoordinates();
}
}
//this.#longPressTimer = window.setTimeout(() => {
// this.hideMapContextMenu();
// this.#longPressHandled = true;
//
// if (e.originalEvent.button != 2 || e.originalEvent.ctrlKey || e.originalEvent.shiftKey)
// return;
//
// var contextActionSet = new ContextActionSet();
// var units = getApp().getUnitsManager().getSelectedUnits();
// units.forEach((unit: Unit) => {
// unit.appendContextActions(contextActionSet, null, e.latlng);
// })
//
// if (Object.keys(contextActionSet.getContextActions()).length > 0) {
// getApp().getMap().showUnitContextMenu(e.originalEvent.x, e.originalEvent.y, e.latlng);
// //getApp().getMap().getUnitContextMenu().setContextActions(contextActionSet);
// }
//}, 150);
//this.#longPressHandled = false;
}
#onMouseUp(e: any) {
if (
this.#state === MOVE_UNIT &&
e.originalEvent.button == 2 &&
e.originalEvent.shiftKey
) {
if (!e.originalEvent.ctrlKey) {
getApp().getUnitsManager().clearDestinations();
}
getApp()
.getUnitsManager()
.addDestination(
this.#computeDestinationRotation &&
this.#destinationRotationCenter != null
? this.#destinationRotationCenter
: e.latlng,
this.#shiftKey,
this.#destinationGroupRotation
);
this.#destinationGroupRotation = 0;
this.#destinationRotationCenter = null;
this.#computeDestinationRotation = false;
}
}
#onMouseMove(e: any) {
@@ -948,20 +852,7 @@ export class Map extends L.Map {
this.#updateCursor();
if (this.#state === MOVE_UNIT) {
/* Update the position of the destination cursors depeding on mouse rotation */
if (
this.#computeDestinationRotation &&
this.#destinationRotationCenter != null
)
this.#destinationGroupRotation = -bearing(
this.#destinationRotationCenter.lat,
this.#destinationRotationCenter.lng,
this.getMouseCoordinates().lat,
this.getMouseCoordinates().lng
);
this.#updateDestinationCursors();
} else if (this.#state === SPAWN_UNIT) {
if (this.#state === SPAWN_UNIT) {
this.#updateSpawnCursor();
} else if (
this.#state === COALITIONAREA_DRAW_POLYGON &&
@@ -975,16 +866,12 @@ export class Map extends L.Map {
#onKeyDown(e: any) {
this.#shiftKey = e.originalEvent.shiftKey;
this.#ctrlKey = e.originalEvent.ctrlKey;
this.#updateCursor();
this.#updateDestinationCursors();
}
#onKeyUp(e: any) {
this.#shiftKey = e.originalEvent.shiftKey;
this.#ctrlKey = e.originalEvent.ctrlKey;
this.#updateCursor();
this.#updateDestinationCursors();
}
#onZoomStart(e: any) {
@@ -1050,7 +937,6 @@ export class Map extends L.Map {
);
this.setView(unitPosition, this.getZoom(), { animate: false });
this.#updateCursor();
this.#updateDestinationCursors();
}
#getMinimapBoundaries() {
@@ -1064,10 +950,9 @@ export class Map extends L.Map {
/* Cursors */
#updateCursor() {
/* If the ctrl key is being pressed or we are performing an area selection, show the default cursor */
if (this.#ctrlKey || this.#selecting) {
/* If we are performing an area selection, show the default cursor */
if (this.#selecting) {
/* Hide all non default cursors */
this.#hideDestinationCursors();
this.#hideDrawingCursor();
this.#hideSpawnCursor();
@@ -1075,13 +960,11 @@ export class Map extends L.Map {
} else {
/* Hide all the unnecessary cursors depending on the active state */
if (this.#state !== IDLE) this.#hideDefaultCursor();
if (this.#state !== MOVE_UNIT) this.#hideDestinationCursors();
if (this.#state !== SPAWN_UNIT) this.#hideSpawnCursor();
if (this.#state !== COALITIONAREA_DRAW_POLYGON) this.#hideDrawingCursor();
/* Show the active cursor depending on the active state */
if (this.#state === IDLE) this.#showDefaultCursor();
else if (this.#state === MOVE_UNIT) this.#showDestinationCursors();
else if (this.#state === SPAWN_UNIT) this.#showSpawnCursor();
else if (this.#state === COALITIONAREA_DRAW_POLYGON)
this.#showDrawingCursor();
@@ -1096,97 +979,6 @@ export class Map extends L.Map {
document.getElementById(this.#ID)?.classList.add("hidden-cursor");
}
#showDestinationCursors() {
const singleCursor = !this.#shiftKey;
const selectedUnitsCount = getApp().getUnitsManager().getSelectedUnits({
excludeHumans: true,
excludeProtected: true,
onlyOnePerGroup: true,
}).length;
if (singleCursor) {
this.#hideDestinationCursors();
} else if (!singleCursor) {
if (selectedUnitsCount > 1) {
while (this.#destinationPreviewCursors.length > selectedUnitsCount) {
this.removeLayer(this.#destinationPreviewCursors[0]);
this.#destinationPreviewCursors.splice(0, 1);
}
this.#destinationPreviewHandleLine.addTo(this);
this.#destinationPreviewHandle.addTo(this);
while (this.#destinationPreviewCursors.length < selectedUnitsCount) {
var cursor = new DestinationPreviewMarker(
this.getMouseCoordinates(),
{ interactive: false }
);
cursor.addTo(this);
this.#destinationPreviewCursors.push(cursor);
}
this.#updateDestinationCursors();
}
}
}
#updateDestinationCursors() {
const selectedUnitsCount = getApp().getUnitsManager().getSelectedUnits({
excludeHumans: true,
excludeProtected: true,
onlyOnePerGroup: true,
}).length;
if (selectedUnitsCount > 1) {
const groupLatLng =
this.#computeDestinationRotation &&
this.#destinationRotationCenter != null
? this.#destinationRotationCenter
: this.getMouseCoordinates();
if (this.#destinationPreviewCursors.length == 1)
this.#destinationPreviewCursors[0].setLatLng(
this.getMouseCoordinates()
);
else {
Object.values(
getApp()
.getUnitsManager()
.computeGroupDestination(
groupLatLng,
this.#destinationGroupRotation
)
).forEach((latlng: L.LatLng, idx: number) => {
if (idx < this.#destinationPreviewCursors.length)
this.#destinationPreviewCursors[idx].setLatLng(
this.#shiftKey ? latlng : this.getMouseCoordinates()
);
});
}
this.#destinationPreviewHandleLine.setLatLngs([
groupLatLng,
this.getMouseCoordinates(),
]);
this.#destinationPreviewHandle.setLatLng(this.getMouseCoordinates());
} else {
this.#hideDestinationCursors();
}
}
#hideDestinationCursors() {
/* Remove all the destination cursors */
this.#destinationPreviewCursors.forEach((marker: L.Marker) => {
this.removeLayer(marker);
});
this.#destinationPreviewCursors = [];
this.#destinationPreviewHandleLine.removeFrom(this);
this.#destinationPreviewHandle.removeFrom(this);
/* Reset the variables used to compute the rotation of the group cursors */
this.#destinationGroupRotation = 0;
this.#computeDestinationRotation = false;
this.#destinationRotationCenter = null;
}
#showDrawingCursor() {
this.#hideDefaultCursor();
if (!this.hasLayer(this.#drawingCursor)) this.#drawingCursor.addTo(this);

1044
frontend/react/src/map/map.ts.bak
View File

File diff suppressed because it is too large Load Diff

7
frontend/react/src/ui/components/oldropdown.tsx
View File

@@ -99,8 +99,7 @@ export function OlDropdown(props: {
inline-flex w-full items-center justify-between rounded-lg border
bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white
dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100
dark:hover:bg-gray-600 dark:focus:ring-blue-800
focus:outline-none focus:ring-2 focus:ring-blue-300
dark:hover:bg-gray-600
hover:bg-blue-800
`}
type="button"
@@ -135,8 +134,8 @@ export function OlDropdown(props: {
ref={contentRef}
data-open={open}
className={`
absolute z-ui-4 w-full divide-y divide-gray-100 overflow-y-scroll
rounded-lg bg-white p-2 shadow
absolute z-ui-4 divide-y divide-gray-100 overflow-y-scroll rounded-lg
bg-white p-2 shadow
dark:bg-gray-700
data-[open='false']:hidden
`}

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

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

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

@@ -14,7 +14,7 @@ export function Menu(props: {
<div
data-open={props.open}
className={`
absolute left-16 right-0 top-[60px] bg-gray-200 backdrop-grayscale
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
dark:bg-olympus-800/90
data-[open='false']:-translate-x-full

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

@@ -31,8 +31,6 @@ import {
} from "../components/olicons";
export function Header() {
const [collapsed, setCollapsed] = useState(true);
return (
<StateConsumer>
{(appState) => (
@@ -40,29 +38,28 @@ export function Header() {
{() => (
<nav
className={`
${collapsed ? "h-[60px]" : "h-fit"}
flex w-screen border-gray-200 bg-gray-300 px-3 drop-shadow-md
z-ui-2
flex w-full gap-4 border-gray-200 bg-gray-300 px-3
drop-shadow-md z-ui-2 align-center
dark:border-gray-800 dark:bg-olympus-900
`}
>
<img
src="images/icon.png"
className="my-auto h-10 w-10 rounded-md p-0"
></img>
<div
className={`
my-2 flex w-full max-w-full flex-wrap items-center justify-end
gap-3 overflow-hidden
my-2 flex w-full items-center gap-3 overflow-x-scroll
no-scrollbar
`}
>
<div
className={`
mr-auto flex flex-none basis-5/6 flex-row items-center
justify-start gap-6
sm:basis-0
mr-auto hidden flex-none flex-row items-center justify-start
gap-6
lg:flex
`}
>
<img
src="images/icon.png"
className="h-10 w-10 rounded-md p-0"
></img>
<div className="flex flex-col items-start">
<div
className={`
@@ -92,12 +89,6 @@ export function Header() {
</div>
</div>
</div>
<OlStateButton
onClick={() => setCollapsed(!collapsed)}
checked={!collapsed}
icon={faBars}
tooltip={"Show more options"}
></OlStateButton>
<div>
<OlLockStateButton
checked={false}
@@ -105,6 +96,7 @@ export function Header() {
tooltip="Lock/unlock protected units (from scripted mission)"
/>
</div>
<div className={`h-8 w-0 border-l-[2px] border-gray-700`}></div>
<div
className={`
flex h-fit flex-row items-center justify-start gap-1
@@ -133,11 +125,7 @@ export function Header() {
);
})}
</div>
<div
className={`
h-8 w-0 border-l-[2px] border-gray-700
`}
></div>
<div className={`h-8 w-0 border-l-[2px] border-gray-700`}></div>
<div
className={`
flex h-fit flex-row items-center justify-start gap-1
@@ -180,11 +168,7 @@ export function Header() {
tooltip={"Hide/show neutral units"}
/>
</div>
<div
className={`
h-8 w-0 border-l-[2px] border-gray-700
`}
></div>
<div className={`h-8 w-0 border-l-[2px] border-gray-700`}></div>
<div
className={`
flex h-fit flex-row items-center justify-start gap-1
@@ -230,12 +214,12 @@ export function Header() {
onClick={() => {}}
tooltip="Activate/deactivate camera plugin"
/>
<OlDropdown label={appState.activeMapSource} className="w-80">
<OlDropdown label={appState.activeMapSource} className="w-40">
{appState.mapSources.map((source) => {
return (
<OlDropdownItem
key={source}
className="w-full"
className="w-52"
onClick={() => getApp().getMap().setLayerName(source)}
>
{source}

39
frontend/react/src/ui/panels/mapstatepanel.tsx
View File

@@ -1,39 +0,0 @@
import React, { useState } from "react";
import { FaHandPointer } from "react-icons/fa6";
import { IDLE, SPAWN_UNIT } from "../../constants/constants";
export function MapStatePanel(props: {}) {
const [mapState, setMapState] = useState(IDLE);
document.addEventListener("mapStateChanged", (ev) => {
setMapState((ev as CustomEvent).detail);
});
return (
<div
className={`
absolute bottom-6 right-[10px] w-[288px] z-ui-5 flex items-center
justify-between rounded-lg bg-gray-200 p-3 text-sm backdrop-blur-lg
backdrop-grayscale
dark:bg-olympus-800/90 dark:text-gray-200
`}
>
<div className={`flex w-full items-center gap-2 font-semibold`}>
{mapState === IDLE && "IDLE"}
{mapState === SPAWN_UNIT && (
<div className={`flex w-full items-center`}>
<FaHandPointer className="mr-2 text-sm text-white" />
<div
className={`
w-full animate-pulse border-l-[1px] px-2 text-center
dark:text-white
`}
>
Click on the map to spawn
</div>
</div>
)}
</div>
</div>
);
}

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

@@ -1,7 +1,6 @@
import React from "react";
import React, { useState } from "react";
import { OlStateButton } from "../components/olstatebutton";
import {
faPlus,
faGamepad,
faRuler,
faPencil,
@@ -12,8 +11,15 @@ import {
} from "@fortawesome/free-solid-svg-icons";
import { EventsConsumer } from "../../eventscontext";
import { StateConsumer } from "../../statecontext";
import { IDLE, SPAWN_UNIT } from "../../constants/constants";
export function SideBar() {
const [mapState, setMapState] = useState(IDLE);
document.addEventListener("mapStateChanged", (ev) => {
setMapState((ev as CustomEvent).detail)
});
return (
<StateConsumer>
{(appState) => (
@@ -46,6 +52,7 @@ export function SideBar() {
checked={appState.spawnMenuVisible}
icon={faPlusSquare}
tooltip="Hide/show unit spawn menu"
highlighted={mapState === SPAWN_UNIT}
></OlStateButton>
<OlStateButton
onClick={events.toggleUnitControlMenuVisible}

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

@@ -15,6 +15,7 @@ import {
olButtonsVisibilityHelicopter,
olButtonsVisibilityNavyunit,
} from "../components/olicons";
import { IDLE } from "../../constants/constants";
library.add(faPlus);
@@ -74,15 +75,15 @@ export function SpawnMenu(props: {
filteredAirDefense = filterUnits(filteredAirDefense, filterString);
filteredGroundUnits = filterUnits(filteredGroundUnits, filterString);
/* When the menu is closed, reset the blueprint */
if (!props.open && blueprint !== null) setBlueprint(null);
return (
<Menu
{...props}
title="Spawn menu"
showBackButton={blueprint !== null}
onBack={() => setBlueprint(null)}
onBack={() => {
getApp().getMap().setState(IDLE);
setBlueprint(null);
}}
>
<>
{blueprint === null && (

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

@@ -4,7 +4,7 @@ import { ContextActionSet } from "../../unit/contextactionset";
import { OlStateButton } from "../components/olstatebutton";
import { getApp } from "../../olympusapp";
import { ContextAction } from "../../unit/contextaction";
import { CONTEXT_ACTION } from "../../constants/constants";
import { CONTEXT_ACTION, MOVE_UNIT } from "../../constants/constants";
import { FaInfoCircle } from "react-icons/fa";
export function UnitMouseControlBar(props: {}) {
@@ -40,7 +40,7 @@ export function UnitMouseControlBar(props: {}) {
/* Deselect the context action when exiting state */
document.addEventListener("mapStateChanged", (ev) => {
setOpen((ev as CustomEvent).detail === CONTEXT_ACTION);
setOpen((ev as CustomEvent).detail === CONTEXT_ACTION || (ev as CustomEvent).detail === MOVE_UNIT);
});
/* Update the current values of the shown data */
@@ -91,7 +91,7 @@ export function UnitMouseControlBar(props: {}) {
setActiveContextAction(null);
getApp()
.getMap()
.setState(CONTEXT_ACTION, { contextAction: null });
.setState(MOVE_UNIT);
}
}
}}

17
frontend/react/src/ui/ui.css
View File

@@ -3,10 +3,6 @@
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #ffffffaa;
@@ -15,7 +11,7 @@
}
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
.tiny-scrollbar::-webkit-scrollbar {
display: none;
}
@@ -93,3 +89,14 @@ input[type="range"]:active::-moz-range-thumb {
input[type="range"]:focus::-moz-range-thumb {
box-shadow: 0 0 0 13px #3f83f855;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

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

@@ -24,7 +24,6 @@ import { LoginModal } from "./modals/login";
import { sha256 } from "js-sha256";
import { MiniMapPanel } from "./panels/minimappanel";
import { UnitMouseControlBar } from "./panels/unitmousecontrolbar";
import { MapStatePanel } from "./panels/mapstatepanel";
export type OlympusState = {
mainMenuVisible: boolean;
@@ -61,11 +60,11 @@ export function UI() {
setMapOptions({ ...getApp().getMap().getOptions() });
});
document.addEventListener("mapStateChanged", (ev) => {
if ((ev as CustomEvent).detail == IDLE) {
hideAllMenus();
}
});
//document.addEventListener("mapStateChanged", (ev) => {
// if ((ev as CustomEvent).detail == IDLE) {
// hideAllMenus();
// }
//});
document.addEventListener("mapSourceChanged", (ev) => {
var source = (ev as CustomEvent).detail;
@@ -228,7 +227,6 @@ export function UI() {
<UnitControlMenu open={unitControlMenuVisible} />
<div id="map-container" className="h-full w-screen" />
<UnitMouseControlBar />
<MapStatePanel />
</div>
</div>
</EventsProvider>