ergaenze eine Konfetti-AnimationHEADmain

1 files changed, 30 insertions, 0 deletions

diff --git a/kuchenstand.js b/kuchenstand.js
index a3b8949..97c795e 100644
--- a/kuchenstand.js
+++ b/kuchenstand.js
@@ -102,6 +102,11 @@ function zeichne(klasse) {
   // Passe die Größe des Kuchens anhand des Streaks an
   const streak = streaks[klasse];
   const proportion = streak/streak_anzahl * 100;
+  if (proportion == 100) {
+    zeichneKonfetti();
+  } else {
+    versteckeKonfetti();
+  }
   kuchenVordergrund.style.maxWidth = `${proportion}%`;
   kuchenVordergrund.style.maxHeight = `${proportion}%`;
 
@@ -200,3 +205,28 @@ function listeStreakEreignisse(klasse) {
     liste.insertBefore(ereignisNode, liste.firstChild);
   }
 }
+
+function getRandomColor() {
+  const colors = ['#ff6347', '#ffa500', '#32cd32', '#1e90ff', '#ff69b4'];
+  return colors[Math.floor(Math.random() * colors.length)];
+}
+
+function zeichneKonfetti() {
+  const konfettiWrapper = document.querySelector('.konfetti-wrapper');
+  // Erzeuge konfetti
+  for (let i = 0; i < 50; i++) {
+    const konfetti = document.createElement('div');
+    konfetti.classList.add('konfetti-stueck');
+    konfetti.style.left = `${Math.random() * 100}%`;
+    konfetti.style.setProperty('--fall-dauer', `${Math.random() * 3 + 3}s`);
+    konfetti.style.setProperty('--konfetti-farbe', getRandomColor());
+    konfettiWrapper.appendChild(konfetti);
+  }
+}
+
+function versteckeKonfetti() {
+  const konfettiWrapper = document.querySelector('.konfetti-wrapper');
+  while (konfettiWrapper.firstChild) {
+    konfettiWrapper.removeChild(konfettiWrapper.firstChild);
+  }
+}