feat: pseudo hilbert curve feature complete

vighnesh153 · Nov 22, 2023 · fd88c44 · fd88c44
1 parent a205d85
commit fd88c44
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 18 deletions.
diff --git a/...-tools/nodejs-apps/vighnesh153-astro-svelte/src/components/projects/ProjectsMasonry.astro b/...-tools/nodejs-apps/vighnesh153-astro-svelte/src/components/projects/ProjectsMasonry.astro
@@ -4,6 +4,7 @@ import { classes } from '@/utils';
 import FolderIcon from '@/icons/FolderIcon.astro';
 import ProjectIconLink from './ProjectIconLink.astro';
 import ProjectTag from './ProjectTag.astro';
+import Link from '../Link.svelte';
 ---
 
 <ul
@@ -36,7 +37,9 @@ import ProjectTag from './ProjectTag.astro';
             </li>
           </ul>
         </div>
-        <h3 class="mt-5 text-xl md:text-2xl">{title}</h3>
+        <h3 class="mt-5 text-xl md:text-2xl">
+          <Link href={links.demo.href}>{title}</Link>
+        </h3>
         <p class="text-text2 mt-4 flex-grow text-base">{description}</p>
         <ul class="mt-6 flex flex-wrap gap-2">
           {tags.map((tag) => (

diff --git a/...153-astro-svelte/src/components/projects/graphics/pseudo-hilbert-curve/ProjectRoot.svelte b/...153-astro-svelte/src/components/projects/graphics/pseudo-hilbert-curve/ProjectRoot.svelte
@@ -2,24 +2,57 @@
   import { onMount } from 'svelte';
 
   import { PseudoHilbertCurveGame, CanvasWrapperImpl } from '@vighnesh153/graphics-programming';
+  import type { CanvasWrapper } from '@vighnesh153/graphics-programming';
+  import { range } from '@vighnesh153/utils';
 
   let canvasElement: HTMLCanvasElement;
+  let canvasWrapper: CanvasWrapper;
   let game: PseudoHilbertCurveGame;
+  let bgColor: string;
 
-  onMount(() => {
-    const canvasWrapper = new CanvasWrapperImpl(canvasElement);
-    game = new PseudoHilbertCurveGame(canvasWrapper);
+  let level = 4;
+  let minLevel = 2;
+  let maxLevel = 6;
+
+  function newGame() {
+    if (game) {
+      game.stop();
+      game.clear();
+    }
 
-    const frames = game.start();
-    function showNextFrame() {
-      if (!frames.next().done) {
-        requestAnimationFrame(showNextFrame);
+    if (canvasWrapper) {
+      game = new PseudoHilbertCurveGame(canvasWrapper, { bgColor });
+      const frames = game.start(level);
+      function showNextFrame() {
+        if (!frames.next().done) {
+          requestAnimationFrame(showNextFrame);
+        }
       }
+      showNextFrame();
     }
-    showNextFrame();
+  }
+
+  onMount(() => {
+    bgColor = canvasElement.computedStyleMap().get('background-color')?.toString() ?? 'white';
+    canvasWrapper = new CanvasWrapperImpl(canvasElement);
+    newGame();
   });
+
+  $: {
+    // this log is needed so that this block runs when level changes
+    console.log(`Level changed: ${level}`);
+    newGame();
+  }
 </script>
 
+<div class="flex flex-col items-center gap-1">
+  <label for="level">Level</label>
+  <select name="level" id="level" class="min-w-[100px] text-secondary" bind:value={level}>
+    {#each range(minLevel, maxLevel) as rangeLevel (rangeLevel)}
+      <option value={rangeLevel}>{rangeLevel}</option>
+    {/each}
+  </select>
+</div>
 <canvas class="mt-6 mx-auto w-full max-w-3xl aspect-video bg-text" bind:this={canvasElement}>
   Sorry your browser doesn't support the canvas element
 </canvas>
diff --git a/nodejs-tools/nodejs-lib/graphics-programming/src/pseudo-hilbert-curve/Game.ts b/nodejs-tools/nodejs-lib/graphics-programming/src/pseudo-hilbert-curve/Game.ts
@@ -2,17 +2,33 @@ import { CanvasWrapper } from '@/canvas-wrapper';
 import { generateCurve } from './generateCurve';
 import { Point } from './point';
 import { Line } from './line';
+import { not } from '@vighnesh153/utils';
+
+interface GameConfig {
+  bgColor?: string;
+  lineWidth?: number;
+  lineColor?: string;
+}
 
 export class PseudoHilbertCurveGame {
   #canvasWrapper: CanvasWrapper;
+  #isRunning = true;
+
+  readonly #bgColor: string;
+  readonly #lineWidth: number;
+  readonly #lineColor: string;
 
-  constructor(canvasWrapper: CanvasWrapper) {
+  constructor(canvasWrapper: CanvasWrapper, config: GameConfig) {
     this.#canvasWrapper = canvasWrapper;
+    this.#bgColor = config.bgColor ?? 'white';
+    this.#lineWidth = config.lineWidth ?? 2;
+    this.#lineColor = config.lineColor ?? 'black';
   }
 
-  *start() {
+  *start(level: number) {
+    this.#isRunning = true;
+
     const { width, height } = this.#canvasWrapper;
-    const level = 5;
     const size = Math.round((height * 5) / 11);
 
     const x1 = width / 2 - size / 2;
@@ -26,14 +42,35 @@ export class PseudoHilbertCurveGame {
     const p4 = new Point(x2, y1);
 
     const curves = generateCurve(p1, p2, p3, p4, level);
-    this.drawLines(curves);
 
-    yield;
+    for (const line of curves) {
+      if (not(this.#isRunning)) {
+        break;
+      }
+      this.drawLine(line);
+      yield;
+    }
+  }
+
+  stop() {
+    this.#isRunning = false;
   }
 
-  private drawLines(lines: Line[]): void {
-    for (const line of lines) {
-      this.#canvasWrapper.drawLine(line.point1.x, line.point1.y, line.point2.x, line.point2.y, 2, 'black');
-    }
+  clear() {
+    const rect = this.#canvasWrapper.getBoundingClientRect();
+    const canvasWidth = rect.width;
+    const canvasHeight = rect.height;
+    this.#canvasWrapper.drawFilledRect(0, 0, canvasWidth, canvasHeight, this.#bgColor);
+  }
+
+  private drawLine(line: Line): void {
+    this.#canvasWrapper.drawLine(
+      line.point1.x,
+      line.point1.y,
+      line.point2.x,
+      line.point2.y,
+      this.#lineWidth,
+      this.#lineColor
+    );
   }
 }