From bb238ed8b9862b3cc1e269f8e24dd07a944e6299 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?=
 <kasper.rynning-tonnesen@knowit.no>
Date: Tue, 21 Jan 2020 16:23:48 +0100
Subject: [PATCH] ROTATION

---
 src/components/GeneratePage.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/GeneratePage.vue b/src/components/GeneratePage.vue
index 83419e4..fff18c3 100644
--- a/src/components/GeneratePage.vue
+++ b/src/components/GeneratePage.vue
@@ -21,7 +21,12 @@
       <p>Gul: {{ yellow }}</p>
     </div>-->
     <div class="colors">
-      <div v-for="color in colors" :class="getColorClass(color)" class="color-box"></div>
+      <div
+        v-for="color in colors"
+        :class="getColorClass(color)"
+        class="color-box"
+        :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
+      ></div>
     </div>
 
     <img src="/images/vipps.png" class="vipps-image" />
@@ -77,6 +82,12 @@ export default {
         this.generateColors(event, time + 1);
       }, 50);
     },
+    getRotation: function() {
+      let num = Math.floor(Math.random() * 15);
+      let neg = Math.floor(Math.random() * 2);
+      console.log(neg);
+      return neg == 0 ? -num : num;
+    },
     getColorClass: function(number) {
       if (number == 1) {
         return "red";
@@ -160,7 +171,7 @@ input {
 .color-box {
   width: 150px;
   height: 150px;
-  margin: 10px;
+  margin: 20px;
 }
 
 button {