Merge pull request #37 from KevinMidboe/feat/confetti

Confetti for the winners

src/ui/WinnerDraw.vue

@@ -15,6 +15,7 @@
       <br />
       <br />
     </div>
+    
     <div class="current-draw" v-if="drawingDone">
       <h2>VINNER</h2>
       <div
@@ -34,6 +35,7 @@
 </template>
 
 <script>
+import confetti from "canvas-confetti";
 export default {
   props: {
     currentWinner: {
@@ -99,6 +101,7 @@ export default {
         }
         this.drawing = false;
         this.drawingDone = true;
+        this.startConfetti(this.currentName);
         return;
       }
       this.currentName = this.attendees[
@@ -147,9 +150,39 @@ export default {
         case 3:
           return "yellow";
       }
-    }
+    },
+    startConfetti(currentName){
+      //duration is computed as x * 1000 miliseconds, in this case 7*1000 = 7000 miliseconds ==> 7 seconds. 
+      var duration = 7 * 1000;
+      var animationEnd = Date.now() + duration;
+      var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0, particleCount: 10};
+      var uberDefaults = { startVelocity: 65, spread: 75, particleCount: 35, angle: randomInRange(55, 125)}
+
+      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);
+        } 
+        if(currentName == "Amund Brandsrud"){
+          runCannon(uberDefaults, {x: 0 });
+          runCannon(uberDefaults, {x: 1 });
+          runCannon(uberDefaults, {y: 1 });
+        }else{
+          runCannon(defaults, { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 });
+          runCannon(defaults, { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 });
+        }
+      }, 250);
+
+      function runCannon(confettiDefaultValues, originPoint){
+        confetti(Object.assign({}, confettiDefaultValues, {origin: originPoint }))
+      }
+    },
   }
 };
+
 </script>
 
 <style lang="scss" scoped>