Added better warning and sounds

This commit is contained in:
Jeroen De Meerleer 2021-05-05 12:50:35 +02:00
parent cce164037b
commit 1cb1bec05a
5 changed files with 135 additions and 90 deletions

160
package-lock.json generated
View File

@ -1869,16 +1869,6 @@
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
"dev": true "dev": true
}, },
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"cacache": { "cacache": {
"version": "13.0.1", "version": "13.0.1",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz", "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@ -1905,53 +1895,6 @@
"unique-filename": "^1.1.1" "unique-filename": "^1.1.1"
} }
}, },
"chalk": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"source-map": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@ -1968,16 +1911,6 @@
"minipass": "^3.1.1" "minipass": "^3.1.1"
} }
}, },
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": { "terser-webpack-plugin": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz", "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@ -1994,18 +1927,6 @@
"terser": "^4.6.12", "terser": "^4.6.12",
"webpack-sources": "^1.4.3" "webpack-sources": "^1.4.3"
} }
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.2.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
"integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
} }
} }
}, },
@ -11316,6 +11237,87 @@
} }
} }
}, },
"vue-loader-v16": {
"version": "npm:vue-loader@16.2.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
"integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-style-loader": { "vue-style-loader": {
"version": "4.1.3", "version": "4.1.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

BIN
public/sfx/next.wav Normal file

Binary file not shown.

BIN
public/sfx/warning.wav Normal file

Binary file not shown.

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="timer"> <div class="timer">
<div class="end" v-on:click="resetTime()">X</div> <div class="end" v-on:click="resetTime()">X</div>
<p v-if="warning == false" class="timeleft reverse">{{ countDown.toString() }}</p> <p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft reverse">{{ countDown.toString() }}</p>
<p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout reverse"> <p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout reverse">
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
@ -10,7 +10,7 @@
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
</p> </p>
<button v-on:click="restartTimer" class="timerBtn"><span class="timerBtn-inner"></span></button> <button v-on:click="restartTimer" class="timerBtn"><span class="timerBtn-inner"></span></button>
<p v-if="warning == false" class="timeleft">{{ countDown.toString() }}</p> <p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft">{{ countDown.toString() }}</p>
<p v-if="warning == true || (typeof warning == 'undefined')" class="timeout"> <p v-if="warning == true || (typeof warning == 'undefined')" class="timeout">
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
@ -33,7 +33,11 @@ export default {
return { return {
countDown: -2, countDown: -2,
warning: true, warning: true,
danger: false,
wakeLock: null, wakeLock: null,
sfxTimeout: this.playsound ? new Audio('sfx/timeout.wav') : null,
sfxWarning: this.playsound ? new Audio('sfx/warning.wav') : null,
sfxNext: this.playsound ? new Audio('sfx/next.wav') : null,
} }
}, },
methods: { methods: {
@ -42,28 +46,63 @@ export default {
}, },
timeleft: function(){ timeleft: function(){
this.countDown--; this.countDown--;
if(this.countDown == 0) { switch (this.countDown) {
case 6:
if(this.playsound) {
this.sfxWarning = new Audio('sfx/warning.wav');
}
break;
case 5:
if(this.playsound) {
this.sfxWarning.play();
}
this.danger = true;
break;
case 4:
if(this.playsound) {
this.sfxWarning.play();
}
break;
case 3:
if(this.playsound) {
this.sfxWarning.play();
}
break;
case 2:
if(this.playsound) {
this.sfxWarning.play();
}
break;
case 1:
if(this.playsound) {
this.sfxWarning.play();
}
break;
case 0:
this.warning = true this.warning = true
if(this.playsound) { if(this.playsound) {
var audio = new Audio('timeout.wav'); this.sfxTimeout.play();
audio.play();
} }
clearInterval(Interval); clearInterval(Interval);
break;
} }
}, },
restartTimer: function() { restartTimer: function() {
if(this.wakeLock == null && 'wakeLock' in navigator) { if(this.wakeLock == null && 'wakeLock' in navigator) {
this.wakeLock = navigator.wakeLock.request('screen'); this.wakeLock = navigator.wakeLock.request('screen');
} }
if(this.playsound) {
this.sfxNext.play();
}
this.countDown = this.time; this.countDown = this.time;
this.warning = false; this.warning = false;
this.danger = false;
clearInterval(Interval); clearInterval(Interval);
Interval = setInterval(() => { Interval = setInterval(() => {
this.timeleft() this.timeleft()
}, 1000); }, 1000);
} },
}, },
} }
</script> </script>
@ -87,6 +126,10 @@ export default {
text-align: center; text-align: center;
width: 80px; width: 80px;
height: 60px; height: 60px;
&.danger {
color: $red;
}
} }
.timeout { .timeout {