added shake to Fumble. Works on Android, Doesn't work on iOS yet.

index.html

@@ -152,6 +152,82 @@
                 modal.classList.remove('show');
             }
         });
+
+        // Add shake detection
+        let lastX = 0;
+        let lastY = 0;
+        let lastZ = 0;
+        let lastUpdate = 0;
+        const shakeThreshold = 15; // Adjust sensitivity
+        const shakeTimeout = 1000; // Prevent multiple shakes
+        let lastShake = 0;
+
+        function handleMotion(event) {
+            const current = event.accelerationIncludingGravity;
+            const currentTime = new Date().getTime();
+            const timeDiff = currentTime - lastUpdate;
+            
+            if (timeDiff > 100) {
+                const deltaX = Math.abs(current.x - lastX);
+                const deltaY = Math.abs(current.y - lastY);
+                const deltaZ = Math.abs(current.z - lastZ);
+
+                if (((deltaX > shakeThreshold && deltaY > shakeThreshold) || 
+                     (deltaX > shakeThreshold && deltaZ > shakeThreshold) || 
+                     (deltaY > shakeThreshold && deltaZ > shakeThreshold)) && 
+                    (currentTime - lastShake > shakeTimeout)) {
+                    
+                    // Vibrate if available
+                    if ('vibrate' in navigator) {
+                        navigator.vibrate(200);
+                    }
+                    
+                    fumble();
+                    lastShake = currentTime;
+                }
+
+                lastX = current.x;
+                lastY = current.y;
+                lastZ = current.z;
+                lastUpdate = currentTime;
+            }
+        }
+
+        // Request permission and start shake detection on mobile
+        function initShakeDetection() {
+            if (typeof DeviceMotionEvent.requestPermission === 'function') {
+                // iOS 13+ requires permission
+                DeviceMotionEvent.requestPermission()
+                    .then(permissionState => {
+                        if (permissionState === 'granted') {
+                            window.addEventListener('devicemotion', handleMotion);
+                        }
+                    })
+                    .catch(console.error);
+            } else {
+                // Non iOS 13+ devices
+                window.addEventListener('devicemotion', handleMotion);
+            }
+        }
+
+        // Initialize shake detection when page loads
+        if ('DeviceMotionEvent' in window) {
+            // Add a button to request permission on iOS
+            if (typeof DeviceMotionEvent.requestPermission === 'function') {
+                const modal = document.getElementById('helpModal');
+                const modalContent = modal.querySelector('.modal-content');
+                
+                const permissionButton = document.createElement('button');
+                permissionButton.textContent = 'Enable Shake to Fumble';
+                permissionButton.className = 'permission-button';
+                permissionButton.addEventListener('click', initShakeDetection);
+                
+                modalContent.appendChild(permissionButton);
+            } else {
+                // Automatically start for non-iOS devices
+                initShakeDetection();
+            }
+        }
     </script>
 </body>
 </html> 

styles.css

@@ -411,4 +411,35 @@ html, body {
 button {
     min-width: 44px;
     min-height: 44px;
+}
+
+.permission-button {
+    display: block;
+    margin: 20px auto 0;
+    padding: 10px 20px;
+    background-color: #ff4500;
+    color: white;
+    border: none;
+    border-radius: 20px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.dark-mode .permission-button {
+    background-color: #ff6b4a;
+}
+
+.permission-button:hover {
+    background-color: #ff5722;
+}
+
+@media (hover: none) {
+    .permission-button:hover {
+        background-color: #ff4500;
+    }
+    
+    .dark-mode .permission-button:hover {
+        background-color: #ff6b4a;
+    }
 }