Merge branch 'v0.1.0' of https://github.com/Pax1601/DCSOlympus into v0.1.0

client/public/images/icons/square-check-regular.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M211.8 339.8C200.9 350.7 183.1 350.7 172.2 339.8L108.2 275.8C97.27 264.9 97.27 247.1 108.2 236.2C119.1 225.3 136.9 225.3 147.8 236.2L192 280.4L300.2 172.2C311.1 161.3 328.9 161.3 339.8 172.2C350.7 183.1 350.7 200.9 339.8 211.8L211.8 339.8zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z"/></svg>

client/public/images/icons/square-check-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>

client/public/images/icons/square-regular.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M384 32C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H384zM384 80H64C55.16 80 48 87.16 48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80z"/></svg>

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;

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");
+}

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 );
     });
 

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";

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"]);

client/views/uikit.ejs

@@ -23,6 +23,7 @@
                 <div class="section-header">Ground Units</div>
                 <div class="section-header">Planes</div>
                 <div class="section-header">.ol-panel</div>
+                <div class="section-header">Icons</div>
             </div>
 
             <section>
@@ -1684,6 +1685,41 @@
 
             </section>
 
+            <section>
+
+                <div class="content">
+
+                    <div class="content-header">Icons</div>
+                    <div class="content-body">
+
+                        <div class="example icon-list">
+                            <div class="caption">Actions</div>
+                            <img src="/themes/olympus/images/icons_actions_gas_dark.svg" />
+                            <img src="/themes/olympus/images/icons_actions_nothing_dark.svg" />
+                            <img src="/themes/olympus/images/icons_actions_rtb_dark.svg" />
+                            <img src="/themes/olympus/images/icons_actions_search_dark.svg" />
+                        </div>
+
+                        <div class="example icon-list">
+                            <div class="caption">RoE</div>
+                            <img src="/themes/olympus/images/icons_roe_free_dark.svg" />
+                            <img src="/themes/olympus/images/icons_roe_return_dark.svg" />
+                            <img src="/themes/olympus/images/icons_roe_stop_dark.svg" />
+                            <img src="/themes/olympus/images/icons_roe_target_dark.svg" />
+                        </div>
+
+                        <div class="example icon-list">
+                            <div class="caption">Threat</div>
+                            <img src="/themes/olympus/images/icons_threat_protect_dark.svg" />
+                            <img src="/themes/olympus/images/icons_threat_retreat_dark.svg" />
+                        </div>
+
+                    </div>
+        
+                </div>
+
+            </section>
+
         </div>
 
         <script>