diff --git a/index.html b/index.html index 689d234..f2c1199 100644 --- a/index.html +++ b/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(); + } + } \ No newline at end of file diff --git a/styles.css b/styles.css index b7489a6..8343c4d 100644 --- a/styles.css +++ b/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; + } } \ No newline at end of file