diff --git a/src/App.tsx b/src/App.tsx
index aa73f85..346d34f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -60,26 +60,19 @@ function App() {
// Handle keyboard events
useEffect(() => {
- const handleKeyPress = (e: KeyboardEvent) => {
- // Only allow clicks after terms are accepted and modal is closed
- if (hasStarted) {
- console.log('Key pressed:', e.key);
- playClickSound(); // Play click sound
- click();
- }
- }
-
- window.addEventListener('keydown', handleKeyPress)
- return () => window.removeEventListener('keydown', handleKeyPress)
+ // Remove the local event listener since we're now handling events globally
+ // This listener is no longer needed
+
+ return () => {}
}, [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');
- playClickSound(); // Play click sound
- click();
+ console.log('App container clicked - handled by global handler');
}
}
diff --git a/src/main.tsx b/src/main.tsx
index bef5202..347d65b 100644
--- a/src/main.tsx
+++ b/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 ;
+}
createRoot(document.getElementById('root')!).render(
-
+
,
)