🚀 imrpove algorithm

packages/demo/demo.getBestTunnel.ts

@@ -4,6 +4,7 @@ import { getSnakeLength } from "@snk/types/snake";
 import { grid, snake } from "./sample";
 import { getColor } from "@snk/types/grid";
 import { getBestTunnel } from "@snk/compute/getBestTunnel";
+import { createOutside } from "@snk/compute/outside";
 import type { Color } from "@snk/types/grid";
 import type { Point } from "@snk/types/point";
 
@@ -16,39 +17,64 @@ for (let x = 0; x < grid.width; x++)
   for (let y = 0; y < grid.height; y++)
     if (getColor(grid, x, y) === 1) ones.push({ x, y });
 
-const points = getBestTunnel(
-  grid,
-  ones[0].x,
-  ones[0].y,
-  3 as Color,
-  getSnakeLength(snake)
-);
-
-let k = 0;
+const tunnels = ones.map(({ x, y }) => ({
+  x,
+  y,
+  tunnel: getBestTunnel(
+    grid,
+    createOutside(grid),
+    x,
+    y,
+    3 as Color,
+    getSnakeLength(snake)
+  ),
+}));
 
 const onChange = () => {
+  const k = +inputK.value;
+  const i = +inputI.value;
+
   ctx.clearRect(0, 0, 9999, 9999);
 
-  draw(grid, [] as any, []);
+  if (!tunnels[k]) return;
 
-  if (points) {
-    points.forEach(({ x, y }) => highlightCell(x, y));
-    highlightCell(points[k].x, points[k].y, "blue");
+  const { x, y, tunnel } = tunnels[k]!;
+
+  draw(grid, snake, []);
+
+  highlightCell(x, y, "red");
+
+  if (tunnel) {
+    tunnel.forEach(({ x, y }) => highlightCell(x, y));
+    highlightCell(x, y, "red");
+    highlightCell(tunnel[i].x, tunnel[i].y, "blue");
   }
 };
 
-onChange();
-
 const inputK = document.createElement("input") as any;
 inputK.type = "range";
 inputK.value = 0;
 inputK.step = 1;
 inputK.min = 0;
-inputK.max = points ? points.length - 1 : 0;
+inputK.max = tunnels ? tunnels.length - 1 : 0;
 inputK.style.width = "90%";
 inputK.style.padding = "20px 0";
 inputK.addEventListener("input", () => {
-  k = +inputK.value;
+  inputI.value = 0;
+  inputI.max = (tunnels[+inputK.value]?.tunnel?.length || 1) - 1;
   onChange();
 });
 document.body.append(inputK);
+
+const inputI = document.createElement("input") as any;
+inputI.type = "range";
+inputI.value = 0;
+inputI.step = 1;
+inputI.min = 0;
+inputI.max = (tunnels[+inputK.value]?.tunnel?.length || 1) - 1;
+inputI.style.width = "90%";
+inputI.style.padding = "20px 0";
+inputI.addEventListener("input", onChange);
+document.body.append(inputI);
+
+onChange();