🚀 refactor getBestRoute

packages/demo/canvas.ts

@@ -0,0 +1,48 @@
+import { Color, Grid } from "@snk/compute/grid";
+import { drawWorld } from "@snk/draw/drawWorld";
+import { Snake } from "@snk/compute/snake";
+
+export const drawOptions = {
+  sizeBorderRadius: 2,
+  sizeCell: 16,
+  sizeDot: 12,
+  colorBorder: "#1b1f230a",
+  colorDots: {
+    1: "#9be9a8",
+    2: "#40c463",
+    3: "#30a14e",
+    4: "#216e39",
+    5: "orange",
+  },
+  colorEmpty: "#ebedf0",
+  colorSnake: "purple",
+};
+
+export const createCanvas = ({
+  width,
+  height,
+}: {
+  width: number;
+  height: number;
+}) => {
+  const canvas = document.createElement("canvas");
+  const upscale = 2;
+  const w = drawOptions.sizeCell * (width + 4);
+  const h = drawOptions.sizeCell * (height + 4) + 200;
+  canvas.width = w * upscale;
+  canvas.height = h * upscale;
+  canvas.style.width = w + "px";
+  canvas.style.height = h + "px";
+
+  document.body.appendChild(canvas);
+
+  const ctx = canvas.getContext("2d")!;
+  ctx.scale(upscale, upscale);
+
+  const draw = (grid: Grid, snake: Snake, stack: Color[]) => {
+    ctx.clearRect(0, 0, 9999, 9999);
+    drawWorld(ctx, grid, snake, stack, drawOptions);
+  };
+
+  return { draw, canvas };
+};