Started adding buttons

client/public/images/buttons/climb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M624 448H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h608c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM80.55 341.27c6.28 6.84 15.1 10.72 24.33 10.71l130.54-.18a65.62 65.62 0 0 0 29.64-7.12l290.96-147.65c26.74-13.57 50.71-32.94 67.02-58.31 18.31-28.48 20.3-49.09 13.07-63.65-7.21-14.57-24.74-25.27-58.25-27.45-29.85-1.94-59.54 5.92-86.28 19.48l-98.51 49.99-218.7-82.06a17.799 17.799 0 0 0-18-1.11L90.62 67.29c-10.67 5.41-13.25 19.65-5.17 28.53l156.22 98.1-103.21 52.38-72.35-36.47a17.804 17.804 0 0 0-16.07.02L9.91 230.22c-10.44 5.3-13.19 19.12-5.57 28.08l76.21 82.97z"/></svg>

client/public/images/buttons/descend.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M624 448H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h608c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM44.81 205.66l88.74 80a62.607 62.607 0 0 0 25.47 13.93l287.6 78.35c26.48 7.21 54.56 8.72 81 1.36 29.67-8.27 43.44-21.21 47.25-35.71 3.83-14.5-1.73-32.71-23.37-54.96-19.28-19.82-44.35-32.79-70.83-40l-97.51-26.56L282.8 30.22c-1.51-5.81-5.95-10.35-11.66-11.91L206.05.58c-10.56-2.88-20.9 5.32-20.71 16.44l47.92 164.21-102.2-27.84-27.59-67.88c-1.93-4.89-6.01-8.57-11.02-9.93L52.72 64.75c-10.34-2.82-20.53 5-20.72 15.88l.23 101.78c.19 8.91 6.03 17.34 12.58 23.25z"/></svg>

client/public/images/buttons/fast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"/></svg>

client/public/images/buttons/slow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"/></svg>

client/public/stylesheets/button.css

@@ -2,14 +2,21 @@
     width: 24px;
     height: 24px;
     background-color: transparent;
-    border-radius: 50%;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.olympus-button img{
+    width: 24px;
+    height: 24px;
 }
 
 .olympus-button:hover{
-
+    
 }
 
 .olympus-button:active{
+    
+}
 
-}

client/public/stylesheets/dropdown.css

@@ -14,6 +14,7 @@
     font-size: 13px;
     display: flex;
     text-shadow: none;
+    box-shadow: 0px 2px 5px #000A;
 }
 
 .olympus-dropdown::before {
@@ -36,10 +37,10 @@
 .olympus-dropdown-open::after {
     content: "";
     position: absolute;
-    top: 11px;
-    right: 9px;
-    height: 3px;
-    width: 3px;
+    top: 13px;
+    right: 11px;
+    height: 1px;
+    width: 1px;
     border: solid white;
     border-width: 0 3px 3px 0;
     padding: 3px;
@@ -51,10 +52,10 @@
 .olympus-dropdown-closed::after {
     content: "";
     position: absolute;
-    top: 7px;
-    right: 9px;
-    height: 3px;
-    width: 3px;
+    top: 9px;
+    right: 11px;
+    height: 1px;
+    width: 1px;
     border: solid white;
     border-width: 0 3px 3px 0;
     padding: 3px;

client/public/stylesheets/panels.css

@@ -1,12 +1,11 @@
 /* Panels style */
 .olympus-panel {
     background-color: var(--background-color-dark);
-    
     font-size: 12px;
     transition: bottom 0.2s;
 	border-radius: 15px;
-	text-shadow: 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
 	font-family: "Lucida Console", "Courier New", monospace !important;
+    box-shadow: 0px 2px 5px #000A;
 }
 
 .olympus-panel table {

client/public/stylesheets/style.css

@@ -5,6 +5,7 @@
 @import url("unitmarker.css");
 @import url("connectionstatuspanel.css");
 @import url("button.css");
+@import url("unitcontrolpanel.css");
 
 /* Variables definitions */
 :root {
@@ -66,16 +67,16 @@ html, body {
 #unit-control-panel {
 	position: absolute;
 	left: 50%;
-	margin-left: -55px;
+	margin-left: -60px;
 	height: 30px;
-    width: 110px;
+    width: 120px;
     top: 10px;
 	z-index: 1000;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding-left: 4px;
-	padding-right: 4px;
+	padding-left: 10px;
+	padding-right: 10px;
 }
 
 #visibility-control-panel {

client/public/stylesheets/unitcontrolpanel.css

@@ -0,0 +1,4 @@
+#unit-control-panel .olympus-button {
+    filter: invert(100%);
+    opacity: 0.8;
+}

client/src/controls/button.ts

@@ -0,0 +1,14 @@
+export class Button
+{
+    #container: HTMLElement | null;
+    constructor(ID: string, srcs: string[], callback: CallableFunction)
+    {
+        this.#container = document.getElementById(ID);
+        if (this.#container != null)
+        {
+            var img = document.createElement("img");
+            img.src = srcs[0]; 
+            this.#container.appendChild(img);
+        }
+    }
+}

client/src/index.ts

@@ -6,6 +6,7 @@ import { UnitInfoPanel } from "./panels/unitinfopanel";
 import { SelectionScroll } from "./controls/selectionscroll";
 import { Dropdown } from "./controls/dropdown";
 import { ConnectionStatusPanel } from "./panels/connectionstatuspanel";
+import { Button } from "./controls/button";
 
 /* TODO: should this be a class? */
 var map: Map;
@@ -18,6 +19,10 @@ var scenarioDropdown: Dropdown;
 var mapSourceDropdown: Dropdown;
 var connected: boolean;
 var connectionStatusPanel: ConnectionStatusPanel;
+var slowButton: Button;
+var fastButton: Button;
+var climbButton: Button;
+var descendButton: Button;
 
 function setup()
 {
@@ -30,6 +35,10 @@ function setup()
     scenarioDropdown = new Dropdown("scenario-dropdown", ["Caucasus", "Syria", "Nevada", "Marianas", "South Atlantic", "The channel"], () => {});
     mapSourceDropdown = new Dropdown("map-source-dropdown", map.getLayers(), (option: string) => map.setLayer(option));
     connectionStatusPanel = new ConnectionStatusPanel("connection-status-panel");
+    slowButton = new Button("slow-button", ["images/buttons/slow.svg"], () => {});
+    fastButton = new Button("fast-button", ["images/buttons/fast.svg"], () => {});
+    climbButton = new Button("climb-button", ["images/buttons/climb.svg"], () => {});
+    descendButton = new Button("descend-button", ["images/buttons/descend.svg"], () => {});
 
     /* Default values */
     activeCoalition = "blue";

client/views/unitcontrol.ejs

@@ -1,6 +1,6 @@
 <div class="olympus-panel" id="unit-control-panel">
-    <div class="olympus-button" id="slow"></div>
-    <div class="olympus-button" id="fast"></div>
-    <div class="olympus-button" id="descent"></div>
-    <div class="olympus-button" id="climb"></div>
+    <div class="olympus-button" id="slow-button"></div>
+    <div class="olympus-button" id="fast-button"></div>
+    <div class="olympus-button" id="descend-button"></div>
+    <div class="olympus-button" id="climb-button"></div>
 </div>