bugfix

app/page.tsx

@@ -1,15 +1,20 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+import { useIsMobile } from './hooks/useIsMobile';
 import Image from 'next/image';
 import { FloatingHearts } from './components/FloatingHearts';
+import { ThemeToggle } from './components/ThemeToggle';
+import { SpeechBubble } from './components/SpeechBubble';
+import { shakeConfig } from './config/shake';
 
 export default function Home() {
   const [isShaken, setIsShaken] = useState(false);
   const [shakeIntensity, setShakeIntensity] = useState(0);
   const [lastUpdate, setLastUpdate] = useState(0);
+  const [shakeCount, setShakeCount] = useState(0);
   const [motionPermission, setMotionPermission] = useState<PermissionState>('prompt');
-  const shakeThreshold = 15;
+  const isMobile = useIsMobile();
 
   // Check if device motion is available and handle permissions
   const requestMotionPermission = async () => {
@@ -37,24 +42,27 @@ export default function Home() {
     }
   };
 
-  const triggerShake = (intensity: number) => {
+  const triggerShake = useCallback((intensity: number) => {
+    // Increment shake counter to trigger new message
+    setShakeCount(count => count + 1);
+    
     // Start shake animation
     setIsShaken(true);
     
-    // Always reset shake after 500ms
+    // Reset shake after configured duration
     setTimeout(() => {
       setIsShaken(false);
-    }, 500);
+    }, shakeConfig.animations.shakeReset);
     
-    // Trigger hearts with a shorter duration
+    // Trigger hearts with configured duration
     setShakeIntensity(intensity);
-    setTimeout(() => setShakeIntensity(0), 300);
-  };
+    setTimeout(() => setShakeIntensity(0), shakeConfig.animations.heartsReset);
+  }, []);
 
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
       if (event.code === 'Space') {
-        triggerShake(25);
+        triggerShake(shakeConfig.defaultTriggerIntensity);
       }
     };
 
@@ -65,14 +73,14 @@ export default function Home() {
       const currentTime = new Date().getTime();
       const timeDiff = currentTime - lastUpdate;
 
-      if (timeDiff > 100) {
+      if (timeDiff > shakeConfig.debounceTime) {
         setLastUpdate(currentTime);
 
         const speed = Math.abs(acceleration.x || 0) + 
                      Math.abs(acceleration.y || 0) + 
                      Math.abs(acceleration.z || 0);
 
-        if (speed > shakeThreshold) {
+        if (speed > shakeConfig.threshold) {
           triggerShake(speed);
         }
       }
@@ -102,40 +110,61 @@ export default function Home() {
   }, []);
 
   const handleClick = () => {
-    triggerShake(25);
+    triggerShake(shakeConfig.defaultTriggerIntensity);
   };
 
   return (
-    <main className="flex h-[100dvh] flex-col items-center justify-center p-4 bg-green-50 dark:bg-slate-900">
-      <div 
-        className={`relative ${isShaken ? 'animate-shake' : ''} z-10`}
-        onClick={handleClick}
-      >
-        <FloatingHearts intensity={shakeIntensity} />
-        <Image
-          src={isShaken ? '/images/frog-shaken.svg' : '/images/frog.svg'}
-          alt="Frog"
-          width={200}
-          height={200}
-          priority
-        />
-      </div>
-      <div className="mt-8 flex flex-col items-center gap-2">
-        <p className="text-gray-600 dark:text-gray-400 text-center max-w-[240px]">
-          {motionPermission === 'prompt' ? (
-            <button 
-              onClick={requestMotionPermission}
-              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
-            >
-              Enable device shake
-            </button>
-          ) : motionPermission === 'granted' ? (
-            "Shake your device, press spacebar, or click/tap frog!"
-          ) : (
-            "Press spacebar or click/tap frog!"
-          )}
-        </p>
+    <main className="flex h-[100dvh] flex-col items-center justify-between p-4 bg-green-50 dark:bg-slate-900 relative">
+      <ThemeToggle />
+      <div className="flex-1 flex flex-col items-center justify-center w-full relative">
+        <div className="fixed inset-0 overflow-hidden pointer-events-none">
+          <FloatingHearts intensity={shakeIntensity} />
+        </div>
+        <div 
+          className="relative z-10"
+          onClick={handleClick}
+        >
+          <FloatingHearts intensity={shakeIntensity} />
+          <div className="relative">
+            <SpeechBubble isShaken={isShaken} triggerCount={shakeCount} />
+            <Image
+              src={isShaken ? '/images/frog-shaken.svg' : '/images/frog.svg'}
+              alt="Frog"
+              width={200}
+              height={200}
+              priority
+              className={isShaken ? 'animate-shake' : ''}
+            />
+          </div>
+        </div>
+        <div className="mt-8 flex flex-col items-center gap-2">
+          <p className="text-gray-600 dark:text-gray-400 text-center max-w-[240px]">
+            {motionPermission === 'prompt' ? (
+              <button 
+                onClick={requestMotionPermission}
+                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+              >
+                Enable device shake
+              </button>
+            ) : motionPermission === 'granted' ? (
+              `Shake your device${!isMobile ? ', press spacebar,' : ''} or click/tap frog!`
+            ) : (
+              `${!isMobile ? 'Press spacebar or ' : ''}Click/tap frog!`
+            )}
+          </p>
+        </div>
       </div>
+      <footer className="w-full text-center text-xs text-gray-400 dark:text-gray-600 mt-auto pt-4">
+        © {new Date().getFullYear()}{' '}
+        <a 
+          href="https://github.com/HugeFrog24/shakethefrog"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:text-gray-600 dark:hover:text-gray-400 transition-colors"
+        >
+          shakethefrog
+        </a>
+      </footer>
     </main>
   );
 }