Merge branch 'develop' into 'main'

Develop

See merge request KaranJayachandra/match_up!21

1 files changed, 84 insertions, 0 deletions

diff --git a/src/timer.js b/src/timer.js
new file mode 100644
index 0000000..c00ffdc
--- /dev/null
+++ b/src/timer.js
@@ -0,0 +1,84 @@
+const milliSecond = 1000;
+
+export class Timer {
+  pointer = 0;
+  mins = Number(sessionStorage.getItem("mins")) || 12;
+  running = Boolean(Number(sessionStorage.getItem("running"))) || false;
+  deadline = Number(sessionStorage.getItem("deadline")) || new Date().getTime();
+
+  constructor() {
+    this.running ? this.start(false) : this.reset();
+    addTimerBehaviour(this);
+  }
+  store() {
+    sessionStorage.setItem("mins", this.mins);
+    sessionStorage.setItem("running", Number(this.running));
+    sessionStorage.setItem("deadline", this.deadline);
+  }
+  set(m, s) {
+    const timer = document.getElementById("timer-display");
+    m = m < 10 ? "0" + m : m;
+    s = s < 10 ? "0" + s : s;
+    timer.value = `${m}:${s}`;
+  }
+  reset() {
+    clearInterval(this.pointer);
+    const mins = Math.floor(this.mins);
+    const secs = (this.mins - mins) * 60;
+    this.set(mins, secs);
+    this.running = false;
+    this.store();
+  }
+  update(ms) {
+    const m = Math.floor((ms % (milliSecond * 60 * 60)) / (milliSecond * 60));
+    const s = Math.floor((ms % (milliSecond * 60)) / milliSecond);
+    this.set(m, s);
+  }
+  refresh(p) {
+    const now = new Date().getTime();
+    const msToDeadline = p.deadline - now;
+    if (msToDeadline > 0) {
+      p.update(msToDeadline);
+      return;
+    }
+    p.reset();
+    getNotifier().error("Round completed");
+  }
+  start(fresh) {
+    if (fresh) {
+      const now = new Date().getTime();
+      const msToDeadline = this.mins * 60 * 1000;
+      this.deadline = now + msToDeadline;
+    }
+    this.running = true;
+    this.store();
+    this.pointer = setInterval(this.refresh, 1000, this);
+  }
+  change(value) {
+    this.mins += value;
+    if (this.mins < 0.5) {
+      this.mins = 0.5;
+    }
+    this.reset();
+  }
+}
+
+function addTimerBehaviour(t) {
+  document.getElementById("timer-start").addEventListener("click", () => {
+    if (t.running) return;
+    t.start(1);
+  });
+  document.getElementById("timer-stop").addEventListener("click", () => {
+    t.reset();
+  });
+  document.getElementById("timer-inc").addEventListener("click", () => {
+    if (!t.running) {
+      t.change(0.5);
+    }
+  });
+  document.getElementById("timer-dec").addEventListener("click", () => {
+    if (!t.running) {
+      t.change(-0.5);
+    }
+  });
+}