Node.js transition is completed!

client/src/units/unit.ts

@@ -73,6 +73,9 @@ export class Unit {
             this[entry] = response[entry];
         }
 
+        /* Dead units can't be selected */
+        this.setSelected(this.getSelected() && this.alive)
+
         this.#updateMarker();
 
         this.#clearTargets();
@@ -93,11 +96,6 @@ export class Unit {
                 this.wingmen.push(unitsManager.getUnitByID(ID));
             }
         }
-        this.formation = response["formation"];
-
-        this.missionData = missionData.getUnitData(this.ID)
-
-        this.setSelected(this.getSelected() && this.alive)
         */
     }
 
@@ -114,6 +112,14 @@ export class Unit {
         return this.#selected;
     }
 
+    setSelectable(selectable: boolean) {
+        this.#selectable = selectable;
+    }
+
+    getSelectable() {
+        return this.#selectable;
+    }
+
     addDestination(latlng: L.LatLng) {
         var path: any = {};
         if (this.activePath != null) {
@@ -153,16 +159,20 @@ export class Unit {
         this.#preventClick = true;
 
         var options = [
-            { 'tooltip': 'Attack', 'src': 'attack.png', 'callback': () => { getMap().hideSelectionWheel(); getUnitsManager().attackUnit(this.ID); } },
-            { 'tooltip': 'Go to tanker', 'src': 'tanker.png', 'callback': () => { getMap().hideSelectionWheel(); /*showMessage("Function not implemented yet");*/ } },
-            { 'tooltip': 'RTB', 'src': 'rtb.png', 'callback': () => { getMap().hideSelectionWheel(); /*showMessage("Function not implemented yet");*/ } }
+            'Attack',
         ]
 
-        if (!this.leader && !this.wingman) {
-            options.push({ 'tooltip': 'Create formation', 'src': 'formation.png', 'callback': () => { getMap().hideSelectionWheel(); /*unitsManager.createFormation(this.ID);*/ } });
-        }
+        //if (!this.leader && !this.wingman) {
+        //    options.push({ 'tooltip': 'Create formation', 'src': 'formation.png', 'callback': () => { getMap().hideSelectionWheel(); /*unitsManager.createFormation(this.ID);*/ } });
+        //}
 
-        getMap().showSelectionWheel(e.originalEvent, options, false);
+        getMap().showSelectionScroll(e.originalEvent, options, (action: string) => this.#executeAction(action));
+    }
+
+    #executeAction(action: string) {
+        getMap().hideSelectionScroll();
+        if (action === "Attack")
+            getUnitsManager().attackUnit(this.ID);
     }
 
     #updateMarker() {
@@ -399,6 +409,12 @@ export class NavyUnit extends Unit {
 }
 
 export class Weapon extends Unit {
+    constructor(ID: number, marker: UnitMarker)
+    {
+        super(ID, marker);
+        this.setSelectable(false);
+    }
+
     getHidden() {
         if (this.alive)
         {

client/src/units/unitTypes.ts

@@ -250,7 +250,7 @@ unitTypes.air.strike = [
     "Tu-142",
 ]
 
-unitTypes.air.tank = [
+unitTypes.air.tanker = [
     "S-3B Tanker",
     "KC-135",
     "IL-78M",

client/src/units/unitmarker.ts

@@ -33,10 +33,20 @@ export class UnitMarker extends L.Marker {
         var symbol = new Symbol(this.#computeMarkerCode(options), { size: 25 });
         var img = symbol.asCanvas().toDataURL('image/png');
 
+        var coalition = "";
+        if (options.coalitionID == 1)
+            coalition = "red"
+        else if (options.coalitionID == 2)
+            coalition = "blue"
+        else
+            coalition = "neutral"
+
         var icon = new L.DivIcon({
             html: `<table class="unit-marker-container" id="container">
                     <tr>
                         <td>
+                            <div class="${coalition}" id="background"></div>
+                            <div class="${coalition}" id="ring"></div>
                             <div class="unit-marker-icon" id="icon"><img src="${img}"></div>
                             <div class="unit-marker-unitName" id="unitName">${this.#unitName}</div>
                             <div class="unit-marker-altitude" id="altitude"></div>
@@ -101,7 +111,8 @@ export class UnitMarker extends L.Marker {
     setSelected(selected: boolean) {
         this.#selected = selected;
         this.getElement()?.querySelector("#icon")?.classList.remove("unit-marker-hovered");
-        this.getElement()?.querySelector("#icon")?.classList.toggle("unit-marker-selected", selected);
+        this.getElement()?.querySelector("#ring")?.classList.toggle("unit-marker-selected", selected);
+        this.getElement()?.querySelector("#background")?.classList.toggle("unit-marker-selected", selected);
     }
 
     getSelected() {