save/load asciibird state, import not working but can export

package.json

@@ -12,6 +12,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^2.0.2",
+    "pako": "^2.0.3",
     "vue": "^2.6.11",
     "vue-draggable-resizable": "^2.3.0",
     "vue-tailwind": "^2.0.0",
@@ -61,4 +62,4 @@
       "git add"
     ]
   }
-}
+}

src/Dashboard.vue

@@ -52,6 +52,12 @@
       <t-button @click="exportMirc()" class="ml-1" v-if="this.$store.getters.asciibirdMeta.length"
         >Export ASCII to mIRC</t-button
       >
+      <t-button @click="exportAsciibirdState()" class="ml-1" v-if="this.$store.getters.asciibirdMeta.length"
+        >Save Asciibird State</t-button
+      >
+      <t-button @click="startImport('asb')" class="ml-1"
+        >Load Asciibird State</t-button
+      >
       <!-- <t-button @click="startImport('ansi')" class="ml-1">Import ANSI</t-button> -->
       <input
         type="file"
@@ -100,6 +106,7 @@ import Editor from './views/Editor.vue';
 // import * as Anser from "anser";
 import CharPicker from './components/parts/CharPicker.vue';
 import ColourPicker from './components/parts/ColourPicker.vue';
+import pako from 'pako';
 
 export default {
   async created() {
@@ -129,6 +136,7 @@ export default {
     canvasY: null,
     dashboardX: null,
     dashboardY: null,
+    importType: null,
   }),
   methods: {
     updateCoords(value) {
@@ -140,18 +148,36 @@ export default {
       const filename = files[0].name;
       const fileReader = new FileReader();
 
+      var _importType = this.importType
+      fileReader.addEventListener('load', () => {
+        
+        switch(_importType) {
+
+          case 'asb':
+            this.importAsciibirdState(fileReader.result, filename)
+            console.log("_importType", _importType)
+            break;
+
+          case 'mirc':
+              this.mircAsciiImport(fileReader.result, filename);
+            break;
+
+          // default:
+          //   this.importAsciibirdState(fileReader.result, filename)
+          //   console.log("Nah")
+          //   break;
+        }
+
+      });
+
       // This will fire the file reader 'load' event
       const asciiImport = fileReader.readAsText(files[0]);
-
-      fileReader.addEventListener('load', () => {
-        // We'll have to add a switch statement
-        // here to handle different file types
-        this.mircAsciiImport(fileReader.result, filename);
-      });
     },
-    startImport() {
+    startImport(type) {
       // For ANSI we'll need to add back in the
       // type cariable here
+      this.importType = type
+      console.log(this.importType)
       this.$refs.asciiInput.click();
     },
     // We can maybe try something different to import ANSI
@@ -405,6 +431,37 @@ export default {
       // Update the browsers title to the ASCII filename
       document.title = `asciibird - ${this.$store.getters.currentAscii.title}`;
     },
+    importAsciibirdState(fileContents, fileName) {
+      // Import from a gzipped json file
+      let input;
+
+      try {
+        // Make a gzipped JSON of the asciibird app state
+        // const charData = strData.split('').map(function(x){return x.charCodeAt(0); });
+
+        input = pako.inflate(fileContents, {level:"9"});
+        console.log(input);
+      } catch (err) {
+        console.log(err);
+      }
+
+      // this.$store.commit("changeState", input)
+    },
+    exportAsciibirdState() {
+      // Download to a gzipped json file
+      let output;
+
+      try {
+        // Make a gzipped JSON of the asciibird app state
+        // NOT working
+        output = pako.gzip(JSON.stringify(this.$store.getters.getState), {level:"9"});
+        console.log(output);
+      } catch (err) {
+        console.log(err);
+      }
+
+      this.downloadToFile(output, 'asciibird.asb', 'application/gzip');
+    },
     exportMirc() {
       const { currentAscii } = this.$store.getters;
       const output = [];
@@ -439,6 +496,11 @@ export default {
       }
 
       // Download to a txt file
+      // Check if txt already exists and append it
+      const filename = currentAscii.title.slice(currentAscii.title.length - 3) === 'txt' ? currentAscii.title : `${currentAscii.title}.txt`;
+      this.downloadToFile(output.join(''), filename, 'text/plain');
+    },
+    downloadToFile(content, filename, contentType) {
       const downloadToFile = (content, filename, contentType) => {
         const a = document.createElement('a');
         const file = new Blob([content], { type: contentType });
@@ -449,10 +511,8 @@ export default {
 
         URL.revokeObjectURL(a.href);
       };
-
-      // Check if txt already exists and append it
-      const filename = currentAscii.title.slice(currentAscii.title.length - 3) === 'txt' ? currentAscii.title : `${currentAscii.title}.txt`;
-      downloadToFile(output.join(''), filename, 'text/plain');
+      
+      return downloadToFile(content, filename, contentType)
     },
     createClick() {
       this.forms.createAscii.title = `New ASCII ${this.$store.getters.asciibirdMeta.length}`;

src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import VueTailwind from 'vue-tailwind';
 import VueDraggableResizable from 'vue-draggable-resizable';
+import Pako from 'pako';
 
 import {
   TInput,
@@ -172,5 +173,6 @@ Vue.component('vue-draggable-resizable', VueDraggableResizable);
 
 new Vue({
   store,
+  Pako,
   render: (h) => h(Dashboard),
 }).$mount('#app');

src/store/index.js

@@ -112,6 +112,9 @@ export default new Vuex.Store({
     blockSizeMultiplier: 1,
   },
   mutations: {
+    changeState(state, payload) {
+      state = payload;
+    },
     changeTab(state, payload) {
       state.tab = payload;
     },
@@ -159,6 +162,7 @@ export default new Vuex.Store({
     },
   },
   getters: {
+    getState: (state) => state,
     getToolbarIcons: (state) => state.toolbarIcons,
     getToolbarState: (state) => state.toolbarState,
     getCurrentTool: (state) => state.toolbarState.currentTool,

yarn.lock

@@ -6630,6 +6630,11 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+pako@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.3.tgz#cdf475e31b678565251406de9e759196a0ea7a43"
+  integrity sha512-WjR1hOeg+kki3ZIOjaf4b5WVcay1jaliKSYiEaB1XzwhMQZJxRdQRv0V31EKBYlxb4T7SK3hjfc/jxyU64BoSw==
+
 pako@~1.0.5:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"