diff --git a/client/src/constants/constants.ts b/client/src/constants/constants.ts index 8d29bbb7..192825e1 100644 --- a/client/src/constants/constants.ts +++ b/client/src/constants/constants.ts @@ -141,15 +141,16 @@ export const FIRE_AT_AREA = "Fire at area"; export const COALITIONAREA_DRAW_POLYGON = "Draw Coalition Area"; export const visibilityControls: string[] = ["human", "dcs", "aircraft", "groundunit-sam", "groundunit-other", "navyunit", "airbase"]; export const visibilityControlsTypes: string[][] = [["human"], ["dcs"], ["aircraft"], ["groundunit-sam", "groundunit-sam-radar", "groundunit-sam-launcher"], ["groundunit-other", "groundunit-ewr"], ["navyunit"], ["airbase"]]; -export const visibilityControlsTootlips: string[] = ["Toggle human players visibility", "Toggle DCS controlled units visibility", "Toggle aircrafts visibility", "Toggle SAM units visibility", "Toggle ground units (not SAM) visibility", "Toggle navy units visibility", "Toggle airbases visibility"]; +export const visibilityControlsTooltips: string[] = ["Toggle human players visibility", "Toggle DCS controlled units visibility", "Toggle aircrafts visibility", "Toggle SAM units visibility", "Toggle ground units (not SAM) visibility", "Toggle navy units visibility", "Toggle airbases visibility"]; export const IADSTypes = ["AAA", "MANPADS", "SAM Site", "Radar"]; export const IADSDensities: {[key: string]: number}= {"AAA": 0.8, "MANPADS": 0.3, "SAM Site": 0.1, "Radar": 0.05}; export const SHOW_CONTACT_LINES = "Show unit contact lines"; export const HIDE_GROUP_MEMBERS = "Hide group members when zoomed out"; -export const SHOW_UNIT_PATHS = "Show unit paths"; -export const SHOW_UNIT_TARGETS = "Show unit targets"; +export const SHOW_UNIT_LABELS = "Show unit labels (L)"; +export const SHOW_UNIT_PATHS = "Show unit paths"; +export const SHOW_UNIT_TARGETS = "Show unit targets"; export enum DataIndexes { startOfData = 0, diff --git a/client/src/map/map.ts b/client/src/map/map.ts index f727ce93..8cb6e968 100644 --- a/client/src/map/map.ts +++ b/client/src/map/map.ts @@ -12,7 +12,7 @@ import { DestinationPreviewMarker } from "./destinationpreviewmarker"; import { TemporaryUnitMarker } from "./temporaryunitmarker"; import { ClickableMiniMap } from "./clickableminimap"; import { SVGInjector } from '@tanem/svg-injector' -import { layers as mapLayers, mapBounds, minimapBoundaries, IDLE, COALITIONAREA_DRAW_POLYGON, visibilityControls, visibilityControlsTootlips, FIRE_AT_AREA, MOVE_UNIT, CARPET_BOMBING, BOMBING, SHOW_CONTACT_LINES, HIDE_GROUP_MEMBERS, SHOW_UNIT_PATHS, SHOW_UNIT_TARGETS, visibilityControlsTypes } from "../constants/constants"; +import { layers as mapLayers, mapBounds, minimapBoundaries, IDLE, COALITIONAREA_DRAW_POLYGON, visibilityControls, visibilityControlsTooltips, FIRE_AT_AREA, MOVE_UNIT, CARPET_BOMBING, BOMBING, SHOW_CONTACT_LINES, HIDE_GROUP_MEMBERS, SHOW_UNIT_PATHS, SHOW_UNIT_TARGETS, visibilityControlsTypes } from "../constants/constants"; import { TargetMarker } from "./targetmarker"; import { CoalitionArea } from "./coalitionarea"; import { CoalitionAreaContextMenu } from "../controls/coalitionareacontextmenu"; @@ -63,7 +63,7 @@ export class Map extends L.Map { #mapSourceDropdown: Dropdown; #mapVisibilityOptionsDropdown: Dropdown; #optionButtons: { [key: string]: HTMLButtonElement[] } = {} - #visibiityOptions: { [key: string]: boolean } = {} + #visibilityOptions: { [key: string]: boolean } = {} constructor(ID: string) { /* Init the leaflet map */ @@ -89,7 +89,7 @@ export class Map extends L.Map { this.#mapSourceDropdown = new Dropdown("map-type", (layerName: string) => this.setLayer(layerName), this.getLayers()); /* Visibility options dropdown */ - this.#mapVisibilityOptionsDropdown = new Dropdown("map-visibility-options", () => {}); + this.#mapVisibilityOptionsDropdown = new Dropdown("map-visibility-options", ( value:string ) => {}); /* Init the state machine */ this.#state = IDLE; @@ -161,18 +161,18 @@ export class Map extends L.Map { this.#optionButtons["visibility"] = visibilityControls.map((option: string, index: number) => { var typesArrayString = `"${visibilityControlsTypes[index][0]}"`; visibilityControlsTypes[index].forEach((type: string, idx: number) => {if (idx > 0) typesArrayString = `${typesArrayString}, "${type}"`}); - return this.#createOptionButton(option, `visibility/${option.toLowerCase()}.svg`, visibilityControlsTootlips[index], "toggleMarkerVisibility", `{"types": [${typesArrayString}]}`); + return this.#createOptionButton(option, `visibility/${option.toLowerCase()}.svg`, visibilityControlsTooltips[index], "toggleMarkerVisibility", `{"types": [${typesArrayString}]}`); }); document.querySelector("#unit-visibility-control")?.append(...this.#optionButtons["visibility"]); /* Create the checkboxes to select the advanced visibility options */ - this.#visibiityOptions[SHOW_CONTACT_LINES] = false; - this.#visibiityOptions[HIDE_GROUP_MEMBERS] = true; - this.#visibiityOptions[SHOW_UNIT_PATHS] = true; - this.#visibiityOptions[SHOW_UNIT_TARGETS] = true; - this.#mapVisibilityOptionsDropdown.setOptionsElements(Object.keys(this.#visibiityOptions).map((option: string) => { - return createCheckboxOption(option, option, this.#visibiityOptions[option], (ev: any) => { + this.#visibilityOptions[SHOW_CONTACT_LINES] = false; + this.#visibilityOptions[HIDE_GROUP_MEMBERS] = true; + this.#visibilityOptions[SHOW_UNIT_PATHS] = true; + this.#visibilityOptions[SHOW_UNIT_TARGETS] = true; + this.#mapVisibilityOptionsDropdown.setOptionsElements(Object.keys(this.#visibilityOptions).map((option: string) => { + return createCheckboxOption(option, option, this.#visibilityOptions[option], (ev: any) => { this.#setVisibilityOption(option, ev); }); })); @@ -435,7 +435,7 @@ export class Map extends L.Map { } getVisibilityOptions() { - return this.#visibiityOptions; + return this.#visibilityOptions; } /* Event handlers */ @@ -724,7 +724,7 @@ export class Map extends L.Map { } #setVisibilityOption(option: string, ev: any) { - this.#visibiityOptions[option] = ev.currentTarget.checked; + this.#visibilityOptions[option] = ev.currentTarget.checked; document.dispatchEvent(new CustomEvent("mapVisibilityOptionsChanged")); } }