feat(web): add dummy toolbar + tailwindcss colors

1 files changed, 35 insertions, 3 deletions

diff --git a/web/src/index.ts b/web/src/index.ts
index fbbf37c..ac4870c 100644
--- a/web/src/index.ts
+++ b/web/src/index.ts
@@ -1,5 +1,7 @@
 import Ratio from "./math/Ratio";
-import { Cell, Doc, Grid } from "./types";
+import { Cell, CellRef, Doc, Grid } from "./types";
+import { ActiveCellSelection, PendingSelection, Selection } from "./selection";
+import renderGrid, { RenderedGrid } from "./components/grid/renderGrid";
 
 function defaultDoc(): Doc {
   const defaultCells: Cell[] = Array.from({ length: 16 }, () => ({
@@ -20,17 +22,47 @@ function defaultDoc(): Doc {
           },
         ],
       },
+      {
+        id: window.crypto.randomUUID(),
+        baseCellSize: 48,
+        baseCellWidthRatio: new Ratio(1, 16),
+        parts: [
+          {
+            rows: Array.from({ length: 4 }, () => ({
+              cells: [...defaultCells],
+            })),
+          },
+        ],
+      },
     ],
   };
 }
 
 export default class Notive {
   doc: Doc = defaultDoc();
-  gridsById = Object.fromEntries(this.doc.grids.map((grid) => [grid.id, grid]));
 
-  getGrid(id: string): Grid | undefined {
+  gridsById = Object.fromEntries(
+    this.doc.grids.map((grid) => [grid.id, renderGrid(grid)]),
+  );
+
+  selection?: Selection;
+
+  pendingSelection?: Selection;
+
+  getGrid(id: string): RenderedGrid | undefined {
     return this.gridsById[id];
   }
+
+  selectCell(gridId: string, cellRef: CellRef) {
+    const previousSelection = this.selection;
+    this.selection = new ActiveCellSelection(gridId, cellRef);
+
+    window.dispatchEvent(
+      new CustomEvent("ntv:selection-changed", {
+        detail: { selection: this.selection, previousSelection },
+      }),
+    );
+  }
 }
 
 window.notive = new Notive();