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( - + , )