Added stop button

src/App.vue

@@ -2,7 +2,7 @@
   <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" v-on:set-playsound="setPlaySound"/>
-    <Timer v-if="time != 0" v-bind:time="time" v-bind:playsound="playsound"/>
+    <Timer v-if="time != 0" v-bind:time="time" v-bind:playsound="playsound" v-on:set-time="setTime" v-on:set-playsound="setPlaySound"/>
   </div>
 </template>
 
@@ -36,9 +36,8 @@ export default {
       } else {
         return false;
       }
-    }
+    },
-  }
+  },
-
 }
 </script>
 

src/components/Timer.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="timer">
+    <div class="end" v-on:click="resetTime()">X</div>
     <p v-if="warning == false" class="timeleft reverse">{{ countDown.toString() }}</p>
     <p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout reverse">
       <img src="joker.png" alt="joker">
@@ -35,9 +36,10 @@ export default {
       wakeLock: null,
     }
   },
-  mounted: function() {
-  },
   methods: {
+    resetTime: function() {
+      this.$emit('set-time', 0);
+    },
     timeleft: function(){
       this.countDown--;
       if(this.countDown == 0) {
@@ -115,6 +117,13 @@ export default {
     transform: scale(-1, -1);
   }
 
+  .end {
+    display: block;
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    font-size: 32px;
+  }
 }
 
 </style>