1 files changed, 41 insertions, 21 deletions

diff --git a/js/pomo/pomo.js b/js/pomo/pomo.js
index 716d98b..a5b793f 100644
--- a/js/pomo/pomo.js
+++ b/js/pomo/pomo.js
@@ -24,27 +24,35 @@ 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);
 
-    ctx.fillStyle = 'black';
-    ctx.font = '30px Arial';
-    ctx.textAlign = 'center';
     if (isPaused) {
-        ctx.fillText('Paused', canvas.width / 2, canvas.height / 2);
+        displayText('Paused');
     } else if (progress === duration) {
-        ctx.fillText('🍅', canvas.width / 2, canvas.height / 2);
-         new Notification('Pomo', {
+        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);
-        ctx.fillText(`${minutes}:${seconds}`, canvas.width / 2, canvas.height / 2);
+        displayText(`${minutes}:${seconds}`);
     }
 };
 
@@ -58,20 +66,32 @@ const update = () => {
     }
 };
 
-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;
+const handleUserInteraction = () => {
+    if (isRunning) {
+        clearInterval(intervalId);
+        isRunning = false;
+        isPaused = true;
+    } else {
+        if (progress === duration) {
+            progress = 0;
         }
-        draw();
+        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();
+});