KoFi support modal

Author: mszula

src/lib/components/KoFiSupportModal.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { running } from '../../states';
+
+  let ref: HTMLDialogElement;
+  let timedOut = false;
+  let showed = false;
+
+  onMount(() => {
+    if (localStorage.getItem('kofi-support-shown')) {
+      return;
+    }
+
+    setTimeout(() => {
+      timedOut = true;
+    }, 5 * 60 * 1000);
+  });
+
+  $: if (!$running && timedOut && !showed) {
+    ref.showModal();
+    showed = true;
+  }
+
+  const handleClick = () => {
+    localStorage.setItem('kofi-support-shown', 'true');
+    ref.close();
+  };
+
+  const handleDismiss = () => {
+    localStorage.setItem('kofi-support-shown', 'true');
+    ref.close();
+  };
+</script>
+
+<dialog
+  id="kofi_support"
+  class="modal modal-bottom sm:modal-middle"
+  {...$$restProps}
+  bind:this={ref}
+>
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">
+      ☕ Glad You're Here!
+    </h3>
+    <p class="py-4">
+      Hey! I'm Mateusz, and I'm passionate about creating interactive projects
+      that combine education with visual joy. If Visual Sorting brings you happiness
+      and you'd like to see more projects like this, consider supporting me on Ko-Fi.
+    </p>
+    <p class="text-sm opacity-70 pb-2">
+      Your support allows me to dedicate more time to creating and sharing
+      tools like this with the community. Every coffee really makes a difference! 🚀
+    </p>
+    <div class="modal-action">
+      <a
+        href="https://ko-fi.com/mszula"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="btn btn-primary"
+        on:click={handleClick}
+      >
+        ☕ Buy Me a Coffee
+      </a>
+      <form method="dialog">
+        <button class="btn" on:click={handleDismiss}>Maybe Later</button>
+      </form>
+    </div>
+  </div>
+</dialog>

src/routes/+page.svelte

@@ -22,6 +22,7 @@
   import { browser } from '$app/environment';
   import MobileAlgorithmSelector from '$lib/components/mobile/MobileAlgorithmSelector.svelte';
   import LeaveAStarModal from '$lib/components/LeaveAStarModal.svelte';
+  import KoFiSupportModal from '$lib/components/KoFiSupportModal.svelte';
   import { algorithms } from '$lib/sort-algorithms/algorithms';
 
   let selectedTheme: Theme = 'dim';
@@ -51,7 +52,8 @@
       const algo = algorithms
         .flat()
         .find(
-          (a) => a.name.toLowerCase().replace(/ /g, '-') === selectedAlgorithm
+          (a: AlgorithmDefinition) =>
+            a.name.toLowerCase().replace(/ /g, '-') === selectedAlgorithm
         );
 
       if (algo) {
@@ -60,7 +62,8 @@
     }
   });
 
-  $: theme = daisyuiColors[selectedTheme];
+  $: theme =
+    (daisyuiColors as any)[selectedTheme] || (daisyuiColors as any).dim;
   $: {
     $arrayToSort = shuffle(generateArray(size));
     reset();
@@ -81,7 +84,7 @@
             if (next.done) {
               window.clearInterval(intervalRef);
               reset();
-
+              
               break;
             }
             next.value && updateBars($arrayToSort, next.value);
@@ -187,4 +190,5 @@
     <Footer />
   </div>
   <LeaveAStarModal />
+  <KoFiSupportModal />
 </main>