Merge pull request #515 from vevcom/feat/confetti

feat: add confetti

Author: Paulijuz

package-lock.json

@@ -33,6 +33,7 @@
     "@react-email/render": "^1.4.0",
     "bcrypt": "^5.1.1",
     "eslint-plugin-react-hooks": "^6.1.1",
+    "canvas-confetti": "^1.9.4",
     "html5-qrcode": "^2.3.8",
     "jsonwebtoken": "^9.0.3",
     "jsqr": "^1.4.0",
@@ -65,6 +66,7 @@
     "@babel/preset-typescript": "^7.28.5",
     "@jest/globals": "^29.7.0",
     "@types/bcrypt": "^5.0.2",
+    "@types/canvas-confetti": "^1.9.0",
     "@types/jest": "^29.5.14",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/luxon": "^3.7.1",

package.json

@@ -0,0 +1,39 @@
+'use client'
+import canvasConfetti from 'canvas-confetti'
+
+type ConfettiArguments = {
+    angle?: number,
+    spread?: number,
+    duration?: number
+    colors?: string[],
+    particleCount?: number,
+    origin?: { x: number, y: number },
+}
+
+/**
+ * Summons confetti :)
+ */
+export function confetti({
+    angle = 90,
+    spread = 150,
+    duration = 1000,
+    colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff',],
+    particleCount = 10,
+    origin = { x: 0.5, y: 1 }
+}: ConfettiArguments = {}) {
+    const end = Date.now() + duration;
+
+    (function frame() {
+        canvasConfetti({
+            particleCount,
+            angle,
+            spread,
+            origin,
+            colors,
+        })
+
+        if (Date.now() < end) {
+            requestAnimationFrame(frame)
+        }
+    }())
+}