openhotel · pagoru · Jul 26, 2024 · Jul 26, 2024 · Jul 26, 2024
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ Finders:
 Jump point: 10
 
 ```ts
-const grid = new Grid([
+const grid = Grid.from([
   [50, 55, 60, 65, 70],
   [45, 0, 0, 0, 75],
   [40, 0, 0, 0, 1], //x4y2
@@ -23,7 +23,7 @@ const grid = new Grid([
 #### PF example 1
 
 ```ts
-grid.findPath({ x: 4, y: 2 }, { x: 4, y: 1 }, 10, FinderEnum.JUMP_POINT);
+grid.findPath({ x: 4, y: 2 }, { x: 4, y: 1 }, {finder: FinderEnum.JUMP_POINT, maxJumpCost: 10});
 ```
 
 ```js
@@ -40,7 +40,7 @@ grid.findPath({ x: 4, y: 2 }, { x: 4, y: 1 }, 10, FinderEnum.JUMP_POINT);
 #### PF example 2
 
 ```ts
-grid.findPath({ x: 4, y: 2 }, { x: 4, y: 1 }, 1);
+grid.findPath({ x: 4, y: 2 }, { x: 4, y: 1 }, {maxJumpCost: 1});
 ```
 
 ```js
@@ -50,7 +50,7 @@ grid.findPath({ x: 4, y: 2 }, { x: 4, y: 1 }, 1);
 #### PF example 3
 
 ```ts
-grid.findPath({ x: 4, y: 2 }, { x: 4, y: 1 }, 85);
+grid.findPath({ x: 4, y: 2 }, { x: 4, y: 1 }, {maxJumpCost: 85});
 ```
 
 ```js

diff --git a/__tests__/jumpPoint.test.ts b/__tests__/jumpPoint.test.ts
@@ -1,6 +1,6 @@
 import { smallGrid, testCasesSmallGrid } from "./test-data/small-grid.ts";
 import { testCasesBigGrid } from "./test-data/big-grid.ts";
-import { Grid } from "../mod.ts";
+import {FinderEnum, Grid} from "../mod.ts";
 
 import { assertEquals } from "std/assert/assert_equals.ts";
 import { describe, it } from "std/testing/bdd.ts";
@@ -12,30 +12,30 @@ describe("Diagonal Jump Point", () => {
   testCases.forEach(
     ({ startPoint, endPoint, maxJumpCost, path: expectedPath, grid }) => {
       it(`validates pathfinding from {${Object.values(startPoint)}} to {${Object.values(endPoint)}} with jumpCost {${maxJumpCost}}`, () => {
-        const testGrid = new Grid(grid);
-        const path = testGrid.findPath(startPoint, endPoint, maxJumpCost);
+        const testGrid = Grid.from(grid);
+        const path = testGrid.findPath(startPoint, endPoint, {finder: FinderEnum.JUMP_POINT, maxJumpCost});
         // drawLayout(grid, path)
         assertEquals(JSON.stringify(path), JSON.stringify(expectedPath));
       });
     },
   );
 
   it("throws an error if start point does no exist", () => {
-    const grid = new Grid(smallGrid);
-    const find = () => grid.findPath({ x: 999, y: 999 }, { x: 4, y: 1 });
+    const grid = Grid.from(smallGrid);
+    const find = () => grid.findPath({ x: 999, y: 999 }, { x: 4, y: 1 }, {finder: FinderEnum.JUMP_POINT});
 
     assertThrows(find, Error, "startNode does not exist in the grid");
   });
 
   it("throws an error if end point does no exist", () => {
-    const grid = new Grid(smallGrid);
-    const find = () => grid.findPath({ x: 4, y: 1 }, { x: 999, y: 999 });
+    const grid = Grid.from(smallGrid);
+    const find = () => grid.findPath({ x: 4, y: 1 }, { x: 999, y: 999 }, {finder: FinderEnum.JUMP_POINT});
 
     assertThrows(find, Error, "endNode does not exist in the grid");
   });
 
   it("throws an error if grid is empty", () => {
-    const createEmptyGrid = () => new Grid([]);
+    const createEmptyGrid = () => Grid.from([]);
     assertThrows(createEmptyGrid, Error, "grid matrix cannot be empty");
   });
 });
diff --git a/__tests__/openList.test.ts b/__tests__/openList.test.ts
@@ -17,12 +17,12 @@ describe("OpenList", () => {
   });
 
   it("is empty", () => {
-    assertEquals(list.empty(), true);
+    assertEquals(list.isEmpty(), true);
   });
 
   it("is not empty", () => {
     list.push(1);
-    assertEquals(list.empty(), false);
+    assertEquals(list.isEmpty(), false);
   });
 
   it("removes lowest value", () => {

diff --git a/res/debug_view.html b/res/debug_view.html
@@ -0,0 +1,170 @@
+<!doctype html>
+<!-- Quick and dirty visualization for the grid and pathfinder result -->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Pathfinder visualization</title>
+  </head>
+  <body>
+    <canvas id="main" width="800" height="800"></canvas>
+
+    <script>
+      /** @type {HTMLCanvasElement} */
+      const canvas = document.querySelector("#main");
+      const ctx = canvas.getContext("2d");
+
+      let start = {
+        x: 19,
+        y: 17,
+      };
+
+      let end = {
+        x: 19,
+        y: 12,
+      };
+
+      async function update() {
+        const resp = await fetch(
+          `/find?srcX=${start.x}&srcY=${start.y}&dstX=${end.x}&dstY=${end.y}`,
+        );
+        const data = await resp.json();
+
+        window.data = data;
+
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        const cellSize = canvas.width / data.grid.width;
+        const metadata = data.grid.metadata ?? [];
+        const metadata2 = data.grid.metadata2 ?? [];
+
+        const max = Object.values(data.grid.data).reduce(
+          (acc, val) => Math.max(acc, val),
+          0,
+        );
+
+        for (let y = 0; y < data.grid.height; y++) {
+          for (let x = 0; x < data.grid.width; x++) {
+            const val = data.grid.data[y * data.grid.height + x];
+
+            if (val === 0) {
+              ctx.fillStyle = `black`;
+            } else {
+              ctx.fillStyle = `rgba(255, 255, 255, ${1 - (val / max) * 0.9})`;
+            }
+            ctx.fillRect(cellSize * x, cellSize * y, cellSize, cellSize);
+            ctx.strokeStyle = "#333";
+            ctx.strokeRect(cellSize * x, cellSize * y, cellSize, cellSize);
+
+            const height = metadata[y * data.grid.height + x] ?? 999999;
+            if (height < 999999) {
+              const pad = 1;
+              ctx.fillStyle = "#F00";
+              ctx.font = "12px Arial";
+              ctx.fillText(
+                String((height * 10) | 0),
+                cellSize * x + 2 + pad,
+                cellSize * y + 12 + pad,
+              );
+            }
+
+            const heuristic = metadata2[y * data.grid.height + x] ?? 999999;
+            if (heuristic < 999999) {
+              const pad = 1;
+              ctx.fillStyle = "#0F0";
+              ctx.font = "12px Arial";
+              ctx.fillText(
+                String((heuristic * 10) | 0),
+                cellSize * x + 2 + pad,
+                cellSize * y + 12 + pad + 10,
+              );
+            }
+          }
+        }
+
+        const pad = cellSize * 0.25;
+        ctx.fillStyle = "#0F0";
+        ctx.fillRect(
+          cellSize * data.start.x + pad,
+          cellSize * data.start.y + pad,
+          cellSize - pad * 2,
+          cellSize - pad * 2,
+        );
+        ctx.fillStyle = "#F00";
+        ctx.fillRect(
+          cellSize * data.end.x + pad,
+          cellSize * data.end.y + pad,
+          cellSize - pad * 2,
+          cellSize - pad * 2,
+        );
+
+        let prevPoint = data.start;
+        data.path.forEach((point, i) => {
+          const pad = cellSize * 0.35;
+
+          ctx.fillStyle = `rgba(0, 0, 255, ${i / data.path.length})`;
+          ctx.fillRect(
+            cellSize * point.x + pad,
+            cellSize * point.y + pad,
+            cellSize - pad * 2,
+            cellSize - pad * 2,
+          );
+
+          ctx.beginPath();
+          ctx.moveTo(
+            cellSize * prevPoint.x + cellSize / 2,
+            cellSize * prevPoint.y + cellSize / 2,
+          );
+          ctx.lineTo(
+            cellSize * point.x + cellSize / 2,
+            cellSize * point.y + cellSize / 2,
+          );
+          ctx.closePath();
+          let grad = ctx.createLinearGradient(
+            cellSize * prevPoint.x + cellSize / 2,
+            cellSize * prevPoint.y + cellSize / 2,
+            cellSize * point.x + cellSize / 2,
+            cellSize * point.y + cellSize / 2,
+          );
+          grad.addColorStop(0, "#00F");
+          grad.addColorStop(1, "#F0F");
+          ctx.strokeStyle = grad;
+          ctx.lineWidth = 3;
+          ctx.stroke();
+          ctx.lineWidth = 1;
+
+          prevPoint = point;
+        });
+
+        console.log("start", data.start);
+        console.log("end", data.end);
+        console.log("path", data.path);
+      }
+
+      canvas.onmousedown = (e) => {
+        const cellSize = canvas.width / data.grid.width;
+        const x = Math.floor(e.offsetX / cellSize);
+        const y = Math.floor(e.offsetY / cellSize);
+
+        if (e.button === 0) {
+          start = { x, y };
+        } else {
+          end = { x, y };
+        }
+
+        update();
+      };
+
+      update();
+
+      window.oncontextmenu = function () {
+        return false;
+      };
+    </script>
+  </body>
+</html>