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

Node.js transition is completed!

Browse Source
This commit is contained in:
Pax1601
2023-01-27 08:16:40 +01:00
parent b8b2590323
commit 12c23bd607
20 changed files with 461 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,5 @@
import { LatLng } from "leaflet";
import { setActiveCoalition } from "..";
export class SelectionScroll {
#container: HTMLElement | null;
@@ -8,26 +9,36 @@ export class SelectionScroll {
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, callback: CallableFunction) {
show(x: number, y: number, options: any, callback: CallableFunction, showCoalition: boolean) {
/* 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";
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]))
var scroll = this.#container.querySelector(".olympus-selection-scroll");
if (scroll != null)
{
for (let optionID in options) {
var node = document.createElement("div");
node.classList.add("olympus-selection-scroll-element");
if (typeof options[optionID] === 'string' || options[optionID] instanceof String){
node.appendChild(document.createTextNode(options[optionID]));
node.addEventListener('click', () => callback(options[optionID]));
}
else {
node.appendChild(document.createTextNode(options[optionID].tooltip));
node.addEventListener('click', () => options[optionID].callback());
}
scroll.appendChild(node);
}
}
}
}
@@ -36,8 +47,25 @@ export class SelectionScroll {
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);
var scroll = this.#container.querySelector(".olympus-selection-scroll");
if (scroll != null)
{
for (let child of buttons) {
scroll.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");
}
}
}

2
client/src/index.ts
View File

@@ -38,7 +38,7 @@ function setup() {
selectionScroll = new SelectionScroll("selection-scroll");
unitsManager = new UnitsManager();
unitInfoPanel = new UnitInfoPanel("unit-info-panel");
scenarioDropdown = new Dropdown("scenario-dropdown", ["Caucasus", "Syria", "Nevada", "Marianas", "South Atlantic", "The channel"], () => { });
scenarioDropdown = new Dropdown("scenario-dropdown", ["Caucasus", "Syria", "Marianas", "Nevada", "South Atlantic", "The channel"], () => { });
mapSourceDropdown = new Dropdown("map-source-dropdown", map.getLayers(), (option: string) => map.setLayer(option));
connectionStatusPanel = new ConnectionStatusPanel("connection-status-panel");
missionData = new MissionData();

21
client/src/map/map.ts
View File

@@ -95,10 +95,10 @@ export class Map extends L.Map {
this.#state = state;
if (this.#state === "IDLE") {
L.DomUtil.removeClass(this.getContainer(),'crosshair-cursor-enabled');
}
else if (this.#state === "MOVE_UNIT") {
L.DomUtil.addClass(this.getContainer(),'crosshair-cursor-enabled');
}
else if (this.#state === "ATTACK") {
@@ -124,10 +124,10 @@ export class Map extends L.Map {
}
/* Selection scroll */
showSelectionScroll(e: ClickEvent | SpawnEvent, options: any, callback: CallableFunction) {
showSelectionScroll(e: ClickEvent | SpawnEvent, options: any, callback: CallableFunction, showCoalition: boolean = false) {
var x = e.x;
var y = e.y;
getSelectionScroll().show(x, y, options, callback);
getSelectionScroll().show(x, y, options, callback, showCoalition);
}
hideSelectionScroll() {
@@ -158,7 +158,7 @@ export class Map extends L.Map {
{ "tooltip": "Smoke", "src": "spawnSmoke.png", "callback": () => this.#smokeSpawnMenu(spawnEvent) },
//{ "tooltip": "Explosion", "src": "spawnExplosion.png", "callback": () => this.#explosionSpawnMenu(e) }
]
this.showSelectionWheel(spawnEvent, options, true);
this.showSelectionScroll(spawnEvent, options, () => {}, true);
}
}
@@ -198,7 +198,7 @@ export class Map extends L.Map {
{'coalition': true, 'tooltip': 'Radar', 'src': 'spawnRadar.png', 'callback': () => this.#selectGroundUnit(e, "Radar")},
{'coalition': true, 'tooltip': 'Unarmed', 'src': 'spawnUnarmed.png', 'callback': () => this.#selectGroundUnit(e, "Unarmed")}
]
this.showSelectionWheel(e, options, true);
this.showSelectionScroll(e, options, () => {}, true);
}
#smokeSpawnMenu(e: SpawnEvent) {
@@ -211,7 +211,7 @@ export class Map extends L.Map {
{'tooltip': 'Green smoke', 'src': 'spawnSmoke.png', 'callback': () => {this.hideSelectionWheel(); this.hideSelectionScroll(); spawnSmoke('green', e.latlng)}, 'tint': 'green'},
{'tooltip': 'Orange smoke', 'src': 'spawnSmoke.png', 'callback': () => {this.hideSelectionWheel(); this.hideSelectionScroll(); spawnSmoke('orange', e.latlng)}, 'tint': 'orange'},
]
this.showSelectionWheel(e, options, true);
this.showSelectionScroll(e, options, () => {}, true);
}
#explosionSpawnMenu(e: SpawnEvent) {
@@ -228,7 +228,7 @@ export class Map extends L.Map {
{ 'coalition': true, 'tooltip': 'Drone', 'src': 'spawnDrone.png', 'callback': () => this.#selectAircraft(e, "drone") },
{ 'coalition': true, 'tooltip': 'Transport', 'src': 'spawnTransport.png', 'callback': () => this.#selectAircraft(e, "transport") },
]
this.showSelectionWheel(e, options, true);
this.showSelectionScroll(e, options, () => {}, true);
}
/* Show unit selection for air units */
@@ -236,7 +236,10 @@ export class Map extends L.Map {
this.hideSelectionWheel();
this.hideSelectionScroll();
var options = unitTypes.air[group];
options.sort();
if (options != undefined)
options.sort();
else
options = [];
this.showSelectionScroll(e, options, (unitType: string) => {
this.hideSelectionWheel();
this.hideSelectionScroll();

40
client/src/panels/unitinfopanel.ts
View File

@@ -10,7 +10,7 @@ export class UnitInfoPanel {
this.#display = '';
if (this.#element != null) {
this.#display = this.#element.style.display;
this.show();
this.hide();
}
}
@@ -23,27 +23,31 @@ export class UnitInfoPanel {
}
update(unit: Unit) {
var loadout = "";
for (let index in unit.ammo) {
var ammo = unit.ammo[index];
var displayName = ammo.desc.displayName;
var amount = ammo.count;
loadout += amount + "x" + displayName;
if (parseInt(index) < Object.keys(unit.ammo).length)
loadout += ", ";
}
if (this.#element != null) {
var els = this.#element.getElementsByClassName("js-loadout-element");
while (els.length > 0)
this.#element.querySelector("#loadout-data")?.removeChild(els[0]);
for (let index in unit.ammo) {
var ammo = unit.ammo[index];
var displayName = ammo.desc.displayName;
var amount = ammo.count;
var el = document.createElement("div")
el.classList.add("js-loadout-element", "rectangular-container-dark")
el.innerHTML = amount + "x" + displayName;
this.#element.querySelector("#loadout-data")?.appendChild(el);
}
this.#element.querySelector("#unit-name")!.innerHTML = unit.unitName;
this.#element.querySelector("#group-name")!.innerHTML = unit.groupName;
this.#element.querySelector("#heading")!.innerHTML = String(Math.floor(rad2deg(unit.heading)) + "°");
this.#element.querySelector("#altitude")!.innerHTML = String(Math.floor(unit.altitude / 0.3048) + "ft");
this.#element.querySelector("#groundspeed")!.innerHTML = String(Math.floor(unit.speed * 1.94384) + "kts");
this.#element.querySelector("#name")!.innerHTML = unit.name;
this.#element.querySelector("#heading")!.innerHTML = String(Math.floor(rad2deg(unit.heading)) + " °");
this.#element.querySelector("#altitude")!.innerHTML = String(Math.floor(unit.altitude / 0.3048) + " ft");
this.#element.querySelector("#ground-speed")!.innerHTML = String(Math.floor(unit.speed * 1.94384) + " kts");
this.#element.querySelector("#fuel")!.innerHTML = String(unit.fuel + "%");
this.#element.querySelector("#position")!.innerHTML = ConvertDDToDMS(unit.latitude, false) + " " + ConvertDDToDMS(unit.longitude, true);
this.#element.querySelector("#task")!.innerHTML = unit.currentTask;
this.#element.querySelector("#loadout")!.innerHTML = loadout;
this.#element.querySelector("#latitude")!.innerHTML = ConvertDDToDMS(unit.latitude, false);
this.#element.querySelector("#longitude")!.innerHTML = ConvertDDToDMS(unit.longitude, true);
this.#element.querySelector("#task")!.innerHTML = unit.currentTask !== ""? unit.currentTask: "Not controlled";
}
}
}

40
client/src/units/unit.ts
View File

@@ -73,6 +73,9 @@ export class Unit {
this[entry] = response[entry];
}
/* Dead units can't be selected */
this.setSelected(this.getSelected() && this.alive)
this.#updateMarker();
this.#clearTargets();
@@ -93,11 +96,6 @@ export class Unit {
this.wingmen.push(unitsManager.getUnitByID(ID));
}
}
this.formation = response["formation"];
this.missionData = missionData.getUnitData(this.ID)
this.setSelected(this.getSelected() && this.alive)
*/
}
@@ -114,6 +112,14 @@ export class Unit {
return this.#selected;
}
setSelectable(selectable: boolean) {
this.#selectable = selectable;
}
getSelectable() {
return this.#selectable;
}
addDestination(latlng: L.LatLng) {
var path: any = {};
if (this.activePath != null) {
@@ -153,16 +159,20 @@ export class Unit {
this.#preventClick = true;
var options = [
{ 'tooltip': 'Attack', 'src': 'attack.png', 'callback': () => { getMap().hideSelectionWheel(); getUnitsManager().attackUnit(this.ID); } },
{ 'tooltip': 'Go to tanker', 'src': 'tanker.png', 'callback': () => { getMap().hideSelectionWheel(); /*showMessage("Function not implemented yet");*/ } },
{ 'tooltip': 'RTB', 'src': 'rtb.png', 'callback': () => { getMap().hideSelectionWheel(); /*showMessage("Function not implemented yet");*/ } }
'Attack',
]
if (!this.leader && !this.wingman) {
options.push({ 'tooltip': 'Create formation', 'src': 'formation.png', 'callback': () => { getMap().hideSelectionWheel(); /*unitsManager.createFormation(this.ID);*/ } });
}
//if (!this.leader && !this.wingman) {
// options.push({ 'tooltip': 'Create formation', 'src': 'formation.png', 'callback': () => { getMap().hideSelectionWheel(); /*unitsManager.createFormation(this.ID);*/ } });
//}
getMap().showSelectionWheel(e.originalEvent, options, false);
getMap().showSelectionScroll(e.originalEvent, options, (action: string) => this.#executeAction(action));
}
#executeAction(action: string) {
getMap().hideSelectionScroll();
if (action === "Attack")
getUnitsManager().attackUnit(this.ID);
}
#updateMarker() {
@@ -399,6 +409,12 @@ export class NavyUnit extends Unit {
}
export class Weapon extends Unit {
constructor(ID: number, marker: UnitMarker)
{
super(ID, marker);
this.setSelectable(false);
}
getHidden() {
if (this.alive)
{

2
client/src/units/unitTypes.ts
View File

@@ -250,7 +250,7 @@ unitTypes.air.strike = [
"Tu-142",
]
unitTypes.air.tank = [
unitTypes.air.tanker = [
"S-3B Tanker",
"KC-135",
"IL-78M",

13
client/src/units/unitmarker.ts
View File

@@ -33,10 +33,20 @@ export class UnitMarker extends L.Marker {
var symbol = new Symbol(this.#computeMarkerCode(options), { size: 25 });
var img = symbol.asCanvas().toDataURL('image/png');
var coalition = "";
if (options.coalitionID == 1)
coalition = "red"
else if (options.coalitionID == 2)
coalition = "blue"
else
coalition = "neutral"
var icon = new L.DivIcon({
html: `<table class="unit-marker-container" id="container">
<tr>
<td>
<div class="${coalition}" id="background"></div>
<div class="${coalition}" id="ring"></div>
<div class="unit-marker-icon" id="icon"><img src="${img}"></div>
<div class="unit-marker-unitName" id="unitName">${this.#unitName}</div>
<div class="unit-marker-altitude" id="altitude"></div>
@@ -101,7 +111,8 @@ export class UnitMarker extends L.Marker {
setSelected(selected: boolean) {
this.#selected = selected;
this.getElement()?.querySelector("#icon")?.classList.remove("unit-marker-hovered");
this.getElement()?.querySelector("#icon")?.classList.toggle("unit-marker-selected", selected);
this.getElement()?.querySelector("#ring")?.classList.toggle("unit-marker-selected", selected);
this.getElement()?.querySelector("#background")?.classList.toggle("unit-marker-selected", selected);
}
getSelected() {