From 3f59fa78cd3b4224431081f8a08a223326eb3634 Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 06:11:12 +0200
Subject: [PATCH] Make rain controls and music player modules toggleable

---
 src/components/SubpageRain.astro | 81 ++++++++++++++++++--------------
 1 file changed, 46 insertions(+), 35 deletions(-)

diff --git a/src/components/SubpageRain.astro b/src/components/SubpageRain.astro
index 320b74f..ff0fd99 100644
--- a/src/components/SubpageRain.astro
+++ b/src/components/SubpageRain.astro
@@ -13,6 +13,8 @@ window.rainData = function() {
         filterNode: null,
         gainNode: null,
         player: null,
+        rainOpen: true,
+        musicOpen: true,
         
         generateDrops(val) { 
             this.drops = []; 
@@ -61,7 +63,6 @@ window.rainData = function() {
             if (window.YT && window.YT.Player) {
                 this.initPlayer();
             } else {
-                // Skript dynamisch laden
                 let tag = document.createElement('script');
                 tag.src = "https://www.youtube.com/iframe_api";
                 let firstScriptTag = document.getElementsByTagName('script')[0];
@@ -88,21 +89,16 @@ window.rainData = function() {
                 },
                 events: {
                     'onReady': (event) => {
-                        // Versuche unmuted abzuspielen
                         let promise = event.target.playVideo();
-                        // Manche Browser geben ein Promise zurück
                         if (promise && promise.catch) {
                             promise.catch(() => {
-                                // Blockiert! Versuche gemutet.
                                 event.target.mute();
                                 event.target.playVideo();
                             });
                         }
                     },
                     'onStateChange': (event) => {
-                        // Wenn der Player nicht spielt obwohl er sollte
                         if (event.data === YT.PlayerState.UNSTARTED || event.data === YT.PlayerState.PAUSED) {
-                            // Erneuter Versuch, falls geblockt
                             setTimeout(() => {
                                 if (this.player.getPlayerState() !== YT.PlayerState.PLAYING) {
                                     this.player.mute();
@@ -151,43 +147,58 @@ window.rainData = function() {
             <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Regen für Gemütlichkeit</h1>
         </div>
 
-        <!-- Controls -->
-        <div class="glass p-8 rounded-2xl border border-stone-800 space-y-6">
-            <!-- Intensity -->
-            <div>
-                <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Regen-Intensität: <span x-text="rainIntensity" class="text-emerald-400"></span> Tropfen</label>
-                <input type="range" min="0" max="200" x-model="rainIntensity" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
+        <!-- Controls (Togglebar) -->
+        <div class="glass p-8 rounded-2xl border border-stone-800">
+            <div class="flex justify-between items-center cursor-pointer select-none" @click="rainOpen = !rainOpen">
+                <div>
+                    <span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Regen-Steuerung</span>
+                    <span class="text-xs text-stone-500 block mt-1">Intensität, Wind und Filter</span>
+                </div>
+                <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180': rainOpen }"></i>
             </div>
             
-            <!-- Wind -->
-            <div>
-                <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Windstärke (Neigung): <span x-text="wind" class="text-emerald-400"></span>°</label>
-                <input type="range" min="-45" max="45" x-model="wind" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
-            </div>
+            <div x-show="rainOpen" x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-6 mt-6 pt-6 border-t border-stone-800">
+                <!-- Intensity -->
+                <div>
+                    <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Regen-Intensität: <span x-text="rainIntensity" class="text-emerald-400"></span> Tropfen</label>
+                    <input type="range" min="0" max="200" x-model="rainIntensity" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
+                </div>
+                
+                <!-- Wind -->
+                <div>
+                    <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Windstärke (Neigung): <span x-text="wind" class="text-emerald-400"></span>°</label>
+                    <input type="range" min="-45" max="45" x-model="wind" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
+                </div>
 
-            <!-- Lofi Filter -->
-            <div>
-                <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Lofi-Filter (Muffigkeit): <span x-text="lofiFilter" class="text-emerald-400"></span> Hz</label>
-                <input type="range" min="200" max="2000" x-model="lofiFilter" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
-            </div>
-            
-            <div class="flex justify-between text-xs text-stone-600 font-mono pt-4 border-t border-stone-800">
-                <span>Sound läuft automatisch</span>
-                <span class="text-emerald-400">Realtime Web Audio Rain</span>
+                <!-- Lofi Filter -->
+                <div>
+                    <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Lofi-Filter (Muffigkeit): <span x-text="lofiFilter" class="text-emerald-400"></span> Hz</label>
+                    <input type="range" min="200" max="2000" x-model="lofiFilter" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
+                </div>
+                
+                <div class="flex justify-between text-xs text-stone-600 font-mono pt-4 border-t border-stone-800">
+                    <span>Sound läuft automatisch</span>
+                    <span class="text-emerald-400">Realtime Web Audio Rain</span>
+                </div>
             </div>
         </div>
 
-        <!-- YouTube Player with Vocals/Diverse Beats -->
-        <div class="glass p-6 rounded-2xl border border-stone-800 space-y-4">
-            <div>
-                <span class="block text-xs font-mono text-stone-500 uppercase mb-1 tracking-widest">Musik (Lofi mit Vocals)</span>
-                <span class="text-xs text-stone-400">Echte Tracks für mehr Vielfalt & Gesang</span>
+        <!-- YouTube Player (Togglebar) -->
+        <div class="glass p-6 rounded-2xl border border-stone-800">
+            <div class="flex justify-between items-center cursor-pointer select-none" @click="musicOpen = !musicOpen">
+                <div>
+                    <span class="block text-xs font-mono text-emerald-500 uppercase mb-1 tracking-widest">Musik (Lofi mit Vocals)</span>
+                    <span class="text-xs text-stone-400">Echte Tracks für mehr Vielfalt & Gesang</span>
+                </div>
+                <i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180': musicOpen }"></i>
             </div>
-            <div class="rounded-lg overflow-hidden border border-stone-800 aspect-video bg-stone-900">
-                <!-- Der Player wird hier von der API eingefügt -->
-                <div id="lofi-player"></div>
+            
+            <div x-show="musicOpen" x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-4 mt-6 pt-6 border-t border-stone-800">
+                <div class="rounded-lg overflow-hidden border border-stone-800 aspect-video bg-stone-900">
+                    <div id="lofi-player"></div>
+                </div>
+                <p class="text-xs text-stone-500 leading-relaxed">Browser blockieren Autoplay oft. Die KI versucht zuerst mit Ton abzuspielen. Falls das fehlschlägt, wird das Video stummgeschaltet automatisch gestartet. Du kannst den Ton dann einfach am Player aktivieren!</p>
             </div>
-            <p class="text-xs text-stone-500 leading-relaxed">Browser blockieren Autoplay oft. Die KI versucht zuerst mit Ton abzuspielen. Falls das fehlschlägt, wird das Video stummgeschaltet automatisch gestartet. Du kannst den Ton dann einfach am Player aktivieren!</p>
         </div>
 
         <!-- Content -->