Mobile warning

src/components/MobileWarning.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="mobile-warning" v-if="show">
+    <img src="/images/logo-small.png" class="mt-6 mb-6" />
+    <h2 class="mb-3">Come back on your desktop!</h2>
+    <p class="pa-10">
+      Our Coding Challenge platform was not created for mobile phones. Please visit challenge.codewizardshq.com from your desktop for the best experience.
+    </p>
+    <v-btn color="button" @click="show = false">Show me anyways</v-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show: true
+    };
+  }
+};
+</script>

src/components/SocialPopOver.vue

@@ -48,7 +48,8 @@ export default {
       },
       {
         icon: "email",
-        to: "mailto:?subject=Join%20me%20in%20the%20CodeWizardsHQ%20Code%20Challenge!"
+        to:
+          "mailto:?subject=Join%20me%20in%20the%20CodeWizardsHQ%20Code%20Challenge!"
       }
     ]
   })

src/components/Toolbars/QuizBar.vue

@@ -37,13 +37,19 @@
               <a href="#" v-on="menu">Get Help</a>
             </template>
             <v-list class="list">
-              <v-list-item href="https://codewizardshq.com/challenge" target="_blank">
+              <v-list-item
+                href="https://codewizardshq.com/challenge"
+                target="_blank"
+              >
                 <v-list-item-title>Check The FAQ</v-list-item-title>
               </v-list-item>
               <v-list-item href="https://discord.gg/HKnpzjQ" target="_blank">
                 <v-list-item-title>Get Help On Discord</v-list-item-title>
               </v-list-item>
-              <v-list-item href="https://www.facebook.com/events/501020200554546/" target="_blank">
+              <v-list-item
+                href="https://www.facebook.com/events/501020200554546/"
+                target="_blank"
+              >
                 <v-list-item-title>Get Help On Facebook</v-list-item-title>
               </v-list-item>
             </v-list>
@@ -63,9 +69,9 @@
 </template>
 
 <script>
-  import {Quiz, User} from "@/store";
+import { Quiz, User } from "@/store";
 
-  export default {
+export default {
   name: "quizBar",
   computed: {
     ...User.mapState(),

src/plugins/router.js

@@ -1,6 +1,6 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import {auth} from "@/api";
+import { auth } from "@/api";
 import store from "@/store";
 
 Vue.use(VueRouter);
@@ -47,7 +47,8 @@ const routes = [
       {
         path: "frequently-asked-questions",
         name: "faq",
-        beforeEnter: () => window.location = "https://codewizardshq.com/challenge"
+        beforeEnter: () =>
+          (window.location = "https://codewizardshq.com/challenge")
       }
     ]
   },

src/store/quiz.js

@@ -1,33 +1,33 @@
-import { mapState } from 'vuex';
-import { quiz } from '@/api';
-import moment from 'moment';
-import Vue from 'vue';
+import { mapState } from "vuex";
+import { quiz } from "@/api";
+import moment from "moment";
+import Vue from "vue";
 
-moment.updateLocale('en', {
+moment.updateLocale("en", {
   relativeTime: {
-    future: 'in %s',
-    past: '%s ago',
-    s: 'a few seconds',
-    ss: '%d seconds',
-    m: 'a minute',
-    mm: '%d minutes',
-    h: 'an hour',
-    hh: '%d hours',
-    d: 'a day',
-    dd: '%d days',
-    M: 'one month',
-    MM: '%d months',
-    y: 'a year',
-    yy: '%d years'
+    future: "in %s",
+    past: "%s ago",
+    s: "a few seconds",
+    ss: "%d seconds",
+    m: "a minute",
+    mm: "%d minutes",
+    h: "an hour",
+    hh: "%d hours",
+    d: "a day",
+    dd: "%d days",
+    M: "one month",
+    MM: "%d months",
+    y: "a year",
+    yy: "%d years"
   }
 });
 
-const moduleName = 'Quiz';
+const moduleName = "Quiz";
 
 function parseDateResponse(dateResponse) {
-  const timeSplit = dateResponse.split(',');
-  let daysString = '0 days';
-  let timeString = '0:0:0';
+  const timeSplit = dateResponse.split(",");
+  let daysString = "0 days";
+  let timeString = "0:0:0";
 
   if (timeSplit.length == 1) {
     // returning only timeString
@@ -37,32 +37,34 @@ function parseDateResponse(dateResponse) {
     daysString = timeSplit[0];
     timeString = timeSplit[1];
   } else {
-    throw new Error('Unexpected error with time response');
+    throw new Error("Unexpected error with time response");
   }
   const days = parseInt(daysString);
-  const time = timeString.split(':');
+  const time = timeString.split(":");
   const hours = time[0];
   const minutes = time[1];
   const seconds = time[2];
   return moment()
-    .add(days, 'days')
-    .add(hours, 'hours')
-    .add(minutes, 'minutes')
-    .add(seconds, 'seconds');
+    .add(days, "days")
+    .add(hours, "hours")
+    .add(minutes, "minutes")
+    .add(seconds, "seconds");
 }
 
 function getDefaultState() {
   return {
     hasSeenIntro: false,
     nextUnlockMoment: moment(),
     quizStartedMoment: moment(),
-    question: '',
-    asset: '',
+    question: "",
+    asset: "",
     rank: 0,
     maxRank: 0,
     isLastQuestion: false,
-    hints: ['', ''],
-    wrongCount: localStorage.getItem('wrongCount') ? parseInt(localStorage.getItem('wrongCount')) : 0,
+    hints: ["", ""],
+    wrongCount: localStorage.getItem("wrongCount")
+      ? parseInt(localStorage.getItem("wrongCount"))
+      : 0,
     quizHasStarted: false,
     quizHasEnded: false,
     awaitNextQuestion: false
@@ -75,38 +77,41 @@ const state = {
 
 const actions = {
   async reset({ commit }) {
-    commit('reset');
+    commit("reset");
   },
   async markAsSeen({ commit }) {
-    commit('hasSeenIntro', true);
+    commit("hasSeenIntro", true);
   },
   async addWrongCount({ state, commit }) {
-    commit('wrongCount', state.wrongCount + 1);
+    commit("wrongCount", state.wrongCount + 1);
   },
   async clearWrongCount({ commit }) {
-    commit('wrongCount', 0);
+    commit("wrongCount", 0);
   },
   async refresh({ state, commit }) {
     // get current rank and see if quiz has started
     try {
       const rank = await quiz.getRank();
-      commit('maxRank', rank.maxRank);
-      commit('quizStartedMoment', moment(rank.startsOn + '+0000', 'MM/DD/YYYY HH:mm   Z'));
+      commit("maxRank", rank.maxRank);
+      commit(
+        "quizStartedMoment",
+        moment(rank.startsOn + "+0000", "MM/DD/YYYY HH:mm   Z")
+      );
       if (rank.rank < 0) {
-        commit('quizHasStarted', false);
-        commit('awaitNextQuestion', false);
-        commit('question', '');
-        commit('asset', '');
-        commit('rank', 0);
-        commit('hints', ['', '']);
-        commit('nextUnlockMoment', parseDateResponse(rank.timeUntilNextRank));
+        commit("quizHasStarted", false);
+        commit("awaitNextQuestion", false);
+        commit("question", "");
+        commit("asset", "");
+        commit("rank", 0);
+        commit("hints", ["", ""]);
+        commit("nextUnlockMoment", parseDateResponse(rank.timeUntilNextRank));
         return;
       }
-      commit('quizHasStarted', true);
-      commit('rank', rank.rank);
+      commit("quizHasStarted", true);
+      commit("rank", rank.rank);
     } catch (err) {
       if (err.status === 403) {
-        commit('quizHasEnded', true);
+        commit("quizHasEnded", true);
         return;
       }
       throw new Error(err);
@@ -115,26 +120,29 @@ const actions = {
     // get current question and see if question is even unlocked
     try {
       const response = await quiz.getQuestion();
-      commit('awaitNextQuestion', false);
-      commit('question', response.question);
-      commit('asset', response.asset);
-      commit('rank', response.rank);
-      commit('hints', response.hints);
-      commit('nextUnlockMoment', moment());
-      commit('isLastQuestion', response.rank === state.maxRank);
+      commit("awaitNextQuestion", false);
+      commit("question", response.question);
+      commit("asset", response.asset);
+      commit("rank", response.rank);
+      commit("hints", response.hints);
+      commit("nextUnlockMoment", moment());
+      commit("isLastQuestion", response.rank === state.maxRank);
     } catch (err) {
       if (err.status === 404) {
-        commit('awaitNextQuestion', true);
-        commit('question', '');
-        commit('asset', '');
-        commit('rank', 0);
-        commit('hints', ['', '']);
-        commit('nextUnlockMoment', parseDateResponse(err.data.timeUntilNextRank));
+        commit("awaitNextQuestion", true);
+        commit("question", "");
+        commit("asset", "");
+        commit("rank", 0);
+        commit("hints", ["", ""]);
+        commit(
+          "nextUnlockMoment",
+          parseDateResponse(err.data.timeUntilNextRank)
+        );
       } else if (err.status === 401) {
-        commit('question', '');
-        commit('asset', '');
-        commit('rank', 0);
-        commit('hints', ['', '']);
+        commit("question", "");
+        commit("asset", "");
+        commit("rank", 0);
+        commit("hints", ["", ""]);
       } else {
         return Promise.reject(err);
       }
@@ -169,7 +177,7 @@ const mutations = {
   },
   wrongCount(state, value) {
     state.wrongCount = value;
-    localStorage.setItem('wrongCount', state.wrongCount);
+    localStorage.setItem("wrongCount", state.wrongCount);
   },
   hints(state, value) {
     state.hints = value;

src/styles/mobile-warning.scss

@@ -0,0 +1,18 @@
+.mobile-warning {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #21252d;
+  color: white;
+  z-index: 10000;
+  text-align: center;
+  display: block;
+}
+
+@media (min-width: 600px) {
+  .mobile-warning {
+    display: none !important;
+  }
+}

src/styles/styles.scss

@@ -14,6 +14,7 @@
   @import "./ballot-card.scss";
   @import "./ballot-modal.scss";
   @import "./buttons.scss";
+  @import "./mobile-warning.scss";
 
   .v-alert {
     font-size: 20px;