Confetti for the winners

package-lock.json

@@ -2334,6 +2334,11 @@
       "integrity": "sha512-zQW8V3CdND7GHRH6rxm6s59Ww4g/qGWTheoboW9nfeMg7sUoopIfKCcNZUjwYRCOrvereh3kwDpZj4VLQ7zGtA==",
       "dev": true
     },
+    "canvas-confetti": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.2.0.tgz",
+      "integrity": "sha512-0B49O9CfLciAYz4hriu9pvWNGkCtVcpvyNFKWZI+JVWJM5nJTMg5MX3cFzatyeYcOL6bR1Jw3yhZKbgt03O8/Q=="
+    },
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "@babel/polyfill": "~7.2",
     "@zxing/library": "^0.15.2",
     "body-parser": "^1.19.0",
+    "canvas-confetti": "^1.2.0",
     "chart.js": "^2.9.3",
     "clean-webpack-plugin": "^3.0.0",
     "compression": "^1.7.4",

src/ui/WinnerDraw.vue

@@ -34,6 +34,7 @@
 </template>
 
 <script>
+import confetti from "canvas-confetti";
 export default {
   props: {
     currentWinner: {
@@ -99,6 +100,11 @@ export default {
         }
         this.drawing = false;
         this.drawingDone = true;
+        if(this.currentName == "Amund Brandsrud"){
+          this.startUberConfetti();
+          return;
+        }
+        this.startConfetti();
         return;
       }
       this.currentName = this.attendees[
@@ -147,9 +153,45 @@ export default {
         case 3:
           return "yellow";
       }
+    },
+    startConfetti(){
+      var duration = 7 * 1000;
+      var animationEnd = Date.now() + duration;
+      var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+      function randomInRange(min, max) {
+        return Math.random() * (max - min) + min;
+      }
+      var interval = setInterval(function() {
+        var timeLeft = animationEnd - Date.now();
+        if (timeLeft <= 0) {
+          return clearInterval(interval);
+        } 
+        var particleCount = 50 * (timeLeft / duration);
+        confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
+        confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
+      }, 250);
+    },
+    startUberConfetti(){
+      var duration = 7 * 1000;
+      var animationEnd = Date.now() + duration;
+      var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+      function randomInRange(min, max) {
+        return Math.random() * (max - min) + min;
+      }
+      var interval = setInterval(function() {
+        var timeLeft = animationEnd - Date.now();
+        if (timeLeft <= 0) {
+          return clearInterval(interval);
+        }
+        var particleCount = 50 * (timeLeft / duration);
+        confetti({startVelocity: 65, angle: randomInRange(55, 125),particleCount: particleCount, angle: 60, spread: 55, origin: { x: 0 }});
+        confetti({startVelocity: 65, angle: randomInRange(55, 125),particleCount: particleCount, angle: 120, spread: 55, origin: { x: 1 }});
+        confetti({startVelocity: 65, angle: randomInRange(55, 125),spread: randomInRange(50, 70),particleCount: randomInRange(5, 15),origin: { y: 1 }});
+      }, 250);
     }
   }
 };
+
 </script>
 
 <style lang="scss" scoped>