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

Migration to node.js completed

Browse Source
This commit is contained in:
Pax1601
2023-01-22 19:05:47 +01:00
parent 6655739957
commit 4e7f6c6c39
1817 changed files with 2770 additions and 139018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
client/src/controls/button.ts
View File

@@ -1,14 +1,38 @@
export class Button
{
export class Button {
#container: HTMLElement | null;
constructor(ID: string, srcs: string[], callback: CallableFunction)
{
#srcs: string[];
#callback: CallableFunction;
#img: any;
#state: number = 0;
constructor(ID: string, srcs: string[], callback: CallableFunction) {
this.#container = document.getElementById(ID);
if (this.#container != null)
{
var img = document.createElement("img");
img.src = srcs[0];
this.#container.appendChild(img);
this.#srcs = srcs;
this.#callback = callback;
if (this.#container != null) {
this.#img = document.createElement("img");
this.#img.src = this.#srcs[this.#state];
this.#container.appendChild(this.#img);
this.#container.addEventListener("click", () => this.#onClick());
}
}
setState(state: number) {
if (state < this.#srcs.length) {
this.#state = state;
this.#img.src = this.#srcs[this.#state];
}
}
getState() {
return this.#state;
}
#onClick() {
if (this.#img != null) {
this.setState(this.#state < this.#srcs.length - 1 ? this.#state + 1 : 0);
if (this.#callback)
this.#callback(this.#state);
}
}
}

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

@@ -1,41 +1,36 @@
export class Dropdown
{
export class Dropdown {
#container: HTMLElement | null;
#options: string[];
#options: string[];
#open?: boolean;
#content?: HTMLElement;
#callback?: CallableFunction;
constructor(ID: string, options: string[], callback: CallableFunction)
{
constructor(ID: string, options: string[], callback: CallableFunction) {
this.#container = document.getElementById(ID);
this.#options = options;
this.#callback = callback;
this.close()
this.#container?.addEventListener("click", () => {
this.#open ? this.close(): this.open();
this.#open ? this.close() : this.open();
})
}
open()
{
if (this.#container != null)
{
open() {
if (this.#container != null) {
this.#open = true;
this.#container.classList.add("olympus-dropdown-open");
this.#container.classList.remove("olympus-dropdown-closed");
this.#content = document.createElement("div");
this.#content.classList.add("olympus-dropdown-content");
this.#content.style.width = (this.#container.offsetWidth - this.#container.offsetHeight) + "px";
this.#content.style.left = this.#container.offsetLeft + "px";
this.#content.style.top = this.#container.offsetTop + this.#container.offsetHeight + "px";
console.log(this.#container);
document.body.appendChild(this.#content);
var height = 2;
for (let optionID in this.#options)
{
for (let optionID in this.#options) {
var node = document.createElement("div");
node.classList.add("olympus-dropdown-element");
node.appendChild(document.createTextNode(this.#options[optionID]));
@@ -53,10 +48,8 @@ export class Dropdown
}
}
close()
{
if (this.#container != null)
{
close() {
if (this.#container != null) {
this.#open = false;
this.#container?.classList.remove("olympus-dropdown-open");
this.#container?.classList.add("olympus-dropdown-closed");

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

@@ -1,32 +1,28 @@
export class SelectionScroll
{
#container : HTMLElement | null;
import { LatLng } from "leaflet";
export class SelectionScroll {
#container: HTMLElement | null;
#display: string;
constructor(id: string, )
{
constructor(id: string,) {
this.#container = document.getElementById(id);
this.#display = '';
if (this.#container != null)
{
if (this.#container != null) {
this.#display = this.#container.style.display;
this.hide();
}
}
show(x: number, y: number, options: any, callback: CallableFunction)
{
show(x: number, y: number, options: any, callback: CallableFunction) {
/* Hide to remove buttons, if present */
this.hide();
if (this.#container != null && options.length > 1)
{
if (this.#container != null && options.length > 1) {
this.#container.style.display = this.#display;
this.#container.style.left = x - 110 + "px";
this.#container.style.top = y - 110 + "px";
this.#container.style.top = y - 110 + "px";
for (let optionID in options)
{
for (let optionID in options) {
var node = document.createElement("div");
node.classList.add("olympus-selection-scroll-element");
node.appendChild(document.createTextNode(options[optionID]));
@@ -36,14 +32,11 @@ export class SelectionScroll
}
}
hide()
{
if (this.#container != null)
{
hide() {
if (this.#container != null) {
this.#container.style.display = "none";
var buttons = this.#container.querySelectorAll(".olympus-selection-scroll-element");
for (let child of buttons)
{
for (let child of buttons) {
this.#container.removeChild(child);
}
}

56
client/src/controls/selectionwheel.ts
View File

@@ -1,40 +1,34 @@
import { getActiveCoalition, setActiveCoalition } from "..";
import { deg2rad } from "../other/utils";
export class SelectionWheel
{
export class SelectionWheel {
#container: HTMLElement | null;
#display: string;
constructor(id: string)
{
constructor(id: string) {
this.#container = document.getElementById(id);
this.#display = '';
if (this.#container != null)
{
if (this.#container != null) {
this.#container.querySelector("#coalition-switch")?.addEventListener('change', (e) => this.#onSwitch(e))
this.#display = this.#container.style.display;
this.hide();
}
}
show(x: number, y: number, options: any, showCoalition: boolean)
{
show(x: number, y: number, options: any, showCoalition: boolean) {
/* Hide to remove buttons, if present */
this.hide();
if (this.#container != null)
{
if (this.#container != null) {
this.#container.style.display = this.#display;
this.#container.style.left = x - 110 + "px";
this.#container.style.top = y - 110 + "px";
this.#container.style.top = y - 110 + "px";
var angularSize = 360 / options.length;
var r = 80;
/* Create the buttons */
for (let id in options)
{
for (let id in options) {
var button = document.createElement("div");
button.classList.add("selection-wheel-button");
button.style.left = x - 25 + "px";
@@ -50,8 +44,7 @@ export class SelectionWheel
image.classList.add("selection-wheel-image");
image.src = `images/buttons/${options[id].src}`
image.title = options[id].tooltip;
if ('tint' in options[id])
{
if ('tint' in options[id]) {
button.style.setProperty('background-color', options[id].tint);
image.style.opacity = "0";
}
@@ -59,14 +52,12 @@ export class SelectionWheel
}
/* Hide the coalition switch if required */
var switchContainer = <HTMLElement> this.#container.querySelector("#coalition-switch-container");
if (showCoalition == false)
{
var switchContainer = <HTMLElement>this.#container.querySelector("#coalition-switch-container");
if (showCoalition == false) {
switchContainer.style.display = "none";
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--neutral-coalition-color"));
}
else
{
else {
switchContainer.style.display = "block";
if (getActiveCoalition() == "blue")
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--blue-coalition-color"));
@@ -76,33 +67,26 @@ export class SelectionWheel
}
}
hide()
{
if (this.#container != null)
{
hide() {
if (this.#container != null) {
this.#container.style.display = "none";
var buttons = this.#container.querySelectorAll(".selection-wheel-button");
for (let child of buttons)
{
for (let child of buttons) {
this.#container.removeChild(child);
}
}
}
#onSwitch(e: any)
{
if (this.#container != null)
{
if (e.currentTarget.checked)
{
#onSwitch(e: any) {
if (this.#container != null) {
if (e.currentTarget.checked) {
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--red-coalition-color"));
setActiveCoalition("red");
}
else
{
else {
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--blue-coalition-color"));
setActiveCoalition("blue");
}
}
}
}
}