We have UI! kind of

src/ui.ts

@@ -1,9 +1,20 @@
 import type { UIValue } from './types';
 
+type ClickRegion = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    event: string;
+};
+
+let clickRegions: ClickRegion[] = [];
+
 export function render(ui: UIValue, canvas: HTMLCanvasElement) {
     const ctx = canvas.getContext('2d');
     if (ctx) {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
+        clickRegions = [];
         renderUI(ui, ctx, 0, 0);
     }
 }
@@ -40,6 +51,8 @@ function renderUI(ui: UIValue, ctx: CanvasRenderingContext2D, x: number, y: numb
         }
 
         case 'clickable': {
+            const size = measure(ui.child);
+            clickRegions.push({ x, y, width: size.width, height: size.height, event: ui.event })
             renderUI(ui.child, ctx, x, y);
             break;
         }
@@ -86,5 +99,15 @@ function measure(ui: UIValue): { width: number, height: number } {
         }
     }
 
-    return { width: 0, height: 0 };
+    // return { width: 0, height: 0 };
+}
+
+export function hitTest(x: number, y: number): string | null {
+    for (const region of clickRegions) {
+        if (x >= region.x && x < region.x + region.width &&
+           x >= region.y && y < region.y + region.height) {
+            return region.event;
+        }
+    }
+    return null;
 }