From 81aa244e4f449e6cdcd4e3dd3e7ada218da92610 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Sat, 21 Dec 2024 00:50:04 -0500
Subject: [PATCH] [+] Import json from editor

---
 src/App.svelte | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 1102df5..02dae90 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -59,12 +59,12 @@
     ckpts = loadPt()
   }
   const restorePt = (pt: Checkpoint) => {
-    pt.hStates.forEach((st, idx) => hStates[idx] = st)
-    pt.vStates.forEach((st, idx) => vStates[idx] = st)
-    pt.numbers.forEach((n, idx) => numbers[idx] = n)
-    pt.nMask.forEach((n, idx) => nMask[idx] = n)
-    pt.hColors.forEach((n, idx) => hColors[idx] = n)
-    pt.vColors.forEach((n, idx) => vColors[idx] = n)
+    pt.hStates?.forEach((st, idx) => hStates[idx] = st)
+    pt.vStates?.forEach((st, idx) => vStates[idx] = st)
+    pt.numbers?.forEach((n, idx) => numbers[idx] = n)
+    pt.nMask?.forEach((n, idx) => nMask[idx] = n)
+    pt.hColors?.forEach((n, idx) => hColors[idx] = n)
+    pt.vColors?.forEach((n, idx) => vColors[idx] = n)
     colors = pt.colors
     updateColors()
   }
@@ -292,6 +292,14 @@
     // Update every edge
     range(eRows).forEach(y => range(eCols).forEach(x => checkPos(x, y)))
   }
+
+  let importFileEl: HTMLInputElement
+  function importFile(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+    const reader = new FileReader()
+    reader.onload = () => restorePt(JsonTy.parse(reader.result as string))
+    // @ts-ignore
+    reader.readAsText(e.target!!.files[0])
+  }
 </script>
 
 <main class:color-mode={mode === 'color'} class:colorful-cross={colorfulCross} class:mobile={hasTouch} 
@@ -371,6 +379,9 @@
       <button on:click={() => confirm("Are you sure you want to reset? (checkpoints will not be removed)") && 
         restorePt(JsonTy.parse(resetPoint))
       }>Reset</button>
+      <!-- Import -->
+      <button on:click={() => importFileEl.click()}>Import</button>
+      <input type="file" accept=".json" bind:this={importFileEl} on:change={importFile} style="display: none"/>
     </div>
   {/if}