Disabled options and applied faded styling

client/public/stylesheets/style/style.css

@@ -171,6 +171,10 @@ button svg.fill-coalition[data-coalition="red"] * {
     position: relative;
 }
 
+.ol-select[disabled] {
+    color: var(--ol-dialog-disabled-text-color);
+}
+
 .ol-select>.ol-select-value {
     align-content: center;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
@@ -215,6 +219,10 @@ button svg.fill-coalition[data-coalition="red"] * {
     background-size: 100% 100%;
 }
 
+.ol-select[disabled]:not(.ol-select-image)>.ol-select-value:after {
+    opacity: 15%;
+}
+
 .ol-select:not(.ol-select-image)>.ol-select-value.ol-select-warning:after {
     background-image: url("/resources/theme/images/icons/chevron-down-warning.svg") !important;
 }
@@ -1312,6 +1320,11 @@ dl.ol-data-grid dd {
     margin: 4px 0;
 }
 
+
+.ol-dialog label[disabled] {
+    color: var(--ol-dialog-disabled-text-color)
+}
+
 .ol-dialog-content table th {
     background-color: var(--background-grey);
     color:white;
@@ -1383,6 +1396,10 @@ dl.ol-data-grid dd {
     text-align: center;
 }
 
+.ol-text-input input[disabled] {
+    color:var(--ol-dialog-disabled-text-color);
+}
+
 input[type=number] {
     -moz-appearance: textfield;
     appearance: textfield;
@@ -1422,6 +1439,11 @@ input[type=number]::-webkit-outer-spin-button {
     border: 1px solid white;
 }
 
+.ol-button-apply[disabled] {
+    border-color: var(--ol-dialog-disabled-text-color);
+    color:var(--ol-dialog-disabled-text-color);
+}
+
 .ol-button-apply::before {
     content: "\2713";
 }

client/public/themes/olympus/theme.css

@@ -48,6 +48,8 @@
     --ol-switch-off:#686868;
     --ol-switch-undefined:#383838;
 
+    --ol-dialog-disabled-text-color: #ffffff20;
+
     /*** General border radii  **/
     --border-radius-xs: 2px;
     --border-radius-sm: 5px;

client/src/controls/dropdown.ts

@@ -26,7 +26,9 @@ export class Dropdown {
 
         if (options != null) this.setOptions(options);
 
-        (this.#container.querySelector(".ol-select-value") as HTMLElement)?.addEventListener("click", (ev) => { this.#toggle(); });
+        (this.#container.querySelector(".ol-select-value") as HTMLElement)?.addEventListener("click", (ev) => {
+            if (!this.#container.hasAttribute("disabled") && !this.#container.closest("disabled")) this.#toggle();
+        });
 
         document.addEventListener("click", (ev) => {
             if (!(this.#value.contains(ev.target as Node) || this.#options.contains(ev.target as Node) || this.#container.contains(ev.target as Node))) {

client/src/mission/missionmanager.ts

@@ -26,13 +26,16 @@ export class MissionManager {
     #coalitions: {red: string[], blue: string[]} = {red: [], blue: []};
 
     constructor() {
-        document.addEventListener("showCommandModeDialog", () => this.showCommandModeDialog());
         document.addEventListener("applycommandModeOptions", () => this.#applycommandModeOptions());
+        document.addEventListener("showCommandModeDialog", () => this.showCommandModeDialog());
+        document.addEventListener("toggleSpawnRestrictions", (ev:CustomEventInit) => {
+            this.#toggleSpawnRestrictions(ev.detail._element.checked)
+        });
 
         /* command-mode settings dialog */
         this.#commandModeDialog = document.querySelector("#command-mode-settings-dialog") as HTMLElement;
-
         this.#commandModeErasDropdown = new Dropdown("command-mode-era-options", () => {});
+
     }
 
     /** Update location of bullseyes
@@ -211,6 +214,10 @@ export class MissionManager {
     }
 
     showCommandModeDialog() {
+        const options = this.getCommandModeOptions()
+        const { restrictSpawns, restrictToCoalition, setupTime } = options;
+        this.#toggleSpawnRestrictions(restrictSpawns);
+
         /* Create the checkboxes to select the unit eras */
         var eras = aircraftDatabase.getEras().concat(helicopterDatabase.getEras()).concat(groundUnitDatabase.getEras()).concat(navyUnitDatabase.getEras());
         eras = eras.filter((item: string, index: number) => eras.indexOf(item) === index).sort();
@@ -226,11 +233,11 @@ export class MissionManager {
         const redSpawnPointsInput = this.#commandModeDialog.querySelector("#red-spawn-points")?.querySelector("input") as HTMLInputElement;
         const setupTimeInput = this.#commandModeDialog.querySelector("#setup-time")?.querySelector("input") as HTMLInputElement;
 
-        restrictSpawnsCheckbox.checked = this.getCommandModeOptions().restrictSpawns;
-        restrictToCoalitionCheckbox.checked = this.getCommandModeOptions().restrictToCoalition;
-        blueSpawnPointsInput.value = String(this.getCommandModeOptions().spawnPoints.blue);
-        redSpawnPointsInput.value = String(this.getCommandModeOptions().spawnPoints.red);
-        setupTimeInput.value = String(Math.floor(this.getCommandModeOptions().setupTime / 60.0));
+        restrictSpawnsCheckbox.checked = restrictSpawns;
+        restrictToCoalitionCheckbox.checked = restrictToCoalition;
+        blueSpawnPointsInput.value = String(options.spawnPoints.blue);
+        redSpawnPointsInput.value = String(options.spawnPoints.red);
+        setupTimeInput.value = String(Math.floor(setupTime / 60.0));
     }
 
     #applycommandModeOptions() {
@@ -309,4 +316,10 @@ export class MissionManager {
         };
         xhr.send();
     }
+
+    #toggleSpawnRestrictions(restrictionsEnabled:boolean) {
+        this.#commandModeDialog.querySelectorAll("input, label, .ol-select").forEach( el => {
+            if (!el.closest("#restrict-spawns")) el.toggleAttribute("disabled", !restrictionsEnabled);
+        });
+    }
 }

client/views/other/dialogs/commandmodesettings.ejs

@@ -8,11 +8,13 @@
     <div class="ol-dialog-content">
         <div id="restrict-spawns" class="ol-checkbox">
             <label title="If false, no spawn restrictions will be applied">
-                <input type="checkbox"/>
-                Restrict spawns 
+                <input type="checkbox" data-on-click="toggleSpawnRestrictions"/>
+                Enable spawn restrictions
             </label>
         </div>
 
+        <hr />
+
         <div id="restrict-to-coalition" class="ol-checkbox">
             <label title="If true, commanders will be allowed to only spawn units that belong to their coalition. E.g. blue commanders will be able to spawn F/A-18 Hornets, but not MiG-29s.">
                 <input type="checkbox"/>
@@ -25,7 +27,7 @@
             
             <div class="ol-group">
                 <div id="setup-time" class="ol-text-input">
-                    <input type="number" min="-99999" max="99999" step="1" value="10">
+                    <input type="number" min="-99999" max="99999" step="1" value="10" />
                 </div>
                 <label>minutes</label>
             </div>