Session 7: Mobile touch optimizations and click button visual polish

js/game.js

@@ -47,11 +47,30 @@ const Game = {
      * Setup event listeners
      */
     setupEventListeners() {
-        // Harvest button
-        document.getElementById('harvest-btn').addEventListener('click', (e) => {
+        // Harvest button - support both click and touch
+        const harvestBtn = document.getElementById('harvest-btn');
+
+        harvestBtn.addEventListener('click', (e) => {
             this.harvest(e);
+            this.createRipple(harvestBtn, e);
+            this.animateClickButton(harvestBtn);
         });
 
+        // Touch support for better mobile experience
+        harvestBtn.addEventListener('touchstart', (e) => {
+            e.preventDefault(); // Prevent double-fire with click
+            const touch = e.touches[0];
+            const clickEvent = new MouseEvent('click', {
+                clientX: touch.clientX,
+                clientY: touch.clientY,
+                bubbles: true
+            });
+
+            // Create ripple effect for touch
+            this.createRipple(harvestBtn, { clientX: touch.clientX, clientY: touch.clientY });
+            this.animateClickButton(harvestBtn);
+        }, { passive: false });
+
         // Save buttons
         document.getElementById('save-btn').addEventListener('click', () => {
             this.save();
@@ -408,6 +427,34 @@ const Game = {
         if (num >= 1e6) return (num / 1e6).toFixed(2) + 'M';
         if (num >= 1e3) return (num / 1e3).toFixed(2) + 'K';
         return Math.floor(num).toLocaleString();
+    },
+
+    /**
+     * Create ripple effect on button click
+     */
+    createRipple(button, event) {
+        const ripple = document.createElement('span');
+        ripple.className = 'ripple';
+
+        const rect = button.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+        const x = event.clientX - rect.left - size / 2;
+        const y = event.clientY - rect.top - size / 2;
+
+        ripple.style.width = ripple.style.height = `${size}px`;
+        ripple.style.left = `${x}px`;
+        ripple.style.top = `${y}px`;
+
+        button.appendChild(ripple);
+        setTimeout(() => ripple.remove(), 600);
+    },
+
+    /**
+     * Animate click button with glow effect
+     */
+    animateClickButton(button) {
+        button.classList.add('clicked');
+        setTimeout(() => button.classList.remove('clicked'), 200);
     }
 };