Production Test

package.json

@@ -10,13 +10,15 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "prerender-spa-plugin": "^3.4.0",
     "register-service-worker": "^1.6.2",
     "stylelint-order": "^3.1.1",
     "stylelint-prettier": "^1.1.1",
     "stylelint-scss": "^3.11.1",
     "vue": "^2.6.10",
+    "vue-axios": "^2.1.5",
     "vue-meta": "^2.3.0",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
@@ -37,6 +39,7 @@
     "eslint-loader": "^3.0.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^5.0.0",
+    "html-webpack-plugin": "^3.2.0",
     "node-sass": "^4.9.0",
     "prettier": "^1.18.2",
     "sass-loader": "^7.1.0",

src/App.vue

@@ -17,6 +17,12 @@ export default {
   computed: {
     ...mapState(['windowHeight']),
   },
+  mounted() {
+    const path = this.$route.fullPath;
+    if (path !== '/') {
+      this.$router.push('/');
+    }
+  },
 };
 </script>
 
@@ -34,7 +40,7 @@ export default {
   font-family: 'Roboto', 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  min-height: 400px;
+  min-height: 500px;
   position: relative;
   text-align: center;
   width: 100%;

src/components/Form.vue

@@ -1,18 +1,23 @@
 <template>
   <form @submit.prevent="action">
+    <p v-if="this.$store.state.alert" class="alert">{{ $store.state.alert }}</p>
     <input
-      v-if="!submitted"
       ref="email"
+      :class="{ comeOut: submitted }"
       class="email"
       type="email"
       name="email"
       placeholder="Enter your email"
       required="true"
+      :disabled="submitted"
       @focus="isFocused = true"
-      @blur="isFocused = false"
+      @keyup="updateEmail"
+      @blur="updateEmail"
     />
     <Success :submitted="submitted" />
-    <button v-if="!submitted" type="submit" class="notify">Notify Me!</button>
+    <button :class="{ comeOut: submitted }" :disabled="submitted" type="submit" class="notify">
+      {{ loading ? 'Verifying...' : 'Notify Me!' }}
+    </button>
   </form>
 </template>
 
@@ -32,21 +37,46 @@ export default {
       type: Function,
       default: () => 1,
     },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    email: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    updateEmail(e) {
+      this.$store.state.email = e.target.value;
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 @import '@/styles/main.scss';
 
+.alert {
+  background: rgb(255, 162, 162);
+  border-radius: 5px;
+  color: rgb(117, 15, 15);
+  font-weight: 500;
+  margin-bottom: 10px;
+  padding: 5px;
+  text-align: left;
+  width: 100%;
+}
+
 form {
   align-items: center;
   display: flex;
   flex-flow: column;
+  margin-bottom: 20px;
   margin-top: 30px;
   max-width: 500px;
+  position: relative;
   width: 100%;
-
   @include breakpoint(375) {
     margin-top: 35px;
   }
@@ -94,11 +124,46 @@ form {
   max-width: 500px;
   outline: none;
   padding: 10px;
+  transition: background-color 0.2s, transform 0.2s;
   width: 100%;
   @include breakpoint(375) {
     font-size: 20px;
     padding: 12px;
   }
+  @include breakpoint($desktop) {
+    &:hover {
+      background: rgb(6, 126, 6);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+}
+
+.comeOut {
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-name: come-out;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes come-out {
+  0% {
+    opacity: 0.7;
+    transform: translateX(-10px);
+  }
+
+  50% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(-200px);
+    visibility: hidden;
+  }
 }
 
 ::placeholder {

src/components/LogoAnimated.vue

@@ -26,6 +26,8 @@ export default {
     const rightEye = '.logo-animated__eye--right';
     this.mouseTracker(leftEye);
     this.mouseTracker(rightEye);
+    this.touchTracker(leftEye);
+    this.touchTracker(rightEye);
     document.querySelectorAll(logo)[0].style.height = this.height;
     document.querySelectorAll(leftEye)[0].style.height = `calc(${this.height}/ 3.63)`;
     document.querySelectorAll(rightEye)[0].style.height = `calc(${this.height}/ 3.63)`;
@@ -42,6 +44,20 @@ export default {
         eye.style.transform = `rotate(${rotationDegrees}deg)`;
       });
     },
+    touchTracker(className) {
+      let app = document.querySelector('#app');
+      app.addEventListener('touchmove', e => {
+        let eye = document.querySelector(className);
+        let mouseX = eye.getBoundingClientRect().left;
+        let mouseY = eye.getBoundingClientRect().top;
+        let radianDegrees = Math.atan2(
+          e.touches[0].clientX - mouseX,
+          e.touches[0].clientY - mouseY,
+        );
+        let rotationDegrees = radianDegrees * (180 / Math.PI) * -1 + 90;
+        eye.style.transform = `rotate(${rotationDegrees}deg)`;
+      });
+    },
   },
 };
 </script>
@@ -55,6 +71,7 @@ export default {
 
   &__logo {
     height: 100%;
+    width: 100%;
   }
 
   &__eye {

src/components/PurpleNachos.vue

@@ -34,6 +34,8 @@ export default {
     }
   }
 
+  $moveUp: -10px;
+
   img {
     margin-left: -25px;
     margin-right: -35px;
@@ -48,8 +50,7 @@ export default {
     width: 120px;
 
     &:hover {
-      margin-top: -30px;
-      transform: scale(1.2);
+      transform: scale(1.2) translateY($moveUp);
     }
 
     &:active {
@@ -60,7 +61,7 @@ export default {
       transform: rotate(30deg);
 
       &:hover {
-        transform: scale(1.2) rotate(30deg);
+        transform: scale(1.2) rotate(30deg) translateY($moveUp);
       }
 
       &:active {
@@ -72,7 +73,7 @@ export default {
       transform: rotate(10deg);
 
       &:hover {
-        transform: scale(1.2) rotate(10deg);
+        transform: scale(1.2) rotate(10deg) translateY($moveUp);
       }
 
       &:active {

src/components/Success.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="submitted" class="success">
+  <div class="success" :class="{ comeIn: submitted }">
     <h3>Congrats - Email Added</h3>
     <p>You'll be notified once we go live!</p>
   </div>
@@ -26,7 +26,11 @@ export default {
   flex-flow: column;
   height: 130px;
   max-width: 500px;
+  opacity: 0;
   padding: 10px;
+  position: absolute;
+  transform: translateX(-200px);
+  visibility: hidden;
   width: 100%;
   @include flex(center, center);
 
@@ -41,4 +45,30 @@ export default {
     font-size: 22px;
   }
 }
+
+.comeIn {
+  animation-delay: 0.1s;
+  animation-duration: 0.5s;
+  animation-fill-mode: forwards;
+  animation-name: come-in;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes come-in {
+  0% {
+    opacity: 0;
+    transform: translateX(200px);
+  }
+
+  50% {
+    opacity: 0.7;
+    transform: translateX(0px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+    visibility: visible;
+  }
+}
 </style>

src/components/Twitter.vue

@@ -43,7 +43,7 @@ export default {
   .twitter-link {
     color: white;
     text-decoration: none;
-    transition: transform 0.2s;
+    transition-duration: 0.2s;
     @include flex(center, center);
 
     &:hover {

src/main.js

@@ -1,11 +1,13 @@
 import Vue from 'vue';
+import axios from 'axios';
+import VueAxios from 'vue-axios';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 import './registerServiceWorker';
 
 Vue.config.productionTip = false;
-
+Vue.use(VueAxios, axios);
 new Vue({
   router,
   store,

src/store.js

@@ -6,6 +6,9 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   state: {
     windowHeight: '',
+    api: 'https://testing.nachonight.tv/',
+    alert: '',
+    email: '',
   },
   mutations: {},
   actions: {},

src/styles/variables.scss

@@ -1,3 +1,3 @@
 $purple: #5a4d9f;
-$green: #16a736;
+$green: rgb(5, 145, 5);
 $desktop: 1000;