Add move graph

package.json

@@ -22,15 +22,16 @@
   "homepage": "https://github.com/mikedotJS/adventurejs#readme",
   "devDependencies": {
     "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-flow": "^6.23.0",
-    "flow-bin": "^0.80.0",
+    "flow-bin": "^0.89.0",
     "husky": "next",
-    "lint-staged": "^7.2.2",
-    "parcel-bundler": "^1.9.7",
-    "prettier": "1.14.2"
+    "lint-staged": "^8.1.0",
+    "parcel-bundler": "^1.10.3",
+    "prettier": "1.15.3"
   }
 }

src/debugger/index.js

@@ -11,21 +11,17 @@ import { Point } from "../point";
 export class Debugger implements IDebugger {
   static WALKABLE_AREA_COLOR = "red";
   static ACTOR_COLOR = "yellow";
+  static PATH_COLOR = "blue";
 
   adventure: IAdventure;
   renderer: IRenderer;
 
   lastRenderAt: number;
   currentFps: number;
 
-  onMouseMoveListener: (event: MouseEvent) => void;
-  onClickListener: (event: MouseEvent) => void;
-
-  mouseX: number;
-  mouseY: number;
-
   displayWalkableArea: boolean;
   displayActorsDetails: boolean;
+  displayMoveGraph: boolean;
 
   manuallyAddedPoints: IPoint[];
 
@@ -38,27 +34,12 @@ export class Debugger implements IDebugger {
 
     if (this.adventure.debug) {
       this.init();
-    } else {
-      this.clear(this.renderer.canvas);
     }
   }
 
   init(): void {
     this.renderer = this.adventure.renderer;
-    const { canvas } = this.renderer;
-
-    this.onMouseMoveListener = this.onMouseMove.bind(this);
-    this.onClickListener = this.onClick.bind(this);
-
     this.manuallyAddedPoints = [];
-
-    canvas.addEventListener("mousemove", this.onMouseMoveListener);
-    canvas.addEventListener("click", this.onClickListener);
-  }
-
-  clear(canvas: HTMLCanvasElement): void {
-    canvas.removeEventListener("mousemove", this.onMouseMoveListener);
-    canvas.removeEventListener("click", this.onClickListener);
   }
 
   update(): void {
@@ -79,6 +60,12 @@ export class Debugger implements IDebugger {
     }
   }
 
+  toggleMoveGraph(): void {
+    if (this.adventure.debug) {
+      this.displayMoveGraph = !this.displayMoveGraph;
+    }
+  }
+
   render(): void {
     if (this.manuallyAddedPoints) {
       this.debugArea(this.manuallyAddedPoints);
@@ -100,6 +87,14 @@ export class Debugger implements IDebugger {
       this.debugActors(Array.from(this.adventure.currentRoom.actors.values()));
     }
 
+    if (
+      this.displayMoveGraph &&
+      this.adventure.currentRoom &&
+      this.adventure.currentRoom.moveGraph
+    ) {
+      this.debugMoveGraph();
+    }
+
     this.drawMessages();
   }
 
@@ -154,9 +149,21 @@ export class Debugger implements IDebugger {
     });
   }
 
+  debugMoveGraph(): void {
+    const { moveGraph } = this.adventure.currentRoom;
+
+    moveGraph.paths.forEach((path: [IPoint, IPoint]) => {
+      this.drawSegment(path);
+    });
+
+    this.drawSegment(moveGraph.mousePath);
+    this.drawPoint(moveGraph.mousePath[1], Debugger.PATH_COLOR);
+  }
+
   drawMessages(): void {
     this.renderer.context.fillStyle = "white";
     this.renderer.context.font = "16px Arial";
+    const { mousePosition } = this.renderer;
 
     let y = 0;
     const lines = [
@@ -167,12 +174,13 @@ export class Debugger implements IDebugger {
           : "not defined"
       }`,
       `FPS: ${Math.round(this.currentFps)}`,
-      `Mouse position: ${this.mouseX || "?"};${this.mouseY || "?"}`,
+      `Mouse position: ${mousePosition.x};${mousePosition.y}`,
       `Walkable area: ${this.displayWalkableArea ? "ON" : "OFF"} (F4)`,
       `Manually added points: ${
         this.manuallyAddedPoints.length
       } (click to add, "d" to dump, "c" to clear)`,
-      `Actors: ${this.displayActorsDetails ? "ON" : "OFF"} (F5)`
+      `Actors: ${this.displayActorsDetails ? "ON" : "OFF"} (F6)`,
+      `Move graph: ${this.displayMoveGraph ? "ON" : "OFF"} (F7)`
     ];
 
     lines.forEach(line => {
@@ -181,18 +189,8 @@ export class Debugger implements IDebugger {
     });
   }
 
-  onMouseMove(event: MouseEvent): void {
-    const rect = this.renderer.canvas.getBoundingClientRect();
-    this.mouseX = event.clientX - rect.left;
-    this.mouseY = event.clientY - rect.top;
-  }
-
-  onClick(event: MouseEvent): void {
-    const rect = this.renderer.canvas.getBoundingClientRect();
-    const x = event.clientX - rect.left;
-    const y = event.clientY - rect.top;
-
-    this.manuallyAddedPoints.push(new Point(x, y));
+  onClick(point: IPoint): void {
+    this.manuallyAddedPoints.push(point);
   }
 
   drawPoint(point: IPoint, color: string): void {
@@ -213,4 +211,15 @@ export class Debugger implements IDebugger {
       this.manuallyAddedPoints = [];
     }
   }
+
+  drawSegment([a, b]: [IPoint, IPoint]): void {
+    this.renderer.context.beginPath();
+    this.renderer.context.moveTo(a.x, a.y);
+    this.renderer.context.lineTo(b.x, b.y);
+    this.renderer.context.closePath();
+
+    this.renderer.context.lineWidth = 1;
+    this.renderer.context.strokeStyle = Debugger.PATH_COLOR;
+    this.renderer.context.stroke();
+  }
 }

src/debugger/interface.js

@@ -12,14 +12,9 @@ export interface IDebugger {
   lastRenderAt: number;
   currentFps: number;
 
-  onMouseMoveListener: (event: MouseEvent) => void;
-  onClickListener: (event: MouseEvent) => void;
-
-  mouseX: number;
-  mouseY: number;
-
   displayWalkableArea: boolean;
   displayActorsDetails: boolean;
+  displayMoveGraph: boolean;
 
   manuallyAddedPoints: IPoint[];
 
@@ -29,12 +24,12 @@ export interface IDebugger {
   update(): void;
   toggleWalkableArea(): void;
   toggleActorDetails(): void;
+  toggleMoveGraph(): void;
   render(): void;
   debugArea(points: IPoint[]): void;
   debugActors(actors: IActor[]): void;
   drawMessages(): void;
-  onMouseMove(event: MouseEvent): void;
-  onClick(event: MouseEvent): void;
+  onClick(point: IPoint): void;
   drawPoint(point: IPoint, color: string): void;
   dumpManuallyAddedPoints(): void;
   clearManuallyAddedPoints(): void;

src/move-graph/index.js

@@ -0,0 +1,81 @@
+import type { IMoveGraph } from "./interface";
+import type { IPoint } from "../point/interface";
+import { Point } from "../point";
+
+export class MoveGraph implements IMoveGraph {
+  walkableArea: IPoint[];
+  actor: IPoint;
+  borders: [IPoint, IPoint][];
+  paths: [IPoint, IPoint][];
+  mousePath: [IPoint, IPoint];
+
+  static intersection(
+    [a, b]: [IPoint, IPoint],
+    [c, d]: [IPoint, IPoint]
+  ): IPoint | false {
+    // Length 0
+    if ((a.x === b.x && a.y === b.y) || (c.x === d.x && c.y === d.y)) {
+      return false;
+    }
+
+    const factor = (d.y - c.y) * (b.x - a.x) - (d.x - c.x) * (b.y - a.y);
+
+    // Parallel lines
+    if (factor === 0) {
+      return false;
+    }
+
+    const ua = ((d.x - c.x) * (a.y - c.y) - (d.y - c.y) * (a.x - c.x)) / factor;
+    const ub = ((b.x - a.x) * (a.y - c.y) - (b.y - a.y) * (a.x - c.x)) / factor;
+
+    // Intersection along segments
+    if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
+      return false;
+    }
+
+    // Intersection point
+    const x = a.x + ua * (b.x - a.x);
+    const y = a.y + ua * (b.y - a.y);
+
+    return new Point(x, y);
+  }
+
+  constructor(walkableArea: IPoint[], actor: IPoint) {
+    this.walkableArea = walkableArea;
+    this.actor = actor;
+    this.borders = [];
+    this.paths = [];
+    let previousPoint = null;
+
+    this.walkableArea.forEach((point: IPoint) => {
+      if (previousPoint) {
+        this.borders.push([previousPoint, point]);
+      }
+
+      previousPoint = point;
+    });
+
+    if (this.walkableArea.length) {
+      this.borders.push([previousPoint, this.walkableArea[0]]);
+    }
+  }
+
+  updateMousePath(mousePosition: IPoint) {
+    const intersects = this.borders.some((border: [IPoint, IPoint]) => {
+      const intersectionPoint = MoveGraph.intersection(
+        [this.actor, mousePosition],
+        border
+      );
+
+      if (intersectionPoint) {
+        this.mousePath = [this.actor, intersectionPoint];
+      }
+
+      return !!intersectionPoint;
+    });
+
+    if (!intersects) {
+      this.mousePath = [this.actor, mousePosition];
+    }
+  }
+}

src/move-graph/interface.js

@@ -0,0 +1,11 @@
+import type { IPoint } from "../point/interface";
+
+export interface IMoveGraph {
+  walkableArea: IPoint[];
+  actor: IPoint;
+  borders: [IPoint, IPoint][];
+  paths: [IPoint, IPoint][];
+  mousePath: [IPoint, IPoint];
+
+  updateMousePath(mousePosition: IPoint): void;
+}

src/renderer/index.js

@@ -5,8 +5,10 @@ import type { IAdventure } from "../adventure/interface";
 import type { IDebugger } from "../debugger/interface";
 import type { IRenderable } from "../renderable/interface";
 import type { IActor } from "../actor/interface";
+import type { IPoint } from "../point/interface";
 
 import { Debugger } from "../debugger";
+import { Point } from "../point";
 
 export class Renderer implements IRenderer {
   static instance: IRenderer;
@@ -19,7 +21,11 @@ export class Renderer implements IRenderer {
 
   fps: number;
   mainLoopId: IntervalID;
+  mousePosition: IPoint;
+
   onKeyDownListener: (event: KeyboardEvent) => void;
+  onMouseMoveListener: (event: MouseEvent) => void;
+  onClickListener: (event: MouseEvent) => void;
 
   constructor(adventure: IAdventure, fps: number) {
     if (Renderer.instance) {
@@ -41,14 +47,22 @@ export class Renderer implements IRenderer {
     }
 
     this.fps = fps;
+    this.mousePosition = new Point(-1, -1);
     this.mainLoopId = this.start();
 
     this.onKeyDownListener = this.onKeyDown.bind(this);
+    this.onMouseMoveListener = this.onMouseMove.bind(this);
+    this.onClickListener = this.onClick.bind(this);
+
     window.addEventListener("keydown", this.onKeyDownListener);
+    this.canvas.addEventListener("mousemove", this.onMouseMoveListener);
+    this.canvas.addEventListener("click", this.onClickListener);
   }
 
   clear(): void {
     window.removeEventListener("keydown", this.onKeyDownListener);
+    this.canvas.removeEventListener("mousemove", this.onMouseMoveListener);
+    this.canvas.removeEventListener("click", this.onClickListener);
     this.debugger.clear(this.canvas);
 
     if (this.mainLoopId) {
@@ -114,7 +128,7 @@ export class Renderer implements IRenderer {
       case "F4":
         this.debugger.toggleWalkableArea();
         break;
-      case "F5":
+      case "F6":
         this.debugger.toggleActorDetails();
         break;
       case "d":
@@ -123,8 +137,33 @@ export class Renderer implements IRenderer {
       case "c":
         this.debugger.clearManuallyAddedPoints();
         break;
+      case "F7":
+        this.debugger.toggleMoveGraph();
+        break;
       default:
         break;
     }
   }
+
+  onMouseMove(event: MouseEvent): void {
+    const rect = this.canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    this.mousePosition = new Point(x, y);
+
+    if (this.adventure.currentRoom && this.adventure.currentRoom.currentActor) {
+      this.adventure.currentRoom.moveGraph.updateMousePath(this.mousePosition);
+    }
+  }
+
+  onClick(event: MouseEvent): void {
+    const rect = this.canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    const point = new Point(x, y);
+
+    if (this.adventure.debug) {
+      this.debugger.onClick(point);
+    }
+  }
 }