From 1b8d05bf83d7bd9ab425852f519ea81bdc379444 Mon Sep 17 00:00:00 2001
From: Josh Kingsley <josh@joshkingsley.me>
Date: Sat, 25 Oct 2025 22:05:04 +0300
Subject: feat(web): render and draw grid

---
 web/src/components/grid/index.ts | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

(limited to 'web/src/components/grid/index.ts')

diff --git a/web/src/components/grid/index.ts b/web/src/components/grid/index.ts
index 18bf75a..829a511 100644
--- a/web/src/components/grid/index.ts
+++ b/web/src/components/grid/index.ts
@@ -1,11 +1,27 @@
 import h, { type CreateElement } from "../../html";
+import renderGrid from "./renderGrid";
+import drawGrid from "./drawGrid";
 import "./index.css";
-import colors from "open-color";
 
 class NotiveGridElement extends HTMLElement {
+  #gridId!: string;
+
+  get gridId() {
+    return this.#gridId;
+  }
+
+  set gridId(val: string) {
+    this.#gridId = val;
+    this.setAttribute("grid-id", val);
+  }
+
   canvasEl: HTMLCanvasElement = h.canvas();
 
   connectedCallback() {
+    if (!this.gridId) {
+      throw new Error("ntv-grid requries gridId attribute");
+    }
+
     this.append(this.canvasEl);
     this.draw();
   }
@@ -13,8 +29,12 @@ class NotiveGridElement extends HTMLElement {
   draw() {
     const ctx = this.canvasEl.getContext("2d");
     if (!ctx) throw new Error("Unable to get canvas context");
-    ctx.fillStyle = colors.gray[8];
-    ctx.fillRect(0, 0, this.canvasEl.width, this.canvasEl.height);
+    const grid = window.notive.getGrid(this.gridId);
+    if (!grid) return;
+    const renderedGrid = renderGrid(grid);
+    this.canvasEl.setAttribute("width", renderedGrid.rect.width + "px");
+    this.canvasEl.setAttribute("height", renderedGrid.rect.height + "px");
+    drawGrid(ctx, renderedGrid);
   }
 }
 
-- 
cgit v1.2.3