Added speed and altitude controls

Fixed Clone
Added "Land here" command
Added ROE and reaction to threat buttons

client/TODO.txt

@@ -5,4 +5,5 @@ explosion
 wrong name for ground units
 improve map zIndex
 fuel is wrong (either 0 or 1, its is casting it to int somewhere)
-weapons should not be selectable
+weapons should not be selectable
+human symbol if user

client/public/stylesheets/slider.css

@@ -0,0 +1,47 @@
+.slider-container {
+    width: 100%; 
+}
+
+.slider {
+    width: 100%;
+    -webkit-appearance: none;  
+    appearance: none;
+    height: 2px; 
+    background: #d3d3d3; 
+    outline: none; 
+    opacity: 0.7; 
+    -webkit-transition: .2s; 
+    transition: opacity .2s;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.slider:hover {
+    opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background: gray; 
+    cursor: pointer; 
+    border-radius: 999px;
+}
+
+.active .slider::-webkit-slider-thumb {
+    background: #5ca7ff; 
+}
+
+.slider::-moz-range-thumb {
+    width: 20px; 
+    height: 20px;
+    background: gray; 
+    cursor: pointer; 
+    border-radius: 999px;
+}
+
+.active .slider::-moz-range-thumb {
+    background: #5ca7ff;
+}

client/public/stylesheets/style.css

@@ -1,4 +1,5 @@
 @import url("button.css");
+@import url("slider.css");
 @import url("dropdown.css");
 
 @import url("selectionwheel.css");

client/public/stylesheets/unitcontrolpanel.css

@@ -52,7 +52,7 @@
     height: 100%;
 }
 
-#threat-reaction-buttons-container {
+#reaction-to-threat-buttons-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -106,4 +106,25 @@
     color: white;
     font-size: 13px;
     width: 100%;
-}
+}
+
+.flight-control-slider {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.flight-control-title {
+    font-size: 13px;
+    color: white;
+}
+
+.flight-control-value {
+    font-size: 14px;
+    font-weight: 600;
+    color: gray;
+}
+
+.active .flight-control-value {
+    color: #5ca7ff;
+}

client/src/controls/slider.ts

@@ -0,0 +1,83 @@
+export class Slider {
+    #container: HTMLElement | null;
+    #callback: CallableFunction;
+    #slider: HTMLInputElement | null = null;
+    #value: HTMLElement | null = null;
+    #minValue: number;
+    #maxValue: number;
+    #minValueDiv: HTMLElement | null = null;
+    #maxValueDiv: HTMLElement | null = null;
+    #unit: string;
+    #display: string = "";
+
+    constructor(ID: string, minValue: number, maxValue: number, unit: string, callback: CallableFunction) {
+        this.#container = document.getElementById(ID);
+        this.#callback = callback;
+        this.#minValue = minValue;
+        this.#maxValue = maxValue;
+        this.#unit = unit;
+        if (this.#container != null) {
+            this.#display = this.#container.style.display;
+            this.#slider = <HTMLInputElement>this.#container.querySelector("input");
+            if (this.#slider != null)
+            {
+                this.#slider.addEventListener("input", (e: any) => this.#onInput());
+                this.#slider.addEventListener("mouseup", (e: any) => this.#onFinalize());
+            }
+            this.#value = <HTMLElement>this.#container.querySelector("#value");
+        }
+    }
+
+    #onValue()
+    {
+        if (this.#value != null && this.#slider != null)
+            this.#value.innerHTML = this.#minValue + Math.round(parseFloat(this.#slider.value) / 100 * (this.#maxValue - this.#minValue)) + this.#unit
+        this.setActive(true);
+    }
+
+    #onInput()
+    {
+        this.#onValue();
+    }
+
+    #onFinalize()
+    {
+        if (this.#slider != null)
+            this.#callback(this.#minValue + parseFloat(this.#slider.value) / 100 * (this.#maxValue - this.#minValue));
+    }
+
+    show()
+    {
+        if (this.#container != null)
+            this.#container.style.display = this.#display;
+    }
+
+    hide()
+    {
+        if (this.#container != null)
+            this.#container.style.display = 'none';
+    }
+
+    setActive(newActive: boolean)
+    {
+        if (this.#container)
+        {
+            this.#container.classList.toggle("active", newActive);
+            if (!newActive && this.#value != null)
+                this.#value.innerHTML = "Mixed values"
+        }
+    }
+
+    setMinMax(newMinValue: number, newMaxValue: number)
+    {
+        this.#minValue = newMinValue;
+        this.#maxValue = newMaxValue;
+    }
+
+    setValue(newValue: number)
+    {
+        if (this.#slider != null)
+            this.#slider.value = String((newValue - this.#minValue) / (this.#maxValue - this.#minValue) * 100); 
+        this.#onValue()
+    }
+}

client/src/dcs/dcs.ts

@@ -99,7 +99,7 @@ export function attackUnit(ID: number, targetID: number) {
     xhr.send(JSON.stringify(data));
 }
 
-export function cloneUnit(ID: number) {
+export function cloneUnit(ID: number, latlng: L.LatLng) {
     var xhr = new XMLHttpRequest();
     xhr.open("PUT", RESTaddress);
     xhr.setRequestHeader("Content-Type", "application/json");
@@ -109,12 +109,28 @@ export function cloneUnit(ID: number) {
         }
     };
 
-    var command = { "ID": ID };
+    var command = { "ID": ID, "location": latlng };
     var data = { "cloneUnit": command }
 
     xhr.send(JSON.stringify(data));
 }
 
+export function landAt(ID: number, latlng: L.LatLng) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("PUT", RESTaddress);
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+            //console.log("Unit " + getUnitsManager().getUnitByID(ID).unitName + " cloned");
+        }
+    };
+
+    var command = { "ID": ID, "location": latlng };
+    var data = { "landAt": command }
+
+    xhr.send(JSON.stringify(data));
+}
+
 export function changeSpeed(ID: number, speedChange: string) {
     var xhr = new XMLHttpRequest();
     xhr.open("PUT", RESTaddress);
@@ -131,6 +147,22 @@ export function changeSpeed(ID: number, speedChange: string) {
     xhr.send(JSON.stringify(data));
 }
 
+export function setSpeed(ID: number, speed: number) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("PUT", RESTaddress);
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+            //console.log(getUnitsManager().getUnitByID(ID).unitName + " speed change request: " + speedChange);
+        }
+    };
+   
+    var command = {"ID": ID, "speed": speed}
+    var data = {"setSpeed": command}
+   
+    xhr.send(JSON.stringify(data));
+}
+
 export function changeAltitude(ID: number, altitudeChange: string) {
     var xhr = new XMLHttpRequest();
     xhr.open("PUT", RESTaddress);
@@ -147,6 +179,22 @@ export function changeAltitude(ID: number, altitudeChange: string) {
     xhr.send(JSON.stringify(data));
 }
 
+export function setAltitude(ID: number, altitude: number) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("PUT", RESTaddress);
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+            //console.log(getUnitsManager().getUnitByID(ID).unitName + " speed change request: " + speedChange);
+        }
+    };
+   
+    var command = {"ID": ID, "altitude": altitude}
+    var data = {"setAltitude": command}
+   
+    xhr.send(JSON.stringify(data));
+}
+
 export function createFormation(ID: number, isLeader: boolean, wingmenIDs: number[]) {
     var xhr = new XMLHttpRequest();
     xhr.open("PUT", RESTaddress);
@@ -160,5 +208,37 @@ export function createFormation(ID: number, isLeader: boolean, wingmenIDs: numbe
     var command = {"ID": ID, "wingmenIDs": wingmenIDs, "isLeader": isLeader}
     var data = {"setLeader": command}
 
+    xhr.send(JSON.stringify(data));
+}
+
+export function setROE(ID: number, ROE: string) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("PUT", RESTaddress);
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+            //console.log(getUnitsManager().getUnitByID(ID).unitName + " speed change request: " + speedChange);
+        }
+    };
+   
+    var command = {"ID": ID, "ROE": ROE}
+    var data = {"setROE": command}
+   
+    xhr.send(JSON.stringify(data));
+}
+
+export function setReactionToThreat(ID: number, reactionToThreat: string) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("PUT", RESTaddress);
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+            //console.log(getUnitsManager().getUnitByID(ID).unitName + " speed change request: " + speedChange);
+        }
+    };
+   
+    var command = {"ID": ID, "reactionToThreat": reactionToThreat}
+    var data = {"setReactionToThreat": command}
+   
     xhr.send(JSON.stringify(data));
 }

client/src/index.ts

@@ -10,6 +10,7 @@ import { Button } from "./controls/button";
 import { MissionData } from "./missiondata/missiondata";
 import { UnitControlPanel } from "./panels/unitcontrolpanel";
 import { MouseInfoPanel } from "./panels/mouseInfoPanel";
+import { Slider } from "./controls/slider";
 
 /* TODO: should this be a class? */
 var map: Map;
@@ -36,6 +37,9 @@ var aiVisibilityButton: Button;
 var weaponVisibilityButton: Button;
 var deadVisibilityButton: Button;
 
+var altitudeSlider: Slider;
+var airspeedSlider: Slider;
+
 var connected: boolean;
 var activeCoalition: string;
 
@@ -59,6 +63,10 @@ function setup() {
     climbButton = new Button("climb-button", ["images/buttons/climb.svg"], () => { getUnitsManager().selectedUnitsChangeAltitude("climb"); });
     descendButton = new Button("descend-button", ["images/buttons/descend.svg"], () => { getUnitsManager().selectedUnitsChangeAltitude("descend"); });
 
+    /* Unit control sliders */
+    altitudeSlider = new Slider("altitude-slider", 0, 100, "ft", (value: number) => getUnitsManager().selectedUnitsSetAltitude(value * 0.3048));
+    airspeedSlider = new Slider("airspeed-slider", 0, 100, "kts", (value: number) => getUnitsManager().selectedUnitsSetSpeed(value / 1.94384));
+
     /* Visibility buttons */
     userVisibilityButton = new Button("user-visibility-button", ["images/buttons/user-full.svg", "images/buttons/user-partial.svg", "images/buttons/user-none.svg", "images/buttons/user-hidden.svg"], () => { });
     aiVisibilityButton = new Button("ai-visibility-button", ["images/buttons/ai-full.svg", "images/buttons/ai-partial.svg", "images/buttons/ai-none.svg", "images/buttons/ai-hidden.svg"], () => { });
@@ -184,4 +192,12 @@ export function getVisibilitySettings() {
     return visibility;
 }
 
+export function getVisibilityButtons() {
+    return {user: userVisibilityButton, ai: aiVisibilityButton, weapon: weaponVisibilityButton, dead: deadVisibilityButton}
+}
+
+export function getUnitControlSliders() {
+    return {altitude: altitudeSlider, airspeed: airspeedSlider}
+}
+
 window.onload = setup;

client/src/map/map.ts

@@ -154,6 +154,14 @@ export class Map extends L.Map {
         getSelectionScroll().hide();
     }
 
+    getMousePosition() {
+        return this.#lastMousePosition;
+    }
+
+    getMouseCoordinates() {
+        return this.containerPointToLatLng(this.#lastMousePosition);
+    }
+
     /* Event handlers */
     #onClick(e: any) {
         if (!this.#preventLeftClick) {

client/src/panels/unitcontrolpanel.ts

@@ -1,7 +1,7 @@
 import { imageOverlay } from "leaflet";
-import { getUnitsManager } from "..";
+import { getUnitControlSliders, getUnitsManager } from "..";
 import { ConvertDDToDMS, rad2deg } from "../other/utils";
-import { AirUnit, Unit } from "../units/unit";
+import { Aircraft, AirUnit, GroundUnit, Helicopter, NavyUnit, Unit } from "../units/unit";
 
 export class UnitControlPanel {
     #element: HTMLElement
@@ -21,6 +21,25 @@ export class UnitControlPanel {
                 var undoButton = <HTMLElement>formationCreationContainer.querySelector("#undo-formation");
                 undoButton?.addEventListener("click", () => getUnitsManager().selectedUnitsUndoFormation());
             }
+            var ROEButtonsContainer = <HTMLElement>(this.#element.querySelector("#roe-buttons-container"));
+            if (ROEButtonsContainer != null)
+            {
+                (<HTMLElement>ROEButtonsContainer.querySelector("#free"))?.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE("Free"));
+                (<HTMLElement>ROEButtonsContainer.querySelector("#designated-free"))?.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE("Designated free"));
+                (<HTMLElement>ROEButtonsContainer.querySelector("#designated"))?.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE("Designated"));
+                (<HTMLElement>ROEButtonsContainer.querySelector("#return"))?.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE("Return"));
+                (<HTMLElement>ROEButtonsContainer.querySelector("#hold"))?.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE("Hold"));
+            }
+
+            var reactionToThreatButtonsContainer = <HTMLElement>(this.#element.querySelector("#reaction-to-threat-buttons-container"));
+            if (reactionToThreatButtonsContainer != null)
+            {
+                (<HTMLElement>reactionToThreatButtonsContainer.querySelector("#none"))?.addEventListener("click", () => getUnitsManager().selectedUnitsSetReactionToThreat("None"));
+                (<HTMLElement>reactionToThreatButtonsContainer.querySelector("#passive"))?.addEventListener("click", () => getUnitsManager().selectedUnitsSetReactionToThreat("Passive"));
+                (<HTMLElement>reactionToThreatButtonsContainer.querySelector("#evade"))?.addEventListener("click", () => getUnitsManager().selectedUnitsSetReactionToThreat("Evade"));
+                (<HTMLElement>reactionToThreatButtonsContainer.querySelector("#escape"))?.addEventListener("click", () => getUnitsManager().selectedUnitsSetReactionToThreat("Escape"));
+                (<HTMLElement>reactionToThreatButtonsContainer.querySelector("#abort"))?.addEventListener("click", () => getUnitsManager().selectedUnitsSetReactionToThreat("Abort"));
+            }
             this.hide();
         }
     }
@@ -41,8 +60,83 @@ export class UnitControlPanel {
             if (selectedUnitsContainer != null && formationCreationContainer != null)
             {
                 this.#addUnitsButtons(units, selectedUnitsContainer);
+                this.#showFlightControlSliders(units);
                 this.#showFormationButtons(units, formationCreationContainer);
             }
+
+            var ROEButtonsContainer = <HTMLElement>(this.#element.querySelector("#roe-buttons-container"));
+            if (ROEButtonsContainer != null)
+            {
+                (<HTMLElement>ROEButtonsContainer.querySelector("#free"))?.classList.toggle("white", this.#getROE(units) === "Free");
+                (<HTMLElement>ROEButtonsContainer.querySelector("#designated-free"))?.classList.toggle("white", this.#getROE(units) === "Designated free");
+                (<HTMLElement>ROEButtonsContainer.querySelector("#designated"))?.classList.toggle("white", this.#getROE(units) === "Designated");
+                (<HTMLElement>ROEButtonsContainer.querySelector("#return"))?.classList.toggle("white", this.#getROE(units) === "Return");
+                (<HTMLElement>ROEButtonsContainer.querySelector("#hold"))?.classList.toggle("white", this.#getROE(units) === "Hold");
+            }
+
+            var reactionToThreatButtonsContainer = <HTMLElement>(this.#element.querySelector("#reaction-to-threat-buttons-container"));
+            if (reactionToThreatButtonsContainer != null)
+            {
+                (<HTMLElement>reactionToThreatButtonsContainer.querySelector("#none"))?.classList.toggle("white", this.#getReactionToThreat(units) === "None");
+                (<HTMLElement>reactionToThreatButtonsContainer.querySelector("#passive"))?.classList.toggle("white", this.#getReactionToThreat(units) === "Passive");
+                (<HTMLElement>reactionToThreatButtonsContainer.querySelector("#evade"))?.classList.toggle("white", this.#getReactionToThreat(units) === "Evade");
+                (<HTMLElement>reactionToThreatButtonsContainer.querySelector("#escape"))?.classList.toggle("white", this.#getReactionToThreat(units) === "Escape");
+                (<HTMLElement>reactionToThreatButtonsContainer.querySelector("#abort"))?.classList.toggle("white", this.#getReactionToThreat(units) === "Abort");
+            }
+        }
+    }
+
+    #showFlightControlSliders(units: Unit[])
+    {
+        var sliders = getUnitControlSliders();
+        sliders.airspeed.show();
+        sliders.altitude.show();
+
+        if (this.#checkAllUnitsAircraft(units))
+        {
+            sliders.airspeed.setMinMax(100, 600);
+            sliders.altitude.setMinMax(0, 50000);
+        }
+        else if (this.#checkAllUnitsHelicopter(units))
+        {
+            sliders.airspeed.setMinMax(0, 200);
+            sliders.altitude.setMinMax(0, 10000);
+        }
+        else if (this.#checkAllUnitsGroundUnit(units))
+        {
+            sliders.airspeed.setMinMax(0, 60);
+            sliders.altitude.hide();
+        }
+        else if (this.#checkAllUnitsNavyUnit(units))
+        {
+            sliders.airspeed.setMinMax(0, 60);
+            sliders.altitude.hide();
+        }
+        else {
+            sliders.airspeed.hide();
+            sliders.altitude.hide();
+        }
+
+        var targetSpeed = this.#getTargetAirspeed(units);
+        if (targetSpeed != null)
+        {
+            sliders.airspeed.setActive(true);
+            sliders.airspeed.setValue(targetSpeed * 1.94384);
+        }
+        else
+        {
+            sliders.airspeed.setActive(false);
+        }
+
+        var targetAltitude = this.#getTargetAltitude(units);
+        if (targetAltitude != null)
+        {
+            sliders.altitude.setActive(true);
+            sliders.altitude.setValue(targetAltitude / 0.3048);
+        }
+        else
+        {
+            sliders.altitude.setActive(false);
         }
     }
 
@@ -157,6 +251,38 @@ export class UnitControlPanel {
         return true
     }
 
+    #checkAllUnitsAircraft(units: Unit[])
+    {
+        for (let unit of units)
+            if (!(unit instanceof Aircraft))
+                return false
+        return true
+    }
+
+    #checkAllUnitsHelicopter(units: Unit[])
+    {
+        for (let unit of units)
+            if (!(unit instanceof Helicopter))
+                return false
+        return true
+    }
+
+    #checkAllUnitsGroundUnit(units: Unit[])
+    {
+        for (let unit of units)
+            if (!(unit instanceof GroundUnit))
+                return false
+        return true
+    }
+
+    #checkAllUnitsNavyUnit(units: Unit[])
+    {
+        for (let unit of units)
+            if (!(unit instanceof NavyUnit))
+                return false
+        return true
+    }
+
     #checkAllUnitsSameFormation(units: Unit[])
     {
         var leaderFound = false;
@@ -182,4 +308,56 @@ export class UnitControlPanel {
                 return true
         return false
     }
+
+    #getTargetAirspeed(units: Unit[])
+    {
+        var airspeed = null;
+        for (let unit of units)
+        {
+            if (unit.targetSpeed != airspeed && airspeed != null)
+                return null
+            else
+                airspeed = unit.targetSpeed;
+        }
+        return airspeed;
+    }
+
+    #getTargetAltitude(units: Unit[])
+    {
+        var altitude = null;
+        for (let unit of units)
+        {
+            if (unit.targetAltitude != altitude && altitude != null)
+                return null
+            else
+                altitude = unit.targetAltitude;
+        }
+        return altitude;
+    }
+
+    #getROE(units: Unit[])
+    {
+        var ROE = null;
+        for (let unit of units)
+        {
+            if (unit.ROE !== ROE && ROE != null)
+                return null
+            else
+                ROE = unit.ROE;
+        }
+        return ROE;
+    }
+
+    #getReactionToThreat(units: Unit[])
+    {
+        var reactionToThreat = null;
+        for (let unit of units)
+        {
+            if (unit.reactionToThreat !== reactionToThreat && reactionToThreat != null)
+                return null
+            else
+                reactionToThreat = unit.reactionToThreat;
+        }
+        return reactionToThreat;
+    }
 }

client/src/units/unit.ts

@@ -2,7 +2,7 @@ import { Marker, LatLng, Polyline, Icon } from 'leaflet';
 import { ConvertDDToDMS } from '../other/utils';
 import { getMap, getUnitsManager, getVisibilitySettings } from '..';
 import { UnitMarker, MarkerOptions, AircraftMarker, HelicopterMarker, GroundUnitMarker, NavyUnitMarker, WeaponMarker } from './unitmarker';
-import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader } from '../dcs/dcs';
+import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader, landAt, setAltitude, setReactionToThreat, setROE, setSpeed } from '../dcs/dcs';
 
 var pathIcon = new Icon({
     iconUrl: 'images/marker-icon.png',
@@ -36,6 +36,10 @@ export class Unit {
     leaderID: number = 0;
     wingmen: Unit[] = [];
     wingmenIDs: number[] = [];
+    targetSpeed: number = 0;
+    targetAltitude: number = 0;
+    ROE: string = "";
+    reactionToThreat: string = "";
     
     #selectable: boolean;
     #selected: boolean = false;
@@ -296,7 +300,6 @@ export class Unit {
         }
     }
     
-
     attackUnit(targetID: number) {
         /* Call DCS attackUnit function */
         if (this.ID != targetID) {
@@ -307,7 +310,11 @@ export class Unit {
         }
     }
 
-    
+    landAt(latlng: LatLng)
+    {
+        landAt(this.ID, latlng);
+    }
+
     changeSpeed(speedChange: string)
     {
        changeSpeed(this.ID, speedChange);
@@ -318,6 +325,26 @@ export class Unit {
         changeAltitude(this.ID, altitudeChange);
     }
 
+    setSpeed(speed: number)
+    {
+       setSpeed(this.ID, speed);
+    }
+
+    setAltitude(altitude: number)
+    {
+        setAltitude(this.ID, altitude);
+    }
+
+    setROE(ROE: string)
+    {
+        setROE(this.ID, ROE);
+    }
+
+    setReactionToThreat(reactionToThreat: string)
+    {
+        setReactionToThreat(this.ID, reactionToThreat);
+    }
+
     /*
     setformation(formation)
     {

client/src/units/unitsmanager.ts

@@ -15,6 +15,17 @@ export class UnitsManager {
         document.addEventListener('paste', () => this.pasteUnits());
     }
 
+    #updateUnitControlPanel() {
+        /* Update the unit control panel */
+        if (this.getSelectedUnits().length > 0) {
+            getUnitControlPanel().show();
+            getUnitControlPanel().update(this.getSelectedLeaders().concat(this.getSelectedSingletons()));
+        }
+        else {
+            getUnitControlPanel().hide();
+        }
+    }
+
     getUnits() {
         return this.#units;
     }
@@ -167,7 +178,11 @@ export class UnitsManager {
 
     selectedUnitsLandAt(latlng: LatLng)
     {
-
+        var selectedUnits = this.getSelectedUnits();
+        for (let idx in selectedUnits)
+        {
+            selectedUnits[idx].landAt(latlng);
+        }
     }
 
     selectedUnitsChangeSpeed(speedChange: string)
@@ -177,6 +192,8 @@ export class UnitsManager {
         {
             selectedUnits[idx].changeSpeed(speedChange);
         }
+
+        setTimeout(() => this.#updateUnitControlPanel(), 300); // TODO find better method, may fail
     }
 
     selectedUnitsChangeAltitude(altitudeChange: string)
@@ -186,8 +203,51 @@ export class UnitsManager {
         {
             selectedUnits[idx].changeAltitude(altitudeChange);
         }
+
+        setTimeout(() => this.#updateUnitControlPanel(), 300); // TODO find better method, may fail
     }
 
+    selectedUnitsSetSpeed(speed: number)
+    {
+        var selectedUnits = this.getSelectedUnits();
+        for (let idx in selectedUnits)
+        {
+            selectedUnits[idx].setSpeed(speed);
+        }
+    }
+
+    selectedUnitsSetAltitude(altitude: number)
+    {
+        var selectedUnits = this.getSelectedUnits();
+        for (let idx in selectedUnits)
+        {
+            selectedUnits[idx].setAltitude(altitude);
+        }
+    }
+
+    selectedUnitsSetROE(ROE: string)
+    {
+        var selectedUnits = this.getSelectedUnits();
+        for (let idx in selectedUnits)
+        {
+            selectedUnits[idx].setROE(ROE);
+        }
+
+        setTimeout(() => this.#updateUnitControlPanel(), 300); // TODO find better method, may fail
+    }
+
+    selectedUnitsSetReactionToThreat(reactionToThreat: string)
+    {
+        var selectedUnits = this.getSelectedUnits();
+        for (let idx in selectedUnits)
+        {
+            selectedUnits[idx].setReactionToThreat(reactionToThreat);
+        }
+        
+        setTimeout(() => this.#updateUnitControlPanel(), 300); // TODO find better method, may fail
+    }
+
+
     copyUnits()
     {
         this.#copiedUnits = this.getSelectedUnits();
@@ -198,7 +258,7 @@ export class UnitsManager {
         for (let idx in this.#copiedUnits)
         {
             var unit = this.#copiedUnits[idx];
-            cloneUnit(unit.ID);
+            cloneUnit(unit.ID, getMap().getMouseCoordinates());
         }
     }
 
@@ -259,7 +319,7 @@ export class UnitsManager {
                 console.log("At least 2 units must be selected to create a formation.");
             }
         }
-        setTimeout(() => this.#updateUnitControlPanel(), 1000); // TODO find better method, may fail
+        setTimeout(() => this.#updateUnitControlPanel(), 300); // TODO find better method, may fail
     }
 
     selectedUnitsUndoFormation(ID: number | null = null)
@@ -268,17 +328,6 @@ export class UnitsManager {
         {
             leader.setLeader(false);
         }
-        setTimeout(() => this.#updateUnitControlPanel(), 1000); // TODO find better method, may fail 
-    }
-
-    #updateUnitControlPanel() {
-        /* Update the unit control panel */
-        if (this.getSelectedUnits().length > 0) {
-            getUnitControlPanel().show();
-            getUnitControlPanel().update(this.getSelectedLeaders().concat(this.getSelectedSingletons()));
-        }
-        else {
-            getUnitControlPanel().hide();
-        }
+        setTimeout(() => this.#updateUnitControlPanel(), 300); // TODO find better method, may fail 
     }
 }

client/views/unitcontrolpanel.ejs

@@ -18,7 +18,20 @@
     </div>
     <div class="hl"></div>
 
-    <!--
+    <div id="section-label">Controls</div>
+    <div id="flight-controls-buttons-container">
+        <div class="slider-container flight-control-slider" id="altitude-slider">
+            <div class="flight-control-title">Altitude</div>
+            <div class="flight-control-value" id="value"></div>
+            <input type="range" min="1" max="100" value="50" class="slider">
+        </div>
+        <div class="slider-container flight-control-slider" id="airspeed-slider">
+            <div class="flight-control-title">Speed</div>
+            <div class="flight-control-value" id="value"></div>
+            <input type="range" min="1" max="100" value="50" class="slider">
+        </div>
+    </div>
+
     <div id="section-label">Formation</div>
     <div id="formation-buttons-container">
         <div class="rectangular-button">Echelon</div>
@@ -31,22 +44,22 @@
 
     <div id="section-label">Rules of engagement</div>
     <div id="roe-buttons-container">
-        <div class="rectangular-button">Free</div>
-        <div class="rectangular-button">Designated free</div>
-        <div class="rectangular-button">Designated</div>
-        <div class="rectangular-button">Return</div>
-        <div class="rectangular-button">Hold</div>
+        <div class="rectangular-button" id="free">Free</div>
+        <div class="rectangular-button" id="designated-free">Designated free</div>
+        <div class="rectangular-button" id="designated">Designated</div>
+        <div class="rectangular-button" id="return">Return</div>
+        <div class="rectangular-button" id="hold">Hold</div>
     </div>
 
     <div class="hl"></div>
 
     <div id="section-label">Reaction to threat</div>
-    <div id="threat-reaction-buttons-container">
-        <div class="rectangular-button">None</div>
-        <div class="rectangular-button">Passive</div>
-        <div class="rectangular-button">Evade</div>
-        <div class="rectangular-button">Escape</div>
-        <div class="rectangular-button">Abort</div>
+    <div id="reaction-to-threat-buttons-container">
+        <div class="rectangular-button" id="none">None</div>
+        <div class="rectangular-button" id="passive">Passive</div>
+        <div class="rectangular-button" id="evade">Evade</div>
+        <div class="rectangular-button" id="escape">Escape</div>
+        <div class="rectangular-button" id="abort">Abort</div>
     </div>
--->
+
 </div>