From 12e6f34e9df0be60def6c885c616f7184b9fc018 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Szu=C5=82a?= <mateusz.szulaa@gmail.com>
Date: Tue, 12 Nov 2024 12:22:45 +0100
Subject: [PATCH] Added leaving a star modal

---
 src/lib/components/LeaveAStarModal.svelte | 58 +++++++++++++++++++++++
 src/routes/+page.svelte                   |  2 +
 2 files changed, 60 insertions(+)
 create mode 100644 src/lib/components/LeaveAStarModal.svelte

diff --git a/src/lib/components/LeaveAStarModal.svelte b/src/lib/components/LeaveAStarModal.svelte
new file mode 100644
index 0000000..433b270
--- /dev/null
+++ b/src/lib/components/LeaveAStarModal.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { running } from '../../states';
+
+  let ref: HTMLDialogElement;
+  let timedOut = false;
+
+  onMount(() => {
+    if (localStorage.getItem('leaved-a-star')) {
+      return;
+    }
+
+    setTimeout(() => {
+      timedOut = true;
+    }, 60 * 1000);
+  });
+
+  $: if (!$running && timedOut) {
+    ref.showModal();
+  }
+
+  const click = () => {
+    localStorage.setItem('leaved-a-star', 'yup');
+    ref.close();
+  };
+</script>
+
+<dialog
+  id="leave_a_star"
+  class="modal modal-bottom sm:modal-middle"
+  {...$$restProps}
+  bind:this={ref}
+>
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">
+      ⭐️ Support This Project by Leaving a Star!
+    </h3>
+    <p class="py-4">
+      If you find this project helpful or inspiring, consider showing your
+      support by leaving a star on GitHub. Your feedback motivates us to keep
+      improving!
+    </p>
+    <div class="modal-action">
+      <a
+        href="https://github.com/mszula/visual-sorting"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="btn btn-primary"
+        on:click={click}
+      >
+        ⭐️ Star on GitHub
+      </a>
+      <form method="dialog">
+        <button class="btn">Maybe Later</button>
+      </form>
+    </div>
+  </div>
+</dialog>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9dcc945..230da35 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -21,6 +21,7 @@
   import { soundStart, soundStop, type OscillatorType } from '../lib/sound';
   import { browser } from '$app/environment';
   import MobileAlgorithmSelector from '$lib/components/mobile/MobileAlgorithmSelector.svelte';
+  import LeaveAStarModal from '$lib/components/LeaveAStarModal.svelte';
 
   let selectedTheme: Theme = 'dim';
   let size = 300;
@@ -151,4 +152,5 @@
     </div>
     <Footer />
   </div>
+  <LeaveAStarModal />
 </main>