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

Added lock image and tooltip/titles.

Browse Source
This commit is contained in:
PeekabooSteam
2023-11-03 13:29:09 +00:00
parent 4465f4a3bb
commit f981a661d5
5 changed files with 62 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/constants/constants.ts
View File

@@ -149,39 +149,47 @@ export const visibilityControls: string[] = ["human", "dcs", "aircraft", "helico
export const visibilityControlsTypes: string[][] = [["human"], ["dcs"], ["aircraft"], ["helicopter"], ["groundunit-sam", "groundunit-sam-radar", "groundunit-sam-launcher"], ["groundunit-other", "groundunit-ewr"], ["navyunit"], ["airbase"]];
export const visibilityControlsTooltips: string[] = ["Toggle human players visibility", "Toggle DCS controlled units visibility", "Toggle aircrafts visibility", "Toggle helicopter visibility", "Toggle SAM units visibility", "Toggle ground units (not SAM) visibility", "Toggle navy units visibility", "Toggle airbases visibility"];
export const MAP_MARKER_CONTROLS:MapMarkerControl[] = [{
"name":"human",
"name":"Human",
"image": "visibility/human.svg",
"toggles": [ "human" ]
"toggles": [ "human" ],
"tooltip": "Toggle human players' visibility"
}, {
"image": "visibility/dcs.svg",
"isProtected": true,
"name":"dcs",
"name":"DCS",
"protectable": true,
"toggles": [ "dcs" ]
"toggles": [ "dcs" ],
"tooltip": "Toggle DCS-controlled units' visibility"
}, {
"image": "visibility/aircraft.svg",
"name":"aircraft",
"toggles": [ "aircraft" ]
"name":"Aircraft",
"toggles": [ "aircraft" ],
"tooltip": "Toggle aircraft's visibility"
}, {
"image": "visibility/helicopter.svg",
"name":"helicopter",
"toggles": [ "helicopter" ]
"name":"Helicopter",
"toggles": [ "helicopter" ],
"tooltip": "Toggle helicopters' visibility"
}, {
"image": "visibility/groundunit-sam.svg",
"name":"groundunit-sam",
"toggles": [ "groundunit-sam" ]
"name":"Air defence",
"toggles": [ "groundunit-sam" ],
"tooltip": "Toggle air defence units' visibility"
}, {
"image": "visibility/groundunit-other.svg",
"name":"groundunit-other",
"toggles": [ "groundunit-other" ]
"name":"Ground units",
"toggles": [ "groundunit-other" ],
"tooltip": "Toggle ground units' visibility"
}, {
"image": "visibility/navyunit.svg",
"name":"navyunit",
"toggles": [ "navyunit" ]
"name":"Naval",
"toggles": [ "navyunit" ],
"tooltip": "Toggle naval units' visibility"
}, {
"image": "visibility/airbase.svg",
"name":"airbase",
"toggles": [ "airbase" ]
"name":"Airbase",
"toggles": [ "airbase" ],
"tooltip": "Toggle airbase' visibility"
}];
export const IADSTypes = ["AAA", "MANPADS", "SAM Site", "Radar"];

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

@@ -43,7 +43,8 @@ export type MapMarkerControl = {
"isProtected"?: boolean,
"name":string,
"protectable"?: boolean,
"toggles": string[]
"toggles": string[],
"tooltip": string
}
export class Map extends L.Map {
@@ -730,23 +731,32 @@ export class Map extends L.Map {
#createUnitMarkerControlButtons() {
const unitVisibilityControls = <HTMLElement>document.getElementById("unit-visibility-control");
const makeTitle = (isProtected:boolean) => {
return ( isProtected ) ? "Unit type is protected and will ignore orders" : "Unit is NOT protected and will respond to orders";
}
this.#mapMarkerControls.forEach( (control:MapMarkerControl) => {
const toggles = `["${control.toggles.join('","')}"]`;
const div = document.createElement("div");
div.className = control.protectable === true ? "protectable" : "";
div.innerHTML = `
<button data-on-click="toggleMarkerVisibility" data-on-click-params='{"types":${toggles}}'>
<button data-on-click="toggleMarkerVisibility" title="${control.tooltip}" data-on-click-params='{"types":${toggles}}'>
<img src="/resources/theme/images/buttons/${control.image}" />
</button>
<button class="lock" ${control.isProtected ? "data-protected" : "" }>x</button>
`;
unitVisibilityControls.appendChild(div);
if ( control.protectable ) {
div.innerHTML += `
<button class="lock" ${control.isProtected ? "data-protected" : ""} title="${makeTitle(control.isProtected || false)}">
<img src="/resources/theme/images/buttons/other/lock-solid.svg" class="locked" />
<img src="/resources/theme/images/buttons/other/lock-open-solid.svg" class="unlocked" />
</button>`;
const btn = <HTMLButtonElement>div.querySelector("button.lock");
btn.addEventListener("click", (ev:MouseEventInit) => {
control.isProtected = !control.isProtected;
btn.toggleAttribute("data-protected", control.isProtected);
btn.title = makeTitle( control.isProtected );
document.dispatchEvent(new CustomEvent("toggleMarkerProtection", {
detail: {
"_element": btn,