Add matrix effect toggle

Expose matrixEnabled in SettingsContext and SettingsPanel, persist to localStorage, and conditionally render MatrixRain across UI, mirroring CRT toggle behavior. Also adapt Index and Index-related pages to respect new setting.

X-Lovable-Edit-ID: edt-b0f8ec37-ee25-4b74-bdeb-5bed8ace73da

src/components/SettingsPanel.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Settings, Monitor, Volume2, Cpu, X, Contrast } from 'lucide-react';
+import { Settings, Monitor, Volume2, Cpu, X, Contrast, Binary } from 'lucide-react';
 import { useSettings } from '@/contexts/SettingsContext';
 import { useAchievements } from '@/contexts/AchievementsContext';
 import CryptoConsentModal from './CryptoConsentModal';
@@ -13,7 +13,7 @@ interface SettingsPanelProps {
 const SettingsPanel = ({ onToggleTheme, isRedTheme }: SettingsPanelProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [showCryptoModal, setShowCryptoModal] = useState(false);
-  const { crtEnabled, setCrtEnabled, soundEnabled, setSoundEnabled, cryptoConsent, playSound } = useSettings();
+  const { crtEnabled, setCrtEnabled, matrixEnabled, setMatrixEnabled, soundEnabled, setSoundEnabled, cryptoConsent, playSound } = useSettings();
   const { unlockAchievement } = useAchievements();
 
   const handleToggle = (setter: (value: boolean) => void, currentValue: boolean, achievementId?: string) => {
@@ -89,6 +89,26 @@ const SettingsPanel = ({ onToggleTheme, isRedTheme }: SettingsPanelProps) => {
                 </button>
               </div>
 
+              {/* Matrix Rain Toggle */}
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Binary size={16} className="text-primary" />
+                  <span className="font-pixel text-sm text-foreground/90">Matrix Rain</span>
+                </div>
+                <button
+                  onClick={() => handleToggle(setMatrixEnabled, matrixEnabled)}
+                  className={`w-12 h-6 rounded-full border border-primary transition-all duration-300 ${
+                    matrixEnabled ? 'bg-primary' : 'bg-transparent'
+                  }`}
+                >
+                  <div
+                    className={`w-4 h-4 rounded-full bg-background border border-primary transition-transform duration-300 ${
+                      matrixEnabled ? 'translate-x-6' : 'translate-x-1'
+                    }`}
+                  />
+                </button>
+              </div>
+
               {/* Sound Toggle */}
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">

src/contexts/SettingsContext.tsx

@@ -6,6 +6,8 @@ type SoundType = 'click' | 'beep' | 'hover' | 'boot' | 'success' | 'error';
 interface SettingsContextType {
   crtEnabled: boolean;
   setCrtEnabled: (enabled: boolean) => void;
+  matrixEnabled: boolean;
+  setMatrixEnabled: (enabled: boolean) => void;
   soundEnabled: boolean;
   setSoundEnabled: (enabled: boolean) => void;
   cryptoConsent: boolean | null;
@@ -33,6 +35,11 @@ export const SettingsProvider = ({ children }: { children: ReactNode }) => {
     const saved = localStorage.getItem('crtEnabled');
     return saved !== null ? JSON.parse(saved) : true;
   });
+
+  const [matrixEnabled, setMatrixEnabled] = useState(() => {
+    const saved = localStorage.getItem('matrixEnabled');
+    return saved !== null ? JSON.parse(saved) : true;
+  });
   
   const [soundEnabled, setSoundEnabled] = useState(() => {
     const saved = localStorage.getItem('soundEnabled');
@@ -183,6 +190,10 @@ export const SettingsProvider = ({ children }: { children: ReactNode }) => {
     localStorage.setItem('crtEnabled', JSON.stringify(crtEnabled));
   }, [crtEnabled]);
 
+  useEffect(() => {
+    localStorage.setItem('matrixEnabled', JSON.stringify(matrixEnabled));
+  }, [matrixEnabled]);
+
   useEffect(() => {
     localStorage.setItem('soundEnabled', JSON.stringify(soundEnabled));
   }, [soundEnabled]);
@@ -276,6 +287,8 @@ export const SettingsProvider = ({ children }: { children: ReactNode }) => {
       value={{
         crtEnabled,
         setCrtEnabled,
+        matrixEnabled,
+        setMatrixEnabled,
         soundEnabled,
         setSoundEnabled,
         cryptoConsent,

src/pages/Index.tsx

@@ -39,6 +39,7 @@ const Index = () => {
   
   const { 
     crtEnabled, 
+    matrixEnabled,
     playSound, 
     cryptoConsent, 
     showAudioOverlay, 
@@ -131,7 +132,7 @@ const Index = () => {
   if (!isVerified) {
     return (
       <div className={`min-h-screen overflow-x-hidden ${crtEnabled ? 'crt' : ''}`}>
-        <MatrixRain color={isRedTheme ? '#FF0000' : '#00FF00'} />
+        {matrixEnabled && <MatrixRain color={isRedTheme ? '#FF0000' : '#00FF00'} />}
         <Suspense fallback={null}>
           <HumanVerification onVerified={handleVerified} />
         </Suspense>
@@ -142,7 +143,7 @@ const Index = () => {
   return (
     <div className={`min-h-screen overflow-x-hidden ${crtEnabled ? 'crt' : ''} ${konamiActive ? 'konami-active' : ''}`}>
       <MatrixCursor />
-      <MatrixRain color={isRedTheme ? '#FF0000' : '#00FF00'} />
+      {matrixEnabled && <MatrixRain color={isRedTheme ? '#FF0000' : '#00FF00'} />}
       <LoadingScreen isLoading={isLoading} />
       
       {/* Audio blocked overlay */}