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 restyling with svg images

Browse Source
This commit is contained in:
Pax1601
2023-05-22 08:22:50 +02:00
parent a6583cc317
commit 32cb147a02
188 changed files with 627 additions and 3113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/index.ts
View File

@@ -16,6 +16,8 @@ import { Popup } from "./popups/popup";
import { Dropdown } from "./controls/dropdown";
import { HotgroupPanel } from "./panels/hotgrouppanel";
import "@iconfu/svg-inject";
var map: Map;
var unitsManager: UnitsManager;
@@ -214,6 +216,7 @@ function setupEvents() {
document.addEventListener("reloadPage", () => {
location.reload();
})
}
export function getMap() {

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

@@ -115,6 +115,7 @@ export class Map extends L.Map {
});
document.addEventListener("toggleUnitVisibility", (ev: CustomEventInit) => {
ev.detail._element.classList.toggle("off");
document.body.toggleAttribute("data-hide-" + ev.detail.category);
Object.values(getUnitsManager().getUnits()).forEach((unit: Unit) => unit.updateVisibility());
});

11
client/src/panels/unitcontrolpanel.ts
View File

@@ -56,15 +56,15 @@ export class UnitControlPanel extends Panel {
/* Option buttons */
this.#optionButtons["ROE"] = ROEs.map((option: string, index: number) => {
return this.#createOptionButton(option, ROEDescriptions[index], () => { getUnitsManager().selectedUnitsSetROE(option); });
return this.#createOptionButton(option, `roe/${option.toLowerCase()}.svg`, ROEDescriptions[index], () => { getUnitsManager().selectedUnitsSetROE(option); });
});
this.#optionButtons["reactionToThreat"] = reactionsToThreat.map((option: string, index: number) => {
return this.#createOptionButton(option, reactionsToThreatDescriptions[index],() => { getUnitsManager().selectedUnitsSetReactionToThreat(option); });
return this.#createOptionButton(option, `threat/${option.toLowerCase()}.svg`, reactionsToThreatDescriptions[index],() => { getUnitsManager().selectedUnitsSetReactionToThreat(option); });
});
this.#optionButtons["emissionsCountermeasures"] = emissionsCountermeasures.map((option: string, index: number) => {
return this.#createOptionButton(option, emissionsCountermeasuresDescriptions[index],() => { getUnitsManager().selectedUnitsSetEmissionsCountermeasures(option); });
return this.#createOptionButton(option, `emissions/${option.toLowerCase()}.svg`, emissionsCountermeasuresDescriptions[index],() => { getUnitsManager().selectedUnitsSetEmissionsCountermeasures(option); });
});
this.getElement().querySelector("#roe-buttons-container")?.append(...this.#optionButtons["ROE"]);
@@ -342,10 +342,11 @@ export class UnitControlPanel extends Panel {
this.#advancedSettingsDialog.classList.add("hide");
}
#createOptionButton(option: string, title: string, callback: EventListenerOrEventListenerObject) {
#createOptionButton(value: string, url: string, title: string, callback: EventListenerOrEventListenerObject) {
var button = document.createElement("button");
button.value = option;
button.title = title;
button.value = value;
button.innerHTML = `<img src="/resources/theme/images/buttons/${url}" onload="SVGInject(this)" />`
button.addEventListener("click", callback);
return button;
}

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

@@ -127,7 +127,7 @@ export class Unit extends Marker {
getMarkerHTML() {
return `<div class="unit" data-object="unit-${this.getMarkerCategory()}" data-coalition="${this.getMissionData().coalition}">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-marker"><img src="/resources/theme/images/units/${this.getMarkerCategory()}.svg" onload="SVGInject(this)"/></div>
<div class="unit-short-label"></div>
</div>`
}
@@ -539,15 +539,6 @@ export class Unit extends Marker {
var element = this.getElement();
if (element != null) {
/* Set the element styling */
const unitMarker = element.querySelector(".unit-marker") as HTMLElement;
const styles = getComputedStyle(document.documentElement);
const primaryBlue = styles.getPropertyValue('--primary-blue');
if (unitMarker)
unitMarker.style.backgroundImage = `url("/resources/theme/images/units/aircraft.svg?background-colour=${primaryBlue}")`;
/* Draw the velocity vector */
element.querySelector(".unit-vvi")?.setAttribute("style", `height: ${15 + this.getFlightData().speed / 5}px;`);
@@ -703,14 +694,10 @@ export class Aircraft extends AirUnit {
getMarkerHTML() {
return `<div class="unit" data-object="unit-aircraft" data-coalition="${this.getMissionData().coalition}">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker-border"></div>
<div class="unit-state"></div>
<div class="unit-vvi" data-rotate-to-heading></div>
<div class="unit-hotgroup">
<div class="unit-hotgroup-id"></div>
</div>
<div class="unit-marker"></div>
<div class="unit-hotgroup"><div class="unit-hotgroup-id"></div></div>
<div class="unit-marker"><img src="/resources/theme/images/units/aircraft.svg" onload="SVGInject(this)"/></div>
<div class="unit-short-label">${aircraftDatabase.getByName(this.getBaseData().name)?.shortLabel || ""}</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
@@ -752,8 +739,7 @@ export class GroundUnit extends Unit {
getMarkerHTML() {
var role = groundUnitsDatabase.getByName(this.getBaseData().name)?.loadouts[0].roles[0];
return `<div class="unit" data-object="unit-${this.getMarkerCategory()}" data-coalition="${this.getMissionData().coalition}">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-marker"><img src="/resources/theme/images/units/groundunit-${this.getMarkerCategory()}.svg" onload="SVGInject(this)"/></div>
<div class="unit-short-label">${role?.substring(0, 1)?.toUpperCase() || ""}</div>
<div class="unit-hotgroup">
<div class="unit-hotgroup-id"></div>
@@ -764,7 +750,7 @@ export class GroundUnit extends Unit {
getMarkerCategory() {
// TODO this is very messy
var role = groundUnitsDatabase.getByName(this.getBaseData().name)?.loadouts[0].roles[0];
var markerCategory = (role === "SAM") ? "sam" : "groundunit";
var markerCategory = (role === "SAM") ? "sam" : "other";
return markerCategory;
}
}
@@ -787,8 +773,7 @@ export class Weapon extends Unit {
getMarkerHTML(): string {
return `<div class="unit" data-object="unit-${this.getMarkerCategory()}" data-coalition="${this.getMissionData().coalition}">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker" data-rotate-to-heading></div>
<div class="unit-marker" data-rotate-to-heading><img src="/resources/theme/images/units/${this.getMarkerCategory()}.svg" onload="SVGInject(this)"/></div>
<div class="unit-short-label"></div>
</div>`
}