Imporoved algorithm selector

src/lib/components/AlgorithmSelector.svelte

@@ -1,23 +1,15 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   export let selectAlgorithm: (algo: AlgorithmDefinition) => void;
+  export let selectedAlgorithm: AlgorithmDefinition;
+
   import { algorithms } from '../sort-algorithms/algorithms';
   import type { AlgorithmDefinition } from '../sort-algorithms/types';
   import ArrowRight from './algorithm-selector/ArrowRight.svelte';
   import ArrowLeft from './algorithm-selector/ArrowLeft.svelte';
 
-  let selected = 0;
-  let selectedGroup = 0;
-
-  const click = (group: number, index: number) => () => {
-    selected = index;
-    selectedGroup = group;
-    selectAlgorithm(algorithms[group][index]);
+  const click = (algo: AlgorithmDefinition) => () => {
+    selectAlgorithm(algo);
   };
-
-  onMount(() => {
-    selectAlgorithm(algorithms[selectedGroup][selected]);
-  });
 </script>
 
 <div class="flex bg-base-200 rounded-box mb-2 md:mb-0 md:mr-5">
@@ -28,10 +20,8 @@
           {#each algos as algo, index}
             <li>
               <button
-                class={selected === index && selectedGroup === group
-                  ? 'active'
-                  : ''}
-                on:click={click(group, index)}>{algo.name}</button
+                class={algo.name === selectedAlgorithm?.name ? 'active' : ''}
+                on:click={click(algo)}>{algo.name}</button
               >
             </li>
             {#if index === 2 && group > 0}

src/lib/components/mobile/MobileAlgorithmSelector.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   export let selectAlgorithm: (algo: AlgorithmDefinition) => void;
+  export let selectedAlgorithm: AlgorithmDefinition;
+
   import { algorithms } from '../../sort-algorithms/algorithms';
   import type { AlgorithmDefinition } from '../../sort-algorithms/types';
 
@@ -16,7 +18,10 @@
   >
     {#each algorithms as algos, group}
       {#each algos as algo, index}
-        <option value={[group, index]}>{algo.name}</option>
+        <option
+          value={[group, index]}
+          selected={algo.name === selectedAlgorithm?.name}>{algo.name}</option
+        >
       {/each}
     {/each}
   </select>

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 { algorithms } from '$lib/sort-algorithms/algorithms';
 
   let selectedTheme: Theme = 'dim';
   let size = 300;
@@ -39,6 +40,24 @@
     if (barsContainer) {
       barsContainer.style.height = `${barsContainer.offsetHeight}px`;
     }
+
+    const selectedAlgorithm = new URL(
+      window.location.toString()
+    ).searchParams.get('algorithm');
+
+    if (!selectedAlgorithm) {
+      selectAlgorithm(algorithms[0][0]);
+    } else {
+      const algo = algorithms
+        .flat()
+        .find(
+          (a) => a.name.toLowerCase().replace(/ /g, '-') === selectedAlgorithm
+        );
+
+      if (algo) {
+        selectAlgorithm(algo);
+      }
+    }
   });
 
   $: theme = daisyuiColors[selectedTheme];
@@ -105,6 +124,13 @@
   const selectAlgorithm = (algo: AlgorithmDefinition) => {
     reset();
     algorithm = { ...algo, instance: algo.function($arrayToSort) };
+
+    const url = new URL(window.location.toString());
+    url.searchParams.set(
+      'algorithm',
+      algo.name.toLowerCase().replace(/ /g, '-')
+    );
+    history.pushState({}, '', url);
   };
 </script>
 
@@ -121,10 +147,13 @@
     <div class="flex mx-2 mb-2 md:mx-5 md:mb-5">
       <div class="flex flex-wrap w-full flex-col md:flex-row">
         <div class="hidden md:flex">
-          <AlgorithmSelector {selectAlgorithm} />
+          <AlgorithmSelector {selectAlgorithm} selectedAlgorithm={algorithm} />
         </div>
         <div class="md:hidden">
-          <MobileAlgorithmSelector {selectAlgorithm} />
+          <MobileAlgorithmSelector
+            {selectAlgorithm}
+            selectedAlgorithm={algorithm}
+          />
         </div>
         <div
           class="flex flex-row flex-grow card bg-base-300 rounded-box place-items-center p-5 lg:mb-2"