fixes bug causing bypass of intro video

.github/workflows/code-quality-checks.yml

@@ -25,7 +25,7 @@ jobs:
         npm install -g yarn
         yarn install
     - name: Install MySQL Client
-      run: sudo apt install default-libmysqlclient-dev
+      run: sudo apt update && sudo apt install default-libmysqlclient-dev
     - name: Install Python dependencies
       run: |
         python -m pip install --upgrade pip

package.json

@@ -14,6 +14,7 @@
     "serialize-javascript": "^2.1.2",
     "vue": "^2.6.10",
     "vue-codemirror": "^4.0.6",
+    "vue-marquee-text-component": "^1.1.1",
     "vue-moment": "^4.1.0",
     "vue-router": "^3.1.3",
     "vue-the-mask": "^0.11.1",

public/index.html

@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css?family=Barlow:400,700&display=swap" rel="stylesheet"> 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
     <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">

src/App.vue

@@ -1,10 +1,14 @@
 <template>
   <v-app>
+    <CWHQ-bar />
     <app-bar />
     <quiz-bar />
     <v-content>
+      <!-- <v-container> -->
       <router-view />
+      <!-- </v-container> -->
     </v-content>
+    <leaderboard-bar />
     <snackbar />
   </v-app>
 </template>
@@ -13,13 +17,17 @@
 import AppBar from "@/components/AppBar";
 import QuizBar from "@/components/QuizBar";
 import Snackbar from "@/components/Snackbar";
+import CWHQBar from "@/components/CWHQBar";
+import LeaderboardBar from "@/components/LeaderboardBar";
 
 export default {
   name: "App",
   components: {
     AppBar,
     QuizBar,
-    Snackbar
+    Snackbar,
+    CWHQBar,
+    LeaderboardBar
   }
 };
 </script>

src/api/auth.js

@@ -12,7 +12,7 @@ let state = {
   displayName: null,
   firstName: null,
   lastName: null,
-  rank: 0
+  rank: -1
 };
 
 async function setState(newState) {
@@ -71,7 +71,7 @@ async function autoLogin() {
 
 async function logout() {
   await request(routes.userapi_logout, {}, false);
-  await setState({ auth: false });
+  await setState({ auth: false, rank: -1 });
 }
 
 function currentUser() {

src/api/index.js

@@ -1,2 +1,3 @@
 export { default as auth } from "./auth";
 export { default as quiz } from "./quiz";
+export { default as voting } from "./voting";

src/api/quiz.js

@@ -22,6 +22,10 @@ async function submit(answer) {
   return result.correct;
 }
 
+async function getLeaderboard() {
+  return request(routes.questionsapi_leaderboard, { per: 1000000 });
+}
+
 async function submitFinal(answer, language, checkOnly) {
   const result = await request(routes.questionsapi_answer_final_question, {
     data: {
@@ -38,5 +42,6 @@ export default {
   submit,
   submitFinal,
   getRank,
-  resetRank
+  resetRank,
+  getLeaderboard
 };

src/api/routes.js

@@ -19,7 +19,14 @@ export default {
   questionsapi_answer_next_question: route("/api/v1/questions/answer", "POST"),
   questionsapi_answer_final_question: route("/api/v1/questions/final", "POST"),
   questionsapi_get_rank: route("/api/v1/questions/rank", "GET"),
-  questions_api_next_question: route("/api/v1/questions/next", "GET")
+  questionsapi_leaderboard: route("/api/v1/questions/leaderboard", "GET"),
+  questions_api_next_question: route("/api/v1/questions/next", "GET"),
+  voting_check: route("/api/v1/vote/check", "GET"),
+  voting_ballot: route("/api/v1/vote/ballot", "GET"),
+  voting_cast: id => {
+    return route(`/api/v1/vote/${id}/cast`, "POST");
+  },
+  voting_confirm: route("/api/v1/vote/confirm", "POST")
 };
 
 // export default {

src/api/voting.js

@@ -0,0 +1,10 @@
+import routes from "./routes";
+import request from "./request";
+
+async function getBallot() {
+  return request(routes.voting_ballot);
+}
+
+export default {
+  getBallot
+};

src/components/AppBar.vue

@@ -3,81 +3,31 @@
     color="dark"
     flat
     dark
-    :height="100"
-    :max-height="100"
+    :height="height"
+    :max-height="height"
     class="pl-4"
   >
-    <div class="d-flex align-center">
+    <div class="text-center" style="width: 100%;">
       <router-link :to="{ name: 'home' }">
-        <v-img
-          alt="CodewizardsHQ Logo"
-          contain
-          src="/images/logo-small.png"
-          transition="scale-transition"
-        />
+        <img src="/images/logo-small.png" class="mt-2" :height="imageHeight" />
       </router-link>
     </div>
-
-    <v-spacer></v-spacer>
-
-    <!-- <v-btn :to="{ name: 'home' }" v-bind="buttonProps">
-      Home
-		</v-btn>-->
-
-    <!-- <v-btn :to="{ name: 'about' }" v-bind="buttonProps">
-      About
-		</v-btn>-->
-    <v-btn :to="{ name: 'quiz' }" v-bind="buttonProps" v-if="User.isAuthorized"
-      >Quiz</v-btn
-    >
-    <help-pop-over>
-      <template v-slot:default="{ on }">
-        <v-btn v-on="on" v-bind="buttonProps">Get Help</v-btn>
-      </template>
-    </help-pop-over>
-    <v-btn
-      :to="{ name: 'login' }"
-      v-bind="buttonProps"
-      v-if="!User.isAuthorized"
-      >Sign In</v-btn
-    >
-    <v-btn
-      :to="{ name: 'register' }"
-      v-bind="buttonProps"
-      v-if="!User.isAuthorized"
-      >Create Account</v-btn
-    >
-    <v-btn
-      :to="{ name: 'logout' }"
-      v-bind="buttonProps"
-      v-if="User.isAuthorized"
-      >Sign Out</v-btn
-    >
   </v-app-bar>
 </template>
 
 <script>
 import { User } from "@/store";
-import HelpPopOver from "./HelpPopOver";
+
 export default {
   name: "appBar",
-  components: {
-    HelpPopOver
-  },
   computed: {
     ...User.mapState()
   },
   data() {
     return {
-      buttonProps: {
-        text: true,
-        xLarge: true,
-        class: "barrow-bold"
-      }
+      height: 60,
+      imageHeight: 50
     };
-  },
-  methods: {
-    getHelp() {}
   }
 };
 </script>

src/components/CWHQBar.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-toolbar class="cwhq-bar" :height="height" :max-height="height">
+    <v-container>
+      <v-spacer />
+      <a href="https://username.codewizardshq.com/edit/">Student Login</a>
+      <a href="https://username.codewizardshq.com/edit/">Parent Login</a>
+      <a href="https://codewizardshq.com/students/">Student Center</a>
+    </v-container>
+  </v-toolbar>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      height: 23
+    };
+  }
+};
+</script>

src/components/FormAlert.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-alert prominent type="error" color="red darken-1" v-if="!!message">
+    <v-row align="center">
+      <v-col class="grow">{{ message }}</v-col>
+      <v-col class="shrink">
+        <v-btn color="white" light @click="$emit('dismiss')">Dismiss</v-btn>
+      </v-col>
+    </v-row>
+  </v-alert>
+</template>
+
+<script>
+export default {
+  props: ["message"]
+};
+</script>

src/components/LeaderboardBar.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-toolbar
+    color="white"
+    :height="height"
+    :min-height="height"
+    :max-height="height"
+    class="leaderboard-bar"
+  >
+    <div class="rotated-text">
+      LEADER
+      <br />BOARD
+    </div>
+    <div class="fade"></div>
+    <marquee-text :duration="(items.length / 5) * 10">
+      <div class="lb-item" v-for="(item, i) in items" :key="i">
+        <img src="/images/shield.png" class="rank float-left" />
+        <div class="rank">{{ item.rank }}</div>
+        <div class="display float-left">{{ item.username }}</div>
+      </div>
+    </marquee-text>
+  </v-toolbar>
+</template>
+
+<script>
+import MarqueeText from "vue-marquee-text-component";
+import * as api from "@/api";
+import { shuffle } from "@/util";
+
+export default {
+  components: {
+    MarqueeText
+  },
+  async mounted() {
+    const leaders = (await api.quiz.getLeaderboard()).items;
+
+    if (leaders.length === 0) {
+      return;
+    }
+
+    while (this.items.length < 100) {
+      for (const leader of leaders) {
+        this.items.push({
+          username: leader[0],
+          rank: leader[1]
+        });
+      }
+    }
+
+    this.items = shuffle(this.items);
+  },
+  data() {
+    return {
+      height: 50,
+      items: []
+    };
+  }
+};
+</script>

src/components/PageCard.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-card tile flat>
+    <v-toolbar color="secondary" dark flat>
+      <v-toolbar-title>
+        <slot name="title"></slot>
+      </v-toolbar-title>
+    </v-toolbar>
+    <slot></slot>
+  </v-card>
+</template>
+
+<script>
+export default {};
+</script>