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

More svg injection, removing stringed html from code

Browse Source
This commit is contained in:
Pax1601
2023-05-24 08:21:04 +02:00
parent a2664dc676
commit e7ce9ac76d
123 changed files with 1439 additions and 1829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/controls/airbasecontextmenu.ts
View File

@@ -5,8 +5,7 @@ import { ContextMenu } from "./contextmenu";
export class AirbaseContextMenu extends ContextMenu {
#airbase: Airbase | null = null;
constructor(id: string)
{
constructor(id: string) {
super(id);
document.addEventListener("contextMenuSpawnAirbase", (e: any) => {
this.showSpawnMenu();
@@ -19,8 +18,7 @@ export class AirbaseContextMenu extends ContextMenu {
})
}
setAirbase(airbase: Airbase)
{
setAirbase(airbase: Airbase) {
this.#airbase = airbase;
this.setName(airbase.getName());
this.setProperties(airbase.getProperties());
@@ -29,24 +27,21 @@ export class AirbaseContextMenu extends ContextMenu {
this.enableLandButton(getUnitsManager().getSelectedUnitsType() === "Aircraft" && (getUnitsManager().getSelectedUnitsCoalition() === airbase.getCoalition() || airbase.getCoalition() === "neutral"))
}
setName(airbaseName: string)
{
setName(airbaseName: string) {
var nameDiv = <HTMLElement>this.getContainer()?.querySelector("#airbase-name");
if (nameDiv != null)
nameDiv.innerText = airbaseName;
nameDiv.innerText = airbaseName;
}
setProperties(airbaseProperties: string[])
{
setProperties(airbaseProperties: string[]) {
this.getContainer()?.querySelector("#airbase-properties")?.replaceChildren(...airbaseProperties.map((property: string) => {
var div = document.createElement("div");
div.innerText = property;
return div;
}), );
}),);
}
setParkings(airbaseParkings: string[])
{
setParkings(airbaseParkings: string[]) {
this.getContainer()?.querySelector("#airbase-parking")?.replaceChildren(...airbaseParkings.map((parking: string) => {
var div = document.createElement("div");
div.innerText = parking;
@@ -54,22 +49,18 @@ export class AirbaseContextMenu extends ContextMenu {
}));
}
setCoalition(coalition: string)
{
setCoalition(coalition: string) {
(<HTMLElement>this.getContainer()?.querySelector("#spawn-airbase-aircraft-button")).dataset.activeCoalition = coalition;
}
enableLandButton(enableLandButton: boolean)
{
enableLandButton(enableLandButton: boolean) {
this.getContainer()?.querySelector("#land-here-button")?.classList.toggle("hide", !enableLandButton);
}
showSpawnMenu()
{
if (this.#airbase != null)
{
showSpawnMenu() {
if (this.#airbase != null) {
setActiveCoalition(this.#airbase.getCoalition());
getMap().showMapContextMenu({originalEvent: {x: this.getX(), y: this.getY(), latlng: this.getLatLng()}});
getMap().showMapContextMenu({ originalEvent: { x: this.getX(), y: this.getY(), latlng: this.getLatLng() } });
getMap().getMapContextMenu().hideUpperBar();
getMap().getMapContextMenu().showSubMenu("aircraft");
getMap().getMapContextMenu().setAirbaseName(this.#airbase.getName());

15
client/src/controls/contextmenu.ts
View File

@@ -23,28 +23,23 @@ export class ContextMenu {
this.#container?.classList.toggle("hide", true);
}
getContainer()
{
getContainer() {
return this.#container;
}
getLatLng()
{
getLatLng() {
return this.#latlng;
}
getX()
{
getX() {
return this.#x;
}
getY()
{
getY() {
return this.#y;
}
clip()
{
clip() {
if (this.#container != null) {
if (this.#x + this.#container.offsetWidth < window.innerWidth)
this.#container.style.left = this.#x + "px";

52
client/src/controls/dropdown.ts
View File

@@ -7,17 +7,16 @@ export class Dropdown {
#optionsList: string[] = [];
#index: number = 0;
constructor(ID: string, callback: CallableFunction, options: string[] | null = null)
{
this.#element = <HTMLElement>document.getElementById(ID);
this.#options = <HTMLElement>this.#element.querySelector(".ol-select-options");
this.#value = <HTMLElement>this.#element.querySelector(".ol-select-value");
constructor(ID: string, callback: CallableFunction, options: string[] | null = null) {
this.#element = <HTMLElement>document.getElementById(ID);
this.#options = <HTMLElement>this.#element.querySelector(".ol-select-options");
this.#value = <HTMLElement>this.#element.querySelector(".ol-select-value");
this.#defaultValue = this.#value.innerText;
this.#callback = callback;
this.#callback = callback;
if (options != null) {
this.setOptions(options);
}
}
this.#value.addEventListener("click", (ev) => {
this.#element.classList.toggle("is-open");
@@ -31,11 +30,10 @@ export class Dropdown {
}
});
this.#options.classList.add( "ol-scrollable" );
this.#options.classList.add("ol-scrollable");
}
setOptions(optionsList: string[])
{
setOptions(optionsList: string[]) {
this.#optionsList = optionsList;
this.#options.replaceChildren(...optionsList.map((option: string, idx: number) => {
var div = document.createElement("div");
@@ -48,7 +46,9 @@ export class Dropdown {
button.addEventListener("click", (e: MouseEvent) => {
e.stopPropagation();
this.#value.innerHTML = `<div class = "ol-ellipsed"> ${option} </div>`;
this.#value = document.createElement("div");
this.#value.classList.add("ol-ellipsed");
this.#value.innerText = option;
this.#close();
this.#callback(option, e);
this.#index = idx;
@@ -57,19 +57,15 @@ export class Dropdown {
}));
}
selectText( text:string ) {
const index = [].slice.call( this.#options.children ).findIndex( ( opt:Element ) => opt.querySelector( "button" )?.innerText === text );
if ( index > -1 ) {
this.selectValue( index );
selectText(text: string) {
const index = [].slice.call(this.#options.children).findIndex((opt: Element) => opt.querySelector("button")?.innerText === text);
if (index > -1) {
this.selectValue(index);
}
}
selectValue(idx: number)
{
if (idx < this.#optionsList.length)
{
selectValue(idx: number) {
if (idx < this.#optionsList.length) {
var option = this.#optionsList[idx];
this.#value.innerHTML = `<div class = "ol-ellipsed"> ${option} </div>`;
this.#index = idx;
@@ -91,8 +87,8 @@ export class Dropdown {
}
setValue(value: string) {
var index = this.#optionsList.findIndex((option) => {return option === value});
if (index > -1)
var index = this.#optionsList.findIndex((option) => { return option === value });
if (index > -1)
this.selectValue(index);
}
@@ -102,21 +98,21 @@ export class Dropdown {
#clip() {
const options = this.#options;
const bounds = options.getBoundingClientRect();
this.#element.dataset.position = ( bounds.bottom > window.innerHeight ) ? "top" : "";
const bounds = options.getBoundingClientRect();
this.#element.dataset.position = (bounds.bottom > window.innerHeight) ? "top" : "";
}
#close() {
this.#element.classList.remove( "is-open" );
this.#element.classList.remove("is-open");
this.#element.dataset.position = "";
}
#open() {
this.#element.classList.add( "is-open" );
this.#element.classList.add("is-open");
}
#toggle() {
if ( this.#element.classList.contains( "is-open" ) ) {
if (this.#element.classList.contains("is-open")) {
this.#close();
} else {
this.#open();

14
client/src/controls/mapcontextmenu.ts
View File

@@ -41,8 +41,7 @@ export class MapContextMenu extends ContextMenu {
document.addEventListener("contextMenuDeployAircraft", () => {
this.hide();
this.#spawnOptions.coalition = getActiveCoalition();
if (this.#spawnOptions)
{
if (this.#spawnOptions) {
getMap().addTemporaryMarker(this.#spawnOptions.latlng);
spawnAircraft(this.#spawnOptions);
}
@@ -51,8 +50,7 @@ export class MapContextMenu extends ContextMenu {
document.addEventListener("contextMenuDeployGroundUnit", () => {
this.hide();
this.#spawnOptions.coalition = getActiveCoalition();
if (this.#spawnOptions)
{
if (this.#spawnOptions) {
getMap().addTemporaryMarker(this.#spawnOptions.latlng);
spawnGroundUnit(this.#spawnOptions);
}
@@ -189,10 +187,10 @@ export class MapContextMenu extends ContextMenu {
this.#spawnOptions.role = role;
this.#resetGroundUnitType();
const types = groundUnitsDatabase.getByRole(role).map((blueprint) => { return blueprint.label } );
const types = groundUnitsDatabase.getByRole(role).map((blueprint) => { return blueprint.label });
types.sort();
this.#groundUnitTypeDropdown.setOptions( types );
this.#groundUnitTypeDropdown.setOptions(types);
this.#groundUnitTypeDropdown.selectValue(0);
this.clip();
}
@@ -205,8 +203,8 @@ export class MapContextMenu extends ContextMenu {
const roles = groundUnitsDatabase.getRoles();
roles.sort();
this.#groundUnitRoleDropdown.setOptions( roles );
this.#groundUnitRoleDropdown.setOptions(roles);
this.clip();
}

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

@@ -23,8 +23,7 @@ export class Slider {
if (this.#container != null) {
this.#display = this.#container.style.display;
this.#slider = <HTMLInputElement>this.#container.querySelector("input");
if (this.#slider != null)
{
if (this.#slider != null) {
this.#slider.addEventListener("input", (e: any) => this.#onInput());
this.#slider.addEventListener("mousedown", (e: any) => this.#onStart());
this.#slider.addEventListener("mouseup", (e: any) => this.#onFinalize());
@@ -33,93 +32,77 @@ export class Slider {
}
}
show()
{
show() {
if (this.#container != null)
this.#container.style.display = this.#display;
}
hide()
{
hide() {
if (this.#container != null)
this.#container.style.display = 'none';
}
setActive(newActive: boolean)
{
if (this.#container && !this.#dragged)
{
setActive(newActive: boolean) {
if (this.#container && !this.#dragged) {
this.#container.classList.toggle("active", newActive);
if (!newActive && this.#valueText != null)
this.#valueText.innerText = "Mixed values";
}
}
setMinMax(newMinValue: number, newMaxValue: number)
{
setMinMax(newMinValue: number, newMaxValue: number) {
this.#minValue = newMinValue;
this.#maxValue = newMaxValue;
this.#updateMax();
}
setIncrement(newIncrement: number)
{
setIncrement(newIncrement: number) {
this.#increment = newIncrement;
this.#updateMax();
}
setValue(newValue: number)
{
setValue(newValue: number) {
// Disable value setting if the user is dragging the element
if (!this.#dragged)
{
if (!this.#dragged) {
this.#value = newValue;
if (this.#slider != null)
this.#slider.value = String((newValue - this.#minValue) / (this.#maxValue - this.#minValue) * parseFloat(this.#slider.max));
this.#slider.value = String((newValue - this.#minValue) / (this.#maxValue - this.#minValue) * parseFloat(this.#slider.max));
this.#onValue()
}
}
getValue()
{
getValue() {
return this.#value;
}
getDragged()
{
getDragged() {
return this.#dragged;
}
#updateMax()
{
#updateMax() {
var oldValue = this.getValue();
if (this.#slider != null)
this.#slider.max = String((this.#maxValue - this.#minValue) / this.#increment);
this.setValue(oldValue);
}
#onValue()
{
#onValue() {
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.#valueText.innerHTML = this.#minValue + Math.round(parseFloat(this.#slider.value) / parseFloat(this.#slider.max) * (this.#maxValue - this.#minValue)) + this.#unit
this.setActive(true);
}
#onInput()
{
#onInput() {
this.#onValue();
}
#onStart()
{
#onStart() {
this.#dragged = true;
}
#onFinalize()
{
#onFinalize() {
this.#dragged = false;
if (this.#slider != null)
{
if (this.#slider != null) {
this.#value = this.#minValue + parseFloat(this.#slider.value) / parseFloat(this.#slider.max) * (this.#maxValue - this.#minValue);
this.#callback(this.getValue());
}

23
client/src/controls/unitcontextmenu.ts
View File

@@ -1,4 +1,3 @@
import { getUnitsManager } from "..";
import { deg2rad } from "../other/utils";
import { ContextMenu } from "./contextmenu";
@@ -10,21 +9,19 @@ export class UnitContextMenu extends ContextMenu {
document.addEventListener("applyCustomFormation", () => {
var dialog = document.getElementById("custom-formation-dialog");
if (dialog)
{
if (dialog) {
dialog.classList.add("hide");
var clock = 1;
while (clock < 8)
{
if ((<HTMLInputElement> dialog.querySelector(`#formation-${clock}`)).checked)
while (clock < 8) {
if ((<HTMLInputElement>dialog.querySelector(`#formation-${clock}`)).checked)
break
clock++;
}
var angleDeg = 360 - (clock - 1) * 45;
var angleRad = deg2rad(angleDeg);
var distance = parseInt((<HTMLInputElement> dialog.querySelector(`#distance`)?.querySelector("input")).value) * 0.3048;
var upDown = parseInt((<HTMLInputElement> dialog.querySelector(`#up-down`)?.querySelector("input")).value) * 0.3048;
var distance = parseInt((<HTMLInputElement>dialog.querySelector(`#distance`)?.querySelector("input")).value) * 0.3048;
var upDown = parseInt((<HTMLInputElement>dialog.querySelector(`#up-down`)?.querySelector("input")).value) * 0.3048;
// X: front-rear, positive front
// Y: top-bottom, positive top
// Z: left-right, positive right
@@ -34,7 +31,7 @@ export class UnitContextMenu extends ContextMenu {
var z = distance * Math.sin(angleRad);
if (this.#customFormationCallback)
this.#customFormationCallback({"x": x, "y": y, "z": z})
this.#customFormationCallback({ "x": x, "y": y, "z": z })
}
})
}
@@ -43,10 +40,8 @@ export class UnitContextMenu extends ContextMenu {
this.#customFormationCallback = callback;
}
setOptions(options: {[key: string]: string}, callback: CallableFunction)
{
this.getContainer()?.replaceChildren(...Object.keys(options).map((option: string, idx: number) =>
{
setOptions(options: { [key: string]: string }, callback: CallableFunction) {
this.getContainer()?.replaceChildren(...Object.keys(options).map((option: string, idx: number) => {
var button = document.createElement("button");
button.innerHTML = options[option];
button.addEventListener("click", () => callback(option));