Add KoFi support button and update SVG icons

Author: mszula

src/app.html

@@ -10,7 +10,10 @@
     />
     <link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+    />
     <title>Visual Sorting aka The Sound Of Sorting</title>
     %sveltekit.head%
   </head>

src/lib/components/Header.svelte

@@ -4,6 +4,7 @@
   import HeaderThemeControl from './HeaderThemeControl.svelte';
   import { base } from '$app/paths';
   import HeaderGitHubButton from './HeaderGitHubButton.svelte';
+  import HeaderCoffeeButton from './HeaderCoffeeButton.svelte';
   import MobileHeaderButtons from './mobile/MobileHeaderButtons.svelte';
 
   export let selectedTheme: string;
@@ -25,6 +26,7 @@
       <li><HeaderThemeControl bind:selectedTheme /></li>
     </ul>
     <HeaderGitHubButton />
+    <HeaderCoffeeButton />
   </div>
 
   <MobileHeaderButtons bind:oscillatorType bind:selectedTheme />

src/lib/components/HeaderCoffeeButton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { trackEvent } from '../umami';
+
+  const handleClick = () => {
+    trackEvent('external-link', { destination: 'ko-fi' });
+  };
+</script>
+
+<a
+  class="lg:btn lg:btn-square lg:btn-ghost"
+  href="https://ko-fi.com/mszula"
+  target="_blank"
+  on:click={handleClick}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="w-[24px] h-[24px]"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    ><path d="M10 2v2" /><path d="M14 2v2" /><path
+      d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"
+    /><path d="M6 2v2" /></svg
+  >
+  <span class="lg:hidden inline">https://ko-fi.com/mszula</span>
+</a>

src/lib/components/HeaderGitHubButton.svelte

@@ -13,17 +13,20 @@
   on:click={handleClick}
 >
   <svg
-    class="w-[24px] h-[24px]"
-    aria-hidden="true"
-    fill="currentColor"
-    viewBox="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="w-[24px] h-[24px]"
+    ><path
+      d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
+    /><path d="M9 18c-4.51 2-5-2-7-2" /></svg
   >
-    <path
-      clip-rule="evenodd"
-      d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
-      fill-rule="evenodd"
-    />
-  </svg>
+
   <span class="lg:hidden inline">https://github.com/mszula/visual-sorting</span>
 </a>

src/lib/components/HeaderSoundControl.svelte

@@ -30,41 +30,9 @@
     on:click|stopPropagation={handleMenuOutsideClick(ref, 'soundSelect')}
   >
     {#if oscillatorType}
-      <svg
-        class="w-[28px] h-[28px]"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M15.5 8.43A4.985 4.985 0 0 1 17 12a4.984 4.984 0 0 1-1.43 3.5m2.794 2.864A8.972 8.972 0 0 0 21 12a8.972 8.972 0 0 0-2.636-6.364M12 6.135v11.73a1 1 0 0 1-1.64.768L6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l4.36-3.633a1 1 0 0 1 1.64.768Z"
-        />
-      </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[28px] h-[28px]"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"/><path d="M16 9a5 5 0 0 1 0 6"/><path d="M19.364 18.364a9 9 0 0 0 0-12.728"/></svg>
     {:else}
-      <svg
-        class="w-[28px] h-[28px]"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M15.5 8.43A4.985 4.985 0 0 1 17 12c0 1.126-.5 2.5-1.5 3.5m2.864-9.864A8.972 8.972 0 0 1 21 12c0 2.023-.5 4.5-2.5 6M7.8 7.5l2.56-2.133a1 1 0 0 1 1.64.768V12m0 4.5v1.365a1 1 0 0 1-1.64.768L6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1m1-4 14 14"
-        />
-      </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[28px] h-[28px]"><path d="M16 9a5 5 0 0 1 .95 2.293"/><path d="M19.364 5.636a9 9 0 0 1 1.889 9.96"/><path d="m2 2 20 20"/><path d="m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11"/><path d="M9.828 4.172A.686.686 0 0 1 11 4.657v.686"/></svg>
     {/if}
     {oscillatorType ? getOscillatorName(oscillatorType) : 'None'}
   </summary>

src/lib/components/HeaderThemeControl.svelte

@@ -20,22 +20,32 @@
 </script>
 
 <details bind:this={ref}>
-  <summary on:click|stopPropagation={handleMenuOutsideClick(ref, 'setTheme')}
-    ><svg
-      class="w-[24px] h-[24px]"
-      aria-hidden="true"
-      fill="none"
-      viewBox="0 0 21 21"
+  <summary on:click|stopPropagation={handleMenuOutsideClick(ref, 'setTheme')}>
+    <svg
       xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="w-[24px] h-[24px]"
+      ><path
+        d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"
+      /><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" /><circle
+        cx="17.5"
+        cy="10.5"
+        r=".5"
+        fill="currentColor"
+      /><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" /><circle
+        cx="8.5"
+        cy="7.5"
+        r=".5"
+        fill="currentColor"
+      /></svg
     >
-      <path
-        d="M11.15 5.6h.01m3.337 1.913h.01m-6.979 0h.01M5.541 11h.01M15 15h2.706a1.957 1.957 0 0 0 1.883-1.325A9 9 0 1 0 2.043 11.89 9.1 9.1 0 0 0 7.2 19.1a8.62 8.62 0 0 0 3.769.9A2.013 2.013 0 0 0 13 18v-.857A2.034 2.034 0 0 1 15 15Z"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-      />
-    </svg>
     <span class="md:hidden"
       >{selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)}</span
     >

src/lib/sort-algorithms/tim-sort.ts

@@ -1,4 +1,4 @@
-import type { SortingGenerator } from "./types";
+import type { SortingGenerator } from './types';
 
 /**
  * The size at or below which a run is considered "small" and
@@ -25,7 +25,7 @@ function minRunLength(n: number): number {
 /**
  * Sorts a subarray using insertion sort.
  * This is used by Timsort to extend small runs to ensure they are at least minRun long.
- * 
+ *
  * @param arr - The array to sort.
  * @param start - Start index of the subarray.
  * @param end - End index of the subarray (inclusive).
@@ -51,7 +51,7 @@ function* insertionSort(
  * Scans forward from `start` to find a run (ascending or strictly descending).
  * If run is descending, it is reversed.
  * Returns the end index of the run (inclusive).
- * 
+ *
  * @param arr - The array.
  * @param start - Start index to detect run.
  * @param n - Total length of the array.
@@ -99,10 +99,10 @@ function* countRunAndMakeAscending(
 /**
  * Merges two sorted sub-runs:
  *   arr[start..mid] and arr[mid+1..end]
- * 
+ *
  * This is a standard merging procedure but may be enhanced with Timsort's "galloping" optimization.
  * For simplicity, we will not implement galloping here, just a standard merge.
- * 
+ *
  * @param arr - The array.
  * @param start - Start index of first run.
  * @param mid - End index of first run.
@@ -145,7 +145,7 @@ function* merge(
 
 /**
  * Timsort main function:
- * 
+ *
  * Steps:
  * 1. Calculate minRun.
  * 2. Identify natural runs, extend them to length at least minRun with insertion sort.
@@ -191,7 +191,7 @@ export function* timSort(arr: number[]): SortingGenerator {
       const shouldMerge =
         (n > 2 &&
           runStack[n - 3][1] <= runStack[n - 2][1] + runStack[n - 1][1]) ||
-        (lenY <= lenZ);
+        lenY <= lenZ;
 
       if (!shouldMerge) break;
 

src/lib/umami.ts

@@ -1,4 +1,7 @@
-export const trackEvent = (eventName: string, eventData?: Record<string, string | number>) => {
+export const trackEvent = (
+  eventName: string,
+  eventData?: Record<string, string | number>
+) => {
   if (typeof window !== 'undefined' && (window as any).umami) {
     (window as any).umami.track(eventName, eventData);
   }