Added design and sound effect

src/App.vue

@@ -1,8 +1,8 @@
 <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"/>
+    <Settings v-if="time == 0" v-on:set-time="setTime" v-on:set-playsound="setPlaySound"/>
+    <Timer v-if="time != 0" v-bind:time="time" v-bind:playsound="playsound"/>
   </div>
 </template>
 
@@ -19,6 +19,7 @@ export default {
   data: function() {
     return {
       time: 0,
+      playsound: false,
       wakeLockAvailable: this.hasWakeLock()
     }
   },
@@ -26,6 +27,9 @@ export default {
     setTime(number) {
       this.time = number;
     },
+    setPlaySound(state) {
+      this.playsound = state;
+    },
     hasWakeLock() {
       if ('wakeLock' in navigator) {
         return true;
@@ -41,6 +45,8 @@ export default {
 <style lang="scss">
 
 html, body {
+  background-image: url("~@/img/background.png");
+  background-size: cover;
   height: 100%;
   margin: 0;
 }
@@ -49,7 +55,7 @@ html, body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  color: $white;
   height: 100%;
 }
 

src/components/Settings.vue

@@ -9,6 +9,13 @@
       <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>
+    <div class="playsound">
+      <p>Geluid afspelen?</p>
+      <label class="switch">
+        <input type="checkbox" class="playSound" v-model="playsound">
+        <span class="slider round"></span>
+      </label>
+    </div>
     <button class="start-game" v-on:click="startGame()">Start het spel!</button>
   </div>
 </template>
@@ -19,13 +26,19 @@ export default {
   data: function() {
     return {
       time: 0,
+      playsound: false,
     }
   },
   methods: {
     setTime(time) {
       this.time = time
     },
+    setPlaySound() {
+      let state = document.querySelector(".playSound").checked;
+      this.playsound = state;
+    },
     startGame() {
+      this.$emit('set-playsound', this.playsound);
       this.$emit('set-time', this.time);
     }
   }
@@ -33,6 +46,7 @@ export default {
 </script>
 
 <style lang="scss">
+  p { margin-top: 0; margin-bottom: 1em; padding-top: 1em;}
   .time-choice {
     font-size: 48px;
     display: inline-block;
@@ -44,11 +58,13 @@ export default {
 
   .start-game {
     appearance: none;
-    border: 1px solid #2c3e50;
+    border: 1px solid $white;
     border-radius: 3px;
     font-size: 3rem;
     background: none;
     padding: 2rem;
+    color: $white;
+    margin: 1rem;
   }
 
 

src/components/Timer.vue

@@ -26,6 +26,7 @@ export default {
   name: "Timer",
   props: {
     time: Number,
+    playsound: Boolean,
   },
   data: function() {
     return {
@@ -41,6 +42,11 @@ export default {
       this.countDown--;
       if(this.countDown == 0) {
         this.warning = true
+
+        if(this.playsound) {
+          var audio = new Audio('timeout.wav');
+          audio.play();
+        }
         clearInterval(Interval);
       }
 
@@ -70,8 +76,15 @@ export default {
   justify-content: space-between;
 
   .timeleft {
-    font-size: 5rem;
-    margin: 40px;
+    font-size: 60px;
+    padding: 23px 20px 84px 20px;
+    margin: 10px 0;
+    color: $black;
+    background-image: url("~@/img/tile-back.svg");
+    background-size: cover;
+    text-align: center;
+    width: 80px;
+    height: 60px;
   }
 
   .timeout {
@@ -84,7 +97,7 @@ export default {
 
   .timerBtn {
     appearance: none;
-    border: 1px solid #2c3e50;
+    border: 1px solid $white;
     border-radius: 3px;
     font-size: 3rem;
     background: none;
@@ -94,7 +107,7 @@ export default {
       display: inline-block;
       height: 2rem;
       width: 2rem;
-      background-color: #2c3e50;
+      background-color: $white;
     }
   }
 

src/scss/form-elements.scss

@@ -0,0 +1,63 @@
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $light-gray;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: $red;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px $red;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

src/scss/includes.scss

@@ -0,0 +1,3 @@
+@import "~@/scss/vars.scss";
+@import "~@/scss/form-elements.scss";
+@import "~@/scss/fonts.scss";

src/scss/vars.scss

@@ -1,3 +1,6 @@
 $light-red: #ff8888;
 $dark-red: #880000;
-$red: #ff0000;
+$red: #ff0000;
+$white: #f9e3d1;
+$black: #121212;
+$light-gray: #ababab;

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";@import "~@/scss/vars.scss";`
+                additionalData: `@import "~@/scss/includes.scss";`
             },
         }
     }