feat: add hacky pause button (#31)

Author: MegaRedHand

src/index.ejs

@@ -11,6 +11,7 @@
     <div id="top-bar">
         <button id="save-button" class="save-button" title="Save">Save</button>
         <button id="load-button" class="load-button" title="Load">Load</button>
+        <button id="pause-button" class="load-button" title="Pause">Pause</button>
         <div id="app-title">GEduNet</div>
     </div>
     <div id="bottom-screen" class="row container">

src/index.ts

@@ -19,6 +19,7 @@ import {
   selectElement,
 } from "./types/viewportManager";
 import { DataGraph } from "./types/graphs/datagraph";
+import { packetTicker } from "./types/packet";
 
 const WORLD_WIDTH = 10000;
 const WORLD_HEIGHT = 10000;
@@ -348,5 +349,19 @@ export class RightBar {
     input.click();
   };
 
+  const pauseButton = document.getElementById("pause-button");
+  let paused = false;
+  pauseButton.onclick = () => {
+    paused = !paused;
+    if (paused) {
+      pauseButton.textContent = "Resume";
+      packetTicker.stop();
+    } else {
+      pauseButton.textContent = "Pause";
+      packetTicker.start();
+    }
+  };
+  packetTicker.start();
+
   console.log("initialized!");
 })();

src/types/packet.ts

@@ -1,6 +1,8 @@
 import { Graphics, Ticker } from "pixi.js";
 import { Edge, Position } from "./edge";
 
+export const packetTicker = new Ticker();
+
 export class Packet extends Graphics {
   speed: number;
   progress = 0;
@@ -27,7 +29,8 @@ export class Packet extends Graphics {
     this.currentPath = path;
     this.currentEdge = this.currentPath.shift();
     this.currentStart = start;
-    Ticker.shared.add(this.updateProgress, this);
+    // TODO: use global ticker, and add "shouldProgress" flag
+    packetTicker.add(this.updateProgress, this);
   }
 
   updateProgress(ticker: Ticker) {