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

Started working on navbar contents

Browse Source
This commit is contained in:
dpassoni 2023-03-06 10:54:35 +01:00
parent d3baa12d11
commit 1a32d5ad17
6 changed files with 51 additions and 1154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/public/stylesheets/olympus.css
View File

@ -122,12 +122,19 @@ nav .ol-select .ol-select-value {
text-align: center;
}
nav .ol-select-value.icon {
align-content: center;
background-color: transparent;
border-radius: 0px;
padding: 0px;
}
nav .ol-select .ol-select-options {
background-color: var(--background-grey);
border-radius: var(--border-radius-sm);
display: none;
list-style: none;
padding: .5em 0;
padding: 20px;
margin: 0px;
}
@ -327,6 +334,24 @@ nav .ol-select .ol-select-options li button {
}
.main-logo {
width: 40px;
height: 40px;
width: 50px;
height: 50px;
}
.version-control {
display: flex;
flex-direction: row;
align-content: center;
}
.version-control>img {
margin: 5px;
}
.version-control>div{
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
height: 100%;
}

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

@ -1,56 +0,0 @@
import { getActiveCoalition, setActiveCoalition } from "..";
import { ContextMenuOption } from "../@types/dom";
export class ContextMenu {
#container: HTMLElement | null;
constructor(id: string,) {
this.#container = document.getElementById(id);
this.#container?.querySelector("#switch")?.addEventListener('change', (e) => this.#onSwitch(e))
this.hide();
}
show(x: number, y: number, title: string, options: ContextMenuOption[], showCoalition: boolean) {
this.#container?.classList.toggle("hide", false);
this.#container?.querySelector("#list")?.replaceChildren(...options.map((option: ContextMenuOption) => {
var li = document.createElement("li");
var button = document.createElement("button");
button.textContent = option.tooltip;
li.appendChild(button);
button.addEventListener("click", (e: MouseEvent) => option.callback((e.target as HTMLButtonElement).innerText));
return button;
}));
this.#container?.querySelector("#switch")?.classList.toggle("hide", !showCoalition);
if (this.#container != null && options.length >= 1) {
var titleDiv = this.#container.querySelector("#title");
if (titleDiv)
titleDiv.textContent = title;
if (x - this.#container.offsetWidth / 2 + this.#container.offsetWidth < window.innerWidth)
this.#container.style.left = x - this.#container.offsetWidth / 2 + "px";
else
this.#container.style.left = window.innerWidth - this.#container.offsetWidth + "px";
if (y - 20 + this.#container.offsetHeight < window.innerHeight)
this.#container.style.top = y - 20 + "px";
else
this.#container.style.top = window.innerHeight - this.#container.offsetHeight + "px";
}
}
hide() {
this.#container?.classList.toggle("hide", true);
}
#onSwitch(e: any) {
if (this.#container != null) {
if (e.currentTarget.checked)
setActiveCoalition("red");
else
setActiveCoalition("blue");
}
}
}

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

@ -1,83 +0,0 @@
export class Slider {
#container: HTMLElement | null;
#callback: CallableFunction;
#slider: HTMLInputElement | null = null;
#value: HTMLElement | null = null;
#minValue: number;
#maxValue: number;
#minValueDiv: HTMLElement | null = null;
#maxValueDiv: HTMLElement | null = null;
#unit: string;
#display: string = "";
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.#unit = unit;
if (this.#container != null) {
this.#display = this.#container.style.display;
this.#slider = <HTMLInputElement>this.#container.querySelector("input");
if (this.#slider != null)
{
this.#slider.addEventListener("input", (e: any) => this.#onInput());
this.#slider.addEventListener("mouseup", (e: any) => this.#onFinalize());
}
this.#value = <HTMLElement>this.#container.querySelector("#value");
}
}
#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
this.setActive(true);
}
#onInput()
{
this.#onValue();
}
#onFinalize()
{
if (this.#slider != null)
this.#callback(this.#minValue + parseFloat(this.#slider.value) / 100 * (this.#maxValue - this.#minValue));
}
show()
{
if (this.#container != null)
this.#container.style.display = this.#display;
}
hide()
{
if (this.#container != null)
this.#container.style.display = 'none';
}
setActive(newActive: boolean)
{
if (this.#container)
{
this.#container.classList.toggle("active", newActive);
if (!newActive && this.#value != null)
this.#value.innerText = "Mixed values";
}
}
setMinMax(newMinValue: number, newMaxValue: number)
{
this.#minValue = newMinValue;
this.#maxValue = newMaxValue;
}
setValue(newValue: number)
{
if (this.#slider != null)
this.#slider.value = String((newValue - this.#minValue) / (this.#maxValue - this.#minValue) * 100);
this.#onValue()
}
}

24
client/views/settings.ejs
View File

@ -1,5 +1,27 @@
<div id="settings-panel" class="ol-panel" >
<img src="images/icon.png" class="main-logo"></img>
<nav>
<div class="ol-select">
<div id="options" class="ol-select-value icon"><img src="images/icon.png" class="main-logo"></img></div>
<ul class="ol-select-options">
<li>
<div class="version-control">
<img src="images/icon.png" class="main-logo">
<div>
<h2>DCS Olympus</h2>
<div>Version 0.1.0</div>
</div>
</div>
</li>
<li><button>Preferences</button></li>
<li><button>Help and support</button></li>
<li><button>GitHub link</button></li>
<li class="hr"></li>
<li><button>Restart connection</button></li>
<li><button>Collapse to taskbar</button></li>
<li><button>Exit Oympus</button></li>
</ul>
</div>
</nav>
<nav>
<div class="ol-select">

1004
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -1,7 +0,0 @@
{
"devDependencies": {
"chai": "^4.3.7",
"mocha": "^10.2.0",
"sortablejs": "^1.15.0"
}
}