initil

app/components/FloatingHearts.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { HeartIcon } from '@heroicons/react/24/solid';
+
+interface Heart {
+  id: number;
+  angle: number;
+  speed: number;
+  startPosition: { x: number; y: number };
+  scale: number;
+}
+
+interface FloatingHeartsProps {
+  intensity: number;
+}
+
+export function FloatingHearts({ intensity }: FloatingHeartsProps) {
+  const [hearts, setHearts] = useState<Heart[]>([]);
+
+  useEffect(() => {
+    if (intensity <= 0) return;
+
+    // Number of hearts based on intensity
+    const numHearts = Math.min(Math.floor(intensity * 2), 50);
+
+    // Create waves of hearts
+    const waves = 4; // Number of waves
+    const heartsPerWave = Math.ceil(numHearts / waves);
+    const waveDelay = 200; // Delay between waves in ms
+    const timers: NodeJS.Timeout[] = [];
+
+    // Generate hearts in waves
+    for (let wave = 0; wave < waves; wave++) {
+      const timer = setTimeout(() => {
+        const newHearts = Array.from({ length: heartsPerWave }, (_, i) => {
+          const totalIndex = wave * heartsPerWave + i;
+          return {
+            id: Date.now() + totalIndex,
+            // Distribute angles evenly within each wave
+            angle: Math.random() * 360, // Random angle for full radial distribution
+            speed: 0.8 + Math.random() * 0.4,
+            startPosition: {
+              x: Math.random() * 40 - 20,
+              y: Math.random() * 40 - 20,
+            },
+            scale: 0.8 + Math.random() * 0.4,
+          };
+        });
+
+        setHearts(prev => [...prev, ...newHearts]);
+      }, wave * waveDelay);
+
+      timers.push(timer);
+    }
+
+    // Remove hearts after animation completes
+    const cleanupTimer = setTimeout(() => {
+      setHearts(prev => prev.filter(heart => heart.id > Date.now() - 3500));
+    }, waves * waveDelay + 3500);
+
+    timers.push(cleanupTimer);
+
+    return () => {
+      timers.forEach(timer => clearTimeout(timer));
+    };
+  }, [intensity]);
+
+  return (
+    <div className="absolute inset-0 pointer-events-none -z-10">
+      {hearts.map((heart) => {
+        const style = {
+          '--angle': `${heart.angle}deg`,
+          '--speed': `${heart.speed}`,
+          '--start-x': `${heart.startPosition.x}px`,
+          '--start-y': `${heart.startPosition.y}px`,
+          '--scale': heart.scale,
+        } as React.CSSProperties;
+
+        return (
+          <div
+            key={heart.id}
+            className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-float-heart"
+            style={style}
+          >
+            <HeartIcon 
+              className="w-16 h-16 text-pink-500 opacity-80 animate-fade-out" 
+              style={{ transform: `scale(var(--scale))` }}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

app/components/ThemeToggle.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useTheme } from '../providers/ThemeProvider';
+import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
+
+export function ThemeToggle() {
+  const { darkMode, toggleDarkMode } = useTheme();
+
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className="fixed top-4 right-4 p-2 rounded-full bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors"
+      aria-label="Toggle dark mode"
+    >
+      {darkMode ? (
+        <SunIcon className="w-6 h-6 text-yellow-500" />
+      ) : (
+        <MoonIcon className="w-6 h-6 text-gray-900" />
+      )}
+    </button>
+  );
+}

app/globals.css

@@ -0,0 +1,52 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Light mode styles */
+body {
+  background-color: rgb(240, 253, 244);
+  color: rgb(15, 23, 42);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Dark mode styles */
+:is(.dark body) {
+  background-color: rgb(15, 23, 42);
+  color: rgb(248, 250, 252);
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px) rotate(-5deg); }
+  75% { transform: translateX(5px) rotate(5deg); }
+}
+
+.animate-shake {
+  animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both 4;
+}
+
+@keyframes float-heart {
+  to {
+    transform: translate(
+      calc(var(--start-x) + (50vw * cos(var(--angle)))),
+      calc(var(--start-y) + (50vh * sin(var(--angle))))
+    ) scale(var(--scale));
+    opacity: 0;
+  }
+}
+
+.animate-float-heart {
+  animation: float-heart calc(2s * var(--speed)) ease-out forwards;
+}
+
+@keyframes fade-out {
+  to { opacity: 0; }
+}
+
+.animate-fade-out {
+  animation: fade-out 2s ease-out forwards;
+}

app/hooks/useDarkMode.ts

@@ -0,0 +1,34 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export function useDarkMode() {
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    // Check if user has a dark mode preference in localStorage
+    const isDark = localStorage.getItem('darkMode') === 'true';
+    // Check system preference if no localStorage value
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    setDarkMode(isDark ?? systemPrefersDark);
+
+    // Add listener for system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      if (localStorage.getItem('darkMode') === null) {
+        setDarkMode(e.matches);
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+    localStorage.setItem('darkMode', (!darkMode).toString());
+  };
+
+  return { darkMode, toggleDarkMode };
+}

app/layout.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import { ThemeProvider } from './providers/ThemeProvider'
+import { ThemeToggle } from './components/ThemeToggle'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Shake the Frog',
+  description: 'A fun interactive frog that reacts to shaking!',
+  icons: {
+    icon: '/images/frog.svg'
+  }
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.className} transition-colors`}>
+        <ThemeProvider>
+          <ThemeToggle />
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}

app/page.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
+import { FloatingHearts } from './components/FloatingHearts';
+
+export default function Home() {
+  const [isShaken, setIsShaken] = useState(false);
+  const [shakeIntensity, setShakeIntensity] = useState(0);
+  const [lastUpdate, setLastUpdate] = useState(0);
+  const [motionPermission, setMotionPermission] = useState<PermissionState>('prompt');
+  const shakeThreshold = 15;
+
+  // Check if device motion is available and handle permissions
+  const requestMotionPermission = async () => {
+    if (typeof window === 'undefined') return;
+
+    // Check if device motion is available
+    if (!('DeviceMotionEvent' in window)) {
+      setMotionPermission('denied');
+      return;
+    }
+
+    // Request permission on iOS devices
+    if ('requestPermission' in DeviceMotionEvent) {
+      try {
+        // @ts-expect-error - TypeScript doesn't know about requestPermission
+        const permission = await DeviceMotionEvent.requestPermission();
+        setMotionPermission(permission);
+      } catch (err) {
+        console.error('Error requesting motion permission:', err);
+        setMotionPermission('denied');
+      }
+    } else {
+      // Android or desktop - no permission needed
+      setMotionPermission('granted');
+    }
+  };
+
+  const triggerShake = (intensity: number) => {
+    // Start shake animation
+    setIsShaken(true);
+    
+    // Always reset shake after 500ms
+    setTimeout(() => {
+      setIsShaken(false);
+    }, 500);
+    
+    // Trigger hearts with a shorter duration
+    setShakeIntensity(intensity);
+    setTimeout(() => setShakeIntensity(0), 300);
+  };
+
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (event.code === 'Space') {
+        triggerShake(25);
+      }
+    };
+
+    const handleMotion = (event: DeviceMotionEvent) => {
+      const acceleration = event.accelerationIncludingGravity;
+      if (!acceleration) return;
+
+      const currentTime = new Date().getTime();
+      const timeDiff = currentTime - lastUpdate;
+
+      if (timeDiff > 100) {
+        setLastUpdate(currentTime);
+
+        const speed = Math.abs(acceleration.x || 0) + 
+                     Math.abs(acceleration.y || 0) + 
+                     Math.abs(acceleration.z || 0);
+
+        if (speed > shakeThreshold) {
+          triggerShake(speed);
+        }
+      }
+    };
+
+    // Only add motion listener if permission is granted
+    if (typeof window !== 'undefined') {
+      if (motionPermission === 'granted' && 'DeviceMotionEvent' in window) {
+        window.addEventListener('devicemotion', handleMotion);
+      }
+      window.addEventListener('keydown', handleKeyPress);
+    }
+
+    return () => {
+      if (typeof window !== 'undefined') {
+        if (motionPermission === 'granted') {
+          window.removeEventListener('devicemotion', handleMotion);
+        }
+        window.removeEventListener('keydown', handleKeyPress);
+      }
+    };
+  }, [lastUpdate, motionPermission, triggerShake]);
+
+  // Initial permission check
+  useEffect(() => {
+    requestMotionPermission();
+  }, []);
+
+  const handleClick = () => {
+    triggerShake(25);
+  };
+
+  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>
+      </div>
+    </main>
+  );
+}

app/providers/ThemeProvider.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { createContext, useContext, useEffect } from 'react';
+import { useDarkMode } from '../hooks/useDarkMode';
+
+const ThemeContext = createContext({ darkMode: false, toggleDarkMode: () => {} });
+
+export const useTheme = () => useContext(ThemeContext);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const { darkMode, toggleDarkMode } = useDarkMode();
+
+  useEffect(() => {
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [darkMode]);
+
+  return (
+    <ThemeContext.Provider value={{ darkMode, toggleDarkMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}