Add timer

src/App.vue

@@ -2,7 +2,11 @@
   <v-app>
     <v-content>
       <v-container>
-        <div id="gamediv" style="width: 640px; height: 480px; display: block; position: relative" class="apply-font">
+        <div
+          id="gamediv"
+          style="width: 640px; height: 480px; display: block; position: relative"
+          class="apply-font"
+        >
           <div style="width: 640px; height: 480px; position: absolute; overflow: hidden;">
             <video loop autoplay muted :src="webmsource"></video>
           </div>
@@ -17,6 +21,13 @@
               :style="{ backgroundImage: 'url(' + overlayimg + ')', backgroundSize: 'cover' }"
               v-if="showoverlay"
             ></div>
+            <div
+              v-if="showtimer"
+              style="position: absolute; top: 0; left: 0; z-index: 20; width: 640px; height: 480px; display: block;"
+            >
+              <base-timer :timeLimit="timer" :afterTimer="stoptimer"></base-timer>
+            </div>
+
             <template v-if="currentLevel==0">
               <v-card-title class="pa-6 font-weight-black levelscore apply-font">
                 High Score: {{ highscore }} by {{ highscorer }}
@@ -90,8 +101,8 @@
               <v-col cols="auto">
                 <v-checkbox v-model="autonext" label="Next task after complete"></v-checkbox>
               </v-col>
-
-            </v-row><v-row>
+            </v-row>
+            <v-row>
               <v-col cols="1">
                 <v-text-field dense v-model="name" label="Player Name" placeholder="Player Name"></v-text-field>
               </v-col>
@@ -140,13 +151,18 @@
                 ></v-select>
                 <v-btn @click="startoverlay">Start Cutscene</v-btn>
               </v-col>
+              <v-col cols="auto">
+                <v-select v-model="timer" label="Countdown time" :items="countdownitems"></v-select>
+                <v-btn @click="starttimer">Start Timer</v-btn>
+              </v-col>
               <v-col cols="1">
                 <font-picker
                   :api-key="'AIzaSyCAW_4WvUsVuikytJw_yvJKxHKRHrCsBAs'"
                   :options="options"
-                  :active-font="fontFamily" @change="fontChanged"></font-picker>
+                  :active-font="fontFamily"
+                  @change="fontChanged"
+                ></font-picker>
               </v-col>
-
             </v-row>
           </v-card-text>
         </v-card>
@@ -157,12 +173,14 @@
     <script>
 import Vuetify from "vuetify";
 // api key AIzaSyCAW_4WvUsVuikytJw_yvJKxHKRHrCsBAs
-import FontPicker from 'font-picker-vue';
+import FontPicker from "font-picker-vue";
+import BaseTimer from "./components/BaseTimer.vue";
 
 export default {
   vuetify: new Vuetify(),
   components: {
-    FontPicker
+    FontPicker,
+    BaseTimer
   },
   beforeMount: function() {
     for (var x = 0; x < this.slides.length; x++) {
@@ -187,11 +205,19 @@ export default {
     },
     scramble: function() {
       var tmp = [];
-      for (var x=this.currenttask+1;x<this.slides[this.currentLevel].tasks.length; x++) {
+      for (
+        var x = this.currenttask + 1;
+        x < this.slides[this.currentLevel].tasks.length;
+        x++
+      ) {
         tmp.push(this.slides[this.currentLevel].tasks[x]);
       }
       tmp.sort(() => Math.random() - 0.5);
-      for (x=this.currenttask+1;x<this.slides[this.currentLevel].tasks.length; x++) {
+      for (
+        x = this.currenttask + 1;
+        x < this.slides[this.currentLevel].tasks.length;
+        x++
+      ) {
         this.slides[this.currentLevel].tasks[x] = tmp.pop();
       }
     },
@@ -254,10 +280,16 @@ export default {
     stopoverlay: function() {
       this.showoverlay = false;
     },
+       starttimer: function() {
+      this.showtimer=true;
+    },
+    stoptimer: function() {
+      this.showtimer=false;
+    },
+
     fontChanged: function(e) {
       console.log(e);
       this.fontFamily = e.family;
-    
     }
   },
   computed: {
@@ -268,9 +300,9 @@ export default {
   data: function() {
     return {
       options: {
-        sort: 'popularity',
+        sort: "popularity"
       },
-      fontFamily: 'Roboto',
+      fontFamily: "Roboto",
 
       overlayimages: [
         { name: "Mask Heart", file: "assets/maskheart.gif" },
@@ -442,7 +474,19 @@ export default {
       highscorer: "Ashley",
       showoverlay: false,
       overlayimg: "",
-      bonuspoints: 100
+      bonuspoints: 100,
+       timer: {},
+      countdownitems: [
+        { "text": '10', "value": "10" },
+        { "text": '20', "value": "20" },
+        { "text": '30', "value": "30" },
+        { "text": '60', "value": "60" },
+        { "text": '90', "value": "90" },
+        { "text": '120', "value": "120" },
+        { "text": '300', "value": "300" }
+      ],
+      showtimer: false,
+
     };
   }
 };
@@ -485,8 +529,8 @@ video {
   height: 480px;
 }
 
-
-.v-card__text, .v-card__title {
+.v-card__text,
+.v-card__title {
   word-break: normal; /* maybe !important  */
 }
 </style>

src/components/BaseTimer.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="base-timer">
+    <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+      <g class="base-timer__circle">
+        <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
+        <path
+          :stroke-dasharray="circleDasharray"
+          class="base-timer__path-remaining"
+          :class="remainingPathColor"
+          d="
+            M 50, 50
+            m -45, 0
+            a 45,45 0 1,0 90,0
+            a 45,45 0 1,0 -90,0
+          "
+        ></path>
+      </g>
+    </svg>
+    <span class="base-timer__label">{{ formattedTimeLeft }}</span>
+  </div>
+</template>
+
+<script>
+const FULL_DASH_ARRAY = 283;
+const WARNING_THRESHOLD = .30;
+const ALERT_THRESHOLD = .10;
+
+const COLOR_CODES = {
+  info: {
+    color: "green"
+  },
+  warning: {
+    color: "orange",
+    threshold: WARNING_THRESHOLD
+  },
+  alert: {
+    color: "red",
+    threshold: ALERT_THRESHOLD
+  }
+};
+
+
+export default {
+  data() {
+    return {
+      timePassed: 0,
+      timerInterval: null
+    };
+  },
+ props: {
+     timeLimit: Number,
+     afterTimer: Function
+ },
+  computed: {
+    circleDasharray() {
+      return `${(this.timeFraction * FULL_DASH_ARRAY).toFixed(0)} 283`;
+    },
+
+    formattedTimeLeft() {
+      const timeLeft = this.timeLeft;
+      const minutes = Math.floor(timeLeft / 60);
+      let seconds = timeLeft % 60;
+
+      if (seconds < 10) {
+        seconds = `0${seconds}`;
+      }
+
+      return `${minutes}:${seconds}`;
+    },
+
+    timeLeft() {
+      return this.timeLimit - this.timePassed;
+    },
+
+    timeFraction() {
+      const rawTimeFraction = this.timeLeft / this.timeLimit;
+      return rawTimeFraction - (1 / this.timeLimit) * (1 - rawTimeFraction);
+    },
+
+    remainingPathColor() {
+      const { alert, warning, info } = COLOR_CODES;
+
+      if (this.timeLeft <= this.timeLimit*alert.threshold) {
+        return alert.color;
+      } else if (this.timeLeft <= this.timeLimite*warning.threshold) {
+        return warning.color;
+      } else {
+        return info.color;
+      }
+    }
+  },
+
+  watch: {
+    timeLeft(newValue) {
+      if (newValue === 0) {
+        this.onTimesUp();
+      }
+    }
+  },
+
+  mounted() {
+    this.startTimer();
+  },
+
+  methods: {
+    onTimesUp() {
+      clearInterval(this.timerInterval);
+      this.afterTimer();
+    },
+
+    startTimer() {
+      this.timerInterval = setInterval(() => (this.timePassed += 1), 1000);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.base-timer {
+  position: relative;
+  width: 480px;
+  height: 300px;
+  margin-left: auto;
+  margin-right: auto;
+
+  &__svg {
+    transform: scaleX(-1);
+  }
+
+  &__circle {
+    fill: none;
+    stroke: none;
+  }
+
+  &__path-elapsed {
+    stroke-width: 7px;
+    stroke: grey;
+  }
+
+  &__path-remaining {
+    stroke-width: 7px;
+    stroke-linecap: round;
+    transform: rotate(90deg);
+    transform-origin: center;
+    transition: 1s linear all;
+    fill-rule: nonzero;
+    stroke: currentColor;
+
+    &.green {
+      color: rgb(65, 184, 131);
+    }
+
+    &.orange {
+      color: orange;
+    }
+
+    &.red {
+      color: red;
+    }
+  }
+
+  &__label {
+    position: absolute;
+    width: 480px;
+    height: 360px;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 48px;
+    color: white;
+    text-shadow: 1px 1px black;
+  }
+}
+</style>