From 3a6a9122e110369ce90327ffb005d1263172488d Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Fri, 26 Nov 2021 20:44:58 +0100
Subject: [PATCH] Some shake animation on unsuccessful code input

---
 frontend/components/AccessCodePage.vue | 39 ++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/frontend/components/AccessCodePage.vue b/frontend/components/AccessCodePage.vue
index 612db24..4ed692f 100644
--- a/frontend/components/AccessCodePage.vue
+++ b/frontend/components/AccessCodePage.vue
@@ -11,7 +11,7 @@
         <label>Din vinlottis kode:</label>
       </div>
 
-      <div class="codeinput-container">
+      <div id="code-container" class="codeinput-container">
         <input v-model="code" placeholder="KODE" @keyup.enter="submit" />
         <button class="vin-button" @click="submit">ENTER</button>
       </div>
@@ -56,6 +56,13 @@ export default {
       const { video } = this.$refs;
       video.paused ? video.play() : video.pause();
     },
+    smh() {
+      let inputContainer = document.getElementById('code-container')
+      inputContainer.classList.add('shake')
+      if (this.timeout)
+        clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => inputContainer.classList.remove('shake'), 600);
+    },
     submit() {
       const site = __sites__.find(site => site.code?.toLowerCase() == this.code?.toLowerCase());
 
@@ -67,8 +74,6 @@ export default {
       } else {
         this.smh()
       }
-
-      return;
     },
   },
 };
@@ -131,6 +136,11 @@ video {
     width: 80%;
   }
 
+  &.shake {
+    animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    animation-iteration-count: infinite;
+  }
+
   input {
     max-width: 24rem;
     width: 100%;
@@ -209,4 +219,27 @@ video {
 .button-container {
   margin-top: 4rem;
 }
+
+@keyframes shake {
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
 </style>