save data formats!

FallBackITA27 · May 15, 2024 · fcc7047 · fcc7047
1 parent b0987ec
commit fcc7047
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 13 deletions.
diff --git a/gtav-interactive-map/index.html b/gtav-interactive-map/index.html
@@ -107,6 +107,12 @@ <h3>Use different map style</h3>
                 <input type="radio" value="print" name="mapStyle" class="mapStyle">
             </div>
         </div>
+        <hr class="fifty">
+        <h3>Backup Data</h3>
+        <p>Press the button to backup your data in a file</p>
+        <button id="backupDataButton">Backup Data</button>
+        <p>Press the following button to load up the backup instead</p>
+        <input type="file" id="backupDataFile" accept="application/json, text/plain">
         <hr>
         <div id="tools"></div>
         <h2>Tools</h2>
@@ -132,15 +138,17 @@ <h3>Cayo Perico Heist Timer</h3>
         <div id="changelog"></div>
         <h2>Changelog</h2>
         <p>All the dates are in <a target="_blank" href="https://en.wikipedia.org/wiki/Central_European_Time">CET</a>.</p>
-        <h3>2024 - 05 - 15 / 16:37</h3>
+        <h3>2024 - 05 - 15 | 19:46 | Version 0.1.0</h3>
+        <p>Data can now be saved and moved around! Also, data will be formatted appropriately.</p>
+        <h3>2024 - 05 - 15 | 16:37 | Version 0.0.5</h3>
         <p>You can now mark collectibles as completed; the `Show All`, `Hide All`, `Show Completed` and `Hide Completed` buttons now work properly. The Youtube video player has now been fixed of a bug where it wouldn't go to the proper timestamp.</p>
-        <h3>2024 - 05 - 14 / 13:33</h3>
+        <h3>2024 - 05 - 14 | 13:33 | Version 0.0.4</h3>
         <p>The Cayo Perico Heist and the Casino Heist now have timers in the `Tools` section.</p>
-        <h3>2024 - 05 - 14 / 11:07</h3>
+        <h3>2024 - 05 - 14 | 11:07 | Version 0.0.3</h3>
         <p>Now the map saves the last tile selection, alongside the last zoom and coordinate you were looking at, so that refreshing the page doesn't zoom you out completely. Also having a link that points to something in the GUI will open it on load.</p>
-        <h3>2024 - 05 - 13 / 10:57</h3>
+        <h3>2024 - 05 - 13 | 10:57 | Version 0.0.2</h3>
         <p>Added tile selection to map, now able to switch between `game`, `render` and `print`</p>
-        <h3>2024 - 05 - 10 / 23:22</h3>
+        <h3>2024 - 05 - 10 | 23:22 | Version 0.0.1</h3>
         <p>Made the map work, aligned the SVGs kindly <del>stolen from</del> provided by GTALens.com</p>
         <p>Manually got all the datapoints for Action Figures and descriptions</p>
         <hr>

diff --git a/gtav-interactive-map/script.js b/gtav-interactive-map/script.js
@@ -2,6 +2,7 @@
 let insertMarkersMode = false;
 
 let saveData = {
+    version: "0.1.0",
     selectedTileLayer: "game",
     lastZoom: 2,
     lastCoords: [38.959409, -75.410156],
@@ -15,17 +16,44 @@ let saveData = {
     completionDataLastPickFigurines: "hideAll",
 }
 
-let temporarySaveDataStr = localStorage.getItem("saveData");
-if (temporarySaveDataStr != null) {
-    let temporarySaveData = JSON.parse(temporarySaveDataStr, (key, value) => (["completionDataFigurines"].includes(key) ? new Set(value) : value));
-    for (key in saveData)
-        if (temporarySaveData[key] == null)
-            temporarySaveData[key] = saveData[key];
-
-    saveData = temporarySaveData;
+function loadInSaveData(dataStr) {
+    if (dataStr != null) {
+        let temporarySaveData = JSON.parse(dataStr, (key, value) => (["completionDataFigurines"].includes(key) ? new Set(value) : value));
+        if (temporarySaveData.version !== saveData.version) {
+            if (temporarySaveData.version === undefined) {
+                return;
+            }
+            // Here you check the version tag in the savedata and modify it accordingly to make it match the current save data type.
+        }
+        saveData = temporarySaveData;
+    }
 }
+loadInSaveData(localStorage.getItem("saveData"));
 saveDataSave();
 
+document.getElementById("backupDataButton").addEventListener("click", function() {
+    saveDataSave();
+    var element = document.createElement('a');
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(localStorage.getItem("saveData")));
+    element.setAttribute('download', "GTA5InteractiveMapData.json");
+    element.style.display = 'none';
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+});
+
+document.getElementById("backupDataFile").addEventListener("change", function(e) {
+    let reader = new FileReader();
+    reader.readAsText(e.target.files[0]);
+    reader.addEventListener("load", function(res) {
+        console.log(res);
+        console.log(res.target.result);
+        loadInSaveData(res.target.result);
+        saveDataSave();
+        window.location.reload();
+    });
+});
+
 let player;
 function onYouTubeIframeAPIReady() {
     player = new YT.Player('player', {