Splitting more, added chat, and fancier draw-animations

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>