From c5ea9142790bee27af3c87c948151342a2989b72 Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Sun, 10 Aug 2025 22:43:54 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui-420):=20Mehr=20Brokkoli=20=E2=80=93=20v?=
 =?UTF-8?q?on=206=20auf=2020,=20zuf=C3=A4llige=20Position/Delay/Dauer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 90bbab5..5032d73 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -47,6 +47,19 @@ export default function App() {
     return `https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/${codePoints}.svg`;
   }
   const [showBroccoli, setShowBroccoli] = useState<boolean>(false);
+  const broccoliItems = useMemo(() => {
+    if (!(theme === '420' && showBroccoli)) return [] as Array<{top:number; left:number; duration:number; delay:number}>;
+    const items: Array<{top:number; left:number; duration:number; delay:number}> = [];
+    for (let i = 0; i < 20; i += 1) {
+      items.push({
+        top: 5 + Math.random() * 90,      // 5%..95%
+        left: 2 + Math.random() * 96,     // 2%..98%
+        duration: 14 + Math.random() * 14, // 14s..28s
+        delay: Math.random() * 2          // 0..2s
+      });
+    }
+    return items;
+  }, [theme, showBroccoli]);
   const [partyActiveGuilds, setPartyActiveGuilds] = useState<string[]>([]);
   const selectedCount = useMemo(() => Object.values(selectedSet).filter(Boolean).length, [selectedSet]);
   const [clock, setClock] = useState<string>(() => new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Berlin' }).format(new Date()));
@@ -334,12 +347,15 @@ export default function App() {
         {/* Floating Broccoli for 420 Theme */}
         {theme === '420' && showBroccoli && (
           <>
-            <div className="broccoli">🥦</div>
-            <div className="broccoli">🥦</div>
-            <div className="broccoli">🥦</div>
-            <div className="broccoli">🥦</div>
-            <div className="broccoli">🥦</div>
-            <div className="broccoli">🥦</div>
+            {broccoliItems.map((b, idx) => (
+              <div
+                key={idx}
+                className="broccoli"
+                style={{ top: `${b.top}%`, left: `${b.left}%`, animationDuration: `${b.duration}s`, animationDelay: `${b.delay}s` }}
+              >
+                🥦
+              </div>
+            ))}
           </>
         )}
         <header className="flex items-center justify-between p-6">