Merge pull request #634 from Pax1601/minor-refactoring

Minor refactoring
2025-10-29 16:56:34 +00:00 · 2023-12-02 12:37:55 +01:00 · 2023-12-02 12:37:55 +01:00 · 0ca7766689
commit 0ca7766689
parent 4342575418 4cdb73a60d
22 changed files with 420 additions and 93 deletions
--- a/client/demo.js
+++ b/client/demo.js
@ -92,7 +92,7 @@ class DemoDataGenerator {
        }
        

-        /*
+        */
        let idx = 1;
        DEMO_UNIT_DATA[idx] = JSON.parse(JSON.stringify(baseData));
        DEMO_UNIT_DATA[idx].name = "S_75M_Volhov";
@ -153,7 +153,7 @@ class DemoDataGenerator {
        DEMO_UNIT_DATA[idx].position.lat += idx / 100;
        DEMO_UNIT_DATA[idx].category = "Aircraft";
        DEMO_UNIT_DATA[idx].isLeader = true;
-        */
+        

        this.startTime = Date.now();
    }
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -19,7 +19,8 @@
        "leaflet-gesture-handling": "^1.2.2",
        "morgan": "~1.9.1",
        "save": "^2.9.0",
-        "srtm-elevation": "^2.1.2"
+        "srtm-elevation": "^2.1.2",
+        "uuid": "^9.0.1"
      },
      "devDependencies": {
        "@babel/preset-env": "^7.21.4",
@ -8820,6 +8821,18 @@
        "node": ">= 0.4.0"
      }
    },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
    "node_modules/vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
--- a/client/package.json
+++ b/client/package.json
@ -25,7 +25,8 @@
    "leaflet-gesture-handling": "^1.2.2",
    "morgan": "~1.9.1",
    "save": "^2.9.0",
-    "srtm-elevation": "^2.1.2"
+    "srtm-elevation": "^2.1.2",
+    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.21.4",
--- a/client/public/stylesheets/markers/airbase.css
+++ b/client/public/stylesheets/markers/airbase.css
@ -4,6 +4,8 @@
    display: flex;
    justify-content: center;
    position: relative;
+    width: 100%;
+    height: 100%;
 }

 .airbase-icon[data-coalition="red"] svg * {
--- a/client/public/stylesheets/markers/bullseye.css
+++ b/client/public/stylesheets/markers/bullseye.css
@ -4,6 +4,8 @@
    display: flex;
    justify-content: center;
    position: relative;
+    width: 100%;
+    height: 100%;
 }

 .bullseye-icon[data-coalition="red"] svg * {
--- a/client/public/stylesheets/markers/units.css
+++ b/client/public/stylesheets/markers/units.css
@ -50,6 +50,11 @@
    width: var(--unit-width);
 }

+.unit-icon svg {
+    height: 100%;
+    width: 100%;
+}
+
 [data-is-selected] .unit-icon::before {
    background-color: var(--unit-spotlight-fill);
    border-radius: 50%;
--- a/client/public/stylesheets/other/contextmenus.css
+++ b/client/public/stylesheets/other/contextmenus.css
@ -61,9 +61,13 @@

 .contextmenu-advanced-options-toggle:after,
 .contextmenu-metadata-toggle:after {
-    content: url(/resources/theme/images/icons/chevron-down.svg);
+    content: "";
    margin-left: auto;
    margin-top: auto;
+    background-image: url(/resources/theme/images/icons/chevron-down.svg);
+    background-size: 100% 100%;
+    width: 15px;
+    height: 15px;
 }

 .contextmenu-advanced-options-toggle.is-open:after,
@ -407,84 +411,124 @@

 /*  Buttons  */
 #center-map::before {
-    content: url("/resources/theme/images/icons/arrows-to-eye-solid.svg");
+    background-image: url("/resources/theme/images/icons/arrows-to-eye-solid.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #refuel::before {
-    content: url("/resources/theme/images/icons/fuel.svg");
+    background-image: url("/resources/theme/images/icons/fuel.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #attack::before {
-    content: url("/resources/theme/images/icons/sword.svg");
+    background-image: url("/resources/theme/images/icons/sword.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #bomb::before {
-    content: url("/resources/theme/images/icons/crosshairs-solid.svg");
+    background-image: url("/resources/theme/images/icons/crosshairs-solid.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #carpet-bomb::before {
-    content: url("/resources/theme/images/icons/explosion-solid.svg");
+    background-image: url("/resources/theme/images/icons/explosion-solid.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #fire-at-area::before {
-    content: url("/resources/theme/images/icons/crosshairs-solid.svg");
+    background-image: url("/resources/theme/images/icons/crosshairs-solid.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #simulate-fire-fight::before {
-    content: url("/resources/theme/images/icons/crosshairs-solid.svg");
+    background-image: url("/resources/theme/images/icons/crosshairs-solid.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #follow::before {
-    content: url("/resources/theme/images/icons/follow.svg");
+    background-image: url("/resources/theme/images/icons/follow.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #scenic-aaa::before {
-    content: url("/resources/theme/images/icons/scenic.svg");
+    background-image: url("/resources/theme/images/icons/scenic.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #miss-aaa::before {
-    content: url("/resources/theme/images/icons/miss.svg");
+    background-image: url("/resources/theme/images/icons/miss.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #group-ground::before {
-    content: url("/resources/theme/images/icons/group-ground.svg");
+    background-image: url("/resources/theme/images/icons/group-ground.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #group-navy::before {
-    content: url("/resources/theme/images/icons/group-navy.svg");
+    background-image: url("/resources/theme/images/icons/group-navy.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #land-at-point::before {
-    content: url("/resources/theme/images/icons/land-at-point.svg");
+    background-image: url("/resources/theme/images/icons/land-at-point.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #trail::before {
-    content: url("/resources/theme/images/icons/trail.svg");
+    background-image: url("/resources/theme/images/icons/trail.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #echelon-lh::before {
-    content: url("/resources/theme/images/icons/echelon-lh.svg");
+    background-image: url("/resources/theme/images/icons/echelon-lh.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #echelon-rh::before {
-    content: url("/resources/theme/images/icons/echelon-rh.svg");
+    background-image: url("/resources/theme/images/icons/echelon-rh.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #line-abreast-rh::before,
 #line-abreast-lh::before {
-    content: url("/resources/theme/images/icons/line-abreast.svg");
+    background-image: url("/resources/theme/images/icons/line-abreast.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #front::before {
-    content: url("/resources/theme/images/icons/front.svg");
+    background-image: url("/resources/theme/images/icons/front.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #diamond::before {
-    content: url("/resources/theme/images/icons/diamond.svg");
+    background-image: url("/resources/theme/images/icons/diamond.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #custom::before {
-    content: url("/resources/theme/images/icons/custom.svg");
+    background-image: url("/resources/theme/images/icons/custom.svg");
+    content: "";
+	background-size: 20px 20px;
 }

 #custom-formation-dialog {
--- a/client/public/stylesheets/panels/logpanel.css
+++ b/client/public/stylesheets/panels/logpanel.css
@ -27,7 +27,6 @@
 	display: block;
 }

-
 #log-panel-header-right {
    align-items: center;
    column-gap: 16px;
@ -35,6 +34,11 @@
    flex-flow: row nowrap;
 }

+#log-panel-header-right svg {
+    width: 15px;
+    height: 15px;
+}
+
 #server-status-panel abbr {
 	text-decoration: none;
 }
--- a/client/public/stylesheets/panels/unitcontrol.css
+++ b/client/public/stylesheets/panels/unitcontrol.css
@ -6,60 +6,69 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 #roe-buttons-container button,
 #reaction-to-threat-buttons-container button,
 #emissions-countermeasures-buttons-container button,
-#shots-scatter-buttons-container button
-#shots-intensity-buttons-container button {
-    align-items: center;
-    background-color: transparent;
-    border: 1px solid var(--accent-light-blue);
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    width: 30px;
+#shots-scatter-buttons-container button #shots-intensity-buttons-container button {
+	align-items: center;
+	background-color: transparent;
+	border: 1px solid var(--accent-light-blue);
+	display: flex;
+	height: 30px;
+	justify-content: center;
+	width: 30px;
 }

 #reaction-to-threat-buttons-container button:not(:first-child) svg {
-    width: 150%;
-    margin: -5px;
+	width: 150%;
+	margin: -5px;
+}
+
+#unit-control-panel .ol-option-button button {
+	width: 30px;
+	height: 30px;
+}
+
+#unit-control-panel .ol-option-button svg {
+	width: 100%;
+	height: 100%;
 }

 #unit-control-panel .ol-option-button button.selected {
-    background-color: white;
-    border-color: white;
+	background-color: white;
+	border-color: white;
 }

 #unit-control-panel .ol-option-button button.selected svg * {
-    fill: var(--background-steel);
-    stroke: var(--background-steel);
+	fill: var(--background-steel);
+	stroke: var(--background-steel);
 }

 #rapid-controls {
-    display: flex;
-    flex-direction: column;
-    row-gap: 5px;
-    height: fit-content;
-    width: fit-content;
+	display: flex;
+	flex-direction: column;
+	row-gap: 5px;
+	height: fit-content;
+	width: fit-content;
 }

 #rapid-controls button {
-    padding: 4px;
+	padding: 4px;
 }

 #rapid-controls button.pulse {
-    animation: pulse 1.5s linear infinite;
+	animation: pulse 1.5s linear infinite;
 }

 #rapid-controls svg {
-    height: 20px;
-    width: 20px;
-    fill: white;
-    stroke: white;
+	height: 20px;
+	width: 20px;
+	fill: white;
+	stroke: white;
 }

 #rapid-controls button:before {
-    display: inline-block;
-    filter: invert(100%);
-    height: 20px;
-    width: 20px;
+	display: inline-block;
+	filter: invert(100%);
+	height: 20px;
+	width: 20px;
 }

 #unit-control-panel {
@ -109,7 +118,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 		width: fit-content;
 	}

-    #unit-control-panel:not(:hover)>*:nth-child(2),
+	#unit-control-panel:not(:hover)>*:nth-child(2),
 	#unit-control-panel:not(:hover)>*:nth-child(3) {
 		display: none;
 	}
@ -196,7 +205,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 }

 #advanced-settings-dialog>.ol-dialog-content>div input[type="number"] {
-    width: 60px;
+	width: 60px;
 }

 #advanced-settings-dialog hr {
@ -266,7 +275,6 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	width: 40px;
 }

-
 .ol-slider-value {
 	color: var(--accent-light-blue);
 	cursor: pointer;
@ -276,13 +284,15 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {

 .switch-control {
 	align-items: center;
+	align-content: center;
 	display: flex;
 	width: 100%;
 	justify-content: space-between;
 }

 .switch-control h4 {
-	margin: 0px;
+	margin: 0px !important;
+	padding: 0px;
 	display: flex;
 	align-items: center;
 }
@ -303,30 +313,30 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	position: relative;
 }

-#advanced-settings-div > button {
+#advanced-settings-div>button {
 	background-color: var(--background-grey);
-    box-shadow: 0px 2px 5px #000A;
-	font-size:13px;
+	box-shadow: 0px 2px 5px #000A;
+	font-size: 13px;
 	height: 40px;
-	padding:0 20px;
+	padding: 0 20px;
 }

 #delete-options {
-	font-size:13px;
+	font-size: 13px;
 }

-#delete-options.ol-select > .ol-select-value:after {
+#delete-options.ol-select>.ol-select-value:after {
 	content: "";
 }

-#delete-options.ol-select > .ol-select-value svg {
+#delete-options.ol-select>.ol-select-value svg {
 	background-color: transparent;
 	position: absolute;
-	right:2px;
-	translate:0 1px;
+	right: 2px;
+	translate: 0 1px;
 }

-#delete-options.ol-select > .ol-select-value svg * {
+#delete-options.ol-select>.ol-select-value svg * {
 	fill: var(--primary-red);
 }

@ -334,21 +344,21 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	background-color: var(--background-steel);
 }

-#delete-options.ol-select > .ol-select-value:hover,
-#delete-options .ol-select-options > div:not(.hr):hover,
-#delete-options .ol-select-options > div:not(.hr):hover button,
-#delete-options .ol-select-options > div hr {
+#delete-options.ol-select>.ol-select-value:hover,
+#delete-options .ol-select-options>div:not(.hr):hover,
+#delete-options .ol-select-options>div:not(.hr):hover button,
+#delete-options .ol-select-options>div hr {
 	background-color: var(--background-grey);
 }

-#delete-options .ol-select-options > div:first-of-type {
-	margin-top:12px;
-	padding-top:0;
+#delete-options .ol-select-options>div:first-of-type {
+	margin-top: 12px;
+	padding-top: 0;
 }

-#delete-options .ol-select-options > div:last-of-type {
-	margin-bottom:12px;
-	padding-bottom:0;
+#delete-options .ol-select-options>div:last-of-type {
+	margin-bottom: 12px;
+	padding-bottom: 0;
 }

 #delete-options button {
@ -389,4 +399,4 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 #advanced-settings-dialog:not([data-show-radio]) #radio-options,
 #advanced-settings-dialog:not([data-show-air-unit-checkboxes]) .air-unit-checkbox {
 	display: none;
-}
+}
--- a/client/public/stylesheets/panels/unitinfo.css
+++ b/client/public/stylesheets/panels/unitinfo.css
@ -146,12 +146,12 @@
 }

 #fuel-percentage::before {
-	content: url("/resources/theme/images/icons/fuel.svg");
+	content: "";
+	background-image: url("/resources/theme/images/icons/fuel.svg");
+	background-size: 16px 16px;
 	display: inline-block;
 	filter: invert(100%);
-	height: 16px;
 	margin-right: 6px;
-	width: 16px;
 }

 #fuel-percentage::after {
--- a/client/public/stylesheets/style/style.css
+++ b/client/public/stylesheets/style/style.css
@ -206,9 +206,17 @@ button svg.fill-coalition[data-coalition="red"] * {
 }

 .ol-select:not(.ol-select-image)>.ol-select-value:after {
-    content: url("/resources/theme/images/icons/chevron-down.svg");
+    background-image: url("/resources/theme/images/icons/chevron-down.svg");
+    content: "";
    position: absolute;
    right: 10px;
+    width: 15px;
+    height: 15px;
+    background-size: 100% 100%;
+}
+
+.ol-select:not(.ol-select-image)>.ol-select-value.ol-select-warning:after {
+    background-image: url("/resources/theme/images/icons/chevron-down-warning.svg") !important;
 }

 .ol-select.is-open:not(.ol-select-image)>.ol-select-value:after {
@ -441,6 +449,7 @@ nav.ol-panel> :last-child {
    -webkit-filter: invert(100%);
    height: 16px;
    width: 16px;
+    background-size: 100% 100%;
 }

 .ol-panel .ol-group-button-toggle button.off::before {
@ -1328,7 +1337,7 @@ dl.ol-data-grid dd {
    align-content: center;
    border-top: 1px solid var(--background-grey);
    display: flex;
-    justify-content: center;
+    justify-content: flex-end;
    padding-top: 15px;
    row-gap: 10px;
 }
@ -1362,6 +1371,7 @@ dl.ol-data-grid dd {
    height: 16px;
    margin-right: 10px;
    width: 16px;
+    background-size: 100% 100%;
 }

 .ol-checkbox input[type="checkbox"]:disabled:before {
--- a/client/public/themes/olympus/images/icons/chevron-down-warning.svg
+++ b/client/public/themes/olympus/images/icons/chevron-down-warning.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="#ff5858"/>
+</svg>
--- a/client/public/themes/olympus/images/parrot/parrot.png
+++ b/client/public/themes/olympus/images/parrot/parrot.png
--- a/client/public/themes/parrot/images/parrot.svg
+++ b/client/public/themes/parrot/images/parrot.svg
@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 460 460" xml:space="preserve">
+<g id="XMLID_2582_">
+	<path id="XMLID_4_" style="fill:#871A27;" d="M353.16,459.97L353.16,459.97c-32.138-3.383-61.944-18.336-83.849-42.066
+		L65.784,206.343c-6.885-7.157-3.266-19.083,6.439-21.217l26.729-5.878l258.429,272.378
+		C360.487,455.023,357.74,460.452,353.16,459.97z"/>
+	<path id="XMLID_2108_" style="fill:#A52531;" d="M403.222,459.97L403.222,459.97c-32.138-3.383-61.944-18.336-83.849-42.066
+		L100.124,190l48.891-10.752l258.429,272.378C410.549,455.023,407.802,460.452,403.222,459.97z"/>
+	<path id="XMLID_2018_" style="fill:#CC3248;" d="M454.455,459.97L454.455,459.97c-32.138-3.383-61.944-18.336-83.849-42.066
+		L151.357,190l48.891-10.752l258.429,272.378C461.782,455.023,459.035,460.452,454.455,459.97z"/>
+	<path id="XMLID_2391_" style="fill:#C1A991;" d="M280.347,380h-80.099l-9.48,37.873C188.984,425,182.572,430,175.217,430
+		s-13.767-5-15.551-12.127L150.186,380h-0.277c-40.008,0-73.881-29.485-79.348-69.069L44.112,119.414
+		C30.376,116.668,20.025,104.544,20.025,90H0c0-20.678,15.692-37.69,35.817-39.781C35.079,22.989,56.998,0,84.812,0l0,0
+		c21.102,0,39.837,13.487,46.51,33.481l0.617,1.848c8.632,25.864,26.455,47.418,49.597,61.877
+		c8.184,5.113,15.785,13.683,19.63,27.974L280.347,380z"/>
+	<path id="XMLID_2087_" style="fill:#473C3F;" d="M180.223,420v10v10v5c0,8.284-6.724,15-15.019,15h-50.062
+		c-2.765,0-5.006-2.239-5.006-5l0,0c0-8.284,6.724-15,15.019-15h35.043c5.53,0,10.012-4.477,10.012-10v-10H180.223z"/>
+	<path id="XMLID_1701_" style="fill:#9B1C2B;" d="M280.347,380h-80.099l-9.48,37.873C188.984,425,182.572,430,175.217,430
+		s-13.767-5-15.551-12.127L150.186,380h-0.277c-40.008,0-73.881-29.485-79.348-69.069L44.112,119.414L30.382,90H52.77
+		c4.803,0,9.541-1.117,13.837-3.262l16.413-8.197c10.482-5.234,17.103-15.935,17.103-27.639C100.124,33.835,86.272,20,69.184,20
+		H45.307C54.179,7.937,68.475,0,84.812,0l0,0c21.102,0,39.837,13.487,46.51,33.481l0.617,1.848
+		c8.632,25.864,26.455,47.418,49.597,61.877c8.184,5.113,15.785,13.683,19.63,27.974L280.347,380z"/>
+	<path id="XMLID_2389_" style="fill:#8C735D;" d="M40.05,90l4.062,29.414C30.376,116.668,20.025,104.544,20.025,90H0
+		c0-3.454,0.447-6.803,1.27-10h37.667L40.05,90z"/>
+	<path id="XMLID_1631_" style="fill:#AF8F6D;" d="M40.05,90H0c0-20.676,15.688-37.686,35.81-39.781
+		c0.037,1.375,0.121,2.759,0.276,4.154L40.05,90z"/>
+	<path id="XMLID_2088_" style="fill:#66313A;" d="M70.087,45c0,2.761-2.241,5-5.006,5s-5.006-2.239-5.006-5s2.241-5,5.006-5
+		C67.845,40,70.087,42.239,70.087,45z"/>
+	<path id="XMLID_1864_" style="fill:#720C1F;" d="M150.186,380h50.062l-5.006,20h-40.049L150.186,380z"/>
+	<path id="XMLID_1836_" style="fill:#720C1F;" d="M331.261,397.796L246.772,194.5c-19.25-46.319-62.419-73.992-106.431-68.225
+		l-33.801,4.429c-6.283,0.823-10.071,7.378-7.641,13.223l82.08,197.501c19.25,46.32,62.419,73.992,106.431,68.226l40.03-5.245
+		C330.582,403.996,332.476,400.719,331.261,397.796z"/>
+	<path id="XMLID_1924_" style="fill:#871A27;" d="M349.271,380.344l-39.554,8.084c-43.488,8.888-88.523-15.638-111.033-60.467
+		l-95.979-191.149c-2.841-5.657,0.469-12.465,6.677-13.734l33.398-6.826c43.488-8.888,88.523,15.638,111.033,60.468l98.796,196.758
+		C354.03,376.305,352.375,379.709,349.271,380.344z"/>
+	<path id="XMLID_1905_" style="fill:#A52531;" d="M351.863,378.865c-39.327,2.272-78.009-21.643-98.331-62.115l-73.749-146.618
+		c-1.957-3.897-0.994-8.339,1.823-11.141c37.969-0.535,74.788,23.122,94.439,62.258l76.565,152.227
+		C353.548,375.345,353.139,377.459,351.863,378.865z"/>
+	<path id="XMLID_1810_" style="fill:#82542E;" d="M349.27,380.344L310.841,385c-43.488,8.888-89.648-12.21-112.158-57.04
+		l-66.414-132.268c34.538,30.088,78.926,43.67,122.276,34.81l23.828-4.87l74.236,147.845
+		C354.029,376.305,352.374,379.709,349.27,380.344z"/>
+	<path id="XMLID_1705_" style="fill:#684627;" d="M351.864,378.865c-0.656,0.723-1.538,1.263-2.592,1.479l-39.307,6.781
+		c-43.488,8.888-88.77-14.335-111.28-59.165l-66.414-132.268c22.958,20,50.271,32.696,78.737,36.365l42.526,84.693
+		C273.856,357.223,312.537,381.137,351.864,378.865z"/>
+	<path id="XMLID_1636_" style="fill:#385056;" d="M349.27,380.344l-39.554,8.084c-43.488,8.888-88.523-15.638-111.033-60.467
+		l-21.17-42.161c28.416,19.045,62.146,26.827,95.205,20.07l41.667-8.516l38.223,76.123
+		C354.029,376.305,352.374,379.709,349.27,380.344z"/>
+	<path id="XMLID_1807_" style="fill:#446772;" d="M249.716,308.257c7.802-0.018,15.644-0.792,23.45-2.388l41.667-8.516
+		l38.223,76.123c0.594,1.184,0.644,2.466,0.281,3.606c-0.209,0.65-0.552,1.254-1.012,1.765c-0.005,0.006-0.01,0.012-0.016,0.018
+		c-39.326,2.271-78.007-21.643-98.329-62.115L249.716,308.257z"/>
+</g>
+</svg>
--- a/client/public/themes/parrot/theme.css
+++ b/client/public/themes/parrot/theme.css
@ -0,0 +1,109 @@
+:root {
+    /**  Colours  **/
+
+    /*** Coalition: neutral  ***/
+    --primary-neutral: #949ba7;
+    --secondary-neutral-outline: #111111;
+    --secondary-neutral-text: #111111;
+    --unit-background-neutral: #CFD9E8;
+
+    /*** Coalition: blue  ***/
+    --primary-blue: #247be2;
+    --secondary-blue-outline: #082e44;
+    --secondary-blue-text: #017DC1;
+    --unit-background-blue: #3BB9FF;
+
+    /*** Coalition: red  ***/
+    --primary-red: #ff5858;
+    --secondary-red-outline: #262222;
+    --secondary-red-text: #D42121;
+    --unit-background-red: #FF5858;
+
+    /*** UI Colours **/
+    --accent-amber: #ffd828;
+    --accent-green: #8bff63;
+    --accent-light-blue: #5ca7ff;
+    --accent-dark-blue: #017DC1;
+    --transparent-accent-light-blue: rgba(92, 167, 255, .33);
+    --accent-light-red: #F5B6B6;
+
+    --background-grey: #3d4651;
+    --background-slate-blue: #363c43;
+    --background-offwhite: #f2f2f3;
+    --background-steel: #202831;
+
+    --secondary-dark-steel: #181e25;
+    --secondary-gunmetal-grey: #2f2f2f;
+    --secondary-lighter-grey: #949ba7;
+    --secondary-light-grey: #797e83;
+    --secondary-semitransparent-white: #FFFFFFAA;
+    --secondary-transparent-white: #FFFFFF30;
+    --secondary-yellow: #ffd46893;
+
+    --background-hover: #f2f2f333;
+
+    --nav-text: #ECECEC;
+
+    --ol-select-secondary: #545F6C;
+    --ol-switch-off:#686868;
+    --ol-switch-undefined:#383838;
+
+    /*** General border radii  **/
+    --border-radius-xs: 2px;
+    --border-radius-sm: 5px;
+    --border-radius-md: 10px;
+    --border-radius-lg: 15px;
+
+    /***  Fonts  **/
+    --font-weight-bolder: 600;
+
+    /***  Unit marker settings  ***/
+    /***   All markers  **/
+    --unit-border-radius: var(--border-radius-xs);
+    --unit-font-size: 14px;
+    --unit-font-weight: bolder;
+    --unit-label-border-width: 2px;
+    --unit-spotlight-fill: var(--secondary-yellow);
+    --unit-spotlight-radius: 26px;
+    --unit-stroke-width: 3px;
+    --unit-height: 50px;
+    --unit-width: 50px;
+
+    --unit-health-border-width: 2px;
+    --unit-health-height: 6px;
+    --unit-health-width: 36px;
+    --unit-health-x: 0px;
+    --unit-health-y: 26px;
+
+    /***  Air units  ***/
+    --unit-ammo-gap: calc(2px + var(--unit-stroke-width));
+    --unit-ammo-border-radius: 50%;
+    --unit-ammo-border-width: 2px;
+    --unit-ammo-radius: 2px;
+    --unit-ammo-spacing: 2px;
+    --unit-ammo-x: 0px;
+    --unit-ammo-y: 30px;
+    --unit-fuel-border-width: 2px;
+    --unit-fuel-height: 6px;
+    --unit-fuel-width: 36px;
+    --unit-fuel-x: 0px;
+    --unit-fuel-y: 22px;
+    --unit-vvi-width: 4px;
+}
+
+* {
+    font-weight:600;
+}
+
+svg {
+	animation: spin linear infinite 1s;
+}
+
+@keyframes spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(360deg);
+    }
+}
--- a/client/routes/resources.js
+++ b/client/routes/resources.js
@ -1,11 +1,42 @@
 const express = require('express');
 const router = express.Router();
+const { v4: uuidv4 } = require('uuid');

-// TODO should be user selectable or at least configurable from configuration file
-var theme = "olympus";
+var themesMap = {};

 router.get('/theme/*', function (req, res, next) {
-    res.redirect(req.url.replace("theme", "themes/" + theme));
+    /* If this is the first time this session makes a request, create a uuid and save it to the map. Default theme is the olympus theme */
+    if (!req.cookies.id) {
+        const id = uuidv4();
+        res.cookie('id', id, { httpOnly: true });
+        themesMap[id] = "olympus";
+        reqTheme = "olympus";
+    }
+    else {
+        /* If it is present, recover the session theme from the map */
+        if (!(req.cookies.id in themesMap)) 
+            themesMap[req.cookies.id] = "olympus";
+        reqTheme = themesMap[req.cookies.id];
+    }
+    
+    /* Yes, this in an easter egg! :D Feel free to ignore it, or activate the parrot theme to check what it does. Why parrots? The story is a bit long, come to the Discord and ask :D */
+    if (reqTheme === "parrot" && !req.url.includes(".css"))
+        res.redirect('/themes/parrot/images/parrot.svg');
+    else
+        res.redirect(req.url.replace("theme", "themes/" + reqTheme));
+});
+
+router.put('/theme/:newTheme', function (req, res, next) {
+    /* Add the theme to the map, if this session already has an id */
+    const newTheme = req.params.newTheme;
+    if (req.cookies.id) {
+        themesMap[req.cookies.id] = newTheme;
+        console.log("Theme set to " + newTheme + " for session " + req.cookies.id);
+    } else {  
+        console.log("Failed to set theme to " + newTheme + ", no session id");
+    }
+
+    res.end("Ok");
 });

 module.exports = router;
--- a/client/src/olympusapp.ts
+++ b/client/src/olympusapp.ts
@ -53,7 +53,6 @@ export class OlympusApp {
    #weaponsManager: WeaponsManager | null = null;

    constructor() {
-
    }

    // TODO add checks on null
--- a/client/src/server/servermanager.ts
+++ b/client/src/server/servermanager.ts
@ -12,7 +12,7 @@ export class ServerManager {
    #connected: boolean = false;
    #paused: boolean = false;
    #REST_ADDRESS = "http://localhost:30000/olympus";
-    #DEMO_ADDRESS = window.location.href + "demo";
+    #DEMO_ADDRESS = window.location.href.split('?')[0] + "demo"; /* Remove query parameters */
    #username = "";
    #password = "";
    #sessionHash: string | null = null;
@ -105,7 +105,7 @@ export class ServerManager {

    getConfig(callback: CallableFunction) {
        var xmlHttp = new XMLHttpRequest();
-        xmlHttp.open("GET", window.location.href + "config", true);
+        xmlHttp.open("GET", window.location.href.split('?')[0] + "config", true);
        xmlHttp.onload = function (e) {
            var data = JSON.parse(xmlHttp.responseText);
            callback(data);
--- a/client/views/index.ejs
+++ b/client/views/index.ejs
@ -1,5 +1,17 @@
 <html>

+<script>
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+  const theme = urlParams.get('theme');
+  if (theme != undefined) {
+      var xmlHttp = new XMLHttpRequest();
+      xmlHttp.open("PUT", "/resources/theme/" + theme);
+      xmlHttp.send("");
+      console.log("Setting theme to " + theme)
+  } 
+</script> 
+
 <head>
  <title>Olympus client</title>
  <link rel="stylesheet" type="text/css" href="stylesheets/olympus.css" />
--- a/client/views/panels/unitcontrol.ejs
+++ b/client/views/panels/unitcontrol.ejs
@ -112,7 +112,6 @@
            <div id="delete-options" class="ol-select">
                <div class="ol-select-value ol-select-warning">
                    Delete unit
-                    <img src="/resources/theme/images/icons/chevron-down.svg" inject-svg />
                </div>
                <div class="ol-select-options">
                    <div><button class="ol-button-white" data-on-click="deleteSelectedUnits" title="Immediately remove the unit from the simulation"><img src="/resources/theme/images/icons/trash-can-regular.svg" inject-svg>Delete</button></div>
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,24 @@
+{
+  "name": "DCSOlympus",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "uuid": "^9.0.1"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "uuid": "^9.0.1"
+  }
+}