Added dropdowns

client/package-lock.json

@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "client",
       "version": "0.0.0",
       "dependencies": {
         "@types/geojson": "^7946.0.10",

client/public/stylesheets/dropdown.css

@@ -0,0 +1,83 @@
+.olympus-dropdown {
+    height: 30px;
+    background-color: #FFFD;
+    z-index: 1000;
+    border-radius: 2px;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    color: var(--background-color);
+    padding-left: 5px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 15px;
+}
+
+.olympus-dropdown::before {
+    content: "";
+    position: absolute;
+    height: 30px;
+    width: 30px;
+    top: 0px;
+    right: 0px;
+    background-color: var(--background-color);
+    z-index: 1000;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+
+.olympus-dropdown-open {
+    border-bottom-left-radius: 0px;
+}
+
+.olympus-dropdown-open::after {
+    content: "";
+    position: absolute;
+    top: 11px;
+    right: 9px;
+    height: 3px;
+    width: 3px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    padding: 3px;
+    z-index: 1000;
+    transform: rotate(-135deg);
+    -webkit-transform: rotate(-135deg);
+}
+
+.olympus-dropdown-closed::after {
+    content: "";
+    position: absolute;
+    top: 7px;
+    right: 9px;
+    height: 3px;
+    width: 3px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    padding: 3px;
+    z-index: 1000;
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+}
+
+.olympus-dropdown-content {
+    position: fixed;
+    overflow: visible;
+    overflow-y: scroll;
+    background-color: #FFFD;
+    z-index: 2000;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+
+.olympus-dropdown-element {
+    margin: 2px;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    color: var(--background-color);
+    cursor: pointer;
+    opacity: 1;
+    font-size: 15px;
+}
+
+.olympus-dropdown-element:hover {
+    background-color: var(--highlight-color);
+}

client/public/stylesheets/panels.css

@@ -11,7 +11,7 @@
 	font-family: "Lucida Console", "Courier New", monospace !important;
 }
 
-.olympus-panel table{
+.olympus-panel table {
 	margin: 5px;
 	width: 100%;
 }
@@ -33,13 +33,3 @@
     color: var(--text-color);
     margin: 5px;
 }
-
-/* Panels position */
-#olympus-unit-info-panel {
-	height: 100px;
-    width: 800px;
-    left: 10px;
-    bottom: 10px;
-	z-index: 1000;
-	display: flex;
-}

client/public/stylesheets/style.css

@@ -1,4 +1,5 @@
 @import url("panels.css");
+@import url("dropdown.css");
 @import url("selectionwheel.css");
 @import url("selectionscroll.css");
 @import url("unitmarker.css");
@@ -25,9 +26,31 @@ html, body {
 	width: 100%;
 }
 
-#olympus-map-container
+#map-container
 {
   	height: 100%;
 	width: 100%;
 }
 
+#unit-info-panel {
+	height: 100px;
+    width: 800px;
+    left: 10px;
+    bottom: 10px;
+	z-index: 1000;
+	display: flex;
+}
+
+#scenario-dropdown {
+	position: fixed;
+	top: 10px;
+	left: 10px;
+	width: 250px;
+}
+
+#map-source-dropdown {
+	position: fixed;
+	top: 10px;
+	left: 280px;
+	width: 250px;
+}

client/src/controls/dropdown.ts

@@ -0,0 +1,67 @@
+export class Dropdown
+{
+    #container: HTMLElement | null;
+    #options: string[];    
+    #open?: boolean;
+    #content?: HTMLElement;
+    #callback?: CallableFunction;
+
+    constructor(ID: string, options: string[], callback: CallableFunction)
+    {
+        this.#container = document.getElementById(ID);
+        this.#options = options;
+        this.#callback = callback;
+        this.close()
+        this.#container?.addEventListener("click", () => {
+            this.#open ? this.close(): this.open();
+        })
+    }
+
+    open()
+    {
+        if (this.#container != null)
+        {
+            this.#open = true;
+            this.#container.classList.add("olympus-dropdown-open");
+            this.#container.classList.remove("olympus-dropdown-closed");
+            this.#content = document.createElement("div");
+            this.#content.classList.add("olympus-dropdown-content");
+            this.#content.style.width = (this.#container.offsetWidth - this.#container.offsetHeight) + "px";
+            
+            this.#content.style.left = this.#container.offsetLeft + "px";
+            this.#content.style.top = this.#container.offsetTop + this.#container.offsetHeight + "px";
+            console.log(this.#container);
+            document.body.appendChild(this.#content);
+
+            var height = 2;
+            for (let optionID in this.#options)
+            {
+                var node = document.createElement("div");
+                node.classList.add("olympus-dropdown-element");
+                node.appendChild(document.createTextNode(this.#options[optionID]));
+                this.#content.appendChild(node);
+                height += node.offsetHeight + 2;
+                node.addEventListener('click', () => {
+                    this.close();
+                    if (this.#container != null)
+                        this.#container.innerHTML = this.#options[optionID];
+                    if (this.#callback != null)
+                        this.#callback(this.#options[optionID])
+                })
+            }
+            this.#content.style.height = height + "px";
+        }
+    }
+
+    close()
+    {
+        if (this.#container != null)
+        {
+            this.#open = false;
+            this.#container?.classList.remove("olympus-dropdown-open");
+            this.#container?.classList.add("olympus-dropdown-closed");
+            if (this.#content != null)
+                document.body.removeChild(this.#content);
+        }
+    }
+}

client/src/index.ts

@@ -4,22 +4,27 @@ import { SelectionWheel } from "./controls/selectionwheel";
 import { UnitsManager } from "./units/unitsmanager";
 import { UnitInfoPanel } from "./panels/unitinfopanel";
 import { SelectionScroll } from "./controls/selectionscroll";
+import { Dropdown } from "./controls/dropdown";
 
 var map: Map;
 var selectionWheel: SelectionWheel;
 var selectionScroll: SelectionScroll;
 var unitsManager: UnitsManager;
 var unitInfoPanel: UnitInfoPanel;
-var activeCoalition: string
+var activeCoalition: string;
+var scenarioDropdown: Dropdown;
+var mapSourceDropdown: Dropdown;
 
 function setup()
 {
     /* Initialize */
-    map = new Map('olympus-map-container');
+    map = new Map('map-container');
     selectionWheel = new SelectionWheel("selection-wheel");
     selectionScroll = new SelectionScroll("selection-scroll");
     unitsManager = new UnitsManager();
-    unitInfoPanel = new UnitInfoPanel("olympus-unit-info-panel");
+    unitInfoPanel = new UnitInfoPanel("unit-info-panel");
+    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));
 
     /* Main update rate = 250ms is minimum time, equal to server update time. */
     setInterval(() => getDataFromDCS(update), 250);

client/src/map/map.ts

@@ -7,15 +7,15 @@ import { unitTypes } from "../units/unitTypes";
 export class Map extends L.Map 
 {
     #state: string;
+    #layer?: L.TileLayer;
 
-    constructor(containerId: string)
+    constructor(ID: string)
     {
         /* Init the leaflet map */
-        super(containerId, {doubleClickZoom: false});
+        super(ID, {doubleClickZoom: false, zoomControl: false});
         this.setView([37.23, -115.8], 12);
-        L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
-            attribution: "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
-        }).addTo(this);
+        
+        this.setLayer("ArcGIS Satellite");
 
         /* Init the state machine */
         this.#state = "IDLE";
@@ -26,6 +26,63 @@ export class Map extends L.Map
         this.on("dblclick", (e) => this.#onDoubleClick(e));
     }
 
+    setLayer(layerName: string)
+    {
+        if (this.#layer != null)
+        {   
+            this.removeLayer(this.#layer)
+        }
+        
+        if (layerName == "ArcGIS Satellite")
+        {
+            this.#layer = L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
+                attribution: "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
+            });
+        }
+        else if (layerName == "USGS Topo")
+        {
+            this.#layer = L.tileLayer('https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{z}/{y}/{x}', {
+                maxZoom: 20,
+                attribution: 'Tiles courtesy of the <a href="https://usgs.gov/">U.S. Geological Survey</a>'
+            });
+        }
+        else if (layerName == "OpenStreetMap Mapnik")
+        {
+            this.#layer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                maxZoom: 19,
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            });
+        }
+        else if (layerName == "OPENVKarte")
+        {
+            this.#layer = L.tileLayer('https://tileserver.memomaps.de/tilegen/{z}/{x}/{y}.png', {
+                maxZoom: 18,
+                attribution: 'Map <a href="https://memomaps.de/">memomaps.de</a> <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            });
+        }
+        else if (layerName == "Esri.DeLorme")
+        {
+            this.#layer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer/tile/{z}/{y}/{x}', {
+                attribution: 'Tiles &copy; Esri &mdash; Copyright: &copy;2012 DeLorme',
+                minZoom: 1,
+                maxZoom: 11
+            });
+        }
+        else if (layerName == "CyclOSM")
+        {
+            this.#layer = L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', {
+                maxZoom: 20,
+                attribution: '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> | Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            });
+        }
+        this.#layer?.addTo(this);
+    }
+
+    getLayers()
+    {
+        return ["ArcGIS Satellite", "USGS Topo", "OpenStreetMap Mapnik", "OPENVKarte", "Esri.DeLorme", "CyclOSM"]
+    }
+
     /* State machine */
     setState(state: string)
     {

client/views/index.ejs

@@ -7,11 +7,13 @@
 </head>
 
 <body>
-  <div id="olympus-map-container">
+  <div id="map-container">
     <%- include('unitinfo.ejs') %>  
   </div>
   <%- include('selectionwheel.ejs') %> 
   <%- include('selectionscroll.ejs') %>
+  <div class="olympus-dropdown" id="scenario-dropdown">Nevada</div>
+  <div class="olympus-dropdown" id="map-source-dropdown">Satellite</div>
   <script src="javascripts/bundle.js"></script>
 </body>
 

client/views/unitinfo.ejs

@@ -1,4 +1,4 @@
-<div class="olympus-panel" id="olympus-unit-info-panel">
+<div class="olympus-panel" id="unit-info-panel">
     <table>
         <tr>
             <td colspan="4" class="olympus-panel-title">