fix: Searchbar threating input as username/password, inability to spawn explosion on marker

frontend/react/src/map/coalitionarea/coalitioncircle.ts

@@ -1,4 +1,4 @@
-import { LatLngExpression, Map, Circle, DivIcon, Marker, CircleOptions, LatLng } from "leaflet";
+import { LatLngExpression, Map, Circle, DivIcon, Marker, CircleOptions, LatLng, DomEvent } from "leaflet";
 import { getApp } from "../../olympusapp";
 import { DraggableHandle } from "../markers/draggablehandle";
 import { BLUE_COMMANDER, colors, RED_COMMANDER } from "../../constants/constants";
@@ -121,6 +121,13 @@ export class CoalitionCircle extends Circle {
     super.setLatLng(latlng);
     this.#setRadiusHandle();
     this.#drawLabel();
+
+    if (this.#updateTimeout) window.clearTimeout(this.#updateTimeout);
+    this.#updateTimeout = window.setTimeout(() => {
+      CoalitionAreaChangedEvent.dispatch(this);
+      this.#updateTimeout = null;
+    }, 500);
+
     return this;
   }
 
@@ -144,13 +151,19 @@ export class CoalitionCircle extends Circle {
       this.#radiusHandle.addTo(getApp().getMap());
       this.#radiusHandle.on("drag", (e: any) => {
         this.setRadius(this.getLatLng().distanceTo(e.latlng));
+
+        if (this.#updateTimeout) window.clearTimeout(this.#updateTimeout);
+        this.#updateTimeout = window.setTimeout(() => {
+          CoalitionAreaChangedEvent.dispatch(this);
+          this.#updateTimeout = null;
+        }, 500);
       });
     }
   }
 
   #drawLabel() {
     this.#label?.removeFrom(this._map);
-    
+
     this.#label = new Marker(this.getLatLng(), {
       icon: new DivIcon({
         className: "label",

frontend/react/src/map/map.ts

@@ -22,8 +22,6 @@ import {
   ContextActionTarget,
   ContextActionType,
   ContextActions,
-  SHORT_PRESS_MILLISECONDS,
-  DEBOUNCE_MILLISECONDS,
   DrawSubState,
   colors,
 } from "../constants/constants";
@@ -183,6 +181,14 @@ export class Map extends L.Map {
     });
     this.setView([37.23, -115.8], 10);
 
+    (document.getElementById(ID) as HTMLElement).onkeydown = function (e) {
+      // TODO Find a way to fix the bug where the map is zoomed out when pressing the "6" key
+      //if (e.code == "Digit6") {
+      //  // 6
+      //  e.stopPropagation();
+      //}
+    };
+
     /* Minimap */
     var minimapLayer = new L.TileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
       minZoom: 0,
@@ -310,7 +316,7 @@ export class Map extends L.Map {
         this.#starredSpawnRequestTables = localSessionData.starredSpawns;
         StarredSpawnsChangedEvent.dispatch(this.#starredSpawnRequestTables);
       }
-      
+
       setTimeout(() => {
         if (sessionData.mapSource?.id) {
           this.setLayerName(sessionData.mapSource.id);
@@ -898,6 +904,7 @@ export class Map extends L.Map {
     ["white", "blue", "red", "green", "orange"].forEach((color) => this.getContainer().classList.remove(`smoke-${color}-cursor`));
     this.getContainer().classList.remove(`plus-cursor`);
     this.getContainer().classList.remove(`measure-cursor`);
+    this.getContainer().classList.remove(`pointer-cursor`);
 
     /* Clear the last measure if the state is changed */
     if (this.#previousAppState === OlympusState.MEASURE) {
@@ -1020,7 +1027,7 @@ export class Map extends L.Map {
     }
   }
 
-  #onMouseWheelPressed(e: any) { }
+  #onMouseWheelPressed(e: any) {}
 
   #onRightMousePressed(e: any) {
     this.dragging.disable();
@@ -1169,8 +1176,10 @@ export class Map extends L.Map {
         this.dragging.disable();
       }
     } else {
-      getApp().setState(OlympusState.IDLE);
-      this.setSelectionEnabled(true);
+      if (getApp().getState() !== OlympusState.DRAW) {
+        getApp().setState(OlympusState.IDLE);
+        this.setSelectionEnabled(true);
+      }
 
       //@ts-ignore We force the boxselect to enter in selection mode
       this.boxSelect._onMouseDown(e.originalEvent);

frontend/react/src/ui/components/olsearchbar.tsx

@@ -31,23 +31,25 @@ export function OlSearchBar(props: { onChange: (e: string) => void; text: string
         >
           <FontAwesomeIcon icon={faSearch} className="dark:text-gray-400" />
         </div>
-        <input
-          type="search"
-          ref={inputRef}
-          id={searchId}
-          onChange={(e) => props.onChange(e.currentTarget.value)}
-          className={`
-            mb-2 block w-full rounded-full border border-gray-300 bg-gray-50 p-3
-            ps-10 text-sm text-gray-900
-            dark:border-gray-600 dark:bg-gray-700 dark:text-white
-            dark:placeholder-gray-400 dark:focus:border-blue-500
-            dark:focus:ring-blue-500
-            focus:border-blue-500 focus:ring-blue-500
-          `}
-          placeholder="Search"
-          value={props.text}
-          required
-        />
+        <form>
+          <input
+            type="text"
+            ref={inputRef}
+            id={searchId}
+            onChange={(e) => props.onChange(e.currentTarget.value)}
+            className={`
+              mb-2 block w-full rounded-full border border-gray-300 bg-gray-50
+              p-3 ps-10 text-sm text-gray-900
+              dark:border-gray-600 dark:bg-gray-700 dark:text-white
+              dark:placeholder-gray-400 dark:focus:border-blue-500
+              dark:focus:ring-blue-500
+              focus:border-blue-500 focus:ring-blue-500
+            `}
+            placeholder="Search"
+            value={props.text}
+            required
+          />
+        </form>
         <FontAwesomeIcon
           icon={faMultiply}
           className={`

frontend/react/src/unit/unit.ts

@@ -50,6 +50,7 @@ import {
   UnitState,
   SPOTS_EDIT_ZOOM_TRANSITION,
   CLUSTERING_ZOOM_TRANSITION,
+  SpawnSubState,
 } from "../constants/constants";
 import { DataExtractor } from "../server/dataextractor";
 import { Weapon } from "../weapon/weapon";
@@ -1615,6 +1616,9 @@ export abstract class Unit extends CustomMarker {
 
   /***********************************************/
   #onMouseUp(e: any) {
+    if ((getApp().getState() === OlympusState.SPAWN && getApp().getSubState() !== SpawnSubState.NO_SUBSTATE) || getApp().getState() === OlympusState.MEASURE)
+      return;
+
     if (e.originalEvent?.button === 0) {
       DomEvent.stop(e);
       DomEvent.preventDefault(e);
@@ -1635,6 +1639,9 @@ export abstract class Unit extends CustomMarker {
   }
 
   #onMouseDown(e: any) {
+    if ((getApp().getState() === OlympusState.SPAWN && getApp().getSubState() !== SpawnSubState.NO_SUBSTATE) || getApp().getState() === OlympusState.MEASURE)
+      return;
+
     if (e.originalEvent?.button === 0) {
       DomEvent.stop(e);
       DomEvent.preventDefault(e);