Merge branch 'react-transition-test' of https://github.com/Pax1601/DCSOlympus into react-transition-test

frontend/react/src/constants/constants.ts

@@ -183,6 +183,7 @@ export const defaultMapLayers = {
 /* Map constants */
 export const IDLE = "Idle";
 export const MOVE_UNIT = "Move unit";
+export const SPAWN_UNIT = "Spawn unit";
 export const COALITIONAREA_DRAW_POLYGON = "Draw Coalition Area";
 
 export const IADSTypes = ["AAA", "SAM Site", "Radar (EWR)"];

frontend/react/src/map/map.ts

@@ -12,7 +12,7 @@ import { DestinationPreviewMarker } from "./markers/destinationpreviewmarker";
 import { TemporaryUnitMarker } from "./markers/temporaryunitmarker";
 import { ClickableMiniMap } from "./clickableminimap";
 import { SVGInjector } from '@tanem/svg-injector'
-import { defaultMapLayers, mapBounds, minimapBoundaries, IDLE, COALITIONAREA_DRAW_POLYGON, MOVE_UNIT, SHOW_UNIT_CONTACTS, HIDE_GROUP_MEMBERS, SHOW_UNIT_PATHS, SHOW_UNIT_TARGETS, SHOW_UNIT_LABELS, SHOW_UNITS_ENGAGEMENT_RINGS, SHOW_UNITS_ACQUISITION_RINGS, HIDE_UNITS_SHORT_RANGE_RINGS, FILL_SELECTED_RING, /*MAP_MARKER_CONTROLS,*/ DCS_LINK_PORT, DCSMapsZoomLevelsByTheatre, DCS_LINK_RATIO, MAP_OPTIONS_DEFAULTS, MAP_HIDDEN_TYPES_DEFAULTS } from "../constants/constants";
+import { defaultMapLayers, mapBounds, minimapBoundaries, IDLE, COALITIONAREA_DRAW_POLYGON, MOVE_UNIT, SHOW_UNIT_CONTACTS, HIDE_GROUP_MEMBERS, SHOW_UNIT_PATHS, SHOW_UNIT_TARGETS, SHOW_UNIT_LABELS, SHOW_UNITS_ENGAGEMENT_RINGS, SHOW_UNITS_ACQUISITION_RINGS, HIDE_UNITS_SHORT_RANGE_RINGS, FILL_SELECTED_RING, /*MAP_MARKER_CONTROLS,*/ DCS_LINK_PORT, DCSMapsZoomLevelsByTheatre, DCS_LINK_RATIO, MAP_OPTIONS_DEFAULTS, MAP_HIDDEN_TYPES_DEFAULTS, SPAWN_UNIT } from "../constants/constants";
 import { CoalitionArea } from "./coalitionarea/coalitionarea";
 //import { CoalitionAreaContextMenu } from "../contextmenus/coalitionareacontextmenu";
 import { DrawingCursor } from "./coalitionarea/drawingcursor";
@@ -29,7 +29,8 @@ import './markers/stylesheets/units.css'
 
 // Temporary
 import './theme.css'
-import { MapHiddenTypes, MapOptions } from "../types/types";
+import { Coalition, MapHiddenTypes, MapOptions } from "../types/types";
+import { UnitBlueprint } from "../interfaces";
 
 var hasTouchScreen = false;
 //if ("maxTouchPoints" in navigator) 
@@ -54,6 +55,9 @@ export class Map extends L.Map {
     #ID: string;
     #state: string;
     #layer: L.TileLayer | L.LayerGroup | null = null;
+
+    #spawningBlueprint: UnitBlueprint | null = null;
+
     #preventLeftClick: boolean = false;
     #leftClickTimer: number = 0;
     #deafultPanDelta: number = 100;
@@ -62,17 +66,23 @@ export class Map extends L.Map {
     #panRight: boolean = false;
     #panUp: boolean = false;
     #panDown: boolean = false;
+
     #lastMousePosition: L.Point = new L.Point(0, 0);
+
     #shiftKey: boolean = false;
     #ctrlKey: boolean = false;
     #centerUnit: Unit | null = null;
+
     #miniMap: ClickableMiniMap | null = null;
     #miniMapLayerGroup: L.LayerGroup;
     #miniMapPolyline: L.Polyline;
+
     #temporaryMarkers: TemporaryUnitMarker[] = [];
+
     #selecting: boolean = false;
     #isZooming: boolean = false;
     #previousZoom: number = 0;
+
     #slaveDCSCamera: boolean = false;
     #slaveDCSCameraAvailable: boolean = false;
     #cameraControlTimer: number = 0;
@@ -88,6 +98,8 @@ export class Map extends L.Map {
     #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;
 
@@ -137,7 +149,7 @@ export class Map extends L.Map {
         /* Map source dropdown */
         //this.#mapSourceDropdown = new Dropdown("map-type", (layerName: string) => this.setLayer(layerName));
         //this.#mapSourceDropdown.setOptions(this.getLayers(), null);
-//
+        //
         ///* Visibility options dropdown */
         //this.#mapVisibilityOptionsDropdown = new Dropdown("map-visibility-options", (value: string) => { });
 
@@ -216,13 +228,13 @@ export class Map extends L.Map {
 
         document.addEventListener("toggleCameraLinkStatus", () => {
             // if (this.#slaveDCSCameraAvailable) { // Commented to experiment with usability
-                this.setSlaveDCSCamera(!this.#slaveDCSCamera);
+            this.setSlaveDCSCamera(!this.#slaveDCSCamera);
             // }
         })
 
         document.addEventListener("slewCameraToPosition", () => {
             // if (this.#slaveDCSCameraAvailable) { // Commented to experiment with usability
-                this.#broadcastPosition();
+            this.#broadcastPosition();
             // }
         })
 
@@ -256,14 +268,14 @@ export class Map extends L.Map {
             } else {
                 this.#layer = new L.TileLayer(layerData.urlTemplate, layerData);
             }
-        /* DCS core layers are handled here */
+            /* DCS core layers are handled here */
-        } else if (["DCS Map", "DCS Satellite"].includes(layerName) ) {
+        } else if (["DCS Map", "DCS Satellite"].includes(layerName)) {
             let layerData = this.#mapLayers["ArcGIS Satellite"];
             let layers = [new L.TileLayer(layerData.urlTemplate, layerData)];
 
-            let template = `https://maps.dcsolympus.com/maps/${layerName === "DCS Map"? "alt": "sat"}-{theatre}-modern/{z}/{x}/{y}.png`;
+            let template = `https://maps.dcsolympus.com/maps/${layerName === "DCS Map" ? "alt" : "sat"}-{theatre}-modern/{z}/{x}/{y}.png`;
             layers.push(...DCSMapsZoomLevelsByTheatre[theatre].map((nativeZoomLevels: any) => {
-                return new L.TileLayer(template.replace("{theatre}", theatre.toLowerCase()), {...nativeZoomLevels, maxZoom: 20, crossOrigin: ""});
+                return new L.TileLayer(template.replace("{theatre}", theatre.toLowerCase()), { ...nativeZoomLevels, maxZoom: 20, crossOrigin: "" });
             }));
 
             this.#layer = new L.LayerGroup(layers);
@@ -280,9 +292,8 @@ export class Map extends L.Map {
     }
 
     /* State machine */
-    setState(state: string) {
+    setState(state: string, options?: { blueprint: UnitBlueprint, coalition: Coalition }) {
         this.#state = state;
-        this.#updateCursor();
 
         /* Operations to perform if you are NOT in a state */
         if (this.#state !== COALITIONAREA_DRAW_POLYGON) {
@@ -290,10 +301,18 @@ export class Map extends L.Map {
         }
 
         /* Operations to perform if you ARE in a state */
-        if (this.#state === COALITIONAREA_DRAW_POLYGON) {
+        if (this.#state === SPAWN_UNIT) {
+            this.#spawningBlueprint = options?.blueprint ?? null;
+            this.#spawnCursor?.removeFrom(this);
+            this.#spawnCursor = new TemporaryUnitMarker(new L.LatLng(0, 0), this.#spawningBlueprint?.name ?? "unknown", options?.coalition ?? 'blue');
+        }
+        else if (this.#state === COALITIONAREA_DRAW_POLYGON) {
             this.#coalitionAreas.push(new CoalitionArea([]));
             this.#coalitionAreas[this.#coalitionAreas.length - 1].addTo(this);
         }
+
+        this.#updateCursor();
+
         document.dispatchEvent(new CustomEvent("mapStateChanged"));
     }
 
@@ -539,10 +558,10 @@ export class Map extends L.Map {
         //    }
         //    return list;
         //}, [] as string[]);
-//
+        //
         //if (toggles.length === 0)
         //    return false;
-//
+        //
         //return toggles.some((toggle: string) => {
         //    //  Specific coding for robots - extend later if needed
         //    return (toggle === "dcs" && !unit.getControlled() && !unit.getHuman());
@@ -601,6 +620,14 @@ export class Map extends L.Map {
             if (this.#state === IDLE) {
                 this.deselectAllCoalitionAreas();
             }
+            else if (this.#state === SPAWN_UNIT) {
+                //getApp().getUnitsManager().spawnUnits(
+                //    "asd",
+                //    [
+                //        {}
+                //    ]
+                //)
+            }
             else if (this.#state === COALITIONAREA_DRAW_POLYGON) {
                 if (this.getSelectedCoalitionArea()?.getEditing()) {
                     this.getSelectedCoalitionArea()?.addTemporaryLatLng(e.latlng);
@@ -693,25 +720,25 @@ export class Map extends L.Map {
             }
         }
 
-        this.#longPressTimer = window.setTimeout(() => {
+        //this.#longPressTimer = window.setTimeout(() => {
-            this.hideMapContextMenu();
+        //    this.hideMapContextMenu();
-            this.#longPressHandled = true;
+        //    this.#longPressHandled = true;
-
+        //
-            if (e.originalEvent.button != 2 || e.originalEvent.ctrlKey || e.originalEvent.shiftKey)
+        //    if (e.originalEvent.button != 2 || e.originalEvent.ctrlKey || e.originalEvent.shiftKey)
-                return;
+        //        return;
-
+        //
-            var contextActionSet = new ContextActionSet();
+        //    var contextActionSet = new ContextActionSet();
-            var units = getApp().getUnitsManager().getSelectedUnits();
+        //    var units = getApp().getUnitsManager().getSelectedUnits();
-            units.forEach((unit: Unit) => {
+        //    units.forEach((unit: Unit) => {
-                unit.appendContextActions(contextActionSet, null, e.latlng);
+        //        unit.appendContextActions(contextActionSet, null, e.latlng);
-            })
+        //    })
-
+        //
-            if (Object.keys(contextActionSet.getContextActions()).length > 0) {
+        //    if (Object.keys(contextActionSet.getContextActions()).length > 0) {
-                getApp().getMap().showUnitContextMenu(e.originalEvent.x, e.originalEvent.y, e.latlng);
+        //        getApp().getMap().showUnitContextMenu(e.originalEvent.x, e.originalEvent.y, e.latlng);
-                //getApp().getMap().getUnitContextMenu().setContextActions(contextActionSet);
+        //        //getApp().getMap().getUnitContextMenu().setContextActions(contextActionSet);
-            }
+        //    }
-        }, 150);
+        //}, 150);
-        this.#longPressHandled = false;
+        //this.#longPressHandled = false;
     }
 
     #onMouseUp(e: any) {
@@ -739,6 +766,9 @@ export class Map extends L.Map {
                 this.#destinationGroupRotation = -bearing(this.#destinationRotationCenter.lat, this.#destinationRotationCenter.lng, this.getMouseCoordinates().lat, this.getMouseCoordinates().lng);
             this.#updateDestinationCursors();
         }
+        else if (this.#state === SPAWN_UNIT) {
+            this.#updateSpawnCursor();
+        }
         else if (this.#state === COALITIONAREA_DRAW_POLYGON && e.latlng !== undefined) {
             this.#drawingCursor.setLatLng(e.latlng);
             /* Update the polygon being drawn with the current position of the mouse cursor */
@@ -825,17 +855,20 @@ export class Map extends L.Map {
             /* Hide all non default cursors */
             this.#hideDestinationCursors();
             this.#hideDrawingCursor();
+            this.#hideSpawnCursor();
 
             this.#showDefaultCursor();
         } 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();
         }
     }
@@ -923,6 +956,18 @@ export class Map extends L.Map {
             this.#drawingCursor.removeFrom(this);
     }
 
+    #showSpawnCursor() {
+        this.#spawnCursor?.addTo(this);
+    }
+
+    #updateSpawnCursor() {
+        this.#spawnCursor?.setLatLng(this.getMouseCoordinates());
+    }
+
+    #hideSpawnCursor() {
+        this.#spawnCursor?.removeFrom(this);
+    }
+
     #setSlaveDCSCameraAvailable(newSlaveDCSCameraAvailable: boolean) {
         this.#slaveDCSCameraAvailable = newSlaveDCSCameraAvailable;
         let linkButton = document.getElementById("camera-link-control");
@@ -939,7 +984,7 @@ export class Map extends L.Map {
     }
 
     /* Check if the camera control plugin is available. Right now this will only change the color of the button, no changes in functionality */
-    #checkCameraPort(){
+    #checkCameraPort() {
         if (this.#cameraOptionsXmlHttp?.readyState !== 4)
             this.#cameraOptionsXmlHttp?.abort()
 

frontend/react/src/olympusapp.ts

@@ -35,7 +35,6 @@ import { aircraftDatabase } from "./unit/databases/aircraftdatabase";
 import { helicopterDatabase } from "./unit/databases/helicopterdatabase";
 import { groundUnitDatabase } from "./unit/databases/groundunitdatabase";
 import { navyUnitDatabase } from "./unit/databases/navyunitdatabase";
-import { initFlowbite } from "flowbite";
 //import { UnitListPanel } from "./panels/unitlistpanel";
 //import { ContextManager } from "./context/contextmanager";
 //import { Context } from "./context/context";
@@ -478,7 +477,7 @@ export class OlympusApp {
         }
 
         /* Temporary */
-        this.getServerManager().setCredentials("admin", "4b8823ed9e5c2392ab4a791913bb8ce41956ea32e308b760eefb97536746dd33");
+        this.getServerManager().setCredentials("admin", "6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b");
         this.getServerManager().startUpdate();
 
         /* Reload the page, used to mimic a restart of the app */

frontend/react/src/ui/panels/header.tsx

@@ -13,7 +13,7 @@ export function Header() {
 		{(appState) =>
 			<EventsConsumer>
 				{(events) =>
-					<nav className="flex w-screen h-[66px] bg-gray-300 border-gray-200 dark:bg-[#171C26] dark:border-gray-700 px-3">
+					<nav className="flex w-screen h-[66px] bg-gray-300 border-gray-200 dark:bg-[#171C26] dark:border-gray-700 px-3 z-ui-1">
 						<div className="w-full max-w-full flex flex-nowrap items-center justify-between gap-3 my-auto">
 							<div className="flex flex-row items-center justify-center gap-1 flex-none">
 								<img src="images/icon.png" className='h-10 w-10 p-0 rounded-md mr-2 cursor-pointer'></img>

frontend/react/src/ui/panels/spawnmenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Menu } from "./components/menu";
 import { faHelicopter, faJetFighter, faPlus, faShieldAlt, faShip, faTruck } from '@fortawesome/free-solid-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -9,6 +9,7 @@ import { OlUnitEntryList } from "../components/olunitlistentry";
 import { UnitSpawnMenu } from "./unitspawnmenu";
 import { UnitBlueprint } from "../../interfaces";
 import { olButtonsVisibilityAircraft, olButtonsVisibilityGroundunit, olButtonsVisibilityGroundunitSam, olButtonsVisibilityHelicopter, olButtonsVisibilityNavyunit } from "../components/olicons";
+import { SPAWN_UNIT } from "../../constants/constants";
 
 library.add(faPlus);
 
@@ -31,6 +32,12 @@ export function SpawnMenu(props: {
 	var [blueprint, setBlueprint] = useState(null as (null | UnitBlueprint));
 	var [filterString, setFilterString] = useState("");
 
+	useEffect(() => {
+		if (!props.open || blueprint !== null) {
+			//getApp()?.getMap()?.setState(SPAWN_UNIT, {name: blueprint?.name ?? '', coalition: 'blue'});
+		}
+	} )
+
 	/* Filter aircrafts, helicopters, and navyunits */
 	const filteredAircraft = filterUnits(getApp()?.getAircraftDatabase()?.blueprints, filterString);
 	const filteredHelicopters = filterUnits(getApp()?.getHelicopterDatabase()?.blueprints, filterString);
@@ -59,7 +66,7 @@ export function SpawnMenu(props: {
 		<>
 			{(blueprint === null) && <div className="p-5">
 				<OlSearchBar onChange={(ev) => setFilterString(ev.target.value)}/>
-				<OlAccordion title={`Aircrafts (${Object.keys(filteredAircraft).length})`}>
+				<OlAccordion title={`Aircrafts`}>
 					<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
 						{Object.keys(filteredAircraft).map((key) => {
 							const blueprint = getApp().getAircraftDatabase().blueprints[key];
@@ -67,7 +74,7 @@ export function SpawnMenu(props: {
 						})}
 					</div>
 				</OlAccordion>
-				<OlAccordion title={`Helicopters (${Object.keys(filteredHelicopters).length})`}>
+				<OlAccordion title={`Helicopters`}>
 					<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
 						{Object.keys(filteredHelicopters).map((key) => {
 							const blueprint = getApp().getHelicopterDatabase().blueprints[key];
@@ -75,7 +82,7 @@ export function SpawnMenu(props: {
 						})}
 					</div>
 				</OlAccordion>
-				<OlAccordion title={`SAM & AAA (${Object.keys(filteredAirDefense).length})`}>
+				<OlAccordion title={`SAM & AAA`}>
 					<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
 						{Object.keys(filteredAirDefense).map((key) => {
 							const blueprint = getApp().getGroundUnitDatabase().blueprints[key];
@@ -83,7 +90,7 @@ export function SpawnMenu(props: {
 						})}
 					</div>
 				</OlAccordion>
-				<OlAccordion title={`Ground Units (${Object.keys(filteredGroundUnits).length})`}>
+				<OlAccordion title={`Ground Units`}>
 					<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
 						{Object.keys(filteredGroundUnits).map((key) => {
 							const blueprint = getApp().getGroundUnitDatabase().blueprints[key];
@@ -91,7 +98,7 @@ export function SpawnMenu(props: {
 						})}
 					</div>
 				</OlAccordion>
-				<OlAccordion title={`Ships and submarines (${Object.keys(filteredNavyUnits).length})`}>
+				<OlAccordion title={`Ships and submarines`}>
 					<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
 						{Object.keys(filteredNavyUnits).map((key) => {
 							const blueprint = getApp().getNavyUnitDatabase().blueprints[key];

frontend/react/src/ui/panels/unitcontrolmenu.tsx

@@ -10,6 +10,7 @@ import { OlToggle } from "../components/oltoggle";
 import { OlCoalitionToggle } from "../components/olcoalitiontoggle";
 import { olButtonsEmissionsAttack, olButtonsEmissionsDefend, olButtonsEmissionsFree, olButtonsEmissionsSilent, olButtonsIntensity1, olButtonsIntensity2, olButtonsIntensity3, olButtonsRoeDesignated, olButtonsRoeFree, olButtonsRoeHold, olButtonsRoeReturn, olButtonsScatter1, olButtonsScatter2, olButtonsScatter3, olButtonsThreatEvade, olButtonsThreatManoeuvre, olButtonsThreatNone, olButtonsThreatPassive } from "../components/olicons";
 import { Coalition } from "../../types/types";
+import { ftToM, knotsToMs, mToFt, msToKnots } from "../../other/utils";
 
 export function UnitControlMenu() {
 	var [open, setOpen] = useState(false);
@@ -63,13 +64,13 @@ export function UnitControlMenu() {
 	/* Update the current values of the shown data */
 	function updateData() {
 		const getters = {
-			desiredAltitude: (unit: Unit) => { return unit.getDesiredAltitude(); },
+			desiredAltitude: (unit: Unit) => { return Math.round(mToFt(unit.getDesiredAltitude())); },
 			desiredAltitudeType: (unit: Unit) => { return unit.getDesiredAltitudeType(); },
-			desiredSpeed: (unit: Unit) => { return unit.getDesiredSpeed(); },
+			desiredSpeed: (unit: Unit) => { return Math.round(msToKnots(unit.getDesiredSpeed())); },
 			desiredSpeedType: (unit: Unit) => { return unit.getDesiredSpeedType(); },
 			ROE: (unit: Unit) => { return unit.getROE(); },
 			reactionToThreat: (unit: Unit) => { return unit.getReactionToThreat(); },
-			emissionsCountermeasures: (unit: Unit) => { return unit.getROE(); },
+			emissionsCountermeasures: (unit: Unit) => { return unit.getEmissionsCountermeasures(); },
 			shotsScatter: (unit: Unit) => { return unit.getShotsScatter(); },
 			shotsIntensity: (unit: Unit) => { return unit.getShotsIntensity(); },
 			operateAs: (unit: Unit) => { return unit.getOperateAs(); },
@@ -158,7 +159,7 @@ export function UnitControlMenu() {
 					<OlRangeSlider
 						onChange={(ev) => {
 							selectedUnits.forEach((unit) => {
-								unit.setAltitude(Number(ev.target.value));
+								unit.setAltitude(ftToM(Number(ev.target.value)));
 								setSelectedUnitsData({
 									...selectedUnitsData,
 									desiredAltitude: Number(ev.target.value)
@@ -200,7 +201,7 @@ export function UnitControlMenu() {
 				<OlRangeSlider
 					onChange={(ev) => {
 						selectedUnits.forEach((unit) => {
-							unit.setSpeed(Number(ev.target.value));
+							unit.setSpeed(knotsToMs(Number(ev.target.value)));
 							setSelectedUnitsData({
 								...selectedUnitsData,
 								desiredSpeed: Number(ev.target.value)
@@ -318,14 +319,14 @@ export function UnitControlMenu() {
 								return <OlButtonGroupItem
 									onClick={() => {
 										selectedUnits.forEach((unit) => {
-											unit.setShotsScatter(idx);
+											unit.setShotsScatter((idx + 1));
 											setSelectedUnitsData({
 												...selectedUnitsData,
-												shotsScatter: idx
+												shotsScatter: (idx + 1)
 											})
 										})
 									}}
-									active={selectedUnitsData.shotsScatter === idx}
+									active={selectedUnitsData.shotsScatter === (idx + 1)}
 									icon={icon} />
 							})
 						}
@@ -339,14 +340,14 @@ export function UnitControlMenu() {
 									return <OlButtonGroupItem
 										onClick={() => {
 											selectedUnits.forEach((unit) => {
-												unit.setShotsIntensity(idx);
+												unit.setShotsIntensity((idx + 1));
 												setSelectedUnitsData({
 													...selectedUnitsData,
-													shotsIntensity: idx
+													shotsIntensity: (idx + 1)
 												})
 											})
 										}}
-										active={selectedUnitsData.shotsIntensity === idx}
+										active={selectedUnitsData.shotsIntensity === (idx + 1)}
 										icon={icon} />
 								})
 							}

frontend/react/src/ui/ui.tsx

@@ -77,12 +77,12 @@ export function UI() {
 						<Header />
 						<div className='flex h-full'>
 							<SideBar />
-							<div id='map-container' className='relative h-full w-screen top-0 left-0' />
 							<MainMenu open={mainMenuVisible} onClose={() => setMainMenuVisible(false)} />
 							<SpawnMenu open={spawnMenuVisible} onClose={() => setSpawnMenuVisible(false)} />
 							<UnitControlMenu />
 						</div>
 					</div>
+					<div id='map-container' className='fixed h-full w-screen top-0 left-0' />
 				</EventsProvider>
 			</StateProvider>
 		</div>

frontend/server/demo.js

@@ -67,7 +67,7 @@ module.exports = function (configLocation) {
 			}
 
 			
-			
+			/*
 			// UNCOMMENT TO TEST ALL UNITS ****************
 			
 			var databases = Object.assign({}, aircraftDatabase, helicopterDatabase, groundUnitDatabase, navyUnitDatabase);
@@ -105,8 +105,8 @@ module.exports = function (configLocation) {
 				}
 			}
 			
+			*/
 
-			/*
 			let idx = 1;
 			DEMO_UNIT_DATA[idx] = JSON.parse(JSON.stringify(baseData));
 			DEMO_UNIT_DATA[idx].name = "S_75M_Volhov";
@@ -143,7 +143,6 @@ module.exports = function (configLocation) {
 			DEMO_UNIT_DATA[idx].desiredAltitude = 10000;
 			DEMO_UNIT_DATA[idx].desiredAltitudeType = 0;
 
-
 			idx += 1;
 			DEMO_UNIT_DATA[idx] = JSON.parse(JSON.stringify(baseData));
 			DEMO_UNIT_DATA[idx].name = "Infantry AK";
@@ -171,7 +170,6 @@ module.exports = function (configLocation) {
 			DEMO_UNIT_DATA[idx].position.lat += idx / 100;
 			DEMO_UNIT_DATA[idx].category = "Aircraft";
 			DEMO_UNIT_DATA[idx].isLeader = true;
-			*/
 			
 			this.startTime = Date.now();
 		}