🚀 draw world

packages/draw/drawGrid.ts

@@ -0,0 +1,42 @@
+import { Grid, getColor, Color } from "@snk/compute/grid";
+import { pathRoundedRect } from "./pathRoundedRect";
+
+type Options = {
+  colorDots: Record<Color, string>;
+  colorEmpty: string;
+  colorBorder: string;
+  sizeCell: number;
+  sizeDot: number;
+  sizeBorderRadius: number;
+};
+
+export const drawGrid = (
+  ctx: CanvasRenderingContext2D,
+  grid: Grid,
+  o: Options
+) => {
+  for (let x = grid.width; x--; )
+    for (let y = grid.height; y--; ) {
+      const c = getColor(grid, x, y);
+      // @ts-ignore
+      const color = c === null ? o.colorEmpty : o.colorDots[c];
+      ctx.save();
+      ctx.translate(
+        x * o.sizeCell + (o.sizeCell - o.sizeDot) / 2,
+        y * o.sizeCell + (o.sizeCell - o.sizeDot) / 2
+      );
+
+      ctx.fillStyle = color;
+      ctx.strokeStyle = o.colorBorder;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+
+      pathRoundedRect(ctx, o.sizeDot, o.sizeDot, o.sizeBorderRadius);
+
+      ctx.fill();
+      ctx.stroke();
+      ctx.closePath();
+
+      ctx.restore();
+    }
+};

packages/draw/drawWorld.ts

@@ -0,0 +1,63 @@
+import { Grid, Color } from "@snk/compute/grid";
+import { pathRoundedRect } from "./pathRoundedRect";
+import { Point } from "@snk/compute/point";
+import { drawGrid } from "./drawGrid";
+
+type Options = {
+  colorDots: Record<Color, string>;
+  colorEmpty: string;
+  colorBorder: string;
+  colorSnake: string;
+  sizeCell: number;
+  sizeDot: number;
+  sizeBorderRadius: number;
+};
+
+export const drawSnake = (
+  ctx: CanvasRenderingContext2D,
+  snake: Point[],
+  o: Options
+) => {
+  for (let i = 0; i < snake.length; i++) {
+    const u = (i + 1) * 0.6;
+
+    ctx.save();
+    ctx.fillStyle = o.colorSnake;
+    ctx.translate(snake[i].x * o.sizeCell + u, snake[i].y * o.sizeCell + u);
+    ctx.beginPath();
+    pathRoundedRect(
+      ctx,
+      o.sizeCell - u * 2,
+      o.sizeCell - u * 2,
+      (o.sizeCell - u * 2) * 0.25
+    );
+    ctx.fill();
+    ctx.restore();
+  }
+};
+
+export const drawWorld = (
+  ctx: CanvasRenderingContext2D,
+  grid: Grid,
+  snake: Point[],
+  stack: Color[],
+  o: Options
+) => {
+  ctx.save();
+
+  ctx.translate(2 * o.sizeCell, 2 * o.sizeCell);
+  drawGrid(ctx, grid, o);
+  drawSnake(ctx, snake, o);
+
+  ctx.restore();
+
+  const m = 5;
+
+  ctx.save();
+  ctx.translate(o.sizeCell, (grid.height + 4) * o.sizeCell);
+  for (let i = 0; i < stack.length; i++) {
+    ctx.fillStyle = o.colorDots[stack[i]];
+    ctx.fillRect(i * m, 0, m, 10);
+  }
+  ctx.restore();
+};

packages/draw/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@snk/draw",
+  "version": "1.0.0",
+  "dependencies": {
+    "@snk/compute": "1.0.0"
+  }
+}

packages/draw/pathRoundedRect.ts

@@ -0,0 +1,12 @@
+export const pathRoundedRect = (
+  ctx: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  borderRadius: number
+) => {
+  ctx.moveTo(borderRadius, 0);
+  ctx.arcTo(width, 0, width, height, borderRadius);
+  ctx.arcTo(width, height, 0, height, borderRadius);
+  ctx.arcTo(0, height, 0, 0, borderRadius);
+  ctx.arcTo(0, 0, width, 0, borderRadius);
+};