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

Modification des données affichée dans la gestion des scores, ajout de la notion Total et Manche (affichage de la manche courante et du score total)

Browse Source
This commit is contained in:
Jérémy CHOMAZ
2024-04-01 17:40:18 +02:00
parent 44ce39bf3f
commit c3b86cb68b
11 changed files with 101 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,23 +18,88 @@
<div>
<v-row no-gutters justify="space-around" class="scorebox-1-pos">
<v-row>
<v-col class="align-start scorediv-style-red pr-1">
<v-label class="labelScore-style">{{ RedScore }}</v-label>
<v-col class="align-start scorediv-style-red pl-1">
<v-col>
<div class="pr-1">
<div>
<v-label class="labelRoundScore-style">Manche</v-label>
</div>
<v-label class="labelRoundScore-style">{{ RedRoundScore }}</v-label>
</div>
<v-divider class="pr-1" color="background"/>
</v-col>
<div class="pr-1">
<div>
<v-label class="labelTotalScore-style">Total</v-label>
</div>
<v-label class="labelTotalScore-style">{{ RedTotalScore }}</v-label>
</div>
</v-col>
<v-col class="align-start scorediv-style-blue pl-1">
<v-label class="labelScore-style">{{ BlueScore }}</v-label>
<v-col>
<div class="pr-1">
<div>
<v-label class="labelRoundScore-style">Manche</v-label>
</div>
<v-label class="labelRoundScore-style">{{ BlueRoundScore }}</v-label>
</div>
<v-divider class="pr-1" color="background"/>
</v-col>
<div class="pr-1">
<div>
<v-label class="labelTotalScore-style">Total</v-label>
</div>
<v-label class="labelTotalScore-style">{{ BlueTotalScore }}</v-label>
</div>
</v-col>
</v-row>
</v-row>
</div>
<div>
<v-row no-gutters justify="space-around" class="scorebox-2-pos mb-0">
<v-row>
<v-col class="align-start scorediv-style-orange pr-1">
<v-label class="labelScore-style">{{ OrangeScore }}</v-label>
<v-col class="scorediv-style-orange pl-1">
<v-col>
<div class="pr-1">
<div>
<v-label class="labelRoundScore-style">Manche</v-label>
</div>
<v-label class="labelRoundScore-style">{{ OrangeRoundScore }}</v-label>
</div>
<v-divider class="pr-1" color="background"/>
</v-col>
<div class="pr-1">
<div>
<v-label class="labelTotalScore-style">Total</v-label>
</div>
<v-label class="labelTotalScore-style">{{ OrangeTotalScore }}</v-label>
</div>
</v-col>
<v-col class="align-start scorediv-style-green pl-1">
<v-label class="labelScore-style">{{ GreenScore }}</v-label>
<v-col>
<div class="pr-1">
<div>
<v-label class="labelRoundScore-style">Manche</v-label>
</div>
<v-label class="labelRoundScore-style">{{ GreenRoundScore }}</v-label>
</div>
<v-divider class="pr-1" color="background"/>
</v-col>
<div class="pr-1">
<div>
<v-label class="labelTotalScore-style">Total</v-label>
</div>
<v-label class="labelTotalScore-style">{{ GreenTotalScore }}</v-label>
</div>
</v-col>
</v-row>
</v-row>
@ -47,10 +112,14 @@ import { ref} from 'vue'; // Import des fonctions de Vue 3
import variables from '@/variables.js';
// Déclaration des variables locales pour les scores
const RedScore = ref(variables.RedScore);
const BlueScore = ref(variables.BlueScore);
const OrangeScore = ref(variables.OrangeScore);
const GreenScore = ref(variables.GreenScore);
const RedTotalScore = ref(variables.RedTotalScore);
const BlueTotalScore = ref(variables.BlueTotalScore);
const OrangeTotalScore = ref(variables.OrangeTotalScore);
const GreenTotalScore = ref(variables.GreenTotalScore);
const RedRoundScore = ref(variables.RedRoundScore);
const BlueRoundScore = ref(variables.BlueRoundScore);
const OrangeRoundScore = ref(variables.OrangeRoundScore);
const GreenRoundScore = ref(variables.GreenRoundScore);
</script>
@ -65,8 +134,15 @@ const GreenScore = ref(variables.GreenScore);
color: #e91e1e !important;
opacity: 90% !important;
}
.labelScore-style{
.labelRoundScore-style{
opacity: 100% !important;
font-size: 25px !important;
font-weight: 500;
}
.labelTotalScore-style{
opacity: 100% !important;
font-size: 15px !important;
font-weight: 500;
}
.button-pos{
padding-top: 10px;
@ -75,12 +151,10 @@ const GreenScore = ref(variables.GreenScore);
.scorebox-1-pos{
padding-bottom: 15px;
text-align: center;
margin:auto;
}
.scorebox-2-pos{
padding-top: 9px;
text-align: center;
margin:auto;
}
.scorediv-style-red{
background-color: #d42828 !important;