feat: improve pause and speed handling across simulation (#174)

Fixes #125

This PR makes pause and speed handling consistent across the simulation.

- It makes programs stop when simulation is paused
- It makes speed and pauses affect packet processing in routers

It also refactors the `SpeedMultiplier` to present the current speed
multiplier as 0 when the simulation is paused and removes the
`Packet.isSimulationPaused` field.

Author: MegaRedHand

src/context.ts

@@ -21,7 +21,7 @@ export class GlobalContext {
   private viewport: Viewport = null;
   private datagraph: DataGraph;
   private viewgraph: ViewGraph;
-  private speedMultiplier: SpeedMultiplier;
+  private speedMultiplier = new SpeedMultiplier(1);
   private saveIntervalId: NodeJS.Timeout | null = null;
   private ipGenerator: IpAddressGenerator;
   private macGenerator: MacAddressGenerator;
@@ -58,17 +58,16 @@ export class GlobalContext {
   }
 
   private setSpeedMultiplier(speedMultiplier: SpeedMultiplier) {
-    if (speedMultiplier && speedMultiplier.value > 0) {
-      this.changeSpeedMultiplier(speedMultiplier.value);
-      // Update the wheel display after setting the speed
-      const speedWheel = document.getElementById(
-        "speed-wheel",
-      ) as HTMLInputElement;
-      const valueDisplay = document.querySelector(".value-display");
-      if (speedWheel && valueDisplay) {
-        speedWheel.value = speedMultiplier.value.toString();
-        valueDisplay.textContent = `${speedMultiplier.value}x`;
-      }
+    this.speedMultiplier = speedMultiplier;
+    // TODO: make this change go through SpeedControlHandler
+    // Update the wheel display after setting the speed
+    const speedWheel = document.getElementById(
+      "speed-wheel",
+    ) as HTMLInputElement;
+    const valueDisplay = document.querySelector(".value-display");
+    if (speedWheel && valueDisplay) {
+      speedWheel.value = speedMultiplier.value.toString();
+      valueDisplay.textContent = `${speedMultiplier.value}x`;
     }
   }
 
@@ -97,7 +96,7 @@ export class GlobalContext {
   }
 
   getCurrentSpeed() {
-    return this.speedMultiplier;
+    return this.speedMultiplier.value;
   }
 
   getDataGraph() {
@@ -109,11 +108,17 @@ export class GlobalContext {
     this.setNetwork(this.datagraph, layer);
   }
 
+  pause() {
+    this.speedMultiplier.pause();
+  }
+
+  unpause() {
+    this.speedMultiplier.unpause();
+  }
+
   changeSpeedMultiplier(speedMultiplier: number) {
-    if (this.viewgraph) {
-      this.speedMultiplier = new SpeedMultiplier(speedMultiplier);
-      saveToLocalStorage(this);
-    }
+    this.speedMultiplier.setSpeed(speedMultiplier);
+    saveToLocalStorage(this);
   }
 
   private setupAutoSave() {

src/handlers/pauseHandler.ts

@@ -1,13 +1,15 @@
 import PlaySvg from "../assets/play-icon.svg";
 import PauseSvg from "../assets/pause-icon.svg";
-import { Packet } from "../types/packet";
+import { GlobalContext } from "../context";
 
 export class PauseHandler {
+  private ctx: GlobalContext;
   private pauseButton: HTMLButtonElement | null;
   private pauseIcon: HTMLImageElement;
   private isPaused: boolean;
 
-  constructor() {
+  constructor(ctx: GlobalContext) {
+    this.ctx = ctx;
     this.pauseButton = document.getElementById(
       "pause-button",
     ) as HTMLButtonElement;
@@ -57,9 +59,9 @@ export class PauseHandler {
 
     // Handle animation pause/unpause
     if (this.isPaused) {
-      Packet.pauseAnimation();
+      this.ctx.pause();
     } else {
-      Packet.unpauseAnimation();
+      this.ctx.unpause();
     }
   }
 }

src/handlers/speedControlHandler.ts

@@ -1,7 +1,7 @@
 import { GlobalContext } from "../context";
 
 export class SpeedControlHandler {
-  private ctx: GlobalContext; // Adjust the type based on GlobalContext
+  private ctx: GlobalContext;
   private speedWheel: HTMLInputElement | null;
   private valueDisplay: HTMLElement | null;
 
@@ -13,7 +13,7 @@ export class SpeedControlHandler {
     this.valueDisplay = document.querySelector(".value-display");
 
     if (this.speedWheel && this.valueDisplay) {
-      this.updateSpeedWheel(this.ctx.getCurrentSpeed().value);
+      this.updateSpeedWheel(this.ctx.getCurrentSpeed());
       this.speedWheel.addEventListener("input", (event) =>
         this.handleSpeedChange(event),
       );

src/index.ts

@@ -73,7 +73,7 @@ async function loadAssets(otherPromises: Promise<void>[]) {
   new LayerHandler(ctx, leftBar);
   new ResponsiveHandler(app, viewport);
   new UndoRedoHandler(ctx);
-  new PauseHandler();
+  new PauseHandler(ctx);
   new SpeedControlHandler(ctx);
 
   const configModal = new ConfigModal(ctx);

src/types/devices/router.ts

@@ -77,7 +77,8 @@ export class Router extends NetworkDevice {
   }
 
   processPacket(ticker: Ticker) {
-    const datagram = this.getPacketsToProcess(ticker.deltaMS);
+    const elapsedTime = ticker.deltaMS * this.viewgraph.getSpeed();
+    const datagram = this.getPacketsToProcess(elapsedTime);
     if (!datagram) {
       return;
     }

src/types/devices/speedMultiplier.ts

@@ -1,15 +1,28 @@
 export class SpeedMultiplier {
   private _value: number;
+  private isPaused = false;
 
   constructor(initialValue = 1) {
-    if (initialValue <= 0) {
-      throw new Error("Speed value must be greater than 0");
-    }
-    this._value = initialValue;
+    this.setSpeed(initialValue);
   }
 
   // Get the current speed value
   get value(): number {
-    return this._value;
+    return this.isPaused ? 0 : this._value;
+  }
+
+  setSpeed(value: number) {
+    if (value <= 0) {
+      throw new Error("Speed value must be greater than 0");
+    }
+    this._value = value;
+  }
+
+  pause() {
+    this.isPaused = true;
+  }
+
+  unpause() {
+    this.isPaused = false;
   }
 }

src/types/graphs/viewgraph.ts

@@ -182,7 +182,7 @@ export class ViewGraph {
   }
 
   getSpeed(): number {
-    return this.ctx.getCurrentSpeed().value;
+    return this.ctx.getCurrentSpeed();
   }
 
   // Get all connections of a device

src/types/packet.ts

@@ -34,16 +34,6 @@ export class Packet extends Graphics {
   private type: string;
   private rawPacket: EthernetFrame;
 
-  static animationPaused = false;
-
-  static pauseAnimation() {
-    Packet.animationPaused = true;
-  }
-
-  static unpauseAnimation() {
-    Packet.animationPaused = false;
-  }
-
   constructor(viewgraph: ViewGraph, type: string, rawPacket: EthernetFrame) {
     super();
 
@@ -164,10 +154,8 @@ export class Packet extends Graphics {
     const normalizedSpeed = this.speed / edgeLength;
 
     // Update progress with normalized speed
-    if (!Packet.animationPaused) {
-      this.progress +=
-        (ticker.deltaMS * normalizedSpeed * this.viewgraph.getSpeed()) / 1000;
-    }
+    this.progress +=
+      (ticker.deltaMS * normalizedSpeed * this.viewgraph.getSpeed()) / 1000;
 
     this.updatePosition();
   }

src/types/viewportManager.ts

@@ -185,7 +185,7 @@ export function saveToLocalStorage(ctx: GlobalContext) {
   const dataGraph = ctx.getDataGraph();
   const graphData = JSON.stringify(dataGraph.toData());
   const layer = ctx.getCurrentLayer();
-  const speedMultiplier = ctx.getCurrentSpeed().value;
+  const speedMultiplier = ctx.getCurrentSpeed();
   const data: LocalStorageData = { graph: graphData, layer, speedMultiplier };
   localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(data));