asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Création de la carte timer dans le GameStatus

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-04-05 15:00:41 +02:00
parent 5a983f2c7e
commit 1edb73bf5f
2 changed files with 56 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
ui/src/components/CardTimer.vue
View File

@ -1,15 +1,18 @@
<template>
<div class="container">
<div class="timer">{{ formatTime }}</div>
<div class="buttons">
<button @click="startTimer" :disabled="timerActive">Start</button>
<button @click="pauseTimer" :disabled="!timerActive">Pause</button>
<button @click="resetTimer">Reset</button>
</div>
<div class="timer">
<v-label color="primary" class="labelTime-style" >{{ formatTime }}</v-label>
</div>
</template>
<script setup>
<v-row no-gutters justify="space-around" >
<v-btn class="buttons" color="primary" icon="mdi-play" @click="startTimer"></v-btn>
<v-btn color="primary" icon="mdi-pause" @click="pauseTimer"></v-btn>
<v-btn color="primary" icon="mdi-restart" @click="resetTimer"></v-btn>
</v-row>
</div>
</template>
<script setup>
import { ref, computed, onBeforeUnmount } from 'vue';
const timerActive = ref(false);
@ -62,48 +65,54 @@
onBeforeUnmount(() => {
clearInterval(currentTime.value);
});
</script>
</script>
<style>
.container {
text-align: center;
margin-top: 20px;
}
.timer {
font-size: 2em;
margin-bottom: 20px;
}
.buttons button {
margin: 0 10px;
padding: 10px 20px;
font-size: 1em;
}
</style>
<script>
const startTimer = () => {
<script>
const startTimer = () => {
if (!timerActive.value) {
timerActive.value = true;
startTime.value = Date.now() - elapsedTime.value;
updateTimer();
timerActive.value = true;
startTime.value = Date.now() - elapsedTime.value;
updateTimer();
}
};
};
const pauseTimer = () => {
const pauseTimer = () => {
if (timerActive.value) {
timerActive.value = false;
clearInterval(currentTime.value);
timerActive.value = false;
clearInterval(currentTime.value);
}
};
};
const resetTimer = () => {
const resetTimer = () => {
elapsedTime.value = 0;
timerActive.value = false;
clearInterval(currentTime.value);
};
};
export { startTimer, pauseTimer, resetTimer };
</script>
export { startTimer, pauseTimer, resetTimer };
</script>
<style>
.container {
text-align: center;
margin-top: auto; /* Place le container en bas de son parent */
margin-bottom: 1px; /* Marge en bas pour un espacement */
position: fixed; /* Le positionne de manière fixe */
left: 0;
right: 0;
bottom: 0;
padding: 20px;
}
.timer {
margin-bottom: 15px;
}
.labelTime-style {
font-size: 30px !important;
font-weight: 500;
color: #e91e1e !important;
opacity: 90% !important;
}
.buttons{
background-color: rgb(255, 255, 255);
}
</style>