From 7e6c9606eb03b993612e157da278ed4abda1b0b7 Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Fri, 10 Mar 2023 13:30:09 +0000 Subject: [PATCH 1/5] Added proper checkboxes to coalition toggles. --- .../images/icons/square-check-regular.svg | 1 + .../images/icons/square-check-solid.svg | 1 + client/public/images/icons/square-regular.svg | 1 + client/public/stylesheets/olympus.css | 24 +++++++++++++------ 4 files changed, 20 insertions(+), 7 deletions(-) create mode 100644 client/public/images/icons/square-check-regular.svg create mode 100644 client/public/images/icons/square-check-solid.svg create mode 100644 client/public/images/icons/square-regular.svg diff --git a/client/public/images/icons/square-check-regular.svg b/client/public/images/icons/square-check-regular.svg new file mode 100644 index 00000000..4ce0ff82 --- /dev/null +++ b/client/public/images/icons/square-check-regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/public/images/icons/square-check-solid.svg b/client/public/images/icons/square-check-solid.svg new file mode 100644 index 00000000..2bd2823a --- /dev/null +++ b/client/public/images/icons/square-check-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/public/images/icons/square-regular.svg b/client/public/images/icons/square-regular.svg new file mode 100644 index 00000000..f66b39f7 --- /dev/null +++ b/client/public/images/icons/square-regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index 49c95441..213e2945 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -353,12 +353,22 @@ nav.ol-panel> :last-child { } .ol-panel .ol-group-button-toggle button { - align-items: center; - background-image: url("/themes/olympus/images/check_square.svg"); background-position: 5px 50%; background-repeat: no-repeat; border: 0; - text-indent: 15px; + display:flex; + justify-items: left; + text-indent: 5px; +} + +.ol-panel .ol-group-button-toggle button::before { + background-image: url("/images/icons/square-check-solid.svg"); + background-repeat: no-repeat; + content: ""; + filter: invert(100%); + -webkit-filter: invert(100%); + height:16px; + width:16px; } @@ -618,10 +628,10 @@ body[data-hide-naval] #unit-visibility-control-naval { } -[data-hide-blue] #coalition-visibility-control #coalition-visibility-control-blue, -[data-hide-red] #coalition-visibility-control #coalition-visibility-control-red, -[data-hide-neutral] #coalition-visibility-control #coalition-visibility-control-neutral { - background-image: none; +[data-hide-blue] #coalition-visibility-control #coalition-visibility-control-blue::before, +[data-hide-red] #coalition-visibility-control #coalition-visibility-control-red::before, +[data-hide-neutral] #coalition-visibility-control #coalition-visibility-control-neutral::before { + background-image: url("/images/icons/square-regular.svg"); } .toggle { From ceec65fb37562fad556cf0edf1ff9f1a100e0e68 Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Fri, 10 Mar 2023 13:39:40 +0000 Subject: [PATCH 2/5] Smartened the button toggle logic. Could be smarter, though. --- client/public/stylesheets/olympus.css | 11 +++++------ client/src/index.ts | 6 ++++-- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index 5d983a96..5d24df02 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -372,6 +372,11 @@ nav.ol-panel> :last-child { } +.ol-panel .ol-group-button-toggle button.off::before { + background-image: url("/images/icons/square-regular.svg"); +} + + .highlight-primary { @@ -626,12 +631,6 @@ body[data-hide-naval] #unit-visibility-control-naval { } -[data-hide-blue] #coalition-visibility-control #coalition-visibility-control-blue::before, -[data-hide-red] #coalition-visibility-control #coalition-visibility-control-red::before, -[data-hide-neutral] #coalition-visibility-control #coalition-visibility-control-neutral::before { - background-image: url("/images/icons/square-regular.svg"); -} - .toggle { --width: 40px; --height: calc(var(--width) / 2); diff --git a/client/src/index.ts b/client/src/index.ts index 8cae197c..cbed8a33 100644 --- a/client/src/index.ts +++ b/client/src/index.ts @@ -75,11 +75,12 @@ function setup() { if ( triggerElement instanceof HTMLElement ) { const eventName:string = triggerElement.dataset.onClick || ""; - const params:string = triggerElement.dataset.onClickParams || "{}"; + let params = JSON.parse( triggerElement.dataset.onClickParams || "{}" ); + params._element = triggerElement; if ( eventName ) { document.dispatchEvent( new CustomEvent( eventName, { - detail: JSON.parse( params ) + detail: params } ) ); } @@ -130,6 +131,7 @@ function setup() { document.addEventListener( "toggleCoalitionVisibility", ( ev:CustomEventInit ) => { + ev.detail._element.classList.toggle( "off" ); document.body.toggleAttribute( "data-hide-" + ev.detail.coalition ); }); From 2ef76a619befc0cc23c2bd55bdb6896ebf240b7a Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Fri, 10 Mar 2023 15:47:03 +0000 Subject: [PATCH 3/5] RuLes Of EngAGEmeNT iCoNs & ThrEAt ReAcTIoNs. --- client/public/stylesheets/layout.css | 11 +-- client/public/stylesheets/olympus.css | 110 +++++++++++++++++++++++++- client/src/panels/unitcontrolpanel.ts | 27 +++++-- 3 files changed, 131 insertions(+), 17 deletions(-) diff --git a/client/public/stylesheets/layout.css b/client/public/stylesheets/layout.css index 8de7e858..af9cc9cc 100644 --- a/client/public/stylesheets/layout.css +++ b/client/public/stylesheets/layout.css @@ -150,20 +150,11 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after } .ol-button-box button { + background-repeat: no-repeat;; border:1px solid var( --accent-light-blue ); color: var( --accent-light-blue ); } -.ol-button-box button:first-of-type, .ol-button-box button.selected { - border-color: white; - background-color: white; - color: var( --background-steel ); -} - -.ol-button-box button:after { - content: "[]"; -} - #connection-status-panel { bottom: 20px; diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index 5d24df02..7b949ea6 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -54,7 +54,7 @@ button { color: whitesmoke; cursor: pointer; font-weight: var(--font-weight-bolder); - padding: 8px; + padding: 6px; } button[disabled="disabled"] { @@ -668,3 +668,111 @@ body[data-hide-naval] #unit-visibility-control-naval { .toggle-input:checked ~ .toggle-fill::after { transform: translateX(var(--height)); } + + +#roe-buttons-container button { + background-color:transparent; + border:1px solid var( --accent-light-blue ); +} + +#roe-buttons-container button.selected, #reaction-to-threat-buttons-container button.selected { + background-color: white; + border-color: white; +} + +#roe-buttons-container button::before, #reaction-to-threat-buttons-container button::before { + background-repeat: no-repeat; + background-size:16px 16px; + content: ""; + display:block; + height:16px; + width:16px; +} + + + +#roe-buttons-container button[title="Free"]::before { + background-image: url( "/themes/olympus/images/icons_roe_free_light.svg"); +} + +#roe-buttons-container button[title="Designated free"]::before { + background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg"); +} + +#roe-buttons-container button[title="Designated"]::before { + background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg"); +} + +#roe-buttons-container button[title="Return"]::before { + background-image: url( "/themes/olympus/images/icons_roe_target_light.svg"); +} + +#roe-buttons-container button[title="Hold"]::before { + background-image: url( "/themes/olympus/images/icons_actions_nothing_light.svg"); +} + +#roe-buttons-container button[title="Free"].selected::before { + background-image: url( "/themes/olympus/images/icons_roe_free_dark.svg"); +} + +#roe-buttons-container button[title="Designated free"].selected::before { + background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg"); +} + +#roe-buttons-container button[title="Designated"].selected::before { + background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg"); +} + +#roe-buttons-container button[title="Return"].selected::before { + background-image: url( "/themes/olympus/images/icons_roe_target_dark.svg"); +} + +#roe-buttons-container button[title="Hold"].selected::before { + background-image: url( "/themes/olympus/images/icons_actions_nothing_dark.svg"); +} + + + +#reaction-to-threat-buttons-container button[title="None"]::before { + background-image: url( "/themes/olympus/images/icons_actions_nothing_light.svg"); +} + +#reaction-to-threat-buttons-container button[title="Passive"]::before { + background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg"); +} + +#reaction-to-threat-buttons-container button[title="Evade"]::before { + background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg"); +} + +#reaction-to-threat-buttons-container button[title="Escape"]::before { + background-image: url( "/themes/olympus/images/icons_threat_retreat_light.svg"); +} + +#reaction-to-threat-buttons-container button[title="Abort"]::before { + background-image: url( "/themes/olympus/images/icons_roe_stop_light.svg"); +} +#reaction-to-threat-buttons-container button[title="None"]::before { + background-image: url( "/themes/olympus/images/icons_actions_nothing_light.svg"); +} + + +#reaction-to-threat-buttons-container button[title="None"].selected::before { + background-image: url( "/themes/olympus/images/icons_actions_nothing_dark.svg"); +} + +#reaction-to-threat-buttons-container button[title="Passive"].selected::before { + background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg"); +} + +#reaction-to-threat-buttons-container button[title="Evade"].selected::before { + background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg"); +} + +#reaction-to-threat-buttons-container button[title="Escape"].selected::before { + background-image: url( "/themes/olympus/images/icons_threat_retreat_dark.svg"); +} + +#reaction-to-threat-buttons-container button[title="Abort"].selected::before { + background-image: url( "/themes/olympus/images/icons_roe_stop_dark.svg"); +} \ No newline at end of file diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts index 191d11d1..1e9d75e0 100644 --- a/client/src/panels/unitcontrolpanel.ts +++ b/client/src/panels/unitcontrolpanel.ts @@ -23,19 +23,34 @@ export class UnitControlPanel extends Panel { this.#airspeedSlider = new Slider("airspeed-slider", 0, 100, "kts", (value: number) => getUnitsManager().selectedUnitsSetSpeed(value / 1.94384)); /* Option buttons */ - this.#optionButtons["ROE"] = ROEs.map((option: string) => { + this.#optionButtons["ROE"] = ROEs.map((option: string, index:number) => { var button = document.createElement("button"); button.title = option; - button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.title)); + if ( index === 0 ) { + button.classList.add( "selected" ); + } + button.addEventListener("click", () => { + this.getElement().querySelector("#roe-buttons-container button.selected")?.classList.remove( "selected" ); + button.classList.add( "selected" ); + getUnitsManager().selectedUnitsSetROE(button.title); + }); return button; - }) + }); - this.#optionButtons["reactionToThreat"] = reactionsToThreat.map((option: string) => { + this.#optionButtons["reactionToThreat"] = reactionsToThreat.map((option: string, index:number) => { var button = document.createElement("button"); button.title = option; - button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.title)); + if ( index === 0 ) { + button.classList.add( "selected" ); + } + button.addEventListener("click", () => { + this.getElement().querySelector("#reaction-to-threat-buttons-container button.selected")?.classList.remove( "selected" ); + button.classList.add( "selected" ); + + getUnitsManager().selectedUnitsSetROE(button.title); + }); return button; - }) + }); this.getElement().querySelector("#roe-buttons-container")?.append(...this.#optionButtons["ROE"]); this.getElement().querySelector("#reaction-to-threat-buttons-container")?.append(...this.#optionButtons["reactionToThreat"]); From ec5235d142b41026fd8ae62bfacd09706c65ee5c Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Fri, 10 Mar 2023 15:58:41 +0000 Subject: [PATCH 4/5] Fixed measure tool direction bug. --- client/src/panels/mouseinfopanel.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/client/src/panels/mouseinfopanel.ts b/client/src/panels/mouseinfopanel.ts index c0767729..22eb5fb1 100644 --- a/client/src/panels/mouseinfopanel.ts +++ b/client/src/panels/mouseinfopanel.ts @@ -124,7 +124,13 @@ export class MouseInfoPanel extends Panel { const bng = zeroAppend(Math.floor(bear), 3); const reciprocal = zeroAppend( reciprocalHeading( parseInt( bng ) ), 3 ); - this.#measureBox.innerText = `${bng}° | ${Math.floor(dist*0.000539957)}nm | ${reciprocal}°`; + let data = [ `${bng}°`, `${Math.floor(dist*0.000539957)}nm`, `${reciprocal}°` ]; + + if ( bear < 180 ) { + data = data.reverse(); + } + + this.#measureBox.innerText = data.join( " | " ); this.#measureBox.style.left = (getMap().getMousePosition().x + startXY.x) / 2 - this.#measureBox.offsetWidth / 2 + "px"; this.#measureBox.style.top = (getMap().getMousePosition().y + startXY.y) / 2 - this.#measureBox.offsetHeight / 2 + "px"; this.#measureBox.style.rotate = angle + "rad"; From 3a210243ead474d3ae8b594682e238d043bbb4d1 Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Fri, 10 Mar 2023 16:30:14 +0000 Subject: [PATCH 5/5] Added dark icons --- client/views/uikit.ejs | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/client/views/uikit.ejs b/client/views/uikit.ejs index 648b3f31..8315d6b0 100644 --- a/client/views/uikit.ejs +++ b/client/views/uikit.ejs @@ -23,6 +23,7 @@
Ground Units
Planes
.ol-panel
+
Icons
@@ -1684,6 +1685,41 @@
+
+ +
+ +
Icons
+
+ +
+
Actions
+ + + + +
+ +
+
RoE
+ + + + +
+ +
+
Threat
+ + +
+ +
+ +
+ +
+