diff options
| author | elioat <elioat@tilde.institute> | 2024-01-01 18:34:34 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-01-01 18:34:34 -0500 |
| commit | 9a637047103b5f4406fab69eb16a252acca2c9b0 (patch) | |
| tree | 321be37ba257cb1da5458b9457d175215479d882 /js | |
| parent | 1f3b6ad3e57d8598efb6f46c4172f139690c92e2 (diff) | |
| download | tour-9a637047103b5f4406fab69eb16a252acca2c9b0.tar.gz | |
pomodoro timer
Diffstat (limited to 'js')
| -rw-r--r-- | js/pomo/index.html | 21 | ||||
| -rw-r--r-- | js/pomo/pomo.js | 77 |
2 files changed, 98 insertions, 0 deletions
diff --git a/js/pomo/index.html b/js/pomo/index.html new file mode 100644 index 0000000..3117b30 --- /dev/null +++ b/js/pomo/index.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Pomodoro Timer</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> + <style> + body { + margin: 0; + padding: 0; + } + #pomoCanvas { + display: block; + } + </style> +</head> +<body> + <canvas id="pomoCanvas"></canvas> + <script src="pomo.js"></script> +</body> +</html> \ No newline at end of file diff --git a/js/pomo/pomo.js b/js/pomo/pomo.js new file mode 100644 index 0000000..716d98b --- /dev/null +++ b/js/pomo/pomo.js @@ -0,0 +1,77 @@ +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 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); + + ctx.fillStyle = 'black'; + ctx.font = '30px Arial'; + ctx.textAlign = 'center'; + if (isPaused) { + ctx.fillText('Paused', canvas.width / 2, canvas.height / 2); + } else if (progress === duration) { + ctx.fillText('🍅', canvas.width / 2, canvas.height / 2); + 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); + ctx.fillText(`${minutes}:${seconds}`, canvas.width / 2, canvas.height / 2); + } +}; + +const update = () => { + if (progress < duration) { + progress++; + draw(); + } else { + clearInterval(intervalId); + isRunning = false; + } +}; + +window.addEventListener('keydown', (event) => { + if (event.code === 'Space' || event.code === 'Enter') { + if (isRunning) { + clearInterval(intervalId); + isRunning = false; + isPaused = true; + } else { + if (progress === duration) { + progress = 0; + } + isPaused = false; + intervalId = setInterval(update, 1000); + isRunning = true; + } + draw(); + } +}); |