rummy-timer/app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added better timer

Browse Source
This commit is contained in:
Jeroen De Meerleer 2021-04-19 22:46:31 +02:00
parent 80b8bbbadf
commit e311f63ae7
21 changed files with 257 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
package-lock.json generated
View File

@ -1713,6 +1713,16 @@
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
"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": {
"version": "13.0.1",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@ -1739,6 +1749,53 @@
"unique-filename": "^1.1.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"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": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@ -1755,6 +1812,16 @@
"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": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@ -1771,6 +1838,18 @@
"terser": "^4.6.12",
"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"
}
}
}
},
@ -11031,87 +11110,6 @@
}
}
},
"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.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"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": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

BIN
public/fonts/HelveticaNeueBlackCond.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueBlackCond.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueBold.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueBold.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueHeavy.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueHeavy.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueItalic.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueLight.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueLight.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueMedium.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueMedium.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueRegular.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueRegular.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueThin.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/HelveticaNeueThin.woff2 Normal file
View File

Binary file not shown.

99
public/fonts/stylesheet.css Normal file
View File

@ -0,0 +1,99 @@
@font-face {
font-family: 'HelveticaNeue';
src: url('HelveticaNeueHeavy.woff2') format('woff2'),
url('HelveticaNeueHeavy.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('HelveticaNeueBold.woff2') format('woff2'),
url('HelveticaNeueBold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('HelveticaNeueBlackCond.woff2') format('woff2'),
url('HelveticaNeueBlackCond.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('HelveticaNeueItalic.woff2') format('woff2'),
url('HelveticaNeueItalic.woff') format('woff');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('HelveticaNeueMedium.woff2') format('woff2'),
url('HelveticaNeueMedium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('HelveticaNeueLight.woff2') format('woff2'),
url('HelveticaNeueLight.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('HelveticaNeueBold.woff2') format('woff2'),
url('HelveticaNeueBold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('HelveticaNeueRegular.woff2') format('woff2'),
url('HelveticaNeueRegular.woff') format('woff');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('HelveticaNeueThin.woff2') format('woff2'),
url('HelveticaNeueThin.woff') format('woff');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('HelveticaNeueLight.woff2') format('woff2'),
url('HelveticaNeueLight.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('HelveticaNeueMedium.woff2') format('woff2'),
url('HelveticaNeueMedium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}

BIN
public/joker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

9
src/App.vue
View File

@ -1,6 +1,6 @@
<template>
<div id="app">
<Timer time="60"/>
<Timer time="10"/>
</div>
</template>
@ -16,12 +16,15 @@ export default {
</script>
<style>
html, body {
height: 100%;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
height: 100%;
}
</style>

79
src/components/Timer.vue
View File

@ -1,39 +1,102 @@
<template>
<div class="timer">
<p><span class="timeleft">{{ countDown.toString() }}</span></p>
<button v-on:click="restartTimer">Restart</button>
<p v-if="warning == false" class="timeleft reverse">{{ countDown.toString() }}</p>
<p v-if="warning == true" 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">
<img src="joker.png" alt="joker">
</p>
<button v-on:click="restartTimer" class="timerBtn">Restart</button>
<p v-if="warning == false" class="timeleft">{{ countDown.toString() }}</p>
<p v-if="warning == true" 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">
<img src="joker.png" alt="joker">
</p>
</div>
</template>
<script>
var Interval;
export default {
name: "Timer",
props: {
time: Number,
countDown: {
type: Number,
default: -1
}
default: -2
},
warning: {
type: Boolean,
default: true,
},
},
mounted: function() {
setInterval(() => {
this.timeleft()
}, 1000);
},
methods: {
timeleft: function(){
if(this.countDown == -1) this.countDown = this.time;
this.countDown--;
if(this.countDown == 0) {
this.warning = true
clearInterval(Interval);
}
},
restartTimer: function() {
this.countDown = this.time;
this.warning = false;
clearInterval(Interval);
Interval = setInterval(() => {
this.timeleft()
}, 1000);
}
},
}
</script>
<style scoped>
@import '/fonts/stylesheet.css';
.timer {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.timeleft {
font-size: 5rem;
margin: 40px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.timeout {
margin: 40px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.timeout img {
height: 3rem;
}
.timerBtn {
appearance: none;
border: 1px solid #2c3e50;
border-radius: 3px;
font-size: 3rem;
background: none;
padding: 2rem;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.reverse {
transform: scale(-1, -1);
}
</style>