Slowed down animation and renamed variables.

- Unified html elements for smaller footprint.
- winnersNameDrawn is used to have separte messages for before and after
the winners name is decided.

frontend/ui/WinnerDraw.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="current-drawn-container" v-if="drawing">
-    <h2 v-if="vinnersNameDrawn !== true">TREKKER {{ ordinalNumber() }} VINNER</h2>
+    <h2 v-if="winnersNameDrawn !== true">TREKKER {{ ordinalNumber() }} VINNER</h2>
     <h2 v-else>VINNER</h2>
 
     <div
@@ -43,14 +43,13 @@ export default {
       nameTimeout: null,
       colorDone: false,
       drawing: false,
-      drawingDone: false,
+      winnersNameDrawn: false,
       winnerQueue: []
     };
   },
   watch: {
     currentWinner: function(currentWinner) {
       if (currentWinner == null) {
-        this.drawingDone = false;
         return;
       }
       if (this.drawing) {
@@ -58,6 +57,7 @@ export default {
         return;
       }
       this.drawing = true;
+      this.winnersNameDrawn = false;
       this.currentName = null;
       this.currentColor = null;
       this.nameRounds = 0;
@@ -81,8 +81,7 @@ export default {
           this.drawColor(this.currentWinnerLocal.color);
           return;
         }
-        this.drawing = false;
-        this.drawingDone = true;
+        this.winnersNameDrawn = true;
         this.startConfetti(this.currentName);
         return;
       }
@@ -96,7 +95,7 @@ export default {
       }, 50);
     },
     drawColor: function(winnerColor) {
-      this.drawingDone = false;
+      this.winnersNameDrawn = false;
       if (this.colorRounds == 100) {
         this.currentColor = winnerColor;
         this.colorDone = true;
@@ -111,7 +110,7 @@ export default {
       clearTimeout(this.colorTimeout);
       this.colorTimeout = setTimeout(() => {
         this.drawColor(winnerColor);
-      }, 50);
+      }, 70);
     },
     getRotation: function() {
       if (this.colorDone) {
@@ -133,8 +132,8 @@ export default {
           return "yellow";
       }
     },
-    startConfetti(currentName){
-      //duration is computed as x * 1000 miliseconds, in this case 7*1000 = 7000 miliseconds ==> 7 seconds. 
+    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: 50, spread: 160, ticks: 50, zIndex: 0, particleCount: 20};
@@ -143,22 +142,25 @@ export default {
       function randomInRange(min, max) {
         return Math.random() * (max - min) + min;
       }
+
+      const self = this;
       var interval = setInterval(function() {
         var timeLeft = animationEnd - Date.now();
         if (timeLeft <= 0) {
+          self.drawing = false;
+          console.time("drawing finished")
           return clearInterval(interval);
-        } 
-        if(currentName == "Amund Brandsrud"){
+        }
+        if (currentName == "Amund Brandsrud") {
           runCannon(uberDefaults, {x: 1, y: 1 }, {angle: 135});
-          runCannon(uberDefaults, {x: 0, y: 1 }, {angle: 45}); 
+          runCannon(uberDefaults, {x: 0, y: 1 }, {angle: 45});
           runCannon(uberDefaults, {y: 1 }, {angle: 90});
           runCannon(uberDefaults, {x: 0 }, {angle: 45});
-          runCannon(uberDefaults, {x: 1 }, {angle: 135});     
-        }else{
+          runCannon(uberDefaults, {x: 1 }, {angle: 135});
+        } else {
           runCannon(defaults, {x: 0 }, {angle: 45});
           runCannon(defaults, {x: 1 }, {angle: 135});
           runCannon(defaults, {y: 1 }, {angle: 90});
-   
         }
       }, 250);