Changes

src/pages/Index.tsx

@@ -9,6 +9,7 @@ import { useSettings } from '@/contexts/SettingsContext';
 import { useAchievements } from '@/contexts/AchievementsContext';
 import { useKonamiCode } from '@/hooks/useKonamiCode';
 import { toast } from '@/hooks/use-toast';
+import { AudioBlockedOverlay } from '@/components/AudioBlockedOverlay';
 
 // Lazy load conditionally rendered components to reduce initial bundle
 const HumanVerification = lazy(() => import('@/components/HumanVerification'));
@@ -33,8 +34,17 @@ const Index = () => {
   });
   const [showConsentModal, setShowConsentModal] = useState(false);
   const [konamiActive, setKonamiActive] = useState(false);
-  const [audioPromptDismissed, setAudioPromptDismissed] = useState(false);
-  const { crtEnabled, playSound, cryptoConsent, audioBlocked, resetAudioContext, setSoundEnabled } = useSettings();
+  
+  const { 
+    crtEnabled, 
+    playSound, 
+    cryptoConsent, 
+    showAudioOverlay, 
+    enableAudio, 
+    disableAudio,
+    soundEnabled,
+    setSoundEnabled 
+  } = useSettings();
   const { unlockAchievement } = useAchievements();
   const { activated: konamiActivated, reset: resetKonami } = useKonamiCode();
   const location = useLocation();
@@ -87,39 +97,6 @@ const Index = () => {
     return () => clearTimeout(timer);
   }, [cryptoConsent]);
 
-  // Show audio blocked prompt
-  useEffect(() => {
-    if (audioBlocked && !audioPromptDismissed) {
-      toast({
-        title: "Sound Effects Blocked",
-        description: "Click anywhere or disable sounds in settings",
-        action: (
-          <div className="flex gap-2">
-            <button 
-              onClick={() => {
-                resetAudioContext();
-                setAudioPromptDismissed(true);
-              }}
-              className="px-2 py-1 text-xs border border-primary rounded hover:bg-primary/20"
-            >
-              Retry
-            </button>
-            <button 
-              onClick={() => {
-                setSoundEnabled(false);
-                setAudioPromptDismissed(true);
-              }}
-              className="px-2 py-1 text-xs border border-primary rounded hover:bg-primary/20"
-            >
-              Disable
-            </button>
-          </div>
-        ),
-        duration: 10000,
-      });
-    }
-  }, [audioBlocked, audioPromptDismissed, resetAudioContext, setSoundEnabled]);
-
   useEffect(() => {
     if (isRedTheme) {
       document.documentElement.classList.add('red-theme');
@@ -163,6 +140,14 @@ const Index = () => {
       <MatrixRain color={isRedTheme ? '#FF0000' : '#00FF00'} />
       <LoadingScreen isLoading={isLoading} />
       
+      {/* Audio blocked overlay */}
+      {showAudioOverlay && soundEnabled && (
+        <AudioBlockedOverlay 
+          onEnableAudio={enableAudio} 
+          onDisableAudio={disableAudio} 
+        />
+      )}
+      
       {/* Moving scanline - only visible when CRT is enabled */}
       <div className="moving-scanline" />