From 7e8bce941f632c2d919d4fcdda79780e23821fd7 Mon Sep 17 00:00:00 2001
From: Jeroen De Meerleer <me@jeroened.be>
Date: Fri, 30 Apr 2021 13:14:23 +0200
Subject: [PATCH] Added wakelock implementation

---
 src/App.vue                 | 22 +++++++++++++++++--
 src/components/Settings.vue | 44 ++++++++++++++++++++++++++-----------
 src/components/Timer.vue    |  4 ++++
 src/scss/vars.scss          |  3 +++
 vue.config.js               |  2 +-
 5 files changed, 59 insertions(+), 16 deletions(-)
 create mode 100644 src/scss/vars.scss

diff --git a/src/App.vue b/src/App.vue
index 6486d8d..2aa16cb 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 45f6b32..ee3fff1 100644
--- a/src/components/Settings.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Timer.vue b/src/components/Timer.vue
index 8f68902..927a890 100644
--- a/src/components/Timer.vue
+++ b/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);
diff --git a/src/scss/vars.scss b/src/scss/vars.scss
new file mode 100644
index 0000000..ba61eff
--- /dev/null
+++ b/src/scss/vars.scss
@@ -0,0 +1,3 @@
+$light-red: #ff8888;
+$dark-red: #880000;
+$red: #ff0000;
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 1aa40fa..64f8786 100644
--- a/vue.config.js
+++ b/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";`
             },
         }
     }