Merge pull request #170 from Miss-placed/devBranch

Switch to SVG rendering, map misc icons on all roundbased maps + much more!

assets/js/darkmode.js

@@ -1,16 +1,5 @@
-//darkmode pref needs to go into declassifiedprefs 
-let darkmode = false;
 let lightModeClass = "light-"
-if ("darkmode" in localStorage) {
-    darkmode = JSON.parse(localStorage.darkmode)
-} else {
-    if (window.matchMedia &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        darkmode = true;
-    }
-    localStorage.darkmode = darkmode
-}
-if (darkmode == false) {
+if (getUserPrefs().darkmode) {
     document.getElementById("worldMap").classList.remove(lightModeClass)
     lightModeClass = ""
 } else {

assets/js/icons.js

@@ -13,34 +13,36 @@ function getIconByFaction(faction) {
     }
 }
 
+/////////////////////Factions/////////////////////////
 var darkAetherIcon = L.icon({
-    iconUrl: 'assets/img/icons/darkAetherIcon.png',
+    iconUrl: 'assets/img/icons/faction/darkAether.png',
     iconSize: [30, 48],
     iconAnchor: [15, 48],
     popupAnchor: [0, -30]
 });
 var maxisIcon = L.icon({
-    iconUrl: 'assets/img/icons/maxisIcon.png',
+    iconUrl: 'assets/img/icons/faction/maxis.png',
     iconSize: [34, 48],
     iconAnchor: [17, 48],
     popupAnchor: [0, -30]
 });
 var omegaIcon = L.icon({
-    iconUrl: 'assets/img/icons/omegaIcon.png',
+    iconUrl: 'assets/img/icons/faction/omega.png',
     iconSize: [55, 48],
     iconAnchor: [27.5, 48],
     popupAnchor: [0, -30]
 });
 var requiemIcon = L.icon({
-    iconUrl: 'assets/img/icons/requiemIcon.png',
+    iconUrl: 'assets/img/icons/faction/requiem.png',
     iconSize: [40, 40],
     iconAnchor: [24, 48],
     popupAnchor: [0, -30]
 });
+/////////////////////Misc/////////////////////////
 var generalIcon = L.icon({
     iconUrl: 'assets/img/icons/generalIcon.png',
-    iconSize: [40, 40],
-    iconAnchor: [20, 40],
+    iconSize: [30, 30],
+    iconAnchor: [15, 30],
     popupAnchor: [0, -30]
 });
 var riftIcon = L.icon({
@@ -51,8 +53,8 @@ var riftIcon = L.icon({
 });
 var monkeyIcon = L.icon({
     iconUrl: 'assets/img/icons/monkeyIcon.png',
-    iconSize: [48, 48],
-    iconAnchor: [24, 24],
+    iconSize: [30, 30],
+    iconAnchor: [15, 15],
     popupAnchor: [0, -30]
 });
 var radioIcon = L.icon({
@@ -69,13 +71,33 @@ var dementedIcon = L.icon({
 });
 var fishingIcon = L.icon({
     iconUrl: 'assets/img/icons/fishIcon.png',
-    iconSize: [48, 48],
-    iconAnchor: [24, 24],
+    iconSize: [30, 30],
+    iconAnchor: [15, 15],
     popupAnchor: [0, -30]
 });
 var redRiftIcon = L.icon({
     iconUrl: 'assets/img/icons/redRiftIcon.png',
     iconSize: [22, 48],
     iconAnchor: [11, 24],
     popupAnchor: [0, -30]
-});
+});
+var wunderFizzIcon = L.icon({
+    iconUrl: 'assets/img/icons/perk/wunderFizz.png',
+    iconSize: [30, 30],
+    iconAnchor: [15, 15],
+    popupAnchor: [0, -15]
+});
+var mysteryBoxIcon = L.icon({
+    iconUrl: 'assets/img/icons/misc/mysteryBox.png',
+    iconSize: [30, 30],
+    iconAnchor: [15, 15],
+    popupAnchor: [0, -15]
+});
+function iconInit(id, type) {
+    return L.icon({
+        iconUrl: `assets/img/icons/${type}/${id}.png`,
+        iconSize: [30, 30],
+        iconAnchor: [15, 15],
+        popupAnchor: [0, -15]
+    });
+}

assets/js/index.js

@@ -1,29 +1,5 @@
-const app = StartupSettings();
-const userPrefs = userPrefsStartup();
-
-
-
-function StartupSettings() {
-    let response;
-
-    let disableMarkers = [],
-        visibleMarkers = [];
-    //Use default latest map otherwise use last selected map of user
-    let currentMap = mapStrings.armada;
-    let currentContribType;
-    if (localStorage.declassifiedPrefs != undefined && JSON.parse(localStorage.declassifiedPrefs).lastSelectedMap)
-        currentMap = JSON.parse(localStorage.declassifiedPrefs).lastSelectedMap;
-
-    let isMobile = false,
-        submittingLocation = false,
-        fixedNotification = false;
-    let notificationEle = document.getElementById("notification-popup");
-    return response = { currentMap, disableMarkers, visibleMarkers, notificationEle, isMobile, submittingLocation, currentContribType, fixedNotification };
-}
-
 let mapInstance = InitMap();
 
-
 L.control.attribution({ prefix: 'DECLASSIFIED' })
 document.getElementsByClassName("leaflet-control-attribution")[0].getElementsByTagName("a")[0].title = "Declassified An Interactive map By Odinn"
 document.getElementsByClassName("leaflet-control-attribution")[0].getElementsByTagName("a")[0].innerHTML = "DECLASSIFIED"
@@ -86,8 +62,8 @@ function onLoad() {
     $('#searchTerm').keyup(function() {
         intelFiltered = TriggerSearch();
     });
-
-
+    //Hide aside if toggled off
+    if (!userPrefs.asideShow) toggleAside(false);
 }
 
 if (navigator.userAgent.toLowerCase().match(/mobile/i)) {
@@ -96,5 +72,5 @@ if (navigator.userAgent.toLowerCase().match(/mobile/i)) {
     sidebar.classList.add("mobile-view");
     worldmap.classList.add("mobile-view");
     app.isMobile = true
-    toggleAside();
-}
+    toggleAside(false);
+}

assets/js/mapUtils.js

@@ -1,10 +1,10 @@
 function InitMap() {
     return L.map('worldMap', {
         crs: L.CRS.Simple,
-        center: [-(256 / 2), 256 / 2],
+        center: [256, 256],
         maxBounds: [
             [0, 0],
-            [-512 / 2, 512 / 2]
+            [512, 512]
         ],
         zoom: 2,
         maxZoom: 5,

assets/js/maps.js

@@ -2,30 +2,32 @@ var globalMapSettings = {
     prefix: false,
     attribution: `Want to help out? <a href="${repoDomain}">Github</a>. ||  See all <a href="${repoDomain}#contributors">Contributors</a>`,
     id: '',
-    tileSize: 512,
+    tileSize: 0,
     zoomOffset: -1,
     bounds: [
-        [-256, 0],
-        [768, 256]
+        [0, 0],
+        [512, 512]
     ],
 }
 
-var zoo, ruka, duga, alpine, golova, sanatorium, dieMaschine, dieMaschine_underground, firebaseZ, firebaseZ_spawn;
-zoo = generateLayers(mapStrings.zoo, globalMapSettings);
-duga = generateLayers(mapStrings.duga, globalMapSettings);
-ruka = generateLayers(mapStrings.ruka, globalMapSettings);
-alpine = generateLayers(mapStrings.alpine, globalMapSettings);
-golova = generateLayers(mapStrings.golova, globalMapSettings);
-sanatorium = generateLayers(mapStrings.sanatorium, globalMapSettings);
-collateral = generateLayers(mapStrings.collateral, globalMapSettings);
-armada = generateLayers(mapStrings.armada, globalMapSettings);
+//Need to use var here because JS weirdness
+var zoo = generateLayers(mapStrings.zoo, globalMapSettings);
+var duga = generateLayers(mapStrings.duga, globalMapSettings);
+var ruka = generateLayers(mapStrings.ruka, globalMapSettings);
+var alpine = generateLayers(mapStrings.alpine, globalMapSettings);
+var golova = generateLayers(mapStrings.golova, globalMapSettings);
+var sanatorium = generateLayers(mapStrings.sanatorium, globalMapSettings);
+var collateral = generateLayers(mapStrings.collateral, globalMapSettings);
+var armada = generateLayers(mapStrings.armada, globalMapSettings);
 
-dieMaschine = generateLayers(mapStrings.dieMaschine, globalMapSettings);
-dieMaschine_underground = generateLayers(mapStrings.dieMaschineUnderground, globalMapSettings);
-firebaseZ = generateLayers(mapStrings.firebaseZ, globalMapSettings);
-firebaseZ_spawn = generateLayers(mapStrings.firebaseZSpawn, globalMapSettings);
-mauerDerToten = generateLayers(mapStrings.mauerDerToten, globalMapSettings);
-mauerDerToten_streets = generateLayers(mapStrings.mauerDerTotenStreets, globalMapSettings);
+var dieMaschine = generateLayers(mapStrings.dieMaschine, globalMapSettings);
+var dieMaschine_underground = generateLayers(mapStrings.dieMaschineUnderground, globalMapSettings);
+var firebaseZ = generateLayers(mapStrings.firebaseZ, globalMapSettings);
+var firebaseZ_spawn = generateLayers(mapStrings.firebaseZSpawn, globalMapSettings);
+var mauerDerToten = generateLayers(mapStrings.mauerDerToten, globalMapSettings);
+var mauerDerToten_streets = generateLayers(mapStrings.mauerDerTotenStreets, globalMapSettings);
+var forsaken = generateLayers(mapStrings.forsaken, globalMapSettings);
+var forsaken_underground = generateLayers(mapStrings.forsakenUnderground, globalMapSettings);
 
 function generateLayers(name, settings) {
     settings.id = name
@@ -34,9 +36,15 @@ function generateLayers(name, settings) {
         Layer: new L.LayerGroup(),
         Markers: new L.LayerGroup(),
         MiscMarkers: new L.LayerGroup(),
-        Tiles: L.tileLayer(`./maps/${name}/${lightModeClass}{z}/{x}_{y}.png`, settings)
+        //Tiles: L.tileLayer(`./maps/${name}/${lightModeClass}{z}/{x}_{y}.png`, settings)
     }
-    object.Tiles.addTo(object.Layer);
+    var imageUrl = `./maps/${name}/${name}.svg`,
+    imageBounds = [
+      [0, 0],
+      [512, 512]
+    ];
+    //object.Tiles.addTo(object.Layer);
+    L.imageOverlay(imageUrl, imageBounds).addTo(object.Layer);
     object.Markers.addTo(object.Layer);
     object.MiscMarkers.addTo(object.Layer);
     return object

assets/js/models.js

@@ -1,3 +1,4 @@
+/////////////////////Classes/////////////////////////
 class Item {
     constructor({ id, title, desc, icon }) {
         this.id = id;
@@ -7,6 +8,31 @@ class Item {
     }
 }
 
+class Marker {
+    constructor(id, item, loc, uniqueDesc) {
+        this.id = id;
+        if (item instanceof Item) {
+            this.title = item.title ?? "";
+            this.desc = item.desc ?? "";
+            this.icon = item.icon ?? generalIcon;
+        }
+        //Override static description with unique description
+        if (uniqueDesc) this.desc = uniqueDesc;
+        // Could do map in the future depending on how the data structure needs to change
+        /* this.map = map; */
+        this.loc = loc ?? [0, 0];
+    }
+}
+
+class UserPrefs {
+    constructor({lastSelectedMap, collectedIntel, darkmode, asideShow}) {
+        this.lastSelectedMap = lastSelectedMap ?? app.currentMap;
+        this.collectedIntel = collectedIntel ?? [];
+        this.darkmode = darkmode ?? (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        this.asideShow = asideShow ?? true;
+    }
+}
+
 /////////////////////Maps/////////////////////////
 const mapStrings = {
     zoo: "zoo",
@@ -25,7 +51,9 @@ const mapStrings = {
     firebaseZ: "firebaseZ",
     firebaseZSpawn: "firebaseZ_spawn",
     mauerDerToten: "mauerDerToten",
-    mauerDerTotenStreets: "mauerDerToten_streets"
+    mauerDerTotenStreets: "mauerDerToten_streets",
+    forsaken: "forsaken",
+    forsakenUnderground: "forsaken_underground",
 }
 
 const allOutbreakMapsArr = [
@@ -75,6 +103,21 @@ const seasons = {
     season6: "Season 6",
 }
 
+/////////////////////Perks/////////////////////////
+const perks = {
+    staminup: new Item({ id: "staminUp", title: "Stamin-Up", icon: iconInit("staminUp", "perk")}),
+    quick: new Item({ id: "quickRevive", title: "Quick Revive", icon: iconInit("quickRevive", "perk")}),
+    jugg: new Item({ id: "juggernog", title: "Jugger-Nog", icon: iconInit("juggernog", "perk")}),
+    speed: new Item({ id: "speedCola", title: "Speed Cola", icon: iconInit("speedCola", "perk")}),
+    mule: new Item({ id: "muleKick", title: "Mule Kick", icon: iconInit("muleKick", "perk")}),
+    elemental: new Item({ id: "elementalPop", title: "Elemental Pop", icon: iconInit("elementalPop", "perk")}),
+    death: new Item({ id: "deathPerception", title: "Death Perception", icon: iconInit("deathPerception", "perk")}),
+    tomb: new Item({ id: "tombstoneSoda", title: "Tombstone", icon: iconInit("tombstoneSoda", "perk")}),
+    deadshot: new Item({ id: "deadshotDaiquiri", title: "Deadshot Daiquiri", icon: iconInit("deadshotDaiquiri", "perk")}),
+    phd: new Item({ id: "PHDSlider", title: "PHD Slider", icon: iconInit("PHDSlider", "perk")}),
+}
+
+
 
 /////////////////////Markers/////////////////////////
 const markerTypes = {
@@ -103,14 +146,18 @@ const miscTypes = {
     essenceDrop: new Item({ title: "Essence Drop"}),
     scrapHeap: new Item({ title: "Scrap Heap"}),
 
-    perkMachine: new Item({ title: "Perk Machine"}),
-    wunderFizz: new Item({ title: "Der Wunderfizz"}),
+    wunderFizz: new Item({ title: "Der Wunderfizz", icon: wunderFizzIcon}),
     trialComputer: new Item({ title: "Trial Computer"}),
     papMachine: new Item({ title: "Pack-a-Punch"}),
-    mysteryBox: new Item({ title: "Mystery Box Location"}),
+    mysteryBox: new Item({ title: "Mystery Box Location", icon: mysteryBoxIcon}),
     wallbuy: new Item({ title: "Wall Buy"}),
     power: new Item({ title: "Power Switch"}),
     jumpPad: new Item({ title: "Jump Pad"}),
+    landingPad: new Item({ title: "Landing Pad"}),
+    airSupport: new Item({ title: "Air Support Console"}),
+    teleporter: new Item({ title: "Teleporter"}),
+    collector: new Item({ title: "Collection Unit"}),
+    reactor: new Item({ title: "Aether Reactor"}),
     craftingTable: new Item({ title: "Crafting Table"}),
     arsenal: new Item({ title: "Arsenal"}),
     ammoCrate: new Item({ title: "Ammo Crate"}),

assets/js/userPrefs.js

@@ -1,17 +1,31 @@
-//Store and Retrieve user preferences from localStorage
-
-function userPrefsStartup() {
-    let existingPrefs = localStorage.getItem("declassifiedPrefs");
+// SHOULD BE VERY START OF APP JS THAT ISN'T MODELS/CONSTANTS
+const app = StartupSettings();
+const userPrefs = userPrefsStartup();
 
-    if (existingPrefs) return JSON.parse(existingPrefs);
+function StartupSettings() {
+    let response;
+
+    let disableMarkers = [],
+    visibleMarkers = [];
+    //Use default latest map otherwise use last selected map of user
+    let currentMap = mapStrings.armada;
+    let currentContribType;
+    if (localStorage.declassifiedPrefs != undefined && JSON.parse(localStorage.declassifiedPrefs).lastSelectedMap)
+    currentMap = JSON.parse(localStorage.declassifiedPrefs).lastSelectedMap;
+
+    let isMobile = false,
+    submittingLocation = false,
+    fixedNotification = false;
+    let notificationEle = document.getElementById("notification-popup");
+    return response = { currentMap, disableMarkers, visibleMarkers, notificationEle, isMobile, submittingLocation, currentContribType, fixedNotification };
+}
 
-    let newPrefs = {
-        lastSelectedMap: app.currentMap,
-        collectedIntel: [],
-    }
+//Store and Retrieve user preferences from localStorage
+function userPrefsStartup() {
+    var userPrefs = new UserPrefs(JSON.parse(localStorage.getItem("declassifiedPrefs")) ?? {});
 
-    localStorage.setItem("declassifiedPrefs", JSON.stringify(newPrefs));
-    return newPrefs;
+    localStorage.setItem("declassifiedPrefs", JSON.stringify(userPrefs));
+    return userPrefs;
 }
 
 function getUserPrefs() {
@@ -58,4 +72,12 @@ function setLastVisitedMap(selectedMap) {
     let currentPrefs = getUserPrefs();
     currentPrefs.lastSelectedMap = selectedMap
     setUserPrefs(currentPrefs);
-}
+}
+
+function toggleDarkMode() {
+    let currentPrefs = getUserPrefs();
+    currentPrefs.darkmode = !currentPrefs.darkmode
+    setUserPrefs(currentPrefs);
+    location.reload();
+}
+