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 }}
@@ -81,7 +92,7 @@
               <v-col cols="auto">
                 <v-btn x-small dense @click="scramble">Shuffle</v-btn>
               </v-col>
-             <v-col cols="auto">
+              <v-col cols="auto">
                 <v-btn x-small dense @click="nexttask">Next Task</v-btn>
               </v-col>
               <v-col cols="auto" v-if="currentLevel<(slides.length -1)">
@@ -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>
-                  </v-col>
-
+                <font-picker
+                  :api-key="'AIzaSyCAW_4WvUsVuikytJw_yvJKxHKRHrCsBAs'"
+                  :options="options"
+                  :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++) {
@@ -186,13 +204,21 @@ export default {
       }
     },
     scramble: function() {
-      var tmp=[];
-      for (var x=this.currenttask+1;x<this.slides[this.currentLevel].tasks.length; x++) {
+      var tmp = [];
+      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++) {
-        this.slides[this.currentLevel].tasks[x]=tmp.pop();
+      for (
+        x = this.currenttask + 1;
+        x < this.slides[this.currentLevel].tasks.length;
+        x++
+      ) {
+        this.slides[this.currentLevel].tasks[x] = tmp.pop();
       }
     },
     nexttask: function() {
@@ -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;
-    
+      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>