Finalfinalfinal

src/components/FinalQuestionSuccess.vue

@@ -0,0 +1,80 @@
+<template>
+ <div :class="`overlay ${dynamicClass}`" v-if="isOpen">
+ <img src="/images/complete_joy.svg" />
+ <div class="content">
+ <v-btn @click="onClick">Continue</v-btn>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "FinalQuestionSuccess",
+ data() {
+ return {
+ dynamicClass: "idle",
+ isOpen: true
+ };
+ },
+ methods: {
+ onClick() {
+ this.dynamicClass = "hidden";
+ setTimeout(() => {
+ this.isOpen = false;
+ }, 1000);
+ }
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+$top: 100px;
+.overlay {
+ background-color: rgba(0, 0, 0, 0.3);
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 10000;
+
+ transition: 1s;
+ opacity: 1;
+
+ &.hidden {
+ opacity: 0;
+ }
+
+ img {
+ display: block;
+ width: 700px;
+ height: auto;
+ margin: auto;
+ top: $top;
+ position: relative;
+ animation-name: victoryAnimation;
+ animation-duration: 2s;
+ }
+
+ .content {
+ position: relative;
+ margin: auto;
+ width: 600px;
+ display: block;
+ text-align: center;
+ border-radius: 12px;
+ // background-color: #fff;
+ height: 200px;
+ top: $top - 70px;
+ }
+
+ @keyframes victoryAnimation {
+ 0% {
+ top: -1000px;
+ }
+ 100% {
+ top: $top;
+ }
+ }
+}
+</style>

src/components/Toolbars/LeaderboardBar.vue

@@ -38,14 +38,16 @@ export default {
  return;
  }
 
- while (this.items.length < 100) {
- for (const leader of leaders) {
+ // while (this.items.length < 100) {
+ for (const leader of leaders) {
+ if (leader[1] > 15) {
  this.items.push({
  username: leader[0],
  rank: leader[1]
  });
  }
  }
+ // }
 
  this.items = shuffle(this.items);
 

src/plugins/router.js

@@ -109,16 +109,24 @@ const routes = [
  // voting routes
  path: "/",
  component: () => import("@/views/Voting/App"),
- meta: { challengeOver: true },
  children: [
  {
  path: "voting",
  name: "voting",
- component: () => import("@/views/Voting/Ballot")
+ component: () => {
+ if (isChallengeClosed()) {
+ return import("@/views/Voting/Ballot");
+ } else {
+ return import("@/views/Voting/VoteWoah");
+ }
+ }
  },
  {
  path: "vote-confirmation",
  name: "voting-confirmation",
+ meta: {
+ challengeOver: true
+ },
  component: () => import("@/views/Voting/Confirm")
  }
  ]

src/views/Quiz/QuizAnswer.vue

@@ -37,7 +37,32 @@
  <v-dialog v-model="showSuccessModal" persistent max-width="400">
  <v-card>
  <v-card-title class="headline">Your answer was correct!</v-card-title>
- <div v-if="Quiz.awaitNextQuestion">
+ <div v-if="Quiz.rank === Quiz.maxRank">
+ <v-card-text>
+ Congratulations, {{ User.displayName }}!
+ <br />
+ You have made it to the final boss level of The Dragon Quest.
+ <br />
+ <br />
+ Your skills are quite impressive and you will be rewarded with a
+ prize for your work.
+ <br /><br />
+ Tomorrow, 8:00 AM CT April 24, you will receive the final boss level
+ question. If you are able to conquer this question, you will be
+ eligible for the grand prize of $100 cash and free STEAM access code
+ from Endless.
+ <br />
+ <br />
+ <span v-if="Quiz.awaitNextQuestion">
+ That's all the questions available for now. The next question
+ unlocks {{ Quiz.nextUnlockMoment.fromNow() }}
+ </span>
+ <v-card-actions>
+ <v-btn block color="primary darken-1" @click="next">OKAY</v-btn>
+ </v-card-actions>
+ </v-card-text>
+ </div>
+ <div v-else-if="Quiz.awaitNextQuestion">
  <v-card-text>
  Congratulations, {{ User.displayName }}!
  <br />
@@ -109,15 +134,23 @@
  </v-card-actions>
  </v-card>
  </v-dialog>
+
+ <final-question-success
+ v-if="showSuccessModal && Quiz.rank === Quiz.maxRank"
+ />
  </div>
 </template>
 
 <script>
 import * as api from "@/api";
 import { User, Quiz } from "@/store";
+import FinalQuestionSuccess from "@/components/FinalQuestionSuccess";
 
 export default {
  name: "quizAnswer",
+ components: {
+ FinalQuestionSuccess
+ },
  props: ["rank"],
  computed: {
  ...Quiz.mapState(),

src/views/Quiz/QuizFinalQuestion.vue

@@ -57,6 +57,7 @@
  >
  <v-btn
  type="submit"
+ v-if="hasRightAnswer"
  :disabled="isSubmitting || !hasRightAnswer"
  large
  color="secondary darken-2"

src/views/Quiz/QuizFinished.vue

@@ -2,8 +2,24 @@
  <div class="mt-6">
  <v-row justify="center">
  <quiz-scroll>
- <template v-slot:title>The Challenge Is Over</template>
- <template v-slot:default>Thank you for playing!</template>
+ <template v-slot:title>Congratulations!</template>
+ <template v-slot:default>
+ <div style="padding-left:130px; padding-right: 130px;">
+ Congratulations young pilgrim!
+ <br />
+ <br />
+ You've qualified for the final round of The Dragon Quest.
+ <br /><br />
+ To win the grand prize of $100 and a free STEAM access code from
+ Endless, come back when the voting period begins, April 26 at 5:00
+ PM CT, to gather votes and cast your vote on who you think has the
+ best solution for the final answer.
+ <br /><br />
+ The player with the highest number of votes will be crowned the
+ champion on May 1. Will you be the champion …
+ <br /><br />Good luck! <br /><br />
+ </div>
+ </template>
  </quiz-scroll>
  </v-row>
  </div>

src/views/Voting/VoteWoah.vue

@@ -0,0 +1,27 @@
+<template>
+ <v-container>
+ <v-row>
+ <v-col>
+ <h2 class="ballot-header">
+ Voting Begins On April 26th at 5:00PM CT
+ </h2>
+ </v-col>
+ </v-row>
+ </v-container>
+</template>
+
+<script>
+export default {
+ name: "VotingWoah"
+};
+</script>
+
+<style lang="scss" scoped>
+h2 {
+ text-align: center;
+ color: #0d1d41;
+ font-family: "Barlow", sans-serif;
+ font-weight: bold;
+ margin-bottom: 12px;
+}
+</style>