UI Kit rework of planes. Added tabs.

client/public/stylesheets/olympus.css

@@ -12,8 +12,10 @@
     --secondary-dark-steel    : #181e25;
     --secondary-gunmetal-grey : #2f2f2f;
     --secondary-light-grey    : #797e83;
+    --secondary-neutral       : #111111;
     --secondary-red-outline   : #262222;
     --secondary-yellow        : #ffd46893;
+    --nav-text : #ECECEC;
 
     
     --border-radius-xs : 2px;
@@ -23,23 +25,38 @@
     
     --font-weight-bolder : 600;
 
-}
 
-:rootOLD {
+    /*  Generic marker settings  */
-	--active-coalition-color: var(--blue-coalition-color);
+    --unit-marker-border-radius: 3px;
-	--background-color-dark: #202831;
+    --unit-marker-centre-x: calc( var( --unit-marker-width ) / 2 );
-	--background-color-light: #AAA;
+    --unit-marker-centre-y: calc( var( --unit-marker-height ) / 2 );
-    --border-radius-sm:5px;
+    --unit-marker-font-size: 12px;
-    --border-radius-md:10px;
+    --unit-marker-font-weight: bold;
-    --border-radius-lg:15px;
+    --unit-marker-height: 80px;
-	--blue-coalition-color: #247be2;
+    --unit-marker-spotlight-fill: var( --secondary-yellow );
-    --font-weight-bolder:600;
+    --unit-marker-spotlight-opacity: 68%;
-	--highlight-color: #FFF5;
+    --unit-marker-spotlight-radius: 28px;
-	--neutral-coalition-color: whitesmoke;
+    --unit-marker-stroke-width: 2px;
-	--neutral-coalition-text: #202831;
+    --unit-marker-width: 80px;
-	--red-coalition-color: #f32121;
+
-	--text-color: white;
+    --unit-marker-hotgroup-height: 12px;
-	--title-color: #d3e9ff;
+    --unit-marker-hotgroup-width: var( --unit-marker-hotgroup-height );
+
+
+    /*  Air units' marker settings  */
+    --unit-marker-air-ammo-gap: calc( 2px + var( --unit-marker-stroke-width ) );
+    --unit-marker-air-ammo-radius: 3px;
+    --unit-marker-air-ammo-y: calc( var( --unit-marker-height ) - 8px );
+    --unit-marker-air-fuel-height: 6px;
+    --unit-marker-air-fuel-width: 36px;
+    --unit-marker-air-fuel-x: calc( var( --unit-marker-centre-x ) - ( var( --unit-marker-air-fuel-width ) / 2 ) );
+    --unit-marker-air-fuel-y: calc( var( --unit-marker-height ) - 21px );
+    --unit-marker-air-height: 28px;
+    --unit-marker-air-vvi-rotation-offset: -180deg;
+    --unit-marker-air-width: var( --unit-marker-air-height );
+    --unit-marker-air-label-x: calc( var( --unit-marker-centre-x ) - ( var( --unit-marker-air-width ) / 2 ) + ( var( --unit-marker-stroke-width ) / 2 ) );
+    --unit-marker-air-label-y: calc( var( --unit-marker-centre-y ) - ( var( --unit-marker-air-height ) / 2 ) + ( var( --unit-marker-stroke-width ) / 2 ) );
+
 }
 
 
@@ -79,7 +96,7 @@ button[disabled="disabled"] {
 
 
 
-.ol-panel {
+nav, .ol-panel {
     background-color: var(--background-steel);
     border-radius: 15px;
     box-shadow: 0px 2px 5px #000A;
@@ -90,6 +107,52 @@ button[disabled="disabled"] {
     width:fit-content;
 }
 
+nav .ol-select {
+    color: var( --nav-text );
+}
+
+nav .ol-select .ol-select-value {
+    align-content: center;
+    background-color: var( --background-grey );
+    border-radius: var( --border-radius-sm );
+    display:flex;
+    justify-content: left;
+    padding:1em;
+    text-align: center;
+}
+
+nav .ol-select .ol-select-options {
+    background-color: var( --background-grey );
+    border-radius: var( --border-radius-sm );
+    display:none;
+    list-style: none;
+    padding:.5em 0;
+    position: relative;
+}
+
+nav .ol-select:hover .ol-select-options {
+    display: block;
+}
+
+nav .ol-select .ol-select-options li {
+    background-color: var( --background-grey );
+    display:flex;
+    justify-content: left;
+}
+
+nav .ol-select .ol-select-options li.hr {
+    border-bottom:1px solid var( --nav-text );
+    margin:8px;
+}
+
+nav .ol-select .ol-select-options li button {
+    background-color: var( --background-grey );
+    border:none;
+    font-size:14px;
+    font-weight: normal;
+    text-align: left;
+    width:100%;
+}
 
 .ol-panel-list {
     border-radius: var( --border-radius-sm );
@@ -172,323 +235,226 @@ button[disabled="disabled"] {
 }
 
 
-.unit {
+
-    border-radius: var( --border-radius-xs );
+svg.unit {
-    display:grid;
+    height: var( --unit-marker-height );
-    height: fit-content;
+    width: var( --unit-marker-width );
-    position:relative;
-    width:fit-content;
 }
 
-.unit .unit-id {
+svg.unit .unit-vvi {
-    align-items: center;
+    fill:black;
-    background: var( --primary-grey );
+    height: 4px;
-    border:3px solid var(--background-steel );
+    transform-box: fill-box;
-    border-radius: var( --border-radius-xs );
+    transform-origin:top;
-    color: var(--background-steel);
+    translate: var( --unit-marker-centre-x ) calc( var( --unit-marker-centre-y ) - 2px );
-    display: flex;
+    width:4px;
-    font-weight: bold;
-    height: 32px;
-    justify-content: center;
-    padding:4px;
-    position: relative;
-    text-align: center;
-    width:32px;
-    z-index:100;
 }
 
-
+svg.unit rect.unit-hotgroup {
-.unit .unit-spotlight {
-    border-radius: 50%;
-    align-items: center;
-    display:flex;
-    height: fit-content;
-    justify-items: center;
-    padding:9px;
-    width:fit-content;
-}
-
-.unit .unit-hotgroup {
-    align-self: flex-start;
-    background: black;
-    color:white;
     display:none;
-    height:fit-content;
+    fill: var( --secondary-neutral );
-    justify-content: center;
+    height: var( --unit-marker-hotgroup-height );
-    justify-self: center;
+    transform: rotate( -45deg );
-    line-height: 14px;
+    width: var( --unit-marker-hotgroup-height );
-    position: absolute;
+    x: 13px;
-    text-align: center;
+    y: 33px;
-    top:-8px;
-    transform:rotate(45deg);
-    width:14px;
 }
 
-.unit .unit-hotgroup-id {
+svg.unit text.unit-hotgroup-id {
-    font-size:11px;
+    font-weight: bolder;
-    transform: rotate(-45deg);
-}
-
-.unit .unit-vvi {
-    display:flex;
-    position:absolute;
-    left:50%;
-    transform:rotate(-90deg);
-    transform-origin:0 50%;
-    top:50%;
-    z-index: 0;
-}
-
-.unit .unit-vvi-heading {
-    border:1px solid var( --secondary-dark-steel );
-    padding-left:14px;
-    transform: rotate(90deg);
-    transform-origin:0 50%;
-    width:30px;
-}
-
-
-.unit .unit-selected-border {
-    border: 2px solid transparent;
-    border-radius: var( --border-radius-xs );
-    position: relative;
-    z-index:1;
-}
-
-
-.unit .unit-fuel {
-    background:white;
-    border:2px solid var( --secondary-dark-steel );
-    border-radius: var( --border-radius-xs );
     display:none;
-    margin:0 auto;
+    fill:white;
-    position: relative;
+    font-size:9px;
-    top:-6px;
-    width: calc( 100% - 16px );
 }
 
-.unit .unit-fuel-empty {
+svg.unit[data-is-in-hotgroup="true"] rect.unit-hotgroup, svg.unit[data-is-in-hotgroup="true"] text.unit-hotgroup-id {
-    align-self: center;
+    display:block;
-    background: white;
+}
-    border-radius: 50%;
+
-    color:red;
+svg.unit rect.unit-selected-border {
+    fill:transparent;
+    height: calc( var( --unit-marker-air-height ) + ( var( --unit-marker-stroke-width ) * 2 ) );
+    rx: var( --unit-marker-stroke-width );
+    stroke: var( white );
+    stroke-width: var( --unit-marker-stroke-width );
+    width: calc( var( --unit-marker-air-width ) + ( var( --unit-marker-stroke-width ) * 2 ) );
+    x: calc( var(--unit-marker-air-label-x) - 3px );
+    y: calc( var(--unit-marker-air-label-y) - 3px );
+}
+
+svg.unit rect.unit-marker {
+    fill: var( --primary-grey );
+    height: calc( var( --unit-marker-air-height ) - var( --unit-marker-stroke-width ) );
+    rx: var( --unit-marker-stroke-width );
+    ry: var( --unit-marker-stroke-width );
+    stroke: var( --secondary-neutral );
+    stroke-linejoin: round;
+    stroke-width: var( --unit-marker-stroke-width );
+    width: calc( var( --unit-marker-air-width ) - var( --unit-marker-stroke-width ) );
+    x: var(--unit-marker-air-label-x);
+    y: var(--unit-marker-air-label-y);
+}
+
+
+svg.unit text.unit-short-label {
+    fill: var( --secondary-neutral );
+    font-size: var( --unit-marker-font-size );
+    font-weight: var( --unit-marker-font-weight );
+    text-anchor: middle;
+}
+
+
+svg.unit rect.unit-fuel, svg.unit rect.unit-fuel-level {
+    height: var( --unit-marker-air-fuel-height );
+    width: var( --unit-marker-air-fuel-width );
+    x: var( --unit-marker-air-fuel-x );
+    y: var( --unit-marker-air-fuel-y );
+}
+
+
+svg.unit rect.unit-fuel {
     display:none;
-    font-weight: bold;
+    fill: white;
-    justify-self: center;
+    rx: var( --unit-marker-stroke-width );
-    padding:1px;
+    ry: var( --unit-marker-stroke-width );
-    position:absolute;
+    stroke: var( --secondary-gunmetal-grey );
+    stroke-linejoin: round;
+    stroke-width: var( --unit-marker-stroke-width );
+    y: var( --unit-marker-air-fuel-y );
 }
 
-.unit[data-fuel-level="0"] .unit-fuel-empty {
+svg.unit rect.unit-fuel-level {
-    display:flex;
+    display:none;
+    fill: var( --secondary-light-grey );
+    height: calc( var( --unit-marker-air-fuel-height ) - var( --unit-marker-stroke-width ) );
+    y: calc( var( --unit-marker-air-fuel-y ) + ( var( --unit-marker-stroke-width ) / 2 ) );
 }
 
-@keyframes blinker {
+
+svg.unit circle.unit-ammo {
+    cy: var( --unit-marker-air-ammo-y );
+    display: none;
+    fill: white;
+    r: var( --unit-marker-air-ammo-radius );
+    stroke: var( --secondary-neutral );
+    stroke-width: var( --unit-marker-stroke-width );
+}
+
+svg.unit circle.unit-ammo-fox-1 {
+    cx: calc( var( --unit-marker-centre-x ) - ( ( var( --unit-marker-air-ammo-radius ) * 3 ) + ( var( --unit-marker-air-ammo-gap ) * 1.5 ) ) );
+}
+
+svg.unit circle.unit-ammo-fox-2 {
+    cx: calc( var( --unit-marker-centre-x ) - ( var( --unit-marker-air-ammo-radius ) + ( var( --unit-marker-air-ammo-gap ) / 2 ) ) );
+}
+
+svg.unit circle.unit-ammo-fox-3 {
+    cx: calc( var( --unit-marker-centre-x ) + var( --unit-marker-air-ammo-radius ) + ( var( --unit-marker-air-ammo-gap ) / 2 ) );
+}
+
+svg.unit circle.unit-ammo-other {
+    cx: calc( var( --unit-marker-centre-x ) + ( var( --unit-marker-air-ammo-radius ) * 3 ) + ( var( --unit-marker-air-ammo-gap ) * 1.5 ) );
+}
+
+svg.unit[data-has-fox-1="true"] circle.unit-ammo-fox-1,
+svg.unit[data-has-fox-2="true"] circle.unit-ammo-fox-2,
+svg.unit[data-has-fox-3="true"] circle.unit-ammo-fox-3,
+svg.unit[data-has-other-ammo="true"] circle.unit-ammo-other {
+    fill: var( --secondary-gunmetal-grey );
+}
+
+
+
+/***  Default style  **/
+
+svg.unit[data-coalition="blue"] rect.unit-marker {
+    fill: var( --primary-blue );
+    stroke: var( --secondary-blue-outline );
+}
+
+svg.unit[data-coalition="blue"] rect.unit-hotgroup,
+svg.unit[data-coalition="blue"] text.unit-short-label {
+    fill: var( --secondary-blue-outline );
+}
+
+svg.unit[data-coalition="blue"] rect.unit-fuel {
+    stroke: var( --secondary-blue-outline );
+}
+
+svg.unit[data-coalition="blue"] rect.unit-fuel-level {
+    fill: var( --primary-blue );
+}
+
+
+svg.unit[data-coalition="red"] rect.unit-marker {
+    fill: var( --primary-red );
+    stroke: var( --secondary-red-outline );
+}
+
+svg.unit[data-coalition="red"] rect.unit-hotgroup,
+svg.unit[data-coalition="red"] text.unit-short-label {
+    fill: var( --secondary-red-outline );
+}
+
+svg.unit[data-coalition="red"] rect.unit-fuel {
+    stroke: var( --secondary-red-outline );
+}
+
+svg.unit[data-coalition="red"] rect.unit-fuel-level {
+    fill: var( --primary-red );
+}
+
+
+
+/***  Selected style  **/
+
+
+svg.unit[data-is-selected="true"] .unit-spotlight {
+    cx:50%;
+    cy:50%;
+    fill:var( --unit-marker-spotlight-fill );
+    r: var( --unit-marker-spotlight-radius );
+}
+
+svg.unit[data-is-selected="true"] rect.unit-selected-border,
+svg.unit[data-is-selected="true"] rect.unit-marker {
+    fill:white;
+}
+
+
+
+svg.unit[data-pilot="ai"][data-is-selected="true"] rect.unit-fuel,
+svg.unit[data-pilot="ai"][data-is-selected="true"] rect.unit-fuel-level,
+svg.unit[data-pilot="ai"][data-is-selected="true"] circle.unit-ammo {
+    display:block;
+}
+
+@keyframes pulse {
     50% {
       opacity: 0;
     }
-  }
-
-.unit[data-fuel-level="10"] .unit-fuel,
-.unit[data-fuel-level="20"] .unit-fuel,
-.unit[data-fuel-level="30"] .unit-fuel {
-    animation: blinker 1.5s linear infinite;
 }
-
+svg.unit[data-pilot="ai"][data-is-selected="true"][data-has-low-fuel="true"] rect.unit-fuel,
-.unit .unit-fuel-level {
+svg.unit[data-pilot="ai"][data-is-selected="true"][data-has-low-fuel="true"] rect.unit-fuel-level {
-    background-color: var( --secondary-light-grey );
+    animation: pulse 1.5s linear infinite;
-    display:flex;
-    height: 4px;
-    visibility: hidden;
-    width:100%;
-}
-
-.unit[data-fuel-level="10"] .unit-fuel-level,
-.unit[data-fuel-level="20"] .unit-fuel-level,
-.unit[data-fuel-level="30"] .unit-fuel-level,
-.unit[data-fuel-level="40"] .unit-fuel-level,
-.unit[data-fuel-level="50"] .unit-fuel-level,
-.unit[data-fuel-level="60"] .unit-fuel-level,
-.unit[data-fuel-level="70"] .unit-fuel-level,
-.unit[data-fuel-level="80"] .unit-fuel-level,
-.unit[data-fuel-level="90"] .unit-fuel-level,
-.unit[data-fuel-level="100"] .unit-fuel-level {
-    visibility: visible;
 }
 
 
 
-.unit[data-fuel-level="10"] .unit-fuel-level {
-    width:10%;
-}
 
-.unit[data-fuel-level="20"] .unit-fuel-level {
+svg.unit[data-coalition="blue"][data-is-selected="true"] text.unit-short-label,
-    width:20%;
+svg.unit[data-coalition="blue"][data-has-fox-1="true"] circle.unit-ammo-fox-1,
-}
+svg.unit[data-coalition="blue"][data-has-fox-2="true"] circle.unit-ammo-fox-2,
-
+svg.unit[data-coalition="blue"][data-has-fox-3="true"] circle.unit-ammo-fox-3,
-.unit[data-fuel-level="30"] .unit-fuel-level {
+svg.unit[data-coalition="blue"][data-has-other-ammo="true"] circle.unit-ammo-other {
-    width:30%;
+    fill: var( --primary-blue );
-}
-
-.unit[data-fuel-level="40"] .unit-fuel-level {
-    width:40%;
-}
-
-.unit[data-fuel-level="50"] .unit-fuel-level {
-    width:50%;
-}
-
-.unit[data-fuel-level="60"] .unit-fuel-level {
-    width:60%;
-}
-
-.unit[data-fuel-level="70"] .unit-fuel-level {
-    width:70%;
-}
-
-.unit[data-fuel-level="80"] .unit-fuel-level {
-    width:80%;
-}
-
-.unit[data-fuel-level="90"] .unit-fuel-level {
-    width:90%;
-}
-
-.unit[data-fuel-level="100"] .unit-fuel-level {
-    width:100%;
 }
 
 
-.unit-ammo {
+svg.unit[data-coalition="red"][data-is-selected="true"] text.unit-short-label,
-    column-gap: 2px;
+svg.unit[data-coalition="red"][data-has-fox-1="true"] circle.unit-ammo-fox-1,
-    display:none;
+svg.unit[data-coalition="red"][data-has-fox-2="true"] circle.unit-ammo-fox-2,
-    flex-direction: row;
+svg.unit[data-coalition="red"][data-has-fox-3="true"] circle.unit-ammo-fox-3,
-    flex-wrap:nowrap;
+svg.unit[data-coalition="red"][data-has-other-ammo="true"] circle.unit-ammo-other {
-    height:fit-content;
+    fill: var( --primary-red );
-    justify-content: center;
-    position: relative;
-    top:-2px;
-    width: 100%;
-}
-
-.unit-ammo > [data-ammo-type] {
-    background:white;
-    border:2px solid var( --secondary-dark-steel );
-    border-radius: 50%;
-    padding:3px;
-}
-
-.unit[data-has-fox-1="true"] .unit-ammo > [data-ammo-type="fox-1"],
-.unit[data-has-fox-2="true"] .unit-ammo > [data-ammo-type="fox-2"],
-.unit[data-has-fox-3="true"] .unit-ammo > [data-ammo-type="fox-3"],
-.unit[data-has-other-ammo="true"] .unit-ammo > [data-ammo-type="other"] {
-    background-color: var( --secondary-light-grey );
-}
-
-
-
-/*** BLUEFOR ***/
-
-.unit[data-coalition="blue"] .unit-hotgroup {
-    background-color: var( --secondary-blue-outline );
-}
-
-.unit[data-coalition="blue"] .unit-id,
-    .unit[data-coalition="blue"][data-has-fox-1="true"] .unit-ammo > [data-ammo-type="fox-1"],
-    .unit[data-coalition="blue"][data-has-fox-2="true"] .unit-ammo > [data-ammo-type="fox-2"],
-    .unit[data-coalition="blue"][data-has-fox-3="true"] .unit-ammo > [data-ammo-type="fox-3"],
-    .unit[data-coalition="blue"][data-has-other-ammo="true"] .unit-ammo > [data-ammo-type="other"],
-    .unit[data-coalition="blue"] .unit-fuel-level,
-    .unit[data-coalition="blue"] .unit-vvi-heading {
-        background: var( --primary-blue );
-        border-color: var( --secondary-blue-outline );
-        color: var( --secondary-blue-outline );
-}
-
-.unit[data-coalition="blue"][data-is-selected="true"] .unit-id {
-    border-color: var( --secondary-blue-outline );
-    color: var( --primary-blue );
-}
-
-.unit[data-coalition="blue"] .unit-ammo {
-    border-color: var( --secondary-blue-outline );
-}
-
-/*** REDFOR ***/
-
-.unit[data-coalition="red"] .unit-hotgroup {
-    background-color: var( --secondary-red-outline );
-}
-
-.unit[data-coalition="red"] .unit-id,
-    .unit[data-coalition="red"][data-has-fox-1="true"] .unit-ammo > [data-ammo-type="fox-1"],
-    .unit[data-coalition="red"][data-has-fox-2="true"] .unit-ammo > [data-ammo-type="fox-2"],
-    .unit[data-coalition="red"][data-has-fox-3="true"] .unit-ammo > [data-ammo-type="fox-3"],
-    .unit[data-coalition="red"][data-has-other-ammo="true"] .unit-ammo > [data-ammo-type="other"],
-    .unit[data-coalition="red"] .unit-fuel-level,
-    .unit[data-coalition="red"] .unit-vvi-heading {
-        background: var( --primary-red );
-        border-color: var( --secondary-red-outline );
-        color: var( --secondary-red-outline );
-}
-
-
-.unit[data-coalition="red"][data-is-selected="true"] .unit-id {
-    color: var( --primary-red );
-}
-
-.unit[data-coalition="red"] .unit-ammo {
-    border-color: var( --secondary-red-outline );
-}
-
-/**************/
-
-
-.unit[data-is-selected="true"] .unit-spotlight {
-    background: var(--secondary-yellow);
-}
-
-.unit[data-is-in-hotgroup="true"] .unit-hotgroup {
-    display:flex
-}
-
-.unit[data-is-selected="true"] .unit-id {
-    background:white;
-}
-
-.unit[data-is-selected="true"] .unit-selected-border {
-    border-color:white;
-}
-
-.unit[data-is-selected="true"] .unit-fuel {
-    display:grid;
-}
-
-.unit[data-is-selected="true"] .unit-ammo {
-    display:flex;
-}
-
-
-.unit[data-pilot="human"] .unit-hotgroup,
-.unit[data-pilot="human"] .unit-fuel,
-.unit[data-pilot="human"] .unit-ammo {
-    display:none;
-}
-
-
-.unit .unit-summary {
-    align-self: center;
-    column-gap: 8px;
-    color:white;
-    display: flex;
-    flex-flow: wrap;
-    font-size: 12px;
-    justify-content: flex-end;
-    justify-self: flex-end;
-    left: -62px;
-    position: absolute;
-    row-gap:2px;
-    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
-    white-space: nowrap;
-    width: min-content;
 }

client/public/stylesheets/uikit.css

@@ -18,11 +18,7 @@ section {
     flex-wrap: wrap;
 }
 
-.section-header {
+
-    font-size:125%;
-    font-weight: bold;
-    margin-bottom: 1vh;
-}
 
 .content {
     background:white;
@@ -58,4 +54,20 @@ section {
 
 #paragraph {
     max-width: 750px;
+}
+
+
+#tabs {
+    column-gap: 10px;
+    display: flex;
+    flex-direction: row;
+    margin-bottom:1em;
+}
+
+#tabs > div {
+    background:rgb(226, 166, 54);
+    border-radius: 5px;
+    color:#333;
+    cursor: pointer;
+    padding:6px 10px;
 }

client/src/aic/aic.ts

@@ -5,7 +5,7 @@ import { AICFormation_Single } from "./AICFormation/Single";
 import { AICFormationDescriptorSection } from "./AICFormationDescriptorSection";
 
 
-export class AIC extends ToggleableFeature {
+export class aic extends ToggleableFeature {
 
     #formations = [
 

client/src/index.ts

@@ -10,7 +10,7 @@ import { MissionData } from "./missiondata/missiondata";
 import { UnitControlPanel } from "./panels/unitcontrolpanel";
 import { MouseInfoPanel } from "./panels/mouseInfoPanel";
 import { Slider } from "./controls/slider";
-import { AIC } from "./aic/AIC";
+import { aic } from "./aic/aic";
 
 import { VisibilityControlPanel } from "./panels/visibilitycontrolpanel";
 import { ATC } from "./atc/ATC";
@@ -40,7 +40,7 @@ var fastButton: Button;
 var climbButton: Button;
 var descendButton: Button;
 
-var aic: AIC;
+var aicMode: aic;
 var aicToggleButton: Button;
 var aicHelpButton: Button;
 
@@ -94,14 +94,14 @@ function setup() {
     let aicFeatureSwitch = featureSwitches.getSwitch( "aic" );
 
     if ( aicFeatureSwitch?.isEnabled() ) {
-        aic = new AIC();
+        aicMode = new aic();
         
         aicToggleButton = new Button( "toggle-aic-button", ["images/buttons/radar.svg"], () => {
-            aic.toggleStatus();
+            aicMode.toggleStatus();
         });
 
         aicHelpButton = new Button( "aic-help-button", [ "images/buttons/question-mark.svg" ], () => {
-            aic.toggleHelp();
+            aicMode.toggleHelp();
         });
     }
 

client/src/units/unitmarker.ts

@@ -75,6 +75,7 @@ export class UnitMarker extends L.Marker {
         this.#alive = data.alive;
         var element = this.getElement();
         if (element != null) {
+            
             var nameDiv = <HTMLElement>element.querySelector("#name");
             var unitNameDiv = <HTMLElement>element.querySelector("#unitName");
             var container = <HTMLElement>element.querySelector("#container");