Merge pull request #1 from Pranav2612000/feat/pause-btn

feat: allow pausing and resuming animations

main.js

@@ -3,6 +3,52 @@ import "./style.css";
 import Network from "./src/Network";
 import { CANVAS_HEIGHT, CANVAS_WIDTH } from "./src/canvas";
 
+window.isPaused = false;
+window.setInterval = (fn, duration) => {
+  let isRunning = true;
+  let currentDuration;
+  let currentCancelFn = () => null;
+  let currentResolve;
+
+  const mainLoop = async () => {
+    while(isRunning) {
+      currentDuration = duration;
+
+      while (currentDuration > 0) {
+        if (window.isPaused) {
+          await new Promise((resolve) => {
+            setTimeout(() => {
+              resolve();
+            }, 1000);
+          });
+          continue;
+        }
+        await new Promise((resolve) => {
+          currentResolve = resolve;
+          currentCancelFn = setTimeout(() => {
+            resolve();
+          }, 200);
+        });
+        currentDuration = currentDuration - 200;
+      }
+      if (isRunning) {
+        fn();
+      }
+    }
+  };
+  mainLoop();
+
+  return () => {
+    clearTimeout(currentCancelFn);
+    currentResolve();
+    isRunning = false;
+  }
+}
+
+window.clearInterval = (intervalFn) => {
+  intervalFn();
+}
+
 document.querySelector("#app").innerHTML = `
   <div class="main">
     <h1>Raft</h1>
@@ -17,6 +63,7 @@ document.querySelector("#app").innerHTML = `
     <button id="resetLeader">Reset Leader</button>
     <button id="addNode">Add Node</button>
     <button id="addData">Send Data</button>
+    <button id="pause">Play / Pause</button>
   </div>
 `;
 
@@ -44,3 +91,10 @@ document.getElementById("addData").addEventListener("click", () => {
 
   network.nodes[network.leader - 1].receiveData(currentMsg++);
 });
+document.getElementById("pause").addEventListener("click", () => {
+  if (window.isPaused) {
+    window.isPaused = false;
+  } else {
+    window.isPaused = true;
+  }
+});

src/Network.js

@@ -10,10 +10,10 @@ import {
 import { MESSAGE_TYPE } from "./types";
 
 class Network {
-  static HEARTBEAT = 4000;
+  static HEARTBEAT = 5000;
   static MAX_ELECTION_TIMEOUT = 9000;
   static MIN_ELECTION_TIMEOUT = 6000;
-  static NETWORK_DELAY = 1000; // in milliseconds
+  static NETWORK_DELAY = 1500; // in milliseconds
 
   constructor(numOfNodes) {
     this.numOfNodes = numOfNodes;

src/canvas.js

@@ -109,7 +109,20 @@ export function drawNode(context, nodePosition, node) {
       return;
     }
 
-    window.requestAnimationFrame(animationFrame);
+    const recurse = async () => {
+      while (window.isPaused) {
+        await new Promise((resolve) => {
+          setTimeout(() => {
+            resolve();
+          }, 1000);
+        });
+        lastFrameTimestamp += 1000;
+      }
+
+      window.requestAnimationFrame(animationFrame);
+    };
+
+    recurse();
   }
 
   window.requestAnimationFrame(animationFrame);
@@ -237,7 +250,20 @@ export async function showDataTransfer(
       }
 
       // Otherwise display the next animation
-      window.requestAnimationFrame(animationFrame);
+      const recurse = async () => {
+        while (window.isPaused) {
+          await new Promise((resolve) => {
+            setTimeout(() => {
+              resolve();
+            }, 1000);
+          });
+          lastFrameTimestamp += 1000;
+        }
+
+        window.requestAnimationFrame(animationFrame);
+      };
+
+      recurse();
     }
     window.requestAnimationFrame(animationFrame);
   });