Continue migration to node express typescript

client/public/stylesheets/panels.css

@@ -0,0 +1,45 @@
+/* Panels style */
+.olympus-panel {
+    background-color: var(--background-color);
+    border: solid white 1px;
+    font-size: 12px;
+    position: fixed;
+    transition: bottom 0.2s;
+	border-radius: 5px;
+	text-shadow: 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
+	box-shadow: 0px 0px 10px #000000AA;
+	font-family: "Lucida Console", "Courier New", monospace !important;
+}
+
+.olympus-panel table{
+	margin: 5px;
+	width: 100%;
+}
+
+.olympus-panel-title {
+    font-size: 14px;
+    color: #d3e9ff;
+}
+
+.olympus-panel-label {
+    font-size: 12px;
+    color: var(--title-color);
+    margin: 5px;
+    width: 100px;
+}
+
+.olympus-panel-content {
+    font-size: 12px;
+    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/selectionscroll.css

@@ -0,0 +1,25 @@
+.olympus-selection-scroll-container {
+    margin: 0 auto;
+    position: fixed;
+    z-index: 1000;
+    width: 220px;
+    height: 220px;
+    overflow: visible;
+    overflow-y: scroll;
+    background-color: var(--background-color);
+    opacity: 0.8;
+}
+
+.olympus-selection-scroll-element {
+    margin: 2px;
+    color: white;
+    text-shadow: 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
+    cursor: pointer;
+    font-size: 12px;
+    opacity: 1;
+    font-family: "Lucida Console", "Courier New", monospace !important;
+}
+
+.olympus-selection-scroll-element:hover {
+    background-color: var(--highlight-color);
+}

client/public/stylesheets/selectionwheel.css

@@ -0,0 +1,104 @@
+.olympus-selection-wheel {
+    margin: 0;
+    position: fixed;
+    z-index: 1000;
+    width: 220px;
+    height: 220px;
+    overflow: visible;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.olympus-wheel {
+    width: 100%;
+    border-radius: 50%;
+    background-color: var(--active-coalition-color);
+    opacity: 0.8;
+    -webkit-mask: radial-gradient(transparent 30%,#000 31%);
+            mask: radial-gradient(transparent 30%,#000 31%);
+    transition: background-color 0.2s;
+}
+
+.olympus-wheel:before {
+    content: "";
+    display: block;
+    padding-top: 100%;
+}
+
+.selection-wheel-button {
+    position: fixed;
+    z-index: 1000;
+    width: 50px;
+    height: 50px;
+    opacity: 0;
+    /*transition: opacity var(--animation_duration), left var(--animation_duration), top var(--animation_duration);*/
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+
+.selection-wheel-image {
+    width: 45px;
+    height: 45px;
+    /*filter: invert(100%);*/
+    transition: width var(--animation_duration), height var(--animation_duration);
+    filter: drop-shadow(1px 1px 0px var(--highlight-color)) drop-shadow(1px -1px 0px var(--highlight-color)) drop-shadow(-1px 1px 0px var(--highlight-color)) drop-shadow(-1px -1px 0px var(--highlight-color));
+}
+
+.selection-wheel-button:hover {
+    filter: drop-shadow(1px 1px 2px var(--highlight-color)) drop-shadow(1px -1px 2px var(--highlight-color)) drop-shadow(-1px 1px 2px var(--highlight-color)) drop-shadow(-1px -1px 2px var(--highlight-color));
+}
+
+.selection-wheel-button:hover .selection-wheel-image {
+    width: 50px;
+    height: 50px;
+    /*filter: invert(21%) sepia(23%) saturate(775%) hue-rotate(170deg) brightness(92%) contrast(90%);*/
+}
+
+.olympus-selection-wheel label {
+    width: 0;
+    height: 0;
+}
+
+.olympus-selection-wheel input {
+    width: 0;
+    height: 0;
+}
+
+.olympus-selection-wheel-switch {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+    background-color: #fffa;
+    border: 1px solid var(--active-coalition-color);
+    border-radius: 17px;
+    margin-left: -30px;
+    margin-top: -17px;
+    cursor: pointer;
+}
+
+.olympus-selection-wheel-switch:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: var(--active-coalition-color);
+    -webkit-transition: 0.2s;
+    transition: 0.2s;
+    border-radius: 50%;
+    
+}
+
+input:checked + .olympus-selection-wheel-switch:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}

client/public/stylesheets/style.css

@@ -1,8 +1,17 @@
+@import url("panels.css");
+@import url("selectionwheel.css");
+@import url("selectionscroll.css");
+@import url("unitmarker.css");
+
 /* Variables definitions */
 :root {
     --background-color:#202831;
 	--title-color:#d3e9ff;
 	--text-color:white;
+    --blue-coalition-color: #2196F3;
+    --red-coalition-color: #f32121;
+    --active-coalition-color: var(--blue-coalition-color);
+    --highlight-color: #FFFFFFAA;
 }
 
 /* Page style */
@@ -22,48 +31,3 @@ html, body {
 	width: 100%;
 }
 
-/* Panels style */
-.olympus-panel {
-    background-color: var(--background-color);
-    border: solid white 1px;
-    font-size: 12px;
-    position: fixed;
-    transition: bottom 0.2s;
-	border-radius: 5px;
-	text-shadow: 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
-	box-shadow: 0px 0px 10px #000000AA;
-	font-family: "Lucida Console", "Courier New", monospace !important;
-}
-
-.olympus-panel table{
-	margin: 5px;
-	width: 100%;
-}
-
-.olympus-panel-title {
-    font-size: 14px;
-    color: #d3e9ff;
-}
-
-.olympus-panel-label {
-    font-size: 12px;
-    color: var(--title-color);
-    margin: 5px;
-    width: 100px;
-}
-
-.olympus-panel-content {
-    font-size: 12px;
-    color: var(--text-color);
-    margin: 5px;
-}
-
-/* Panels position */
-#olympus-unit-info {
-	height: 100px;
-    width: 800px;
-    left: 10px;
-    bottom: 10px;
-	z-index: 1000;
-	display: flex;
-}

client/public/stylesheets/unitmarker.css

@@ -0,0 +1,95 @@
+.unit-marker-container {
+    height: 60px; 
+    width: 60px; 
+    left: -30px; 
+    top: -30px; 
+    border: 0px black solid; 
+    position: absolute;
+    padding: 0;
+	margin: 0;
+    border-collapse: collapse;
+}
+
+.unit-marker-icon {
+    height: 60px;
+    width: 60px; 
+    left: 0px; 
+    top: 0px; 
+    display: flex; 
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+}
+
+.unit-marker-icon img {
+    height: 30px;
+}
+
+.unit-marker-selected {
+    animation-name: flash;
+    animation-duration: 0.3s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-timing-function: linear;
+}
+
+@keyframes flash {
+      from {filter: brightness(100%); }
+      to {filter: brightness(130%);}
+    }
+
+.unit-marker-hovered {
+    filter: brightness(130%);
+}
+
+.unit-marker-container-table-dead {
+    filter: brightness(50%);   
+}
+
+.unit-marker-unitName {
+    top: -20px; 
+    position: absolute; 
+    text-align: center; 
+    font: 800 16px Arial; 
+    white-space: nowrap;
+    -webkit-text-fill-color: white; 
+    -webkit-text-stroke: 1px;
+}
+
+.unit-marker-name {
+    bottom: -20px; 
+    position: absolute; 
+    text-align: center; 
+    font: 800 14px Arial; 
+    white-space: nowrap;
+    -webkit-text-fill-color: white; 
+    -webkit-text-stroke: 1px;
+}
+
+.unit-marker-altitude {
+    width: 100%; 
+    left: 0px; 
+    top: 0px; 
+    position: absolute; 
+    text-align: right; 
+    font: 800 12px Arial; 
+    white-space: nowrap;
+    -webkit-text-fill-color: white; 
+    -webkit-text-stroke: 1px;
+}
+
+.unit-marker-speed {
+    width: 100%; 
+    left: 0px; 
+    top: 0px; 
+    position: absolute; 
+    text-align: left; 
+    font: 800 12px Arial; 
+    white-space: nowrap;
+    -webkit-text-fill-color: white; 
+    -webkit-text-stroke: 1px;
+}
+
+.unit-marker-container-table-dead .unit-marker-name{
+    opacity: 0;
+}