From f398db4e42e6aaafd94fede1f011be4da7b12bd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?=
 <kasper.rynning-tonnesen@knowit.no>
Date: Sat, 14 Mar 2020 14:04:07 +0100
Subject: [PATCH] Splitting more, added chat, and fancier draw-animations

---
 api/chat.js                                   |  25 +++
 api/virtualLottery.js                         |  45 ++--
 server.js                                     |   4 +
 src/components/VirtualLotteryPage.vue         | 211 +++++++-----------
 .../VirtualLotteryRegistrationPage.vue        |  54 ++++-
 src/styles/global.scss                        |  40 +++-
 src/ui/Attendees.vue                          |  64 ++++++
 src/ui/Chat.vue                               | 180 +++++++++++++++
 src/ui/TotalBought.vue                        |  35 +--
 src/ui/WinnerDraw.vue                         | 178 +++++++++++++++
 src/ui/Winners.vue                            |  48 ++++
 11 files changed, 688 insertions(+), 196 deletions(-)
 create mode 100644 api/chat.js
 create mode 100644 src/ui/Attendees.vue
 create mode 100644 src/ui/Chat.vue
 create mode 100644 src/ui/WinnerDraw.vue
 create mode 100644 src/ui/Winners.vue

diff --git a/api/chat.js b/api/chat.js
new file mode 100644
index 0000000..e319d4a
--- /dev/null
+++ b/api/chat.js
@@ -0,0 +1,25 @@
+module.exports = io => {
+  io.on("connection", socket => {
+    let username = null;
+
+    socket.on("username", msg => {
+      if (msg.username == null) {
+        username = null;
+        socket.emit("accept_username", false);
+        return;
+      }
+      if (msg.username.length > 3 && msg.username.length < 30) {
+        username = msg.username;
+        socket.emit("accept_username", true);
+        return;
+      }
+      socket.emit("accept_username", false);
+    });
+
+    socket.on("chat", msg => {
+      msg.username = username;
+      msg.timestamp = new Date().getTime();
+      io.emit("chat", msg);
+    });
+  });
+};
diff --git a/api/virtualLottery.js b/api/virtualLottery.js
index d5aa5fb..0bd3ba0 100644
--- a/api/virtualLottery.js
+++ b/api/virtualLottery.js
@@ -52,28 +52,33 @@ router.route("/winners/secure").get(mustBeAuthenticated, async (req, res) => {
 });
 
 router.route("/winner").get(mustBeAuthenticated, async (req, res) => {
-  let colorWinner = Math.floor(Math.random() * 4);
-  let colorToChoseFrom;
+  let allContestants = await Attendee.find();
+  if (allContestants.length == 0) {
+    res.json(false);
+    return;
+  }
+  let ballotColors = [];
+  for (let i = 0; i < allContestants.length; i++) {
+    let currentContestant = allContestants[i];
+    for (let blue = 0; blue < currentContestant.blue; blue++) {
+      ballotColors.push("blue");
+    }
+    for (let red = 0; red < currentContestant.red; red++) {
+      ballotColors.push("red");
+    }
+    for (let green = 0; green < currentContestant.green; green++) {
+      ballotColors.push("green");
+    }
+    for (let yellow = 0; yellow < currentContestant.yellow; yellow++) {
+      ballotColors.push("yellow");
+    }
+  }
+
+  let colorToChoseFrom =
+    ballotColors[Math.floor(Math.random() * ballotColors.length)];
   let findObject = {};
 
-  switch (colorWinner) {
-    case 0:
-      colorToChoseFrom = "red";
-      break;
-    case 1:
-      colorToChoseFrom = "blue";
-      break;
-    case 2:
-      colorToChoseFrom = "green";
-      break;
-    case 3:
-      colorToChoseFrom = "yellow";
-      break;
-  }
-  io.emit("color_winner", { color: colorToChoseFrom });
-
   findObject[colorToChoseFrom] = { $gt: 0 };
-
   let contestantsToChoseFrom = await Attendee.find(findObject);
   let attendeeListDemocratic = [];
 
@@ -93,7 +98,7 @@ router.route("/winner").get(mustBeAuthenticated, async (req, res) => {
       Math.floor(Math.random() * attendeeListDemocratic.length)
     ];
 
-  io.emit("winner", { name: winner.name });
+  io.emit("winner", { color: colorToChoseFrom, name: winner.name });
 
   let newWinnerElement = new VirtualWinner({
     name: winner.name,
diff --git a/server.js b/server.js
index 3a9dc92..9aa428f 100644
--- a/server.js
+++ b/server.js
@@ -12,6 +12,10 @@ const subscriptionApi = require(path.join(__dirname + "/api/subscriptions"));
 const loginApi = require(path.join(__dirname + "/api/login"));
 const wineinfoApi = require(path.join(__dirname + "/api/wineinfo"));
 const virtualApi = require(path.join(__dirname + "/api/virtualLottery"));
+
+//This is required for the chat to work
+const chat = require(path.join(__dirname + "/api/chat"))(io);
+
 const bodyParser = require("body-parser");
 
 const mongoose = require("mongoose");
diff --git a/src/components/VirtualLotteryPage.vue b/src/components/VirtualLotteryPage.vue
index 0ee3798..17014d4 100644
--- a/src/components/VirtualLotteryPage.vue
+++ b/src/components/VirtualLotteryPage.vue
@@ -11,93 +11,86 @@
     >
       Her var det lite.. Sikker på at det er en virtuell trekning nå?
     </h2>
-    <div class="current-draw" v-if="currentWinnerDrawn">
-      <h2>NY VINNER:</h2>
-      <div
-        :class="currentWinnerColor + '-ballot'"
-        class="ballot-element center-new-winner"
-      >
-        <span v-if="currentWinnerName">{{ currentWinnerName }}</span>
-        <span v-if="!currentWinnerName">{{ secondsNameLeft }}</span>
-      </div>
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <div v-if="countdownStarted && attendees.length > 0">
-        <h2>Trekker ny om: {{ secondsLeft }}</h2>
-      </div>
-    </div>
+    <WinnerDraw
+      :currentWinnerDrawn="currentWinnerDrawn"
+      :currentWinner="currentWinner"
+      :attendees="attendees"
+    />
 
-    <h2 v-if="winners.length > 0">Vinnere</h2>
-    <div class="winners" v-if="winners.length > 0">
-      <div class="winner" v-for="(winner, index) in winners" :key="index">
-        <div :class="winner.color + '-ballot'" class="ballot-element">
-          {{ winner.name }}
-        </div>
-      </div>
-    </div>
-    <div class="attendees" v-if="attendees.length > 0">
-      <h2>Deltakere</h2>
-      <div class="attendee" v-for="(attendee, index) in attendees" :key="index">
-        <span class="attendee-name">{{ attendee.name }}</span>
-        <div class="red-ballot ballot-element small">{{ attendee.red }}</div>
-        <div class="blue-ballot ballot-element small">{{ attendee.blue }}</div>
-        <div class="green-ballot ballot-element small">
-          {{ attendee.green }}
-        </div>
-        <div class="yellow-ballot ballot-element small">
-          {{ attendee.yellow }}
-        </div>
-      </div>
+    <Winners :winners="winners" />
+    <hr />
+    <div class="middle-elements">
+      <Attendees :attendees="attendees" class="outer-attendees" />
+      <Chat
+        class="outer-chat"
+        :chatHistory="chatHistory"
+        :usernameAllowed="usernameAllowed"
+        v-on:message="sendMessage"
+        v-on:username="setUsername"
+      />
     </div>
   </div>
 </template>
 
 <script>
 import { attendees, winners } from "@/api";
+import Chat from "@/ui/Chat";
+import Attendees from "@/ui/Attendees";
+import Winners from "@/ui/Winners";
+import WinnerDraw from "@/ui/WinnerDraw";
 import io from "socket.io-client";
 
 export default {
+  components: { Chat, Attendees, Winners, WinnerDraw },
   data() {
     return {
       attendees: [],
       winners: [],
       currentWinnerDrawn: false,
-      currentWinnerName: null,
-      currentWinnerColor: null,
-      countdownStarted: false,
-      secondsLeft: 15,
-      secondsNameLeft: 5,
+      currentWinner: {},
       socket: null,
       attendeesFetched: false,
-      winnersFetched: false
+      winnersFetched: false,
+      chatHistory: [],
+      usernameAccepted: false,
+      username: null,
+      wasDisconnected: false,
+      emitUsernameOnConnect: false
     };
   },
   mounted() {
     this.getAttendees();
     this.getWinners();
     this.socket = io(`${window.location.hostname}:${window.location.port}`);
-    this.socket.on("color_winner", msg => {
-      this.currentWinnerDrawn = true;
-      this.currentWinnerColor = msg.color;
+    this.socket.on("color_winner", msg => {});
+
+    this.socket.on("chat", msg => {
+      this.chatHistory.push(msg);
+    });
+
+    this.socket.on("disconnect", msg => {
+      this.wasDisconnected = true;
+    });
+
+    this.socket.on("connect", msg => {
+      if (
+        this.emitUsernameOnConnect ||
+        (this.wasDisconnected && this.username != null)
+      ) {
+        this.setUsername(this.username);
+      }
     });
 
     this.socket.on("winner", async msg => {
       this.currentWinnerDrawn = true;
-      this.countdown();
-      setTimeout(() => {
-        this.currentWinnerName = msg.name;
-        this.getWinners();
-        this.getAttendees();
-      }, 5000);
+      this.currentWinner = { name: msg.name, color: msg.color };
 
       setTimeout(() => {
-        this.currentWinnerColor = null;
-        this.currentWinnerName = null;
+        this.getWinners();
+        this.getAttendees();
+        this.currentWinner = null;
         this.currentWinnerDrawn = false;
-      }, 15000);
+      }, 12000);
     });
     this.socket.on("refresh_data", async msg => {
       this.getAttendees();
@@ -106,25 +99,30 @@ export default {
     this.socket.on("new_attendee", async msg => {
       this.getAttendees();
     });
+    this.socket.on("accept_username", accepted => {
+      this.usernameAccepted = accepted;
+      if (!accepted) {
+        this.username = null;
+      } else {
+        window.localStorage.setItem("username", this.username);
+      }
+    });
   },
   beforeDestroy() {
     this.socket.disconnect();
     this.socket = null;
   },
   methods: {
-    countdown: function() {
-      this.secondsLeft -= 1;
-      this.secondsNameLeft -= 1;
-      this.countdownStarted = true;
-      if (this.secondsLeft <= 0) {
-        this.secondsLeft = 15;
-        this.secondsNameLeft = 5;
-        this.countdownStarted = false;
+    setUsername: function(username) {
+      this.username = username;
+      if (!this.socket || !this.socket.emit) {
+        this.emitUsernameOnConnect = true;
         return;
       }
-      setTimeout(() => {
-        this.countdown();
-      }, 1000);
+      this.socket.emit("username", { username });
+    },
+    sendMessage: function(msg) {
+      this.socket.emit("chat", { message: msg });
     },
     getWinners: async function() {
       let response = await winners();
@@ -137,11 +135,6 @@ export default {
       let response = await attendees();
       if (response) {
         this.attendees = response;
-        if (attendees <= 0) {
-          this.secondsLeft = 0;
-          this.secondsNameLeft = 0;
-          this.countdown();
-        }
       }
       this.attendeesFetched = true;
     }
@@ -153,7 +146,9 @@ export default {
 @import "../styles/global.scss";
 @import "../styles/variables.scss";
 @import "../styles/media-queries.scss";
-
+hr {
+  width: 80%;
+}
 h1,
 h2 {
   text-align: center;
@@ -162,72 +157,28 @@ h2 {
   margin: auto;
 }
 
-.attendee-name {
-  width: 60%;
+.outer-chat {
+  margin: 0 60px 0 10px;
+}
+
+.outer-attendees {
+  margin: 0 10px 0 45px;
 }
 
 .center-new-winner {
   margin: auto !important;
 }
 
-.ballot-element {
-  width: 140px;
-  height: 150px;
-  margin: 20px 0;
-  -webkit-mask-image: url(/../../public/assets/images/lodd.svg);
-  background-repeat: no-repeat;
-  mask-image: url(/../../public/assets/images/lodd.svg);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  color: #333333;
-  font-size: 0.75rem;
-  font-weight: bold;
+.middle-elements {
   display: flex;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
-  text-align: center;
+  height: 400px;
 
-  &.small {
-    width: 45px;
-    height: 45px;
-    font-size: 1rem;
+  @include mobile {
+    height: auto;
+    flex-direction: column;
   }
-
-  &.green-ballot {
-    background-color: $light-green;
-  }
-
-  &.blue-ballot {
-    background-color: $light-blue;
-  }
-
-  &.yellow-ballot {
-    background-color: $light-yellow;
-  }
-
-  &.red-ballot {
-    background-color: $light-red;
-  }
-}
-
-.winners {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-}
-
-.attendees {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.attendee {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 50%;
-  margin: 0 auto;
 }
 </style>
diff --git a/src/components/VirtualLotteryRegistrationPage.vue b/src/components/VirtualLotteryRegistrationPage.vue
index 9069198..c718847 100644
--- a/src/components/VirtualLotteryRegistrationPage.vue
+++ b/src/components/VirtualLotteryRegistrationPage.vue
@@ -3,12 +3,21 @@
     <h1>Virtuelt lotteri registrering</h1>
     <br />
     <div class="draw-winner-container" v-if="attendees.length > 0">
-      <span v-if="drawingWinner"
-        >Vent {{ secondsLeft }} sekunder til å trekke på nytt</span
-      >
-      <button class="vin-button" v-if="!drawingWinner" @click="drawWinner">
-        Trekk en vinner
-      </button>
+      <div v-if="drawingWinner">
+        <span
+          >Trekker {{ currentWinners }} av {{ numberOfWinners }} vinnere.
+          {{ secondsLeft }} sekunder av {{ drawTime }} igjen</span
+        >
+        <button class="vin-button" @click="stopDraw">
+          Stopp trekning
+        </button>
+      </div>
+      <div class="draw-container" v-if="!drawingWinner">
+        <button class="vin-button" @click="drawWinner">
+          Trekk vinnere
+        </button>
+        <input type="number" v-model="numberOfWinners" />
+      </div>
     </div>
     <h2 v-if="winners.length > 0">Vinnere</h2>
     <div class="winners" v-if="winners.length > 0">
@@ -39,7 +48,7 @@
       </button>
     </div>
     <div class="attendees" v-if="attendees.length > 0">
-      <h2>Deltakere hittil</h2>
+      <h2>Deltakere ({{ attendees.length }})</h2>
       <div class="attendee" v-for="(attendee, index) in attendees" :key="index">
         <div class="name-and-phone">
           <span class="name">{{ attendee.name }}</span>
@@ -148,7 +157,10 @@ export default {
       attendees: [],
       winners: [],
       drawingWinner: false,
-      secondsLeft: 15
+      secondsLeft: 20,
+      drawTime: 20,
+      currentWinners: 1,
+      numberOfWinners: 4
     };
   },
   mounted() {
@@ -183,11 +195,19 @@ export default {
       let response = await attendeesSecure();
       this.attendees = response;
     },
+    stopDraw: function() {
+      this.drawingWinner = false;
+      this.secondsLeft = this.drawTime;
+    },
     drawWinner: async function() {
       this.drawingWinner = true;
       let response = await getVirtualWinner();
       if (response) {
-        this.countdown();
+        if (this.currentWinners < this.numberOfWinners) {
+          this.countdown();
+        } else {
+          this.drawingWinner = false;
+        }
         this.getWinners();
         this.getAttendees();
       } else {
@@ -197,9 +217,17 @@ export default {
     },
     countdown: function() {
       this.secondsLeft -= 1;
+      if (!this.drawingWinner) {
+        return;
+      }
       if (this.secondsLeft <= 0) {
-        this.secondsLeft = 15;
-        this.drawingWinner = false;
+        this.secondsLeft = this.drawTime;
+        this.currentWinners += 1;
+        if (this.currentWinners <= this.numberOfWinners) {
+          this.drawWinner();
+        } else {
+          this.drawingWinner = false;
+        }
         return;
       }
       setTimeout(() => {
@@ -238,6 +266,10 @@ export default {
 @import "../styles/global.scss";
 @import "../styles/media-queries.scss";
 
+.draw-container {
+  display: flex;
+}
+
 .draw-winner-container,
 .delete-buttons {
   margin-bottom: 20px;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 72bd537..3dd2557 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -85,7 +85,8 @@ body {
   }
 }
 
-input, textarea {
+input,
+textarea {
   border-radius: 0;
   box-shadow: none;
   -webkit-appearance: none;
@@ -116,7 +117,7 @@ input, textarea {
   touch-action: manipulation;
 
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     transition: opacity 0.3s ease-in-out;
     z-index: -1;
@@ -125,12 +126,9 @@ input, textarea {
     top: 0;
     left: 0;
     opacity: 0;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.07),
-                0 2px 4px rgba(0,0,0,0.07),
-                0 4px 8px rgba(0,0,0,0.07),
-                0 8px 16px rgba(0,0,0,0.07),
-                0 16px 32px rgba(0,0,0,0.07),
-                0 32px 64px rgba(0,0,0,0.07);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
+      0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
+      0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
   }
 
   &:hover {
@@ -141,3 +139,29 @@ input, textarea {
     }
   }
 }
+
+.ballot-element {
+  margin: 20px 0;
+  -webkit-mask-image: url(/../../public/assets/images/lodd.svg);
+  background-repeat: no-repeat;
+  mask-image: url(/../../public/assets/images/lodd.svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  color: #333333;
+
+  &.green-ballot {
+    background-color: $light-green;
+  }
+
+  &.blue-ballot {
+    background-color: $light-blue;
+  }
+
+  &.yellow-ballot {
+    background-color: $light-yellow;
+  }
+
+  &.red-ballot {
+    background-color: $light-red;
+  }
+}
diff --git a/src/ui/Attendees.vue b/src/ui/Attendees.vue
new file mode 100644
index 0000000..0d0820f
--- /dev/null
+++ b/src/ui/Attendees.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="attendees" v-if="attendees.length > 0">
+    <h2>Deltakere ({{ attendees.length }})</h2>
+    <div class="attendee" v-for="(attendee, index) in attendees" :key="index">
+      <span class="attendee-name">{{ attendee.name }}</span>
+      <div class="red-ballot ballot-element small">{{ attendee.red }}</div>
+      <div class="blue-ballot ballot-element small">
+        {{ attendee.blue }}
+      </div>
+      <div class="green-ballot ballot-element small">
+        {{ attendee.green }}
+      </div>
+      <div class="yellow-ballot ballot-element small">
+        {{ attendee.yellow }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    attendees: {
+      type: Array
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/global.scss";
+@import "../styles/variables.scss";
+@import "../styles/media-queries.scss";
+.attendee-name {
+  width: 60%;
+}
+
+.ballot-element {
+  font-size: 0.75rem;
+  width: 45px;
+  height: 45px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+}
+
+.attendees {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 65%;
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.attendee {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin: 0 auto;
+}
+</style>
diff --git a/src/ui/Chat.vue b/src/ui/Chat.vue
new file mode 100644
index 0000000..26ba956
--- /dev/null
+++ b/src/ui/Chat.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="chat-container">
+    <hr />
+    <h2>Chat</h2>
+    <div v-if="usernameSet" class="chat-inner-container">
+      <div class="history" ref="history">
+        <div
+          v-for="(history, index) in chatHistory"
+          :key="`${history.username}-${history.timestamp}-${index}`"
+        >
+          <span class="timestamp">[{{ getTime(history.timestamp) }}]</span>
+          <span class="user-name">{{ history.username }}:</span>
+          <span class="message">{{ history.message }}</span>
+        </div>
+      </div>
+      <div class="input">
+        <input
+          @keyup.enter="sendMessage"
+          type="text"
+          v-model="message"
+          maxlength="30"
+        />
+        <button @click="sendMessage">Send</button
+        ><button @click="removeUsername">Logg ut</button>
+      </div>
+    </div>
+    <div v-if="!usernameSet" class="username-dialog">
+      <input
+        type="text"
+        @keyup.enter="setUsername"
+        v-model="temporaryUsername"
+        title
+      />
+      <button @click="setUsername">Lagre brukernavn</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    usernameAllowed: {
+      type: Boolean
+    },
+    chatHistory: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      message: "",
+      temporaryUsername: null,
+      username: null,
+      usernameSet: false
+    };
+  },
+  watch: {
+    chatHistory: {
+      handler() {
+        setTimeout(() => {
+          this.$refs.history.scrollTop = this.$refs.history.scrollHeight;
+        }, 10);
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    let username = window.localStorage.getItem("username");
+    if (!username) {
+      return;
+    }
+    this.username = username;
+    this.usernameSet = true;
+    this.$emit("username", username);
+  },
+  methods: {
+    pad: function(num) {
+      if (num > 9) return num;
+      return `0${num}`;
+    },
+    getTime: function(timestamp) {
+      let date = new Date(timestamp);
+      return `${this.pad(date.getHours())}:${this.pad(
+        date.getMinutes()
+      )}:${this.pad(date.getSeconds())}`;
+    },
+    sendMessage: function() {
+      this.$emit("message", this.message);
+      this.message = "";
+    },
+    removeUsername: function() {
+      this.username = null;
+      this.temporaryUsername = null;
+      this.usernameSet = false;
+      window.localStorage.removeItem("username");
+      this.$emit("username", null);
+    },
+    setUsername: function() {
+      if (
+        this.temporaryUsername.length > 3 &&
+        this.temporaryUsername.length < 30
+      ) {
+        this.username = this.temporaryUsername;
+        this.usernameSet = true;
+        this.$emit("username", this.username);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/media-queries.scss";
+h2 {
+  text-align: center;
+}
+
+hr {
+  display: none;
+
+  @include mobile {
+    display: block;
+    width: 80%;
+  }
+}
+.chat-container {
+  width: 50%;
+
+  @include mobile {
+    width: 100%;
+  }
+}
+
+input {
+  width: 80%;
+}
+
+.input {
+  display: flex;
+}
+
+.chat-container,
+.chat-inner-container {
+  height: 100%;
+}
+
+.history {
+  height: 75%;
+  overflow-y: scroll;
+
+  @include mobile {
+    height: 300px;
+  }
+}
+
+.username-dialog {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+button {
+  position: relative;
+  display: inline-block;
+  background: #b7debd;
+  color: #333;
+  padding: 10px 30px;
+  border: 0;
+  width: fit-content;
+  font-size: 1rem;
+  /* height: 1.5rem; */
+  /* max-height: 1.5rem; */
+  margin: 0 2px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: transform 0.5s ease;
+  -webkit-font-smoothing: antialiased;
+  touch-action: manipulation;
+}
+</style>
diff --git a/src/ui/TotalBought.vue b/src/ui/TotalBought.vue
index 4d43f6b..217cd84 100644
--- a/src/ui/TotalBought.vue
+++ b/src/ui/TotalBought.vue
@@ -4,14 +4,17 @@
     <div class="bought-container">
       <div
         v-for="color in colors"
-        :class="color.name + '-container ' + color.name + '-ballot inner-bought-container ballot-element'"
+        :class="
+          color.name +
+            '-container ' +
+            color.name +
+            '-ballot inner-bought-container ballot-element'
+        "
         :key="color.name"
       >
         <div class="number-container">
           <span class="color-total bought-number-span">
-            {{
-            color.total
-            }}
+            {{ color.total }}
           </span>
           <span>kjøpte</span>
         </div>
@@ -35,7 +38,6 @@
   </div>
 </template>
 <script>
-
 import { colorStatistics } from "@/api";
 
 export default {
@@ -123,6 +125,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/global.scss";
 @import "../styles/variables.scss";
 @import "../styles/media-queries.scss";
 
@@ -137,28 +140,6 @@ export default {
   width: 140px;
   height: 150px;
   margin: 20px 0;
-  -webkit-mask-image: url(/../../public/assets/images/lodd.svg);
-  background-repeat: no-repeat;
-  mask-image: url(/../../public/assets/images/lodd.svg);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  color: #333333;
-
-  &.green-ballot {
-    background-color: $light-green;
-  }
-
-  &.blue-ballot {
-    background-color: $light-blue;
-  }
-
-  &.yellow-ballot {
-    background-color: $light-yellow;
-  }
-
-  &.red-ballot {
-    background-color: $light-red;
-  }
 }
 
 .number-container {
diff --git a/src/ui/WinnerDraw.vue b/src/ui/WinnerDraw.vue
new file mode 100644
index 0000000..d0c07d6
--- /dev/null
+++ b/src/ui/WinnerDraw.vue
@@ -0,0 +1,178 @@
+<template>
+  <div class="current-drawn-container">
+    <div class="current-draw" v-if="drawing">
+      <h2>TREKKER</h2>
+      <div
+        :class="currentColor + '-ballot'"
+        class="ballot-element center-new-winner"
+        :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
+      >
+        <span v-if="currentName && colorDone">{{ currentName }}</span>
+      </div>
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+    </div>
+    <div class="current-draw" v-if="drawingDone">
+      <h2>VINNER</h2>
+      <div
+        :class="currentColor + '-ballot'"
+        class="ballot-element center-new-winner"
+        :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
+      >
+        <span v-if="currentName && colorDone">{{ currentName }}</span>
+      </div>
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    currentWinner: {
+      type: Object
+    },
+    currentWinnerDrawn: {
+      type: Boolean
+    },
+    attendees: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      currentWinnerLocal: {},
+      winnerColor: null,
+      currentColor: null,
+      winnerName: null,
+      currentName: null,
+      colorRounds: 0,
+      nameRounds: 0,
+      colorTimeout: null,
+      nameTimeout: null,
+      colorDone: false,
+      drawing: false,
+      drawingDone: false,
+      winnerQueue: []
+    };
+  },
+  watch: {
+    currentWinner: function(currentWinner) {
+      if (currentWinner == null) {
+        this.drawingDone = false;
+        return;
+      }
+      if (this.drawing) {
+        this.winnerQueue.push(currentWinner);
+        return;
+      }
+      this.drawing = true;
+      this.currentName = null;
+      this.currentColor = null;
+      this.nameRounds = 0;
+      this.colorRounds = 0;
+      this.colorDone = false;
+      this.currentWinnerLocal = currentWinner;
+      this.drawColor(this.currentWinnerLocal.color);
+    }
+  },
+  methods: {
+    drawName: function(winnerName) {
+      if (this.nameRounds == 100) {
+        clearTimeout(this.nameTimeout);
+        this.currentName = winnerName;
+        if (this.winnerQueue.length > 0) {
+          this.currentWinnerLocal = this.winnerQueue.shift();
+          this.drawing = true;
+          this.nameRounds = 0;
+          this.colorRounds = 0;
+          this.colorDone = false;
+          this.drawColor(this.currentWinnerLocal.color);
+          return;
+        }
+        this.drawing = false;
+        this.drawingDone = true;
+        return;
+      }
+      this.currentName = this.attendees[
+        this.nameRounds % this.attendees.length
+      ].name;
+      this.nameRounds += 1;
+      clearTimeout(this.nameTimeout);
+      this.nameTimeout = setTimeout(() => {
+        this.drawName(winnerName);
+      }, 50);
+    },
+    drawColor: function(winnerColor) {
+      this.drawingDone = false;
+      if (this.colorRounds == 100) {
+        this.currentColor = winnerColor;
+        this.colorDone = true;
+        this.drawName(this.currentWinnerLocal.name);
+
+        clearTimeout(this.colorTimeout);
+        return;
+      }
+      this.currentColor = this.getColor(this.colorRounds % 4);
+      this.colorRounds += 1;
+
+      clearTimeout(this.colorTimeout);
+      this.colorTimeout = setTimeout(() => {
+        this.drawColor(winnerColor);
+      }, 50);
+    },
+    getRotation: function() {
+      if (this.colorDone) {
+        return 0;
+      }
+      let num = Math.floor(Math.random() * 15);
+      let neg = Math.floor(Math.random() * 2);
+      return neg == 0 ? -num : num;
+    },
+    getColor: function(number) {
+      switch (number) {
+        case 0:
+          return "red";
+        case 1:
+          return "blue";
+        case 2:
+          return "green";
+        case 3:
+          return "yellow";
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/global.scss";
+@import "../styles/variables.scss";
+@import "../styles/media-queries.scss";
+
+h2 {
+  text-align: center;
+}
+
+.current-drawn-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ballot-element {
+  width: 140px;
+  height: 140px;
+  font-size: 1.2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/src/ui/Winners.vue b/src/ui/Winners.vue
new file mode 100644
index 0000000..f13b49e
--- /dev/null
+++ b/src/ui/Winners.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <h2 v-if="winners.length > 0">Vinnere</h2>
+    <div class="winners" v-if="winners.length > 0">
+      <div class="winner" v-for="(winner, index) in winners" :key="index">
+        <div :class="winner.color + '-ballot'" class="ballot-element">
+          {{ winner.name }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    winners: {
+      type: Array
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/global.scss";
+@import "../styles/variables.scss";
+@import "../styles/media-queries.scss";
+
+h2 {
+  text-align: center;
+}
+
+.winners {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.ballot-element {
+  font-size: 1rem;
+  width: 145px;
+  height: 145px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+}
+</style>