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

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

@ -1,15 +1,18 @@
<template> <template>
<div class="container"> <div class="container">
<div class="timer">{{ formatTime }}</div> <div class="timer">
<div class="buttons"> <v-label color="primary" class="labelTime-style" >{{ formatTime }}</v-label>
<button @click="startTimer" :disabled="timerActive">Start</button>
<button @click="pauseTimer" :disabled="!timerActive">Pause</button>
<button @click="resetTimer">Reset</button>
</div>
</div> </div>
</template>
<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> <script setup>
import { ref, computed, onBeforeUnmount } from 'vue'; import { ref, computed, onBeforeUnmount } from 'vue';
const timerActive = ref(false); const timerActive = ref(false);
@ -62,48 +65,54 @@
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(currentTime.value); clearInterval(currentTime.value);
}); });
</script> </script>
<style> <script>
.container { const startTimer = () => {
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 = () => {
if (!timerActive.value) { if (!timerActive.value) {
timerActive.value = true; timerActive.value = true;
startTime.value = Date.now() - elapsedTime.value; startTime.value = Date.now() - elapsedTime.value;
updateTimer(); updateTimer();
} }
}; };
const pauseTimer = () => { const pauseTimer = () => {
if (timerActive.value) { if (timerActive.value) {
timerActive.value = false; timerActive.value = false;
clearInterval(currentTime.value); clearInterval(currentTime.value);
} }
}; };
const resetTimer = () => { const resetTimer = () => {
elapsedTime.value = 0; elapsedTime.value = 0;
timerActive.value = false; timerActive.value = false;
clearInterval(currentTime.value); clearInterval(currentTime.value);
}; };
export { startTimer, pauseTimer, resetTimer }; export { startTimer, pauseTimer, resetTimer };
</script> </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>

2
ui/src/components/GameStatus.vue
View File

@ -14,7 +14,7 @@
<v-divider :thickness="2" class="border-opacity-100" color="primary"/> <v-divider :thickness="2" class="border-opacity-100" color="primary"/>
<CardScore/> <CardScore/>
<CardTimer/> <CardTimer/>
</v-navigation-drawer> </v-navigation-drawer>
</template> </template>