yay

src/App.tsx

@@ -60,26 +60,19 @@ function App() {
 
   // Handle keyboard events
   useEffect(() => {
-    const handleKeyPress = (e: KeyboardEvent) => {
+    // Remove the local event listener since we're now handling events globally
-      // Only allow clicks after terms are accepted and modal is closed
+    // This listener is no longer needed
-      if (hasStarted) {
+    
-        console.log('Key pressed:', e.key);
+    return () => {}
-        playClickSound(); // Play click sound
-        click();
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyPress)
-    return () => window.removeEventListener('keydown', handleKeyPress)
   }, [click, hasStarted])
 
-  // Handle clicks anywhere in the game
+  // This is now handled globally, but we'll keep a simpler version
+  // for UI feedback only (cursor change, etc)
   const handleClick = (e: React.MouseEvent) => {
-    // Only allow clicks after terms are accepted and modal is closed
+    // Don't call click() here as it's now handled globally
+    // Just for visual feedback
     if (hasStarted) {
-      console.log('Mouse clicked');
+      console.log('App container clicked - handled by global handler');
-      playClickSound(); // Play click sound
-      click();
     }
   }
 

src/main.tsx

@@ -1,10 +1,72 @@
-import { StrictMode } from 'react'
+import { StrictMode, useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import { useGameStore } from './store/gameStore'
+import { playClickSound, initAudio } from './utils/soundUtils'
+
+// Global click handler wrapper component
+function AppWithGlobalHandlers() {
+  // Track if the game has started to avoid handling clicks during the intro modal
+  const [gameStarted, setGameStarted] = useState(false);
+  
+  useEffect(() => {
+    // Check if game has started (look for non-zero points to determine if user has interacted)
+    const checkGameStatus = () => {
+      const gameState = useGameStore.getState();
+      // If points are greater than 0, the game has started
+      if (!gameStarted && gameState.points > 0) {
+        setGameStarted(true);
+      }
+    };
+    
+    // Check status initially and set up periodic checks
+    checkGameStatus();
+    const intervalId = setInterval(checkGameStatus, 1000);
+    
+    return () => clearInterval(intervalId);
+  }, [gameStarted]);
+
+  useEffect(() => {
+    const handleGlobalClick = (e: MouseEvent) => {
+      // Only trigger if game has started
+      const gameState = useGameStore.getState();
+      if ((gameStarted || gameState.points > 0) && gameState.playerLevel >= 1) {
+        playClickSound();
+        gameState.click();
+      }
+    };
+
+    const handleGlobalKeyPress = (e: KeyboardEvent) => {
+      // Only trigger if game has started
+      const gameState = useGameStore.getState();
+      if ((gameStarted || gameState.points > 0) && gameState.playerLevel >= 1) {
+        playClickSound();
+        gameState.click();
+      }
+    };
+
+    // Add global event listeners
+    document.addEventListener('click', handleGlobalClick);
+    document.addEventListener('keydown', handleGlobalKeyPress);
+
+    // Clean up on unmount
+    return () => {
+      document.removeEventListener('click', handleGlobalClick);
+      document.removeEventListener('keydown', handleGlobalKeyPress);
+    };
+  }, [gameStarted]);
+
+  // Initialize audio when component mounts
+  useEffect(() => {
+    initAudio();
+  }, []);
+
+  return <App />;
+}
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <AppWithGlobalHandlers />
   </StrictMode>,
 )