diff --git a/client/public/stylesheets/style/style.css b/client/public/stylesheets/style/style.css index 72287056..b1bb100b 100644 --- a/client/public/stylesheets/style/style.css +++ b/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"; } diff --git a/client/public/themes/olympus/theme.css b/client/public/themes/olympus/theme.css index 2da7dde9..328f8117 100644 --- a/client/public/themes/olympus/theme.css +++ b/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; diff --git a/client/src/controls/dropdown.ts b/client/src/controls/dropdown.ts index 1a0c4b6b..38014dc9 100644 --- a/client/src/controls/dropdown.ts +++ b/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))) { diff --git a/client/src/mission/missionmanager.ts b/client/src/mission/missionmanager.ts index 139f35ae..5ece75d0 100644 --- a/client/src/mission/missionmanager.ts +++ b/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); + }); + } } \ No newline at end of file diff --git a/client/views/other/dialogs/commandmodesettings.ejs b/client/views/other/dialogs/commandmodesettings.ejs index 3b278812..5d783473 100644 --- a/client/views/other/dialogs/commandmodesettings.ejs +++ b/client/views/other/dialogs/commandmodesettings.ejs @@ -8,11 +8,13 @@
+
+