chart edit screen without any of the functionality

package-lock.json

@@ -8,6 +8,7 @@
       "name": "svelte-app",
       "version": "1.0.0",
       "dependencies": {
+        "clipboard-polyfill": "^4.0.0-rc1",
         "sirv-cli": "^2.0.0",
         "svelte-icons": "^2.1.0"
       },
@@ -320,6 +321,12 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/clipboard-polyfill": {
+      "version": "4.0.0-rc1",
+      "resolved": "https://registry.npmjs.org/clipboard-polyfill/-/clipboard-polyfill-4.0.0-rc1.tgz",
+      "integrity": "sha512-Cel03Es9ZgP6pYA2JT9cZ2VgvOH2/EHgB7jji84FpINBJWqfMEwiI1Y3LstVL+E43cm3CnCrLL2vwb9DMbr28A==",
+      "deprecated": "Use the browser-native async clipboard API instead of this library: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard"
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1575,6 +1582,11 @@
         "readdirp": "~3.6.0"
       }
     },
+    "clipboard-polyfill": {
+      "version": "4.0.0-rc1",
+      "resolved": "https://registry.npmjs.org/clipboard-polyfill/-/clipboard-polyfill-4.0.0-rc1.tgz",
+      "integrity": "sha512-Cel03Es9ZgP6pYA2JT9cZ2VgvOH2/EHgB7jji84FpINBJWqfMEwiI1Y3LstVL+E43cm3CnCrLL2vwb9DMbr28A=="
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",

package.json

@@ -22,6 +22,7 @@
     "svelte-preprocess": "^4.10.4"
   },
   "dependencies": {
+    "clipboard-polyfill": "^4.0.0-rc1",
     "sirv-cli": "^2.0.0",
     "svelte-icons": "^2.1.0"
   }

src/App.svelte

@@ -4,6 +4,14 @@
 	import ChartCreation from './ChartCreation.svelte';
 	import IoMdHeart from 'svelte-icons/io/IoMdHeart.svelte';
 	import { H1 } from 'attractions';
+	import { onMount } from 'svelte';
+
+	onMount(async () => {
+		if (window.location.hash.length > 1) {
+			const code = window.location.hash.slice(1);
+			currentChartID.set(code);
+		}
+	});
 </script>
 
 <style>
@@ -44,13 +52,13 @@
 		<header>
 			<H1>chartmaker</H1>
 		</header>
-	
+
 		{#if $currentChartID}
 			<ChartEdit/>
 		{:else}
 			<ChartCreation/>
 		{/if}
-	
+
 		<footer>
 			made with <div class="icon"><IoMdHeart/></div> by oatmealine. <a target="_blank" href="https://git.oat.zone/oat/project-databased-fe">source</a>
 		</footer>

src/ChartCreation.svelte

@@ -48,7 +48,9 @@
         body: JSON.stringify({name, top, left, right, bot}),
       });
 
-      currentChartID.set(await response.text());
+      const code = await response.text();
+      currentChartID.set(code);
+      window.location.hash = '#' + code;
     } catch(err) {
       disableButton = false;
       error = err.toString();

src/ChartEdit.svelte

@@ -0,0 +1,56 @@
+<script>
+  import IoMdClipboard from 'svelte-icons/io/IoMdClipboard.svelte'
+  import IoMdLink from 'svelte-icons/io/IoMdLink.svelte'
+  import IoMdAlert from 'svelte-icons/io/IoMdAlert.svelte'
+  import { writeText } from 'clipboard-polyfill';
+  import { Button, TextField, Loading } from 'attractions';
+
+  let isLoaded = false;
+  let error = null;
+</script>
+
+<style>
+  #clipboard {
+    width: 450px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+  }
+  #theeverything {
+    text-align: center;
+		max-width: 680px;
+		margin: 0 auto;
+  }
+  .center {
+    width: 100%;
+    display: flex;
+    justify-content: center
+  }
+</style>
+
+<div id="theeverything">
+  <div class="center">
+    <div id="clipboard">
+      <div style="flex-grow: 1">
+        <TextField outline withItem value={window.location.toString()} disabled>
+          <div style="width: 16px; height: 16px; display: inline-block" class="item"><IoMdLink/></div>
+        </TextField>
+      </div>
+      <Button outline on:click={() => {writeText(window.location.toString())}}><div style="width: 19px; height: 19px; display: inline-block"><IoMdClipboard/></div></Button>
+    </div>
+  </div>
+
+  {#if error}
+    <div class="center">
+      <div id="error">
+        <div style="width: 16px; height: 16px; display: inline-block;"><IoMdAlert/></div>
+        {error}
+      </div>
+    </div>
+  {/if}
+
+  {#if !isLoaded}
+    <br><br><br>
+    <Loading/>
+  {/if}
+</div>