BrainBlast/ui/src/components/GameStatus.vue

45 lines
1.2 KiB
Vue

<template>
<v-navigation-drawer width="250"> <!-- Augmenter la largeur pour deux équipes côte à côte -->
<div class="label-pos">
<v-label class="labelTitle-style">Buzzer connectés</v-label>
</div>
<v-row no-gutters justify="space-around" class="button-pos">
<v-icon color="BuzzerRed">mdi-radiobox-marked</v-icon>
<v-icon color="BuzzerBlue">mdi-radiobox-marked</v-icon>
<v-icon color="BuzzerOrange">mdi-radiobox-marked</v-icon>
<v-icon color="BuzzerGreen">mdi-radiobox-marked</v-icon>
</v-row>
<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
<CardScore/>
<CardTimer/>
</v-navigation-drawer>
</template>
<script setup>
import CardTimer from '@/components/CardTimer.vue'
import CardScore from '@/components/CardScore.vue'
import { ref } from 'vue'; // Import des fonctions de Vue 3
import variables from '@/variables.js';
</script>
<style>
.label-pos {
padding-top: 15px;
text-align: center;
}
.labelTitle-style {
font-size: 20px !important;
font-weight: 500;
color: #e91e1e !important;
opacity: 90% !important;
}
.button-pos {
padding-top: 10px;
padding-bottom: 15px;
}
</style>