1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
import { Notyf } from "notyf";
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();
const n = new Notyf({
duration: 0,
position: { x: "center", y: "top" },
dismissible: true,
});
n.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);
}
});
}
|
