update router to use dates, fix QuizFinishedFail typo

Author: jeffreywhitaker

src/plugins/router.js

@@ -2,6 +2,7 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 import { auth } from "@/api";
 import store from "@/store";
+import moment from "moment";
 
 Vue.use(VueRouter);
 
@@ -22,6 +23,23 @@ async function logout() {
  await auth.logout();
 }
 
+// dates for determining components to render
+
+// start and end time for questions before boss question
+let mainQuestionsStartTime = moment("5 Apr 2021 08:00:00 CDT");
+let mainQuestionsEndTime = moment("25 Apr 2021 23:59:59 CDT");
+
+// start and end time for boss question (final question)
+let bossStartTime = moment("26 Apr 2021 08:00:00 CDT");
+let bossEndTime = moment("30 Apr 2021 23:59:59 CDT");
+
+// start and end time for voting
+let votingStartTime = moment("3 May 2021 08:00:00 CDT");
+let votingEndTime = moment("7 May 2021 23:59:59 CDT");
+
+// easy route testing by passing a date string below
+let now = moment();
+
 const routes = [
  // testing route
  {
@@ -42,7 +60,6 @@ const routes = [
  beforeEnter(to, from, next) {
  // for testing
  if (to.path === "/testing/vote") {
- console.log("in redirect", to.path);
  next({ path: "/testing/vote" });
  return;
  }
@@ -134,23 +151,21 @@ const routes = [
  path: "voting",
  name: "voting",
  component: () => {
- // return import("@/views/Voting/VotingOver");
- return import("@/views/Voting/VoteWoah");
- // if (isChallengeClosed()) {
- // return import("@/views/Voting/Ballot");
- // } else {
- // return import("@/views/Voting/VoteWoah");
- // }
+ // show VoteWoah if before vote start time
+ if (now < votingStartTime) {
+ return import("@/views/Voting/VoteWoah");
+ }
+
+ // show VotingOver if past vote end time
+ if (now > votingEndTime) {
+ // TODO: add a leaderboard here once built
+ return import("@/views/Voting/VotingOver");
+ }
+
+ // show Ballot otherwise
+ return import("@/views/Voting/Ballot");
  }
  }
- // {
- // path: "vote-confirmation",
- // name: "voting-confirmation",
- // meta: {
- // challengeOver: true
- // },
- // component: () => import("@/views/Voting/Confirm")
- // }
  ]
  },
  {
@@ -163,38 +178,71 @@ const routes = [
  path: "quiz",
  name: "quiz",
  component: async () => {
- // CHALLENGE HAS NOT STARTED
- if (!isChallengeOpen()) {
+ // time before challenge has started
+ if (now < mainQuestionsStartTime) {
+ // TODO: update QuizCountdown's content for 2022's before start time
  return import("@/views/Quiz/QuizCountdown");
  }
 
- // USER HAS FINISHED QUIZ
- if (store.state.Quiz.maxRank === store.state.User.rank - 1) {
- return import("@/views/Quiz/QuizFinished");
- }
+ // time during main quiz
+ if (now >= mainQuestionsStartTime && now <= mainQuestionsEndTime) {
+ // USER HAS FINISHED QUIZ
+ // TODO: for 2022 import a 'you finished now wait for boss' component
+ // if done will all questions except boss
 
- // User did not make the cut
- if (
- store.state.Quiz.rankToday == store.state.Quiz.maxRank &&
- store.state.User.rank != store.state.Quiz.rankToday
- ) {
- return import("@/views/Quiz/QuizFinishedFail");
+ // NORMAL QUIZ MODE
+ return import("@/views/Quiz/Quiz");
  }
 
- // MUST WAIT FOR NEXT QUESTION
- if (store.state.Quiz.awaitNextQuestion) {
+ // time between main questions ending and boss starting
+ if (now > mainQuestionsEndTime && now < bossStartTime) {
+ // TODO: for 2022 make an await final boss component, or start passing props to QuizCountdown
+
+ // MUST WAIT FOR NEXT QUESTION
  return import("@/views/Quiz/QuizCountdown");
  }
 
- // SHOW THE LAST QUESTION
- if (store.state.Quiz.isLastQuestion) {
- return import("@/views/Quiz/QuizFinalQuestion");
+ // time during boss final question
+ if (now >= bossStartTime && now <= bossEndTime) {
+ // User did not make the cut
+ if (
+ store.state.Quiz.rankToday == store.state.Quiz.maxRank &&
+ store.state.User.rank != store.state.Quiz.rankToday
+ ) {
+ return import("@/views/Quiz/QuizFinishedFail");
+ }
+
+ // user has finished the boss question
+ if (store.state.Quiz.maxRank === store.state.User.rank - 1) {
+ return import("@/views/Quiz/QuizFinished");
+ }
+
+ // show boss question
+ if (store.state.Quiz.isLastQuestion) {
+ return import("@/views/Quiz/QuizFinalQuestion");
+ }
  }
 
- // NORMAL QUIZ MODE
- return import("@/views/Quiz/Quiz");
+ // time after boss question ends and before voting
+ if (now > bossEndTime && now < votingStartTime) {
+ // user has finished the boss question
+ if (store.state.Quiz.maxRank === store.state.User.rank - 1) {
+ return import("@/views/Quiz/QuizFinished");
+ }
+
+ // if time is up and they did not finish, they failed
+ return import("@/views/Quiz/QuizFinishedFail");
+ }
+
+ // times after voting starts are handled in the route guard
+ // TODO: make a component that alerts before redirect to /voting for better user experience
  },
  beforeEnter(from, to, next) {
+ // redirect if all sections of quiz are over
+ if (now >= votingStartTime) {
+ next("/voting");
+ }
+
  // USER MUST SEE INTRO VIDEO
  if (
  isChallengeOpen() &&
@@ -252,7 +300,6 @@ const router = new VueRouter({
 router.beforeEach(async (to, from, next) => {
  // for testing
  if (to.path === "/testing/vote") {
- console.log("bypassing beforeEach");
  next();
  return;
  }

src/views/Quiz/QuizFinishedFail.vue

@@ -13,8 +13,8 @@
  </p>
 
  <p>
- You can still vote for this year's winner from April 26-30 and try
- again next year.
+ You can still vote for this year's winner from April May 3 to May 7
+ and try again next year.
  </p>
 
  <v-btn :to="{ name: 'voting' }" color="white" light