save data export and import

src/App.vue

@@ -51,7 +51,6 @@ import {version} from "../package.json"
       :adventurerForHire="adventurerForHire"
       :news="news"
       @finalizeQuest="finalizeQuest($event)"
-      @wipeSave="resetSave()"
       @recruitActionTaken="recruitAction($event)"
   />
 </template>
@@ -262,11 +261,6 @@ export default defineComponent({
         }
       }
     },
-    resetSave() {
-      if (!confirm("You are about to wipe your save file. Are you sure?")) return;
-      window.localStorage.removeItem("savedGame");
-      window.location.reload();
-    },
     async updateNews() {
       const result = await fetch("https://raw.githubusercontent.com/YouHaveTrouble/GuildMaster/master/news.txt").catch(() => {
         return null;

src/components/technical/ChangelogComponent.vue

@@ -53,7 +53,6 @@ export default defineComponent({
   },
   async mounted() {
     this.getReleases(1);
-
   }
 });
 </script>

src/components/technical/SaveManagerComponent.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="save-manager panel pinned-paper">
+    <dialog ref="importDialog" >
+      <div class="import-dialog">
+        <textarea
+            v-model="importSaveText"
+            placeholder="Paste your save data here"
+        ></textarea>
+        <div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem;">
+          <button type="button" class="button metal" @click="importSave()" :disabled="importSaveText === ''">
+            Import
+          </button>
+          <button class="close" @click="closeSaveImport">✗</button>
+        </div>
+      </div>
+
+    </dialog>
+    <div class="nail top-left">
+      <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+    </div>
+    <div class="nail top-right">
+      <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+    </div>
+    <h1>Save file</h1>
+    <div class="buttons">
+      <button class="button metal" @click="exportSave()">
+        Export
+      </button>
+      <button class="button metal" @click="openSaveImport()">
+        Import
+      </button>
+      <button class="button metal" @click="wipeSave()">
+        <span class="red">Wipe</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+
+export default defineComponent({
+  name: "ChangelogComponent",
+  data: () => ({
+    importSaveText: "",
+  }),
+  methods: {
+    openSaveImport() {
+      const dialog = this.$refs.importDialog as HTMLDialogElement;
+      dialog.showModal();
+    },
+    closeSaveImport() {
+      const dialog = this.$refs.importDialog as HTMLDialogElement;
+      dialog.close();
+    },
+    exportSave() {
+      const save = window.localStorage.getItem("savedGame");
+      if (!save) {
+        alert("No save file found!");
+        return;
+      }
+      navigator.clipboard.writeText(btoa(save));
+      setTimeout(() => alert("Save data copied to clipboard!"), 100);
+    },
+    importSave() {
+      const saveBase64 = this.importSaveText;
+      try {
+        const save = atob(saveBase64);
+        JSON.parse(save);
+        window.localStorage.setItem("savedGame", save);
+        window.location.reload();
+      } catch (e) {
+        alert("Invalid save file!");
+        return;
+      }
+
+    },
+    wipeSave() {
+      if (!confirm("You are about to wipe your save file. Are you sure?")) return;
+      window.localStorage.removeItem("savedGame");
+      window.location.reload();
+    },
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.save-manager {
+  padding-block: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  max-width: 45rem;
+  width: 100%;
+  h1 {
+    margin-block: 0;
+    font-size: 2rem;
+  }
+  dialog {
+    padding: 0;
+  }
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    .red {
+      color: #d52121;
+    }
+  }
+  .import-dialog {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: url("/img/background/panels/plaster.png");
+    background-size: 100% 100%;
+    gap: 1rem;
+    position: relative;
+    textarea {
+      width: 90%;
+      height: 10rem;
+      resize: none;
+      border: 1px solid var(--color-metal);
+      border-radius: 0.25rem;
+      padding: 0.5rem;
+      font-family: monospace;
+    }
+    .close {
+      color: #ab0707;
+      font-size: 2rem;
+      border: none;
+      background: transparent;
+      &:hover {
+        color: #d52121;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/views/HomeView.vue

@@ -30,9 +30,6 @@
       <section class="upgrade">
         <UpgradesList :guild="guild"/>
       </section>
-      <section class="upgrade">
-        <span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
-      </section>
     </section>
 
   </main>
@@ -82,6 +79,7 @@ main {
   .upgrades {
     max-width: 45rem;
     width: 100%;
+    padding-bottom: 1rem;
   }
 }
 

src/views/TechnicalView.vue

@@ -19,6 +19,7 @@
         </a>
       </div>
     </div>
+    <SaveManagerComponent/>
     <ChangelogComponent/>
 
   </section>
@@ -26,11 +27,12 @@
 
 <script lang="ts">
 import {defineComponent} from "vue";
-import ChangelogComponent from "@/components/ChangelogComponent.vue";
+import ChangelogComponent from "@/components/technical/ChangelogComponent.vue";
+import SaveManagerComponent from "@/components/technical/SaveManagerComponent.vue";
 
 export default defineComponent({
   name: "TechnicalView",
-  components: {ChangelogComponent},
+  components: {SaveManagerComponent, ChangelogComponent},
 
 })
 </script>