Merge pull request #23 from EpicKiwi/main

3 features...

index.html

@@ -146,7 +146,7 @@
 					<p class="text-semibold text-2xl pb-4">Known universes</p>
 					<p id="existing-universes" class="text-xl"></p>
           <div id="disclaimer" class="pb-4">
-          <form>   
+          <form id="universe-creator">   
             <label for="search" class="mb-2 text-sm font-medium text-gray-900 sr-only text-white">Search</label>
             <div class="relative">
             <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
@@ -154,8 +154,8 @@
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
             </svg>
         </div>
-              <input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-800 outline-0 rounded-lg bg-gray-800 text-white" placeholder="Buffer..." required>
-              <button id="load-universe-button" class="text-black absolute right-2.5 bottom-2.5 bg-white hover:bg-white focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
+                <input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-800 outline-0 rounded-lg bg-gray-800 text-white" placeholder="Buffer..." required>
+                <button id="load-universe-button" class="text-black absolute right-2.5 bottom-2.5 bg-white hover:bg-white focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
             </div>
           </form>
               <div class="mt-2 flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 border-spacing-y-4">

package.json

@@ -27,6 +27,7 @@
     "astring": "^1.8.6",
     "autoprefixer": "^10.4.14",
     "codemirror": "^6.0.1",
+    "fflate": "^0.8.0",
     "lru-cache": "^10.0.1",
     "marked": "^7.0.3",
     "postcss": "^8.4.27",

src/main.ts

@@ -27,6 +27,7 @@ import {
   template_universes,
 } from "./AppSettings";
 import { tryEvaluate } from "./Evaluator";
+import { gzipSync, decompressSync, strFromU8 } from 'fflate';
 
 // Importing showdown and setting up the markdown converter
 import showdown from "showdown";
@@ -149,6 +150,9 @@ export class Editor {
   buffer_search: HTMLInputElement = document.getElementById(
     "buffer-search"
   ) as HTMLInputElement;
+  universe_creator: HTMLFormElement = document.getElementById(
+    "universe-creator"
+  ) as HTMLFormElement;
 
   // Local script tabs
   local_script_tabs: HTMLDivElement = document.getElementById(
@@ -316,6 +320,7 @@ export class Editor {
 
       // This is the modal to switch between universes
       if (event.ctrlKey && event.key === "b") {
+        event.preventDefault();
         this.hideDocumentation();
 				this.updateKnownUniversesView();
         this.openBuffersModal();
@@ -522,13 +527,13 @@ export class Editor {
       this.settings.font_size = parseInt(new_value);
     });
 
-    this.share_button.addEventListener("click", () => {
+    this.share_button.addEventListener("click", async () => {
       // trigger a manual save
       this.currentFile().candidate = app.view.state.doc.toString();
       this.currentFile().committed = app.view.state.doc.toString();
       this.settings.saveApplicationToLocalStorage(app.universes, app.settings);
       // encode as a blob!
-      this.share();
+      await this.share();
     });
 
     this.normal_mode_button.addEventListener("click", () => {
@@ -553,18 +558,24 @@ export class Editor {
       });
     });
 
-    this.buffer_search.addEventListener("keydown", (event) => {
-      if (event.key === "Enter") {
-        let query = this.buffer_search.value;
-        if (query.length > 2 && query.length < 20) {
-          this.loadUniverse(query);
-          this.settings.selected_universe = query;
+    this.universe_creator.addEventListener("submit", (event) => {
+
+      event.preventDefault();
+
+      let data = new FormData(this.universe_creator);
+      let universeName = data.get("universe") as string|null;
+
+      if(universeName){
+        if (universeName.length > 2 && universeName.length < 20) {
+          this.loadUniverse(universeName);
+          this.settings.selected_universe = universeName;
           this.buffer_search.value = "";
           this.closeBuffersModal();
           this.view.focus();
         }
       }
     });
+
     tryEvaluate(this, this.universes[this.selected_universe.toString()].init);
 
     [
@@ -639,7 +650,8 @@ export class Editor {
       if (url !== null) {
         const universeParam = url.get("universe");
         if (universeParam !== null) {
-          new_universe = JSON.parse(atob(universeParam));
+          let data = Uint8Array.from(atob(universeParam), c => c.charCodeAt(0))
+          new_universe = JSON.parse(strFromU8(decompressSync(data)));
           const randomName: string = uniqueNamesGenerator({
 						  length: 2, separator: '_',
 							dictionaries: [colors, animals],
@@ -692,12 +704,24 @@ export class Editor {
 		existing_universes!.innerHTML = final_html;
 	}
 
-  share() {
-    const hashed_table = btoa(
-      JSON.stringify({
-        universe: this.settings.universes[this.selected_universe],
-      })
-    );
+  async share() {
+
+    async function bufferToBase64(buffer:Uint8Array) {
+      const base64url: string = await new Promise(r => {
+        const reader = new FileReader()
+        reader.onload = () => r(reader.result as string)
+        reader.readAsDataURL(new Blob([buffer]))
+      });
+      return base64url.slice(base64url.indexOf(',') + 1);
+    }
+
+    let data = JSON.stringify({
+      universe: this.settings.universes[this.selected_universe],
+    });
+    let encoded_data = gzipSync(new TextEncoder().encode(data));
+    // TODO make this async
+    // TODO maybe try with compression level 9
+    const hashed_table = await bufferToBase64(encoded_data);
     const url = new URL(window.location.href);
     url.searchParams.set("universe", hashed_table);
     window.history.replaceState({}, "", url.toString());

yarn.lock

@@ -767,6 +767,11 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fflate@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.8.0.tgz#f93ad1dcbe695a25ae378cf2386624969a7cda32"
+  integrity sha512-FAdS4qMuFjsJj6XHbBaZeXOgaypXp8iw/Tpyuq/w3XA41jjLHT8NPA+n7czH/DDhdncq0nAyDZmPeWXh2qmdIg==
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"