feat: add listener to algorithm change

vighnesh153 · Dec 9, 2023 · 7f91372 · 7f91372
1 parent 8698185
commit 7f91372
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 24 deletions.
diff --git a/...sh153-astro-svelte/src/components/projects/graphics/sorting-visualizer/ProjectRoot.svelte b/...sh153-astro-svelte/src/components/projects/graphics/sorting-visualizer/ProjectRoot.svelte
@@ -1,29 +1,27 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import {
-    SortingVisualizerGame,
-    CanvasWrapperImpl,
-    BubbleSortSortingAlgorithm,
-    MergeSortSortingAlgorithm,
-    SelectionSortSortingAlgorithm,
-    InsertionSortSortingAlgorithm,
-  } from '@vighnesh153/graphics-programming';
+  import { SortingVisualizerGame, CanvasWrapperImpl, sortingAlgorithms } from '@vighnesh153/graphics-programming';
+  import type { SortingAlgorithm } from '@vighnesh153/graphics-programming';
   import type { CanvasWrapper } from '@vighnesh153/graphics-programming';
 
-  import Button from '@/components/Button.svelte';
-
   let canvasElement: HTMLCanvasElement;
   let canvasWrapper: CanvasWrapper;
   let game: SortingVisualizerGame;
 
-  const allAlgorithms = ['Bubble sort', 'Merge sort', 'Selection sort', 'Insertion sort'];
-  let algorithm = allAlgorithms[0];
+  let algorithmTitle = sortingAlgorithms[1].displayName;
+
+  function getAlgorithmImpl(): SortingAlgorithm {
+    return sortingAlgorithms.find((algorithm) => algorithm.displayName === algorithmTitle)!!.algorithmFactory();
+  }
 
   function newGame() {
+    if (game) {
+      game.stop();
+    }
     if (canvasWrapper) {
       game = new SortingVisualizerGame(canvasWrapper);
-      const frames = game.start(new InsertionSortSortingAlgorithm());
+      const frames = game.start(getAlgorithmImpl());
       function showNextFrame() {
         if (!frames.next().done) {
           requestAnimationFrame(showNextFrame);
@@ -40,21 +38,17 @@
 
   $: {
     // this log is needed so that this block runs when algorithm changes
-    console.log(`Algorithm changed: ${algorithm}`);
+    console.log(`Algorithm changed: ${algorithmTitle}`);
     newGame();
   }
 </script>
 
 <div class="flex justify-center items-center gap-10">
-  <Button variant="primary">Start</Button>
-
-  <Button>Randomize Array</Button>
-
   <div class="flex flex-col items-center gap-1">
     <label for="algorithm">Algorithm</label>
-    <select name="algorithm" id="algorithm" class="min-w-[100px] text-secondary" bind:value={algorithm}>
-      {#each allAlgorithms as algorithm (algorithm)}
-        <option value={algorithm}>{algorithm}</option>
+    <select name="algorithm" id="algorithm" class="min-w-[100px] text-secondary" bind:value={algorithmTitle}>
+      {#each sortingAlgorithms as algorithm (algorithm)}
+        <option value={algorithm.displayName}>{algorithm.displayName}</option>
       {/each}
     </select>
   </div>

diff --git a/nodejs-tools/nodejs-lib/graphics-programming/src/sorting-visualizer/Game.ts b/nodejs-tools/nodejs-lib/graphics-programming/src/sorting-visualizer/Game.ts
@@ -1,7 +1,8 @@
+import { not } from '@vighnesh153/utils';
 import { CanvasWrapper } from '@/canvas-wrapper';
+import { getCanvasBgColor } from '@/getCanvasBgColor';
 import { buildInitialLineHeightPercentsArray } from './buildInitialLineHeightPercentsArray';
 import { SortingAlgorithm } from './SortingAlgorithm';
-import { getCanvasBgColor } from '@/getCanvasBgColor';
 
 interface GameOptions {
   gap?: number;
@@ -22,6 +23,8 @@ export class SortingVisualizerGame {
 
   #lineHeightPercents: number[];
 
+  #isRunning = false;
+
   constructor(canvasWrapper: CanvasWrapper, options: GameOptions = {}) {
     this.#canvasWrapper = canvasWrapper;
 
@@ -37,16 +40,24 @@ export class SortingVisualizerGame {
   }
 
   *start(sortingAlgorithm: SortingAlgorithm) {
+    this.#isRunning = true;
     sortingAlgorithm.initializeArray(this.#lineHeightPercents);
 
     for (const frame of sortingAlgorithm.sort()) {
+      if (not(this.#isRunning)) {
+        break;
+      }
       this.#lineHeightPercents = sortingAlgorithm.intermediateArrayState;
       this.clear();
       this.drawLines(sortingAlgorithm.intermediateModifiedIndicesState);
       yield frame;
     }
   }
 
+  stop() {
+    this.#isRunning = false;
+  }
+
   clear() {
     const rect = this.#canvasWrapper.getBoundingClientRect();
     const canvasWidth = rect.width;

diff --git a/nodejs-tools/nodejs-lib/graphics-programming/src/sorting-visualizer/index.ts b/nodejs-tools/nodejs-lib/graphics-programming/src/sorting-visualizer/index.ts
@@ -1,8 +1,18 @@
-export { SortingVisualizerGame } from './Game';
+import { SortingAlgorithm } from './SortingAlgorithm';
 
-export {
+import {
   BubbleSortSortingAlgorithm,
   MergeSortSortingAlgorithm,
   SelectionSortSortingAlgorithm,
   InsertionSortSortingAlgorithm,
 } from './SortingAlgorithmImpls';
+
+export { SortingVisualizerGame } from './Game';
+export { SortingAlgorithm } from './SortingAlgorithm';
+
+export const sortingAlgorithms = [
+  { displayName: 'Bubble sort', algorithmFactory: () => new BubbleSortSortingAlgorithm() },
+  { displayName: 'Merge sort', algorithmFactory: () => new MergeSortSortingAlgorithm() },
+  { displayName: 'Selection sort', algorithmFactory: () => new SelectionSortSortingAlgorithm() },
+  { displayName: 'Insertion sort', algorithmFactory: () => new InsertionSortSortingAlgorithm() },
+] satisfies Array<{ displayName: string; algorithmFactory: () => SortingAlgorithm }>;