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

Continue migration to node express typescript

Browse Source
This commit is contained in:
Pax1601
2023-01-15 17:48:55 +01:00
parent a75a491fe7
commit baf288c6a0
58 changed files with 4232 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
client/src/controls/selectionscroll.ts Normal file
View File

@@ -0,0 +1,51 @@
export class SelectionScroll
{
#container : HTMLElement | null;
#display: string;
constructor(id: string, )
{
this.#container = document.getElementById(id);
this.#display = '';
if (this.#container != null)
{
this.#display = this.#container.style.display;
this.hide();
}
}
show(x: number, y: number, options: any, callback: CallableFunction)
{
/* Hide to remove buttons, if present */
this.hide();
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";
for (let optionID in options)
{
var node = document.createElement("div");
node.classList.add("olympus-selection-scroll-element");
node.appendChild(document.createTextNode(options[optionID]));
this.#container.appendChild(node);
node.addEventListener('click', () => callback(options[optionID]))
}
}
}
hide()
{
if (this.#container != null)
{
this.#container.style.display = "none";
var buttons = this.#container.querySelectorAll(".olympus-selection-scroll-element");
for (let child of buttons)
{
this.#container.removeChild(child);
}
}
}
}

92
client/src/controls/selectionwheel.ts Normal file
View File

@@ -0,0 +1,92 @@
import { setActiveCoalition } from "..";
import { deg2rad } from "../other/utils";
export class SelectionWheel
{
#container: HTMLElement | null;
#display: string;
constructor(id: string)
{
this.#container = document.getElementById(id);
this.#display = '';
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)
{
/* Hide to remove buttons, if present */
this.hide();
if (this.#container != null)
{
this.#container.style.display = this.#display;
this.#container.style.left = x - 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)
{
var button = document.createElement("div");
button.classList.add("selection-wheel-button");
button.style.left = x - 25 + "px";
button.style.top = y - 25 + "px";
button.addEventListener('click', (e) => options[id].callback(e));
this.#container.appendChild(button);
var angle = parseInt(id) * angularSize;
button.style.opacity = "1";
button.style.left = x + r * Math.sin(deg2rad(angle)) - 25 + "px";
button.style.top = y - r * Math.cos(deg2rad(angle)) - 25 + "px";
var image = document.createElement("img");
image.classList.add("selection-wheel-image");
image.src = `images/buttons/${options[id].src}`
image.title = options[id].tooltip;
if ('tint' in options[id])
{
button.style.setProperty('background-color', options[id].tint);
image.style.opacity = "0";
}
button.appendChild(image);
}
}
}
hide()
{
if (this.#container != null)
{
this.#container.style.display = "none";
var buttons = this.#container.querySelectorAll(".selection-wheel-button");
for (let child of buttons)
{
this.#container.removeChild(child);
}
}
}
#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
{
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--blue-coalition-color"));
setActiveCoalition("blue");
}
}
}
}