From ade4f183cdea0f6a3a9dabe3b479dc2dd231c3ae Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Thu, 2 Nov 2023 18:22:42 +0000 Subject: [PATCH] Commit so I can switch to another branch. --- client/src/constants/constants.ts | 36 +++++++++++++++++++++++++++++++ client/src/map/map.ts | 29 ++++++++++++++++++++++++- 2 files changed, 64 insertions(+), 1 deletion(-) diff --git a/client/src/constants/constants.ts b/client/src/constants/constants.ts index 36cd6367..b2ad78bc 100644 --- a/client/src/constants/constants.ts +++ b/client/src/constants/constants.ts @@ -1,4 +1,5 @@ import { LatLng, LatLngBounds } from "leaflet"; +import { MapMarkerControl } from "../map/map"; export const UNITS_URI = "units"; export const WEAPONS_URI = "weapons"; @@ -147,6 +148,41 @@ export const COALITIONAREA_DRAW_POLYGON = "Draw Coalition Area"; export const visibilityControls: string[] = ["human", "dcs", "aircraft", "helicopter", "groundunit-sam", "groundunit-other", "navyunit", "airbase"]; 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", + "image": "visibility/human.svg", + "toggles": [ "human" ] +}, { + "image": "visibility/dcs.svg", + "initialState": "protected", + "name":"dcs", + "protectable": true, + "toggles": [ "dcs" ] +}, { + "image": "visibility/aircraft.svg", + "name":"aircraft", + "toggles": [ "aircraft" ] +}, { + "image": "visibility/helicopter.svg", + "name":"helicopter", + "toggles": [ "helicopter" ] +}, { + "image": "visibility/groundunit-sam.svg", + "name":"groundunit-sam", + "toggles": [ "groundunit-sam" ] +}, { + "image": "visibility/groundunit-other.svg", + "name":"groundunit-other", + "toggles": [ "groundunit-other" ] +}, { + "image": "visibility/navyunit.svg", + "name":"navyunit", + "toggles": [ "navyunit" ] +}, { + "image": "visibility/airbase.svg", + "name":"airbase", + "toggles": [ "airbase" ] +}]; 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}; diff --git a/client/src/map/map.ts b/client/src/map/map.ts index 374cfab3..734a8742 100644 --- a/client/src/map/map.ts +++ b/client/src/map/map.ts @@ -12,7 +12,7 @@ import { DestinationPreviewMarker } from "./markers/destinationpreviewmarker"; import { TemporaryUnitMarker } from "./markers/temporaryunitmarker"; import { ClickableMiniMap } from "./clickableminimap"; import { SVGInjector } from '@tanem/svg-injector' -import { mapLayers, mapBounds, minimapBoundaries, IDLE, COALITIONAREA_DRAW_POLYGON, visibilityControls, visibilityControlsTooltips, MOVE_UNIT, SHOW_UNIT_CONTACTS, HIDE_GROUP_MEMBERS, SHOW_UNIT_PATHS, SHOW_UNIT_TARGETS, visibilityControlsTypes, SHOW_UNIT_LABELS, SHOW_UNITS_ENGAGEMENT_RINGS, SHOW_UNITS_ACQUISITION_RINGS, HIDE_UNITS_SHORT_RANGE_RINGS, FILL_SELECTED_RING } from "../constants/constants"; +import { mapLayers, mapBounds, minimapBoundaries, IDLE, COALITIONAREA_DRAW_POLYGON, visibilityControls, visibilityControlsTooltips, MOVE_UNIT, SHOW_UNIT_CONTACTS, HIDE_GROUP_MEMBERS, SHOW_UNIT_PATHS, SHOW_UNIT_TARGETS, visibilityControlsTypes, SHOW_UNIT_LABELS, SHOW_UNITS_ENGAGEMENT_RINGS, SHOW_UNITS_ACQUISITION_RINGS, HIDE_UNITS_SHORT_RANGE_RINGS, FILL_SELECTED_RING, MAP_MARKER_CONTROLS } from "../constants/constants"; import { TargetMarker } from "./markers/targetmarker"; import { CoalitionArea } from "./coalitionarea/coalitionarea"; import { CoalitionAreaContextMenu } from "../contextmenus/coalitionareacontextmenu"; @@ -38,6 +38,14 @@ L.Map.addInitHook("addHandler", "gestureHandling", GestureHandling); require("../../public/javascripts/leaflet.nauticscale.js") require("../../public/javascripts/L.Path.Drag.js") +export type MapMarkerControl = { + "image": string; + "initialState"?: "protected" | null, + "name":string, + "protectable"?: boolean, + "toggles": string[] +} + export class Map extends L.Map { #ID: string; #state: string; @@ -201,12 +209,16 @@ export class Map extends L.Map { }, 20); /* Option buttons */ + this.#createOptionButtons(); + + /* 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`, visibilityControlsTooltips[index], "toggleMarkerVisibility", `{"types": [${typesArrayString}]}`); }); document.querySelector("#unit-visibility-control")?.append(...this.#optionButtons["visibility"]); + //*/ /* Create the checkboxes to select the advanced visibility options */ this.addVisibilityOption(SHOW_UNIT_CONTACTS, false); @@ -724,6 +736,21 @@ export class Map extends L.Map { return minimapBoundaries; } + #createOptionButtons() { + const unitVisibilityControls = document.getElementById("unit-visibility-control"); + const lockHTML = ``; + MAP_MARKER_CONTROLS.forEach( (control:MapMarkerControl) => { + console.log(`{"types":"${control.toggles.join('","')}"}`); + const html = ` + + `; + unitVisibilityControls.innerHTML += html; + }); + unitVisibilityControls?.querySelectorAll(`img[src$=".svg"]`).forEach(img => SVGInjector(img)); + } + #createOptionButton(value: string, url: string, title: string, callback: string, argument: string) { var button = document.createElement("button"); const img = document.createElement("img");