From 274544d034f614d99a3290d1a1930339a996d195 Mon Sep 17 00:00:00 2001
From: PeekabooSteam <matthew.lindley001+github@gmail.com>
Date: Tue, 7 Mar 2023 11:47:18 +0000
Subject: [PATCH] Navbar visibility toggles, only active for now. No function.

---
 client/public/stylesheets/olympus.css         | 34 ++++++++++++++++++-
 .../themes/olympus/images/chevron-down.svg    |  3 ++
 ...idden.svg => visibility_threat_hidden.svg} |  0
 client/public/themes/olympus/olympus.css      | 19 +++++++++++
 client/views/navbar.ejs                       | 32 +++++------------
 5 files changed, 64 insertions(+), 24 deletions(-)
 create mode 100644 client/public/themes/olympus/images/chevron-down.svg
 rename client/public/themes/olympus/images/{visibility_threats_hidden.svg => visibility_threat_hidden.svg} (100%)

diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index c4d7fac3..2c82606e 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -98,6 +98,7 @@ button[disabled="disabled"] {
 }
 
 .ol-select:not( .ol-select-image ) > .ol-select-value {
+    align-items: center;
     background-color: var( --background-grey );
     border-radius: var( --border-radius-sm );
     justify-content: center;
@@ -110,7 +111,7 @@ button[disabled="disabled"] {
 }
 
 .ol-select:not( .ol-select-image ) > .ol-select-value:after {
-    content: "[V]";
+    content: url( "/themes/olympus/images/chevron-down.svg" );
     margin-left:10px;
 }
 
@@ -423,4 +424,35 @@ nav.ol-panel > :last-child {
 #unit-info-panel {
     display: flex;
     flex-direction: column;
+}
+
+
+#visibility-control {
+    align-items: center;
+}
+
+#visibility-control button {
+    border:none;
+    height:32px;
+    width:32px;
+}
+
+#visibility-control-aircraft {
+    background-image: var( --visibility-control-aircraft-visible-url );
+}
+
+#visibility-control-ground {
+    background-image: var( --visibility-control-ground-visible-url );
+}
+
+#visibility-control-sam {
+    background-image: var( --visibility-control-sam-visible-url );
+}
+
+#visibility-control-naval {
+    background-image: var( --visibility-control-naval-visible-url );
+}
+
+#visibility-control-threat {
+    background-image: var( --visibility-control-threat-visible-url );
 }
\ No newline at end of file
diff --git a/client/public/themes/olympus/images/chevron-down.svg b/client/public/themes/olympus/images/chevron-down.svg
new file mode 100644
index 00000000..800f4fe2
--- /dev/null
+++ b/client/public/themes/olympus/images/chevron-down.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.37109 7.37891C6.69922 7.73438 7.27344 7.73438 7.60156 7.37891L12.8516 2.12891C13.207 1.80078 13.207 1.22656 12.8516 0.898438C12.5234 0.542969 11.9492 0.542969 11.6211 0.898438L7 5.51953L2.35156 0.898438C2.02344 0.542969 1.44922 0.542969 1.12109 0.898438C0.765625 1.22656 0.765625 1.80078 1.12109 2.12891L6.37109 7.37891Z" fill="white"/>
+</svg>
diff --git a/client/public/themes/olympus/images/visibility_threats_hidden.svg b/client/public/themes/olympus/images/visibility_threat_hidden.svg
similarity index 100%
rename from client/public/themes/olympus/images/visibility_threats_hidden.svg
rename to client/public/themes/olympus/images/visibility_threat_hidden.svg
diff --git a/client/public/themes/olympus/olympus.css b/client/public/themes/olympus/olympus.css
index 0e17e093..5d31045c 100644
--- a/client/public/themes/olympus/olympus.css
+++ b/client/public/themes/olympus/olympus.css
@@ -45,6 +45,25 @@
 
 
 
+    /***  Navbar  ***/
+
+    --visibility-control-aircraft-visible-url: url( "/themes/olympus/images/visibility_aircraft_visible.svg" );
+    --visibility-control-aircraft-hidden-url: url( "/themes/olympus/images/visibility_aircraft_hidden.svg" );
+
+    --visibility-control-ground-visible-url: url( "/themes/olympus/images/visibility_ground_visible.svg" );
+    --visibility-control-ground-hidden-url: url( "/themes/olympus/images/visibility_ground_hidden.svg" );
+
+    --visibility-control-sam-visible-url: url( "/themes/olympus/images/visibility_sam_visible.svg" );
+    --visibility-control-sam-hidden-url: url( "/themes/olympus/images/visibility_sam_hidden.svg" );
+
+    --visibility-control-naval-visible-url: url( "/themes/olympus/images/visibility_naval_visible.svg" );
+    --visibility-control-naval-hidden-url: url( "/themes/olympus/images/visibility_naval_hidden.svg" );
+
+    --visibility-control-threat-visible-url: url( "/themes/olympus/images/visibility_threat_visible.svg" );
+    --visibility-control-threat-hidden-url: url( "/themes/olympus/images/visibility_threat_hidden.svg" );
+
+
+
     /***  Unit marker settings  ***/
 
 
diff --git a/client/views/navbar.ejs b/client/views/navbar.ejs
index 3209ace7..1953644e 100644
--- a/client/views/navbar.ejs
+++ b/client/views/navbar.ejs
@@ -46,9 +46,10 @@
     <div id="map-type" class="ol-select">
         <div class="ol-select-value">
             <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M11.1562 3.53125C11.1562 5.03516 9.13281 7.6875 8.25781 8.78125C8.06641 9.05469 7.65625 9.05469 7.46484 8.78125C6.58984 7.6875 4.59375 5.03516 4.59375 3.53125C4.59375 1.72656 6.04297 0.25 7.875 0.25C9.67969 0.25 11.1562 1.72656 11.1562 3.53125ZM11.375 5.74609C11.457 5.55469 11.5391 5.36328 11.6211 5.17188C11.6484 5.14453 11.6484 5.11719 11.6758 5.08984L14.8477 3.80469C15.2578 3.64062 15.75 3.94141 15.75 4.40625V11.8164C15.75 12.0898 15.5859 12.3359 15.3125 12.4453L11.375 14.0039V5.74609ZM3.74609 4.05078C3.82812 4.43359 3.9375 4.81641 4.10156 5.17188C4.18359 5.36328 4.26562 5.55469 4.375 5.74609V12.6094L0.875 14.0039C0.464844 14.168 0 13.8672 0 13.4023V5.99219C0 5.71875 0.164062 5.47266 0.410156 5.39062L3.74609 4.05078ZM8.94141 9.32812C9.32422 8.86328 9.92578 8.09766 10.5 7.22266V14.0586L5.25 12.5547V7.22266C5.79688 8.09766 6.39844 8.86328 6.78125 9.32812C7.32812 10.0391 8.39453 10.0391 8.94141 9.32812ZM7.875 4.40625C8.47656 4.40625 8.96875 3.94141 8.96875 3.3125C8.96875 2.71094 8.47656 2.21875 7.875 2.21875C7.24609 2.21875 6.78125 2.71094 6.78125 3.3125C6.78125 3.94141 7.24609 4.40625 7.875 4.40625Z" fill="white"/>
+                <path d="M11.1562 3.53125C11.1562 5.03516 9.13281 7.6875 8.25781 8.78125C8.06641 9.05469 7.65625 9.05469 7.46484 8.78125C6.58984 7.6875 4.59375 5.03516 4.59375 3.53125C4.59375 1.72656 6.04297 0.25 7.875 0.25C9.67969 0.25 11.1562 1.72656 11.1562 3.53125ZM11.375 5.74609C11.457 5.55469 11.5391 5.36328 11.6211 5.17188C11.6484 5.14453 11.6484 5.11719 11.6758 5.08984L14.8477 3.80469C15.2578 3.64062 15.75 3.94141 15.75 4.40625V11.8164C15.75 12.0898 15.5859 12.3359 15.3125 12.4453L11.375 14.0039V5.74609ZM3.74609 4.05078C3.82812 4.43359 3.9375 4.81641 4.10156 5.17188C4.18359 5.36328 4.26562 5.55469 4.375 5.74609V12.6094L0.875 14.0039C0.464844 14.168 0 13.8672 0 13.4023V5.99219C0 5.71875 0.164062 5.47266 0.410156 5.39062L3.74609 4.05078ZM8.94141 9.32812C9.32422 8.86328 9.92578 8.09766 10.5 7.22266V14.0586L5.25 12.5547V7.22266C5.79688 8.09766 6.39844 8.86328 6.78125 9.32812C7.32812 10.0391 8.39453 10.0391 8.94141 9.32812ZM7.875 4.40625C8.47656 4.40625 8.96875 3.94141 8.96875 3.3125C8.96875 2.71094 8.47656 2.21875 7.875 2.21875C7.24609 2.21875 6.78125 2.71094 6.78125 3.3125C6.78125 3.94141 7.24609 4.40625 7.875 4.40625Z" fill="white"/>
             </svg>
-            ArcGIS Satellite</div>
+            <span>ArcGIS Satellite</span>
+        </div>
         <div class="ol-select-options">
             <div>
                 <button>ArcGIS Satellite</button>
@@ -70,28 +71,13 @@
             </div>
         </div>
     </div>
-
-    <!-- <div class="ol-select">
-        <div class="ol-select-value">Caucasus</div>
-        <div class="ol-select-options">
-            <div>
-                <button>Caucasus</button>
-            </div>
-            <div>
-                <button>Nevada</button>
-            </div>
-            <div>
-                <button>Syria</button>
-            </div>
-        </div>
-    </div> -->
     
-    <div class="ol-group">
-        <button title="Toggle planes visibility">P</button>
-        <button title="Toggle vehicle visibility">G</button>
-        <button title="Toggle SAM visibility">S</button>
-        <button title="Toggle navy visibility">N</button>
-        <button title="Toggle threat ring visibility">T</button>
+    <div id="visibility-control" class="ol-group">
+        <button id="visibility-control-aircraft" title="Toggle aircraft' visibility (a) [no function]"></button>
+        <button id="visibility-control-ground" title="Toggle ground units' visibility (g) [no function]"></button>
+        <button id="visibility-control-sam" title="Toggle SAMs' visibility (s) [no function]"></button>
+        <button id="visibility-control-naval" title="Toggle naval visibility (n) [no function]"></button>
+        <button id="visibility-control-threat" title="Toggle threat rings' visibility (t) [no function]"></button>
     </div>
 
     <div class="ol-group ol-group-checkbox">