From e235a8f877e7128020605715d663aa15e19569bf Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Mon, 20 Sep 2021 19:25:46 -0400
Subject: [PATCH] Add a permalink button

---
 package-lock.json       | 11 +++++++++++
 package.json            |  1 +
 src/Dissolve.vue        | 20 ++++++++++++++++++--
 src/components/Menu.vue | 10 ++++++++++
 src/serialize.ts        |  5 +++--
 src/sources/Source.ts   |  6 +++++-
 6 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 033294e..6e6ebcc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@vueform/slider": "^2.0.5",
         "@vueform/toggle": "^2.0.1",
         "core-js": "^3.6.5",
+        "js-base64": "^3.7.1",
         "mobile-drag-drop": "^2.3.0-rc.2",
         "postcss": "^8.3.6",
         "reflect-metadata": "^0.1.13",
@@ -10254,6 +10255,11 @@
       "integrity": "sha1-J8dlOb4U2L0Sghmi1zGwkzeQTnk=",
       "dev": true
     },
+    "node_modules/js-base64": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.1.tgz",
+      "integrity": "sha512-XyYXEUTP3ykPPnGPoesMr4yBygopit99iXW52yT1EWrkzwzvtAor/pbf+EBuDkwqSty7K10LeTjCkUn8c166aQ=="
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npm.taobao.org/js-message/download/js-message-1.0.7.tgz?cache=0&sync_timestamp=1605128844887&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-message%2Fdownload%2Fjs-message-1.0.7.tgz",
@@ -26321,6 +26327,11 @@
       "integrity": "sha1-J8dlOb4U2L0Sghmi1zGwkzeQTnk=",
       "dev": true
     },
+    "js-base64": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.1.tgz",
+      "integrity": "sha512-XyYXEUTP3ykPPnGPoesMr4yBygopit99iXW52yT1EWrkzwzvtAor/pbf+EBuDkwqSty7K10LeTjCkUn8c166aQ=="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npm.taobao.org/js-message/download/js-message-1.0.7.tgz?cache=0&sync_timestamp=1605128844887&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-message%2Fdownload%2Fjs-message-1.0.7.tgz",
diff --git a/package.json b/package.json
index 0b39136..e953d14 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@vueform/slider": "^2.0.5",
     "@vueform/toggle": "^2.0.1",
     "core-js": "^3.6.5",
+    "js-base64": "^3.7.1",
     "mobile-drag-drop": "^2.3.0-rc.2",
     "postcss": "^8.3.6",
     "reflect-metadata": "^0.1.13",
diff --git a/src/Dissolve.vue b/src/Dissolve.vue
index 81644f4..85ecddb 100644
--- a/src/Dissolve.vue
+++ b/src/Dissolve.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app-area">
-    <Menu />
+    <Menu v-on:permalink="permalink" />
     <div id="first-input" v-if="needsInput">
       <button class="soundscapes" v-on:click="resumeContext">Start</button>
     </div>
@@ -21,7 +21,9 @@ import { clearCache, setup, Soundscape } from "./audio";
 import SoundscapeComp from "./components/SoundscapeComp.vue";
 import Menu from "./components/Menu.vue";
 import { DemoScene } from "./data/presets";
-import { deserializeSoundscape } from "./serialize";
+import { deserializeSoundscape, serializeSoundscape } from "./serialize";
+import { Base64 } from "js-base64";
+
 @Options({
   components: {
     SoundscapeComp,
@@ -42,6 +44,11 @@ export default class Dissolve extends Vue {
 
     this.soundscapes.push(scape);
   }
+
+  permalink(): void {
+    const data = this.soundscapes.map((scape) => serializeSoundscape(scape));
+    window.location.hash = Base64.encodeURI(JSON.stringify(data));
+  }
   mounted(): void {
     this.context = setup();
     console.log(this.context);
@@ -53,6 +60,15 @@ export default class Dissolve extends Vue {
     if (this.context.state == "suspended") {
       this.needsInput = true;
     }
+
+    if (window.location.hash) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const data: Array<any> = JSON.parse(Base64.decode(window.location.hash));
+
+      data.forEach((entry) => {
+        this.addSoundscape(deserializeSoundscape(entry));
+      });
+    }
   }
 
   resumeContext(): void {
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 7f5f628..3b64636 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -57,4 +57,14 @@ export default class Menu extends Vue {
   grid-auto-rows: minmax(max-content, 1fr);
   background: #777;
 }
+button {
+  width: 100%;
+  height: 50px;
+  background: #ccc;
+  font-size: 24pt;
+  font-family: "Coda";
+}
+button:active {
+  background: #999;
+}
 </style>
diff --git a/src/serialize.ts b/src/serialize.ts
index 1986f25..b558535 100644
--- a/src/serialize.ts
+++ b/src/serialize.ts
@@ -66,7 +66,7 @@ export function serializeNode<T extends Node>(_node: T): any {
       const soundSet = node[key] as SoundSet;
       results[key] = {
         name: soundSet.name,
-        soundKeys: soundSet.soundKeys,
+        soundKeys: soundSet.preset ? undefined : soundSet.soundKeys,
       };
     }
   });
@@ -115,7 +115,8 @@ export function deserializeNode(data: any): Node {
       if (data[key].soundKeys === undefined) {
         node[key] = new SoundSet(
           data[key].name,
-          PresetSoundSets[data[key].name]
+          PresetSoundSets[data[key].name],
+          true
         );
       } else {
         node[key] = new SoundSet(data[key].name, data[key].soundKeys);
diff --git a/src/sources/Source.ts b/src/sources/Source.ts
index f2827a2..19cb6cf 100644
--- a/src/sources/Source.ts
+++ b/src/sources/Source.ts
@@ -10,7 +10,11 @@ export class SoundSet {
   soundMap: Map<string, AudioBuffer> = new Map();
   soundList: Array<AudioBuffer> = [];
 
-  constructor(public name: string, public soundKeys: Array<string>) {
+  constructor(
+    public name: string,
+    public soundKeys: Array<string>,
+    public preset = false
+  ) {
     this.soundKeys.forEach((sound) => {
       loadAudio(sound, this);
     });