refactor(web): re-organize files

2 files changed, 32 insertions, 0 deletions

diff --git a/web/src/components/grid/index.css b/web/src/components/grid/index.css
new file mode 100644
index 0000000..296c155
--- /dev/null
+++ b/web/src/components/grid/index.css
@@ -0,0 +1,8 @@
+ntv-grid {
+  display: block;
+}
+
+ntv-grid > canvas {
+  display: block;
+  width: 100%;
+}
diff --git a/web/src/components/grid/index.ts b/web/src/components/grid/index.ts
new file mode 100644
index 0000000..18bf75a
--- /dev/null
+++ b/web/src/components/grid/index.ts
@@ -0,0 +1,24 @@
+import h, { type CreateElement } from "../../html";
+import "./index.css";
+import colors from "open-color";
+
+class NotiveGridElement extends HTMLElement {
+  canvasEl: HTMLCanvasElement = h.canvas();
+
+  connectedCallback() {
+    this.append(this.canvasEl);
+    this.draw();
+  }
+
+  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);
+  }
+}
+
+customElements.define("ntv-grid", NotiveGridElement);
+
+export default ((...args: any[]): NotiveGridElement =>
+  (h as any)["ntv-grid"](...args)) as CreateElement<NotiveGridElement>;