WIP controls

island.ts

@@ -1,4 +1,4 @@
-import { canvas2d } from "./lib/html";
+import { canvas2d, h } from "./lib/html";
 import { Prng, mulberry32 } from "./lib/prng";
 
 const BLOWUP = 4;
@@ -109,7 +109,15 @@ export function IslandApplet() {
   });
   cx.scale(BLOWUP, BLOWUP);
 
-  const islands = new IslandGrid(WIDTH, HEIGHT, 128);
+  const seedInput = h("input", { type: "number", valueAsNumber: 128 });
+  const seedLabel = h("label", {}, "Seed:", seedInput);
+
+  // STATE
+
+  let timerId: number;
+  let islands = new IslandGrid(WIDTH, HEIGHT, 128);
+
+  // GENERATOR
 
   const len = islands.data.length;
   const basePos = len >> 1;
@@ -123,8 +131,6 @@ export function IslandApplet() {
   );
   const width = islands.width;
 
-  let timerId: number;
-
   function drop(pos: number) {
     const lowerNeighbors: number[] = [];
 
@@ -201,11 +207,24 @@ export function IslandApplet() {
     renderIslands(islands, cx);
   }
 
-  tick();
+  // CONTROLS
 
-  timerId = setInterval(tick, 1000 / 30);
+  const generateButton = h(
+    "button",
+    {
+      onclick: () => {
+        clearInterval(timerId);
+        console.log(seedInput.valueAsNumber);
+        islands = new IslandGrid(WIDTH, HEIGHT, seedInput.valueAsNumber);
+        timerId = setInterval(tick, 1000 / 30);
+      },
+    },
+    "Generate"
+  );
 
-  return [canvas];
+  renderIslands(islands, cx);
+
+  return [canvas, seedLabel, generateButton];
 }
 
 (globalThis as any).IslandApplet = IslandApplet;

lib/html.ts

@@ -1,7 +1,7 @@
 export function h<Name extends keyof HTMLElementTagNameMap>(
   name: Name,
   props: Partial<HTMLElementTagNameMap[Name]>,
-  ...children: Node[]
+  ...children: (Node | string)[]
 ): HTMLElementTagNameMap[Name] {
   const element = Object.assign(document.createElement(name), props);
   element.append(...children);