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/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 395773b8..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"] {
@@ -353,12 +353,27 @@ 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;
+}
+
+
+.ol-panel .ol-group-button-toggle button.off::before {
+ background-image: url("/images/icons/square-regular.svg");
}
@@ -616,12 +631,6 @@ 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;
-}
-
.toggle {
--width: 40px;
--height: calc(var(--width) / 2);
@@ -659,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/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 );
});
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";
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"]);
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Threat
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+