Nightly: CHAOS-Button hinzugefügt - spielt zufällige Sounds alle 2-6 Minuten ab

web/src/App.tsx

@@ -27,6 +27,8 @@ export default function App() {
   const [clock, setClock] = useState<string>(() => new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Berlin' }).format(new Date()));
   const [totalPlays, setTotalPlays] = useState<number>(0);
   const [mediaUrl, setMediaUrl] = useState<string>('');
+  const [chaosMode, setChaosMode] = useState<boolean>(false);
+  const chaosIntervalRef = useRef<number | null>(null);
 
   useEffect(() => {
     (async () => {
@@ -165,6 +167,69 @@ export default function App() {
     }
   }
 
+  // CHAOS Mode Funktionen
+  const startChaosMode = async () => {
+    if (!selected || !sounds.length) return;
+    
+    const playRandomSound = async () => {
+      const randomSound = sounds[Math.floor(Math.random() * sounds.length)];
+      const [guildId, channelId] = selected.split(':');
+      try {
+        await playSound(randomSound.name, guildId, channelId, volume, randomSound.relativePath);
+      } catch (e: any) {
+        console.error('Chaos sound play failed:', e);
+      }
+    };
+
+    // Sofort ersten Sound abspielen
+    await playRandomSound();
+
+    // Interval für weitere zufällige Sounds (2-6 Minuten)
+    const interval = setInterval(async () => {
+      if (chaosMode) {
+        await playRandomSound();
+      }
+    }, Math.random() * (6 - 2) * 60 * 1000 + 2 * 60 * 1000); // 2-6 Minuten
+
+    chaosIntervalRef.current = interval;
+  };
+
+  const stopChaosMode = async () => {
+    if (chaosIntervalRef.current) {
+      clearInterval(chaosIntervalRef.current);
+      chaosIntervalRef.current = null;
+    }
+    
+    // Alle Sounds stoppen (wie Panic Button)
+    if (selected) {
+      const [guildId] = selected.split(':');
+      try {
+        await fetch(`/api/stop?guildId=${encodeURIComponent(guildId)}`, { method: 'POST' });
+      } catch (e: any) {
+        console.error('Chaos stop failed:', e);
+      }
+    }
+  };
+
+  const toggleChaosMode = async () => {
+    if (chaosMode) {
+      setChaosMode(false);
+      await stopChaosMode();
+    } else {
+      setChaosMode(true);
+      await startChaosMode();
+    }
+  };
+
+  // Cleanup bei Komponenten-Unmount
+  useEffect(() => {
+    return () => {
+      if (chaosIntervalRef.current) {
+        clearInterval(chaosIntervalRef.current);
+      }
+    };
+  }, []);
+
   return (
     <ErrorBoundary>
       <div className="container mx-auto" data-theme={theme}>
@@ -204,6 +269,16 @@ export default function App() {
               <button className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300" onClick={async () => {
                 try { const res = await fetch('/api/sounds'); const data = await res.json(); const items = data?.items || []; if (!items.length || !selected) return; const rnd = items[Math.floor(Math.random()*items.length)]; const [guildId, channelId] = selected.split(':'); await playSound(rnd.name, guildId, channelId, volume, rnd.relativePath);} catch {}
               }}>Random</button>
+              <button 
+                className={`font-bold py-3 px-6 rounded-lg transition duration-300 ${
+                  chaosMode 
+                    ? 'bg-red-600 hover:bg-red-700 text-white' 
+                    : 'bg-gray-700 hover:bg-gray-600 text-white'
+                }`} 
+                onClick={toggleChaosMode}
+              >
+                {chaosMode ? 'CHAOS ON' : 'CHAOS OFF'}
+              </button>
               <button className="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300" onClick={async () => { if (!selected) return; const [guildId] = selected.split(':'); await fetch(`/api/stop?guildId=${encodeURIComponent(guildId)}`, { method:'POST' }); }}>Panic</button>
             </div>
           </div>