weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #123 from Pax1601/83-target-speed-and-altitude-sliders-have-bad-minimum-and-maximum-values

Browse Source 
Sliders now have better max and min values
This commit is contained in:
Pax1601 2023-03-22 17:17:48 +01:00 committed by GitHub
commit 4959df98f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
client/src/controls/slider.ts
View File

@ -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 = <HTMLElement>this.#container.querySelector("#value");
this.#valueText = <HTMLElement>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());
}
}
}

8
client/src/panels/unitcontrolpanel.ts
View File

@ -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)

4
client/views/unitcontrolpanel.ejs
View File

@ -25,7 +25,7 @@
<dt>Speed</dt>
<dd class="flight-control-value" id="value">451kts</dd>
</dl>
<input type="range" min="1" max="100" value="0" class="slider">
<input type="range" min="0" max="100" value="0" class="slider">
</div>
<div class="slider-container flight-control-slider" id="altitude-slider">
@ -33,7 +33,7 @@
<dt>Altitude</dt>
<dd class="flight-control-value" id="value">21,594ft</dd>
</dl>
<input type="range" min="1" max="100" value="0" class="slider">
<input type="range" min="0" max="100" value="0" class="slider">
</div>
</div>