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
92
93
94
95
96
97
|
const canvas = document.getElementById('pomoCanvas');
const ctx = canvas.getContext('2d');
const resizeCanvas = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
Notification.requestPermission().then(function (permission) {
if (permission === 'granted') {
console.log('Notification permission granted.');
} else {
console.log('Unable to get permission to notify.');
}
});
let isRunning = false;
let intervalId = null;
// const duration = 10;
const duration = 25 * 60; // 25 minutes
let progress = 0;
let isPaused = false;
const displayText = (text) => {
ctx.fillStyle = 'black';
ctx.font = '30px Arial';
ctx.textAlign = 'center';
ctx.fillText(text, canvas.width / 2, canvas.height / 2);
}
if (!isRunning && !isPaused && progress === 0) {
displayText('Tap to start');
}
const draw = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = progress === duration ? '#17B169' : '#ff6347';
ctx.fillRect(0, 0, (progress / duration) * canvas.width, canvas.height);
if (isPaused) {
displayText('Paused');
} else if (progress === duration) {
displayText('🍅');
new Notification('Pomo', {
body: 'Take a rest!',
icon: 'https://eli.li/_assets/_images/pomo-tomato.png'
});
} else {
const minutes = Math.floor(progress / 60);
const seconds = ('0' + (progress % 60)).slice(-2);
displayText(`${minutes}:${seconds}`);
}
};
const update = () => {
if (progress < duration) {
progress++;
draw();
} else {
clearInterval(intervalId);
isRunning = false;
}
};
const handleUserInteraction = () => {
if (isRunning) {
clearInterval(intervalId);
isRunning = false;
isPaused = true;
} else {
if (progress === duration) {
progress = 0;
}
isPaused = false;
intervalId = setInterval(update, 1000);
isRunning = true;
}
draw();
};
window.addEventListener('keydown', (event) => {
if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
handleUserInteraction();
}
});
window.addEventListener('click', () => {
handleUserInteraction();
});
window.addEventListener('touchstart', () => {
handleUserInteraction();
});
|