diff --git a/client/src/controls/slider.ts b/client/src/controls/slider.ts index d2a17f81..636c1f70 100644 --- a/client/src/controls/slider.ts +++ b/client/src/controls/slider.ts @@ -2,20 +2,23 @@ export class Slider { #container: HTMLElement | null; #callback: CallableFunction; #slider: HTMLInputElement | null = null; - #value: HTMLElement | null = null; + #valueText: HTMLElement | null = null; #minValue: number; #maxValue: number; + #increment: number; #minValueDiv: HTMLElement | null = null; #maxValueDiv: HTMLElement | null = null; #unit: string; #display: string = ""; #dragged: boolean = false; + #value: number = 0; 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.#increment = 1; this.#unit = unit; if (this.#container != null) { this.#display = this.#container.style.display; @@ -26,7 +29,7 @@ export class Slider { this.#slider.addEventListener("mousedown", (e: any) => this.#onStart()); this.#slider.addEventListener("mouseup", (e: any) => this.#onFinalize()); } - this.#value = this.#container.querySelector("#value"); + this.#valueText = this.#container.querySelector("#value"); } } @@ -47,8 +50,8 @@ export class Slider { if (this.#container && !this.#dragged) { this.#container.classList.toggle("active", newActive); - if (!newActive && this.#value != null) - this.#value.innerText = "Mixed values"; + if (!newActive && this.#valueText != null) + this.#valueText.innerText = "Mixed values"; } } @@ -56,6 +59,13 @@ export class Slider { { this.#minValue = newMinValue; this.#maxValue = newMaxValue; + this.#updateMax(); + } + + setIncrement(newIncrement: number) + { + this.#increment = newIncrement; + this.#updateMax(); } setValue(newValue: number) @@ -63,21 +73,35 @@ export class Slider { // Disable value setting if the user is dragging the element if (!this.#dragged) { + this.#value = newValue; if (this.#slider != null) this.#slider.value = String((newValue - this.#minValue) / (this.#maxValue - this.#minValue) * 100); this.#onValue() } } + getValue() + { + return this.#value; + } + getDragged() { return this.#dragged; } + #updateMax() + { + var oldValue = this.getValue(); + if (this.#slider != null) + this.#slider.max = String((this.#maxValue - this.#minValue) / this.#increment); + this.setValue(oldValue); + } + #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 + if (this.#valueText != null && this.#slider != null) + this.#valueText.innerHTML = this.#minValue + Math.round(parseFloat(this.#slider.value) / parseFloat(this.#slider.max) * (this.#maxValue - this.#minValue)) + this.#unit this.setActive(true); } @@ -95,6 +119,9 @@ export class Slider { { this.#dragged = false; if (this.#slider != null) - this.#callback(this.#minValue + parseFloat(this.#slider.value) / 100 * (this.#maxValue - this.#minValue)); + { + this.#value = this.#minValue + parseFloat(this.#slider.value) / 100 * (this.#maxValue - this.#minValue); + this.#callback(this.getValue()); + } } } \ No newline at end of file diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts index 4e5bc7e2..83e52a09 100644 --- a/client/src/panels/unitcontrolpanel.ts +++ b/client/src/panels/unitcontrolpanel.ts @@ -10,8 +10,10 @@ const ROEs: string[] = ["Free", "Designated free", "Designated", "Return", "Hold const reactionsToThreat: string[] = [ "None", "Passive", "Evade", "Escape", "Abort"]; const minSpeedValues: {[key: string]: number} = {Aircraft: 100, Helicopter: 0, NavyUnit: 0, GroundUnit: 0}; const maxSpeedValues: {[key: string]: number} = {Aircraft: 800, Helicopter: 300, NavyUnit: 60, GroundUnit: 60}; -const minAltitudeValues: {[key: string]: number} = {Aircraft: 500, Helicopter: 0, NavyUnit: 0, GroundUnit: 0}; -const maxAltitudeValues: {[key: string]: number} = {Aircraft: 50000, Helicopter: 10000, NavyUnit: 60, GroundUnit: 60}; +const speedIncrements: {[key: string]: number} = {Aircraft: 25, Helicopter: 10, NavyUnit: 5, GroundUnit: 5}; +const minAltitudeValues: {[key: string]: number} = {Aircraft: 0, Helicopter: 0}; +const maxAltitudeValues: {[key: string]: number} = {Aircraft: 50000, Helicopter: 10000}; +const altitudeIncrements: {[key: string]: number} = {Aircraft: 2500, Helicopter: 1000}; export class UnitControlPanel extends Panel { #altitudeSlider: Slider; @@ -102,6 +104,8 @@ export class UnitControlPanel extends Panel { this.#airspeedSlider.setMinMax(minSpeedValues[unitsType], maxSpeedValues[unitsType]); this.#altitudeSlider.setMinMax(minAltitudeValues[unitsType], maxAltitudeValues[unitsType]); + this.#airspeedSlider.setIncrement(speedIncrements[unitsType]); + this.#altitudeSlider.setIncrement(altitudeIncrements[unitsType]); this.#airspeedSlider.setActive(targetSpeed != undefined); if (targetSpeed != undefined) diff --git a/client/views/unitcontrolpanel.ejs b/client/views/unitcontrolpanel.ejs index 31efe280..50e6db2c 100644 --- a/client/views/unitcontrolpanel.ejs +++ b/client/views/unitcontrolpanel.ejs @@ -25,7 +25,7 @@
Speed
451kts
- +
@@ -33,7 +33,7 @@
Altitude
21,594ft
- +