forked from jchomaz/Vulture
52 lines
1.1 KiB
Vue
52 lines
1.1 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="timer">
|
|
<v-label class="labelTime-style" >{{ formatTime }}</v-label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, watch } from 'vue';
|
|
import quizStore from '@/store/quizStore';
|
|
|
|
const timer = quizStore.getters.timer;
|
|
|
|
watch(timer, (val) => {
|
|
console.log('CardTimer: timer value changed', val);
|
|
}, { immediate: true });
|
|
|
|
const formatTime = computed(() => {
|
|
const seconds = timer.value % 60;
|
|
const minutes = Math.floor(timer.value / 60);
|
|
const hours = Math.floor(minutes / 60);
|
|
return `${pad(minutes % 60)}:${pad(seconds)}`;
|
|
});
|
|
|
|
const pad = (number) => {
|
|
return (number < 10 ? "0" : "") + number;
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
text-align: center;
|
|
margin-top: auto;
|
|
margin-bottom: 1px;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 20px;
|
|
}
|
|
.timer {
|
|
margin-bottom: 15px;
|
|
}
|
|
.labelTime-style {
|
|
font-size: 40px !important;
|
|
font-weight: 500;
|
|
color: #d42828 !important;
|
|
opacity: 90% !important;
|
|
}
|
|
</style>
|