From 1b8d05bf83d7bd9ab425852f519ea81bdc379444 Mon Sep 17 00:00:00 2001 From: Josh Kingsley Date: Sat, 25 Oct 2025 22:05:04 +0300 Subject: feat(web): render and draw grid --- web/src/components/grid/drawGrid.ts | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 web/src/components/grid/drawGrid.ts (limited to 'web/src/components/grid/drawGrid.ts') diff --git a/web/src/components/grid/drawGrid.ts b/web/src/components/grid/drawGrid.ts new file mode 100644 index 0000000..6284693 --- /dev/null +++ b/web/src/components/grid/drawGrid.ts @@ -0,0 +1,30 @@ +import { RenderedGrid } from "./renderGrid"; +import colors from "open-color"; + +export default function drawGrid( + ctx: CanvasRenderingContext2D, + grid: RenderedGrid, +) { + ctx.clearRect(0, 0, grid.rect.width, grid.rect.height); + + ctx.fillStyle = colors.gray[8]; + ctx.fillRect(0, 0, grid.rect.width, grid.rect.height); + + ctx.strokeStyle = colors.gray[7]; + + grid.renderedRows.forEach((row, renderedRowIndex) => { + const isLastRow = renderedRowIndex === grid.renderedRows.length - 1; + + row.renderedCells.forEach((cell, cellIndex) => { + const { topLeft, width, height } = cell.rect; + const isLastCell = cellIndex === row.renderedCells.length - 1; + + ctx.strokeRect( + topLeft.x + 0.5, + topLeft.y + 0.5, + isLastCell ? width - 1 : width, + isLastRow ? height - 1 : height, + ); + }); + }); +} -- cgit v1.2.3