Merge branch 'main' into 485-improve-miss-on-purpose

client/@types/olympus/index.d.ts

@@ -1367,9 +1367,16 @@ declare module "contextmenus/airbasespawnmenu" {
 }
 declare module "context/context" {
     export interface ContextInterface {
+        useSpawnMenu?: boolean;
+        useUnitControlPanel?: boolean;
+        useUnitInfoPanel?: boolean;
     }
     export class Context {
+        #private;
         constructor(config: ContextInterface);
+        getUseSpawnMenu(): boolean;
+        getUseUnitControlPanel(): boolean;
+        getUseUnitInfoPanel(): boolean;
     }
 }
 declare module "other/manager" {
@@ -1619,6 +1626,7 @@ declare module "panels/unitinfopanel" {
     export class UnitInfoPanel extends Panel {
         #private;
         constructor(ID: string);
+        show(): void;
     }
 }
 declare module "plugin/pluginmanager" {

client/public/stylesheets/style/style.css

@@ -72,10 +72,6 @@ form {
     padding: 0;
 }
 
-form>div {
-    margin: 20px 0;
-}
-
 .pill {
     background-color: var(--background-steel);
     border-radius: 999px;
@@ -669,8 +665,8 @@ nav.ol-panel> :last-child {
     width:10px;
 }
 
-.ol-navbar-buttons-group > .protectable > button.lock svg.locked {
+.ol-navbar-buttons-group > .protectable > button.lock svg.locked * {
-    filter:invert(100);
+    fill:white !important;
 }
 
 .ol-navbar-buttons-group > .protectable > button:not([data-protected]).lock svg.unlocked,
@@ -853,7 +849,7 @@ nav.ol-panel> :last-child {
     column-gap: 10px;
     display: flex;
     flex-direction: row;
-    margin: 10px 0px;
+    margin: 20px 0px;
     flex-wrap: wrap;
     width: 100%;
     row-gap: 10px;

client/src/context/context.ts

@@ -1,11 +1,31 @@
 export interface ContextInterface {
-
+    useSpawnMenu?: boolean;
+    useUnitControlPanel?: boolean;
+    useUnitInfoPanel?: boolean;
 }
 
 export class Context {
 
-    constructor( config:ContextInterface ) {
+    #useSpawnMenu:boolean;
+    #useUnitControlPanel:boolean;
+    #useUnitInfoPanel:boolean;
 
+    constructor( config:ContextInterface ) {
+        this.#useSpawnMenu        = ( config.useSpawnMenu !== false );
+        this.#useUnitControlPanel = ( config.useUnitControlPanel !== false );
+        this.#useUnitInfoPanel    = ( config.useUnitInfoPanel !== false );
+    }
+
+    getUseSpawnMenu() {
+        return this.#useSpawnMenu;
+    }
+
+    getUseUnitControlPanel() {
+        return this.#useUnitControlPanel;
+    }
+
+    getUseUnitInfoPanel() {
+        return this.#useUnitInfoPanel;
     }
 
 }

client/src/contextmenus/mapcontextmenu.ts

@@ -99,6 +99,9 @@ export class MapContextMenu extends ContextMenu {
      * @param latlng Leaflet latlng object of the mouse click
      */
     show(x: number, y: number, latlng: LatLng) {
+        if (!getApp().getCurrentContext().getUseSpawnMenu())
+            return false;
+
         super.show(x, y, latlng);
 
         this.#aircraftSpawnMenu.setLatLng(latlng);

client/src/map/map.ts

@@ -734,7 +734,7 @@ export class Map extends L.Map {
         const makeTitle = (isProtected:boolean) => {
             return ( isProtected ) ? "Unit type is protected and will ignore orders" : "Unit is NOT protected and will respond to orders";
         }
-        this.#mapMarkerControls.forEach( (control:MapMarkerControl) => {
+        this.getMapMarkerControls().forEach( (control:MapMarkerControl) => {
             const toggles = `["${control.toggles.join('","')}"]`;
             const div = document.createElement("div");
             div.className = control.protectable === true ? "protectable" : "";
@@ -901,5 +901,9 @@ export class Map extends L.Map {
         this.#visibilityOptions[option] = ev.currentTarget.checked;
         document.dispatchEvent(new CustomEvent("mapVisibilityOptionsChanged"));
     }
+
+    getMapMarkerControls() {
+        return this.#mapMarkerControls;
+    }
 }
 

client/src/olympusapp.ts

@@ -403,19 +403,26 @@ export class OlympusApp {
         });
 
         /* Try and connect with the Olympus REST server */
-        document.addEventListener("tryConnection", () => {
+        const loginForm = document.getElementById("authentication-form");
-            const form = document.querySelector("#splash-content")?.querySelector("#authentication-form");
+        if (loginForm instanceof HTMLFormElement) {
-            const username = (form?.querySelector("#username") as HTMLInputElement).value;
+            loginForm.addEventListener("submit", (ev:SubmitEvent) => {
-            const password = (form?.querySelector("#password") as HTMLInputElement).value;
+                ev.preventDefault();
+                ev.stopPropagation();
+                const username = (loginForm.querySelector("#username") as HTMLInputElement).value;
+                const password = (loginForm.querySelector("#password") as HTMLInputElement).value;
 
-            /* Update the user credentials */
+                // Update the user credentials
-            this.getServerManager().setCredentials(username, password);
+                this.getServerManager().setCredentials(username, password);
 
-            /* Start periodically requesting updates */
+                // Start periodically requesting updates
-            this.getServerManager().startUpdate();
+                this.getServerManager().startUpdate();
+
+                this.setLoginStatus("connecting");
+            });
+        } else {
+            console.error("Unable to find login form.");
+        }
 
-            this.setLoginStatus("connecting");
-        })
 
         /* Reload the page, used to mimic a restart of the app */
         document.addEventListener("reloadPage", () => {

client/src/panels/unitcontrolpanel.ts

@@ -141,6 +141,10 @@ export class UnitControlPanel extends Panel {
     }
 
     show() {
+        const context = getApp().getCurrentContext();
+        if ( !context.getUseUnitControlPanel() )
+            return;
+        
         super.show();
         this.#speedTypeSwitch.resetExpectedValue();
         this.#altitudeTypeSwitch.resetExpectedValue();

client/src/panels/unitinfopanel.ts

@@ -1,3 +1,4 @@
+import { getApp } from "..";
 import { Ammo } from "../interfaces";
 import { aircraftDatabase } from "../unit/databases/aircraftdatabase";
 import { Unit } from "../unit/unit";
@@ -92,4 +93,12 @@ export class UnitInfoPanel extends Panel {
         else
             this.hide();
     }
+
+    show() {
+        const context = getApp().getCurrentContext();
+        if ( !context.getUseUnitInfoPanel() )
+            return;
+
+        super.show();
+    }
 }

client/views/other/dialogs.ejs

@@ -6,11 +6,11 @@
             <div class="app-version">Version <span class="app-version-number">v0.4.5-alpha</span></div>
         </div>
 
-        <div id="authentication-form">
+        <form id="authentication-form">
             <div><h5>Username</h5> <input type="text" id="username" name="username" required autocomplete="username" placeholder="Enter username..."></div>
             <div><h5>Password</h5> <input type="password" id="password" name="password" minlength="8" required autocomplete="current-password" placeholder="Enter password..."></div>
-            <button id="connection-button" class="ol-button-apply" data-on-click="tryConnection">Connect</button>
+            <button type="submit" id="connection-button" class="ol-button-apply">Connect</button>
-        </div>
+        </form>
 
         <h5 id="login-status"><br></h5>