From 6c6f1f289af10e6378102232d8a9a7eee616f9da Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:00:04 -0500
Subject: [PATCH] [O] Split overlay components

---
 src/App.svelte                                | 23 ++++---------------
 src/lib/CompletedOverlay.svelte               | 20 ++++++++++++++++
 .../{Upload.svelte => UploadOverlay.svelte}   | 10 +++-----
 3 files changed, 28 insertions(+), 25 deletions(-)
 create mode 100644 src/lib/CompletedOverlay.svelte
 rename src/lib/{Upload.svelte => UploadOverlay.svelte} (83%)

diff --git a/src/App.svelte b/src/App.svelte
index 08bb894..f0f855b 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,11 +3,12 @@
   import svelteLogo from './assets/svelte.svg'
   import viteLogo from '/vite.svg'
   import Number from './lib/Number.svelte'
-  import { Backend, cfg, eStates, Fmt, JsonTy, Misc, nStates, randInt, range, zero8, type Checkpoint, type i8s, type MetaCheckpoint } from "./utils";
+  import { cfg, eStates, Fmt, JsonTy, Misc, nStates, randInt, range, zero8, type Checkpoint, type MetaCheckpoint } from "./utils";
   import Line from "./lib/Line.svelte";
   import { solve } from "./solver";
-  import Upload from './lib/Upload.svelte';
   import PuzzleInfo from './lib/PuzzleInfo.svelte';
+  import CompletedOverlay from './lib/CompletedOverlay.svelte';
+  import UploadOverlay from './lib/UploadOverlay.svelte';
 
   const params = new URLSearchParams(location.search)
   const hasTouch = Misc.hasTouch()
@@ -392,20 +393,6 @@
     </div>
   {/if}
 
-  {#if completedOverlay}
-    <div class="overlay" transition:fade><div>
-      <h2>Congrats! 🎉</h2>
-
-      <p>Great job on solving your first puzzle 🧩 </p>
-      <p>This project is just starting out, I hope you enjoyed it!</p>
-      <p>If you want to design your own puzzle and share with the world, you can go to <a href="/?edit=1">Edit Mode</a> and start drawing!</p>
-      <p>You can find more about the creation process in the documentation on the <a href="https://github.com/hykilpikonna/colorful-link">GitHub Repo</a>.</p>
-      <p>If you want to chat, you can reach me on telegram <a href="https://t.me/hykilpikonna">@hykilpikonna</a>.</p>
-      <p>Thanks for playing! 🤗</p>
-
-      <button on:click={() => completedOverlay = false}>Close</button>
-    </div></div>
-  {/if}
-
-  {#if upload} <Upload data={upload} callback={() => upload = null}/> {/if}
+  <CompletedOverlay bind:completedOverlay={completedOverlay}/>
+  <UploadOverlay bind:data={upload}/>
 </main>
diff --git a/src/lib/CompletedOverlay.svelte b/src/lib/CompletedOverlay.svelte
new file mode 100644
index 0000000..70440a3
--- /dev/null
+++ b/src/lib/CompletedOverlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { fade } from "svelte/transition"
+
+  export let completedOverlay = false
+</script>
+
+{#if completedOverlay}
+  <div class="overlay" transition:fade><div>
+    <h2>Congrats! 🎉</h2>
+
+    <p>Great job on solving your first puzzle 🧩 </p>
+    <p>This project is just starting out, I hope you enjoyed it!</p>
+    <p>If you want to design your own puzzle and share with the world, you can go to <a href="/?edit=1">Edit Mode</a> and start drawing!</p>
+    <p>You can find more about the creation process in the documentation on the <a href="https://github.com/hykilpikonna/colorful-link">GitHub Repo</a>.</p>
+    <p>If you want to chat, you can reach me on telegram <a href="https://t.me/hykilpikonna">@hykilpikonna</a>.</p>
+    <p>Thanks for playing! 🤗</p>
+
+    <button on:click={() => completedOverlay = false}>Close</button>
+  </div></div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/Upload.svelte b/src/lib/UploadOverlay.svelte
similarity index 83%
rename from src/lib/Upload.svelte
rename to src/lib/UploadOverlay.svelte
index 5cce9a6..6b1a4ab 100644
--- a/src/lib/Upload.svelte
+++ b/src/lib/UploadOverlay.svelte
@@ -1,11 +1,7 @@
 <script lang="ts">
-  import { Backend, cfg, nStates, pos, sty, type Checkpoint } from "../utils";
+  import { Backend, type Checkpoint } from "../utils";
 
-  interface Props {
-    data?: Checkpoint;
-    callback?: () => void;
-  }
-  export let { data, callback }: Props = {}
+  export let data: Checkpoint | null = null
 
   let name = ""
   let author = ""
@@ -51,7 +47,7 @@
         <p>You can share it by the following link: </p>
         <p><a href={url}>{url}</a></p>
         <p>Thank you for your creation!</p>
-        <button on:click={callback}>Close</button>
+        <button on:click={() => data = null}>Close</button>
       {/if}
     </div>
   </div>