Merge pull request #166 from Miss-placed/devBranch

Export features and lightmode for v2

assets/js/darkmode.js

@@ -0,0 +1,19 @@
+//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) {
+    document.getElementById("worldMap").classList.remove(lightModeClass)
+    lightModeClass = ""
+} else {
+    lightModeClass = "light-"
+    document.getElementById("worldMap").classList.add(lightModeClass)
+}

assets/js/icons.js

@@ -39,8 +39,8 @@ var requiemIcon = L.icon({
 });
 var generalIcon = L.icon({
     iconUrl: 'assets/img/icons/generalIcon.png',
-    iconSize: [48, 48],
-    iconAnchor: [24, 48],
+    iconSize: [40, 40],
+    iconAnchor: [20, 40],
     popupAnchor: [0, -30]
 });
 var riftIcon = L.icon({

assets/js/index.js

@@ -1,6 +1,8 @@
 const app = StartupSettings();
 const userPrefs = userPrefsStartup();
 
+
+
 function StartupSettings() {
     let response;
 
@@ -12,13 +14,16 @@ function StartupSettings() {
     if (localStorage.declassifiedPrefs != undefined && JSON.parse(localStorage.declassifiedPrefs).lastSelectedMap)
         currentMap = JSON.parse(localStorage.declassifiedPrefs).lastSelectedMap;
 
-    let isMobile = false, submittingLocation = false, fixedNotification = false;
+    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"
@@ -27,11 +32,11 @@ L.control.attribution()
 //loops through all types of intel and makes a marker
 AddMapMarkersFromCache(intelCache);
 
-mapInstance.on('popupopen', function () {
-    $('.mark-collected').click(function (e) {
+mapInstance.on('popupopen', function() {
+    $('.mark-collected').click(function(e) {
         let itemId = $(e.target).closest(".buttonContainer").data("item");
         if (app.disableMarkers.includes(itemId.toString())) {
-            app.disableMarkers = $.grep(app.disableMarkers, function (value) {
+            app.disableMarkers = $.grep(app.disableMarkers, function(value) {
                 return value != itemId.toString();
             });
             app.visibleMarkers[itemId].setOpacity(1);
@@ -42,19 +47,19 @@ mapInstance.on('popupopen', function () {
             addCollectedIntel(itemId);
         }
     });
-    $('.share').click(function (e) {
+    $('.share').click(function(e) {
         let itemId = $(e.target).closest(".buttonContainer").data("item");
         copyToClipboard(`${window.location.origin}${window.location.pathname}?id=${itemId}`, "Link Copied To Clipboard");
     });
-    $('.bugRep').click(function (e) {
+    $('.bugRep').click(function(e) {
         let itemId = $(e.target).closest(".buttonContainer").data("item");
         let type = $(e.target).closest(".buttonContainer").data("type");
 
         redirectToGithub({ itemType: type, issueType: "Fix", itemId: itemId })
     });
 });
 
-mapInstance.on("click", function (e) {
+mapInstance.on("click", function(e) {
     let location = "[" + e.latlng.lat + ", " + e.latlng.lng + "]";
     if (debug) {
         copyToClipboard(location, "Location Copied to Clipboard")
@@ -74,11 +79,11 @@ function onLoad() {
     }
 
     //Intel Search Listeners
-    $('#intelFilter').find("input[type=checkbox]").change(function () {
+    $('#intelFilter').find("input[type=checkbox]").change(function() {
         intelFiltered = TriggerSearch();
     });
 
-    $('#searchTerm').keyup(function () {
+    $('#searchTerm').keyup(function() {
         intelFiltered = TriggerSearch();
     });
 

assets/js/maps.js

@@ -29,11 +29,12 @@ mauerDerToten_streets = generateLayers(mapStrings.mauerDerTotenStreets, globalMa
 
 function generateLayers(name, settings) {
     settings.id = name
+
     let object = {
         Layer: new L.LayerGroup(),
         Markers: new L.LayerGroup(),
         MiscMarkers: new L.LayerGroup(),
-        Tiles: L.tileLayer(`./maps/${name}/{z}/{x}_{y}.png`, settings)
+        Tiles: L.tileLayer(`./maps/${name}/${lightModeClass}{z}/{x}_{y}.png`, settings)
     }
     object.Tiles.addTo(object.Layer);
     object.Markers.addTo(object.Layer);

assets/js/models.js

@@ -104,13 +104,20 @@ const miscTypes = {
     scrapHeap: new Item({ title: "Scrap Heap"}),
 
     perkMachine: new Item({ title: "Perk Machine"}),
+    wunderFizz: new Item({ title: "Der Wunderfizz"}),
+    trialComputer: new Item({ title: "Trial Computer"}),
     papMachine: new Item({ title: "Pack-a-Punch"}),
-    mysteryBox: new Item({ title: "Mystery box"}),
+    mysteryBox: new Item({ title: "Mystery Box Location"}),
     wallbuy: new Item({ title: "Wall Buy"}),
+    power: new Item({ title: "Power Switch"}),
     jumpPad: new Item({ title: "Jump Pad"}),
     craftingTable: new Item({ title: "Crafting Table"}),
+    arsenal: new Item({ title: "Arsenal"}),
     ammoCrate: new Item({ title: "Ammo Crate"}),
     trap: new Item({ title: "Trap"}),
+    zipline: new Item({ title: "Zipline"}),
+    rampageInducer: new Item({ title: "Rampage Inducer"}),
+
     klausRadio: new Item({ title: "Klaus recall radio"}),
     aetherCrystal: new Item({ title: "Aether Crystal"}),
 }

assets/js/userPrefs.js

@@ -21,23 +21,23 @@ function getUserPrefs() {
 
 function setUserPrefs(prefsObj) {
     localStorage.setItem("declassifiedPrefs", JSON.stringify(prefsObj));
-} 
+}
 
 function hasUserCollected(intel, getIndex = false) {
     let currentPrefs = getUserPrefs();
     //Search all arrays of intel to see if the intel exists
     let indexOfIntel = currentPrefs.collectedIntel.indexOf(intel);
     if (indexOfIntel > -1 && getIndex) return indexOfIntel;
     if (indexOfIntel > -1 && !getIndex) return true;
-    
+
     //Couldn't find the intel, assume they haven't collected
     return false;
 }
 
 function addCollectedIntel(intel) {
     let currentPrefs = getUserPrefs();
-    
-    if(hasUserCollected(intel)) {
+
+    if (hasUserCollected(intel)) {
         console.log("Already collected this intel.");
         return;
     }
@@ -47,13 +47,14 @@ function addCollectedIntel(intel) {
 
 function removeCollectedIntel(intel) {
     let currentPrefs = getUserPrefs();
-    
+
     let indexOfIntel = hasUserCollected(intel, true);
 
     currentPrefs.collectedIntel.splice(indexOfIntel, 1);
     setUserPrefs(currentPrefs);
 }
-function setLastVisitedMap(selectedMap){
+
+function setLastVisitedMap(selectedMap) {
     let currentPrefs = getUserPrefs();
     currentPrefs.lastSelectedMap = selectedMap
     setUserPrefs(currentPrefs);

assets/js/v2.js

@@ -19,6 +19,11 @@ const seasonTotal = {
 }
 
 
+function toggleDarkMode() {
+    localStorage.darkmode = !JSON.parse(localStorage.darkmode);
+    location.reload();
+}
+
 function openModal() {
     document.getElementsByClassName("modal-bg")[0].classList.remove("-hidden")
     fillTotals()

assets/style/buttons.css

@@ -47,7 +47,7 @@
 
     #discord {
         background-color: #5865F2;
-        color: var(--clr-grey-l);
+        color: var(--clr-white-d);
     }
 
     #github {

assets/style/global.css

@@ -8,7 +8,8 @@
 :root {
     /* whites and blacks */
     --clr-white: #FFFFFF;
-    --clr-grey-l: #c7bbb2;
+    --clr-white-d: #c7bbb2;
+    --clr-grey-l: #6a6a6b;
     --clr-grey: #565555;
     --clr-grey-d: #3c3c3b;
     --clr-black: #1f2223;
@@ -24,11 +25,11 @@
     --clr-orange: #d3642b;
     --clr-pink: #CC358B;
     /* backgrounds */
-    --clr-bg: var(--clr-grey-l);
+    --clr-bg: var(--clr-white-d);
     --clr-bg-inverted: var(--clr-grey-d);
     /* text color */
     --clr-color: var(--clr-grey-d);
-    --clr-color-inverted: var(--clr-grey-l);
+    --clr-color-inverted: var(--clr-white-d);
     /* border properties*/
     --shadow: 0px 3px 0px 0px var(--clr-black);
     --shadow-hover: 0px 4px 0px 0px var(--clr-black);
@@ -43,8 +44,8 @@
 @media (prefers-color-scheme: dark) {
      :root {
         --clr-bg: var(--clr-grey-d);
-        --clr-color: var(--clr-grey-l);
-        --clr-bg-inverted: var(--clr-grey-l);
+        --clr-color: var(--clr-white-d);
+        --clr-bg-inverted: var(--clr-white-d);
         --clr-color-inverted: var(--clr-grey-d);
     }
 }
@@ -58,7 +59,7 @@
 }
 
 ::-webkit-scrollbar-thumb {
-    background: var(--clr-grey-l);
+    background: var(--clr-white-d);
 }
 
 ::-webkit-scrollbar-thumb:hover {

assets/style/style.css

@@ -43,12 +43,19 @@ body {
     grid-column: 1;
     height: 90vh;
     width: 80vw;
-    background-color: var(--clr-grey-d);
     cursor: crosshair;
     float: right;
     z-index: 0;
 }
 
+#worldMap {
+    background-color: var(--clr-grey-d);
+}
+
+#worldMap.light- {
+    background-color: var(--clr-grey);
+}
+
 header {
     height: 10vh;
     width: 100vw;

assets/style/style2.css

@@ -7,21 +7,28 @@ body {
 
 #worldMap {
     color: var(--clr-color);
-    background-color: var(--clr-bg);
     width: 100vw;
     height: 90vh;
     z-index: var(--z-index-map);
 }
 
+#worldMap {
+    background-color: var(--clr-grey-d);
+}
+
+#worldMap.light- {
+    background-color: var(--clr-grey);
+}
+
 header {
     height: 10vh;
     width: 100vw;
     background: var(--clr-grey-d);
-    color: var(--clr-grey-l);
+    color: var(--clr-white-d);
     font-family: sans-serif;
     display: grid;
     grid-auto-flow: column;
-    border-bottom: 1px solid var(--clr-grey-l);
+    border-bottom: 1px solid var(--clr-white-d);
     user-select: none;
     z-index: var(--z-index-menu);
 }
@@ -30,7 +37,7 @@ header>div,
 .dropdown-item {
     padding: 10px 20px;
     margin: auto;
-    background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, var(--clr-grey-l) 50%);
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, var(--clr-white-d) 50%);
     background-size: 200%;
     background-position: 0 0;
     transition: 0.1s ease-in-out;
@@ -47,7 +54,7 @@ header>div:hover,
 
 .dropdown-item {
     padding: 10px 20px;
-    color: var(--clr-grey-l);
+    color: var(--clr-white-d);
 }
 
 
@@ -70,7 +77,7 @@ header>div:hover,
 }
 
 .current-map {
-    background-color: var(--clr-grey-l);
+    background-color: var(--clr-white-d);
     color: var(--clr-grey);
 }
 

assets/style/worldmap.css

@@ -14,12 +14,12 @@
 
 .leaflet-control-zoom-in,
 .leaflet-control-zoom-out {
-    background-color: var(--clr-grey-l)!important;
+    background-color: var(--clr-white-d)!important;
 }
 
 .leaflet-popup-close-button {
     color: var(--clr-red)!important;
-    text-shadow: -1px -1px 0 var(--clr-grey-l), -1px 1px 0 var(--clr-grey-l), 1px 1px 0 var(--clr-grey-l), 1px -1px 0 var(--clr-grey-l);
+    text-shadow: -1px -1px 0 var(--clr-white-d), -1px 1px 0 var(--clr-white-d), 1px 1px 0 var(--clr-white-d), 1px -1px 0 var(--clr-white-d);
     font-size: 20px!important;
     right: 3px!important;
     top: -10px!important;
@@ -33,7 +33,7 @@
 }
 
 .leaflet-popup-tip {
-    background-color: var(--clr-grey-l)!important;
+    background-color: var(--clr-white-d)!important;
 }
 
 .leaflet-popup-content {
@@ -58,5 +58,5 @@
     padding-left: 19px;
     padding-right: 19px;
     background-color: var(--clr-grey);
-    color: var(--clr-grey-l);
+    color: var(--clr-white-d);
 }