Show confetti when purchasing a record

assets/js/app.js

@@ -22,6 +22,7 @@ import { Socket } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
 import topbar from "../vendor/topbar";
 import BarcodeScannerHook from "./barcode-scanner";
+import confetti from "canvas-confetti";
 
 let Hooks = {};
 Hooks.BarcodeScanner = BarcodeScannerHook;
@@ -53,6 +54,12 @@ window.addEventListener("music_library:clipcopy", (event) => {
 window.addEventListener("music_library:scroll_top", (_event) => {
   window.scrollTo(0, 0);
 });
+window.addEventListener("music_library:confetti", (_event) => {
+  confetti({
+    particleCount: 100,
+    spread: 200,
+  });
+});
 
 // connect if there are any LiveViews on the page
 liveSocket.connect();

assets/package-lock.json

@@ -5,7 +5,8 @@
   "packages": {
     "": {
       "dependencies": {
-        "barcode-detector": "^3.0.0"
+        "barcode-detector": "^3.0.0",
+        "canvas-confetti": "^1.9.3"
       }
     },
     "node_modules/@types/emscripten": {
@@ -21,6 +22,15 @@
         "zxing-wasm": "^2.1.0"
       }
     },
+    "node_modules/canvas-confetti": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.3.tgz",
+      "integrity": "sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
+      }
+    },
     "node_modules/type-fest": {
       "version": "4.37.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.37.0.tgz",

assets/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "barcode-detector": "^3.0.0"
+    "barcode-detector": "^3.0.0",
+    "canvas-confetti": "^1.9.3"
   }
 }