1 files changed, 23 insertions, 3 deletions
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);
   }
 }