feat(js): m09 input, app, runtime, browser, main, index.html and smoke test

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

js/solutions/browser.js

@@ -0,0 +1,36 @@
+// Browser glue: turns a canvas and a window into a Platform. Impure by nature; not part of the exercises' logic.
+
+const PREVENT = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '])
+
+export const browserPlatform = (canvas, win) => {
+  const ctx = canvas.getContext('2d')
+  // Keys that scroll the page should only steer the game.
+  const onKey = (cb) => (e) => {
+    if (PREVENT.has(e.key)) e.preventDefault()
+    cb(e.key)
+  }
+  return {
+    fillRect: (x, y, w, h, color) => {
+      ctx.fillStyle = color
+      ctx.fillRect(x, y, w, h)
+    },
+    fillText: (x, y, text, color, size, align) => {
+      ctx.fillStyle = color
+      ctx.font = `${size}px monospace`
+      ctx.textAlign = align
+      ctx.fillText(text, x, y)
+    },
+    randomSeed: () => crypto.getRandomValues(new Uint32Array(1))[0],
+    // t is the number of milliseconds since the first frame.
+    startClock: (onTime) => {
+      const frame = (start) => (now) => {
+        const t0 = start ?? now
+        onTime(now - t0)
+        win.requestAnimationFrame(frame(t0))
+      }
+      win.requestAnimationFrame(frame(undefined))
+    },
+    onKeyDown: (cb) => win.addEventListener('keydown', onKey(cb)),
+    onKeyUp: (cb) => win.addEventListener('keyup', onKey(cb)),
+  }
+}