From 004cb3c2d7023480aba950712fc16ae00afb8856 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Tue, 17 Dec 2024 00:02:13 -0500
Subject: [PATCH] [+] Completed overlay

---
 src/App.svelte  | 28 ++++++++++++++++++++--------
 src/app.sass    | 30 +++++++++++++++++++++++++++++-
 src/colors.sass |  3 ++-
 src/utils.ts    |  4 ++++
 4 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index d7b982a..db7af76 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,11 +2,10 @@
   import svelteLogo from './assets/svelte.svg'
   import viteLogo from '/vite.svg'
   import Number from './lib/Number.svelte'
-  import { cfg, eStates, Fmt, JsonTy, nStates, randInt, range, zero8 } from "./utils";
+  import { cfg, eStates, Fmt, JsonTy, nStates, randInt, range, zero8, type Checkpoint } from "./utils";
   import Line from "./lib/Line.svelte";
   import { solve } from "./solver";
 
-  type i8s = Int8Array
   const params = new URLSearchParams(location.search)
 
   // Main variables
@@ -27,11 +26,10 @@
   let [editMode, dragging] = [params.has('edit'), false]
   const modes = ['line', 'mask', 'color']
   let mode = 'line'
-  let [startTime, elapsed, complete, statusMsg] = [Date.now(), 0, false, '']
+  let [startTime, elapsed, complete, completedOverlay, statusMsg] = [Date.now(), 0, false, false, '']
   setInterval(() => !complete && (elapsed = Date.now() - startTime), 100)
 
   // Checkpoints
-  interface Checkpoint { hStates: i8s, vStates: i8s, hColors: i8s, vColors: i8s, numbers: i8s, nMask: i8s, colors: string[] }
   const ckpt = () => ({hStates, vStates, numbers, nMask, hColors, vColors, colors})
   const loadPt = () => JsonTy.parse(localStorage.getItem('slitherlink-checkpoints') ?? "[]")
   let ckpts: Checkpoint[] = loadPt()
@@ -242,11 +240,12 @@
     console.log(visited);
 
     // Check if all edges selected in hStates and vStates are visited
-    const allVisited = hStates.every((st, idx) => st === eStates.selected ? visited[0][idx] === 1 : true) &&
-        vStates.every((st, idx) => st === eStates.selected ? visited[1][idx] === 1 : true)
-    if (!allVisited) return "❌ Multiple loops detected, there must be only one loop!"
+    // TODO: Fix this
+    // const allVisited = hStates.every((st, idx) => st === eStates.selected ? visited[0][idx] === 1 : true) &&
+    //     vStates.every((st, idx) => st === eStates.selected ? visited[1][idx] === 1 : true)
+    // if (!allVisited) return "❌ Multiple loops detected, there must be only one loop!"
 
-    complete = true
+    complete = completedOverlay = true
     return `Congratulations! You've solved the puzzle in ${Fmt.duration(elapsed)}! 🎉`
   }
 </script>
@@ -342,4 +341,17 @@
     <button on:click={savePt(() => ckpts.shift())}>Remove</button>
     {#each ckpts as cp, i}<button on:click={() => restorePt(cp)}>{i + 1}</button>{/each}
   </div>
+
+  {#if completedOverlay}
+    <div class="overlay"><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/slither-link">GitHub Repo</a>.</p>
+
+      <button on:click={() => completedOverlay = false}>Close</button>
+    </div></div>
+  {/if}
 </main>
diff --git a/src/app.sass b/src/app.sass
index 2495165..049a721 100644
--- a/src/app.sass
+++ b/src/app.sass
@@ -8,7 +8,7 @@
 
   color-scheme: dark
   color: rgba(255, 255, 255, 0.758)
-  background-color: #242424
+  background-color: colors.$background
 
   font-synthesis: none
   text-rendering: optimizeLegibility
@@ -127,3 +127,31 @@ main
 
   &.error
     color: colors.$cross
+
+.overlay
+  position: fixed
+  inset: 0
+
+  background-color: rgba(0, 0, 0, 0.5)
+
+  display: flex
+  justify-content: center
+  align-items: center
+
+  z-index: 1000
+  backdrop-filter: blur(5px)
+
+  h2, p
+    user-select: none
+    margin: 0
+
+  > div
+    background-color: colors.$background
+    padding: 2rem
+    border-radius: 8px
+
+    display: flex
+    flex-direction: column
+    gap: 1rem
+
+    max-width: 400px
diff --git a/src/colors.sass b/src/colors.sass
index 379d279..a2b73cb 100644
--- a/src/colors.sass
+++ b/src/colors.sass
@@ -4,4 +4,5 @@ $line: #90A4AEFF
 $cross: #ff7f7f
 $accent-strong: #EF629F
 $accent: #EECDA3
-$correct: #83ff6d
\ No newline at end of file
+$correct: #83ff6d
+$background: #242424
\ No newline at end of file
diff --git a/src/utils.ts b/src/utils.ts
index b2e4b3d..d1825d0 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,3 +1,7 @@
+
+type i8s = Int8Array
+export interface Checkpoint { hStates: i8s, vStates: i8s, hColors: i8s, vColors: i8s, numbers: i8s, nMask: i8s, colors: string[] }
+
 export const cfg = {
   cellW: 20,
   lineW: 4,