feat(web): render and draw grid

1 files changed, 19 insertions, 5 deletions

diff --git a/web/src/index.ts b/web/src/index.ts
index a32aaf1..fbbf37c 100644
--- a/web/src/index.ts
+++ b/web/src/index.ts
@@ -1,13 +1,24 @@
-import { Doc } from "./types";
+import Ratio from "./math/Ratio";
+import { Cell, Doc, Grid } from "./types";
 
 function defaultDoc(): Doc {
-  const defaultCells = Array(16).map(() => ({ value: "1" }));
+  const defaultCells: Cell[] = Array.from({ length: 16 }, () => ({
+    widthRatio: new Ratio(1, 16),
+  }));
 
   return {
     grids: [
       {
+        id: window.crypto.randomUUID(),
         baseCellSize: 48,
-        parts: [{ rows: Array(4).map(() => ({ cells: [...defaultCells] })) }],
+        baseCellWidthRatio: new Ratio(1, 16),
+        parts: [
+          {
+            rows: Array.from({ length: 4 }, () => ({
+              cells: [...defaultCells],
+            })),
+          },
+        ],
       },
     ],
   };
@@ -15,8 +26,11 @@ function defaultDoc(): Doc {
 
 export default class Notive {
   doc: Doc = defaultDoc();
+  gridsById = Object.fromEntries(this.doc.grids.map((grid) => [grid.id, grid]));
+
+  getGrid(id: string): Grid | undefined {
+    return this.gridsById[id];
+  }
 }
 
 window.notive = new Notive();
-
-window.dispatchEvent(new CustomEvent("ntv:initialized"));