Upgraded the confetti to fireworks

Author: samejr

apps/webapp/app/components/helpContent/HelpContentText.tsx

@@ -57,32 +57,54 @@ export function HowToSetupYourProject() {
     if (events !== null) {
       // This uses https://www.npmjs.com/package/canvas-confetti
       if ("confetti" in window && typeof window.confetti !== "undefined") {
-        var duration = 2.5 * 1000;
-        var end = Date.now() + duration;
+        const duration = 3.5 * 1000;
+        const animationEnd = Date.now() + duration;
+        const defaults = {
+          startVelocity: 30,
+          spread: 360,
+          ticks: 60,
+          zIndex: 0,
+          colors: [
+            "#E7FF52",
+            "#41FF54",
+            "rgb(245 158 11)",
+            "rgb(22 163 74)",
+            "rgb(37 99 235)",
+            "rgb(67 56 202)",
+            "rgb(219 39 119)",
+            "rgb(225 29 72)",
+            "rgb(217 70 239)",
+          ],
+        };
+        // @ts-ignore
+        function randomInRange(min, max) {
+          return Math.random() * (max - min) + min;
+        }
+        // @ts-ignore
+        const interval = setInterval(function () {
+          const timeLeft = animationEnd - Date.now();
+
+          if (timeLeft <= 0) {
+            return clearInterval(interval);
+          }
 
-        (function frame() {
-          // launch a few confetti from the left edge
+          const particleCount = 50 * (timeLeft / duration);
+          // since particles fall down, start a bit higher than random
           // @ts-ignore
-          window.confetti({
-            particleCount: 7,
-            angle: 60,
-            spread: 55,
-            origin: { x: 0 },
-          });
-          // and launch a few from the right edge
+          window.confetti(
+            Object.assign({}, defaults, {
+              particleCount,
+              origin: { x: randomInRange(0.1, 0.4), y: Math.random() - 0.2 },
+            })
+          );
           // @ts-ignore
-          window.confetti({
-            particleCount: 7,
-            angle: 120,
-            spread: 55,
-            origin: { x: 1 },
-          });
-
-          // keep going until we are out of time
-          if (Date.now() < end) {
-            requestAnimationFrame(frame);
-          }
-        })();
+          window.confetti(
+            Object.assign({}, defaults, {
+              particleCount,
+              origin: { x: randomInRange(0.6, 0.9), y: Math.random() - 0.2 },
+            })
+          );
+        }, 250);
       }
 
       revalidator.revalidate();