🚀 prune layer algorithm

packages/demo/demo.index.ts

@@ -4,7 +4,7 @@ const container = document.createElement("div");
 container.style.fontFamily = "helvetica";
 document.body.appendChild(container);
 
-for (const demo of ["getAvailableRoutes", "getBestRoute"]) {
+for (const demo of require("./demo.json").filter((x: any) => x !== "index")) {
   const title = document.createElement("h1");
   title.innerText = demo;
 
@@ -14,7 +14,7 @@ for (const demo of ["getAvailableRoutes", "getBestRoute"]) {
     const a = document.createElement("a");
     a.style.display = "block";
     a.innerText = `${demo} - ${g}`;
-    a.href = `./demo-${demo}.html?grid=${g}`;
+    a.href = `./${demo}.html?grid=${g}`;
 
     container.appendChild(a);
   }

packages/demo/demo.json

@@ -0,0 +1 @@
+["index", "getAvailableRoutes", "getBestRoute", "pruneLayer"]

packages/demo/demo.pruneLayer.ts

@@ -0,0 +1,48 @@
+import { createCanvas } from "./canvas";
+import { Color, copyGrid } from "../compute/grid";
+import { grid, snake } from "./sample";
+import { pruneLayer } from "@snk/compute/getBestRoute-layer";
+
+const colors = [1, 2, 3] as Color[];
+
+const snakeN = snake.length / 2;
+
+const layers = [{ grid, chunk: [] as { x: number; y: number }[] }];
+let grid0 = copyGrid(grid);
+for (const color of colors) {
+  const chunk = pruneLayer(grid0, color, snakeN);
+  layers.push({ chunk, grid: copyGrid(grid0) });
+}
+
+const { canvas, ctx, draw } = createCanvas(grid);
+document.body.appendChild(canvas);
+
+let k = 0;
+
+const loop = () => {
+  const { grid, chunk } = layers[k];
+
+  draw(grid, snake, []);
+
+  ctx.fillStyle = "orange";
+  chunk.forEach(({ x, y }) => {
+    ctx.beginPath();
+    ctx.fillRect((1 + x + 0.5) * 16 - 2, (2 + y + 0.5) * 16 - 2, 4, 4);
+  });
+};
+
+loop();
+
+const input = document.createElement("input") as any;
+input.type = "range";
+input.value = 0;
+input.step = 1;
+input.min = 0;
+input.max = layers.length - 1;
+input.style.width = "90%";
+input.addEventListener("input", () => {
+  k = +input.value;
+  loop();
+});
+document.body.append(input);
+document.body.addEventListener("click", () => input.focus());

packages/demo/webpack.config.ts

@@ -8,13 +8,13 @@ const basePathname = (process.env.BASE_PATHNAME || "")
   .split("/")
   .filter(Boolean);
 
+const demos: string[] = require("./demo.json");
+
 const config: Configuration = {
   mode: "development",
-  entry: {
-    "demo.getAvailableRoutes": "./demo.getAvailableRoutes",
-    "demo.getBestRoute": "./demo.getBestRoute",
-    "demo.index": "./demo.index",
-  },
+  entry: Object.fromEntries(
+    demos.map((demo: string) => [demo, `./demo.${demo}`])
+  ),
   resolve: { extensions: [".ts", ".js"] },
   output: {
     path: path.join(__dirname, "dist"),
@@ -39,18 +39,13 @@ const config: Configuration = {
     ],
   },
   plugins: [
-    new HtmlWebpackPlugin({
-      filename: "index.html",
-      chunks: ["demo.index"],
-    }),
-    new HtmlWebpackPlugin({
-      filename: "demo-getAvailableRoutes.html",
-      chunks: ["demo.getAvailableRoutes"],
-    }),
-    new HtmlWebpackPlugin({
-      filename: "demo-getBestRoute.html",
-      chunks: ["demo.getBestRoute"],
-    }),
+    ...demos.map(
+      (demo) =>
+        new HtmlWebpackPlugin({
+          filename: `${demo}.html`,
+          chunks: [demo],
+        })
+    ),
   ],
 
   devtool: false,