Added wakelock implementation

src/App.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="app">
+    <p class="error" v-if="wakeLockAvailable == false">Wake lock not available</p>
     <Settings v-if="time == 0" v-on:set-time="setTime"/>
     <Timer v-if="time != 0" v-bind:time="time"/>
   </div>
@@ -17,19 +18,28 @@ export default {
   },
   data: function() {
     return {
-      time: 0
+      time: 0,
+      wakeLockAvailable: this.hasWakeLock()
     }
   },
   methods: {
     setTime(number) {
       this.time = number;
+    },
+    hasWakeLock() {
+      if ('wakeLock' in navigator) {
+        return true;
+      } else {
+        return false;
+      }
     }
   }
 
 }
 </script>
 
-<style>
+<style lang="scss">
+
 html, body {
   height: 100%;
   margin: 0;
@@ -42,4 +52,12 @@ html, body {
   color: #2c3e50;
   height: 100%;
 }
+
+.error {
+  background: $light-red;
+  border: 1px solid $dark-red;
+  padding: 5px;
+  color: $dark-red;
+  margin: 5px;
+}
 </style>

src/components/Settings.vue

@@ -2,28 +2,31 @@
   <div class="settings">
     <div class="time">
       <p>Kies het aantal seconden:</p>
-      <span class="time-choice" v-on:click="setTime(15)">15</span>
-      <span class="time-choice" v-on:click="setTime(30)">30</span>
-      <span class="time-choice" v-on:click="setTime(45)">45</span>
-      <span class="time-choice" v-on:click="setTime(60)">60</span>
-      <span class="time-choice" v-on:click="setTime(75)">75</span>
-      <span class="time-choice" v-on:click="setTime(90)">90</span>
+      <span class="time-choice" v-bind:class="{ selected: time == 15 }" v-on:click="setTime(15)">15</span>
+      <span class="time-choice" v-bind:class="{ selected: time == 30 }" v-on:click="setTime(30)">30</span>
+      <span class="time-choice" v-bind:class="{ selected: time == 45 }" v-on:click="setTime(45)">45</span>
+      <span class="time-choice" v-bind:class="{ selected: time == 60 }" v-on:click="setTime(60)">60</span>
+      <span class="time-choice" v-bind:class="{ selected: time == 75 }" v-on:click="setTime(75)">75</span>
+      <span class="time-choice" v-bind:class="{ selected: time == 90 }" v-on:click="setTime(90)">90</span>
     </div>
+    <button class="start-game" v-on:click="startGame()">Start het spel!</button>
   </div>
 </template>
 
 <script>
 export default {
   name: "Settings",
-  props: {
-    time: {
-      type: Number,
-      default: 0
+  data: function() {
+    return {
+      time: 0,
     }
   },
   methods: {
-    setTime(number) {
-      this.$emit('set-time', number);
+    setTime(time) {
+      this.time = time
+    },
+    startGame() {
+      this.$emit('set-time', this.time);
     }
   }
 }
@@ -31,8 +34,23 @@ export default {
 
 <style lang="scss">
   .time-choice {
-    font-size: 32px;
+    font-size: 48px;
     display: inline-block;
     padding: 25px;
+    &.selected {
+      color: $red;
+    }
   }
+
+  .start-game {
+    appearance: none;
+    border: 1px solid #2c3e50;
+    border-radius: 3px;
+    font-size: 3rem;
+    background: none;
+    padding: 2rem;
+  }
+
+
+
 </style>

src/components/Timer.vue

@@ -31,6 +31,7 @@ export default {
     return {
       countDown: -2,
       warning: true,
+      wakeLock: null,
     }
   },
   mounted: function() {
@@ -45,6 +46,9 @@ export default {
 
     },
     restartTimer: function() {
+      if(this.wakeLock == null && 'wakeLock' in navigator) {
+        this.wakeLock = navigator.wakeLock.request('screen');
+      }
       this.countDown = this.time;
       this.warning = false;
       clearInterval(Interval);

src/scss/vars.scss

@@ -0,0 +1,3 @@
+$light-red: #ff8888;
+$dark-red: #880000;
+$red: #ff0000;

vue.config.js

@@ -9,7 +9,7 @@ module.exports = {
             // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
             // in that case, we can target the `scss` syntax separately using the `scss` option
             scss: {
-                additionalData: `@import "~@/scss/fonts.scss";`
+                additionalData: `@import "~@/scss/fonts.scss";@import "~@/scss/vars.scss";`
             },
         }
     }