Transformation des scores en card
This commit is contained in:
parent
96b7b1cbd7
commit
5a983f2c7e
161
ui/src/components/CardScore.vue
Normal file
161
ui/src/components/CardScore.vue
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
<template>
|
||||||
|
<div class="label-pos">
|
||||||
|
<v-label class="labelTitle-style pb-4">Scores</v-label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Équipes Rouges et Bleues côte à côte -->
|
||||||
|
<v-row no-gutters class="scorebox-pos">
|
||||||
|
<!-- Équipe Rouge -->
|
||||||
|
<v-col cols="6"> <!-- Colonnes de taille 6 pour chaque équipe -->
|
||||||
|
<v-row no-gutters>
|
||||||
|
<v-col class="scorediv-style-red">
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style">{{ RedRoundScore }}</v-label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-divider color="background"/>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelTotalScore-style pt-3">Total</v-label>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelTotalScore-style pb-3">{{ RedTotalScore }}</v-label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<!-- Équipe Bleue -->
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-row no-gutters>
|
||||||
|
<v-col class="scorediv-style-blue">
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style">{{ BlueRoundScore }}</v-label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-divider color="background"/>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelTotalScore-style pt-3">Total</v-label>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelTotalScore-style pb-3">{{ BlueTotalScore }}</v-label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<!-- Équipes Oranges et Vertes côte à côte -->
|
||||||
|
<v-row no-gutters class="scorebox-pos">
|
||||||
|
<!-- Équipe Orange -->
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-row no-gutters>
|
||||||
|
<v-col class="scorediv-style-orange">
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style">{{ OrangeRoundScore }}</v-label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-divider color="background"/>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelTotalScore-style pt-3">Total</v-label>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelTotalScore-style pb-3">{{ OrangeTotalScore }}</v-label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<!-- Équipe Verte -->
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-row no-gutters>
|
||||||
|
<v-col class="scorediv-style-green">
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelRoundScore-style">{{ GreenRoundScore }}</v-label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-divider color="background"/>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelTotalScore-style pt-3">Total</v-label>
|
||||||
|
<div>
|
||||||
|
<v-label class="labelTotalScore-style pb-3">{{ GreenTotalScore }}</v-label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'; // Import des fonctions de Vue 3
|
||||||
|
import variables from '@/variables.js';
|
||||||
|
|
||||||
|
// Déclaration des variables locales pour les scores
|
||||||
|
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>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.label-pos {
|
||||||
|
padding-top: 15px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.labelTitle-style {
|
||||||
|
font-size: 20px !important;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #e91e1e !important;
|
||||||
|
opacity: 90% !important;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
.scorebox-pos {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.scorediv-style-red {
|
||||||
|
background-color: #d42828 !important;
|
||||||
|
padding: 15px;
|
||||||
|
border-top-left-radius: 10%;
|
||||||
|
}
|
||||||
|
.scorediv-style-orange {
|
||||||
|
background-color: #d48f28 !important;
|
||||||
|
padding: 15px;
|
||||||
|
border-bottom-left-radius: 10%;
|
||||||
|
}
|
||||||
|
.scorediv-style-blue {
|
||||||
|
background-color: #2867d4 !important;
|
||||||
|
padding: 15px;
|
||||||
|
border-top-right-radius: 10%;
|
||||||
|
}
|
||||||
|
.scorediv-style-green {
|
||||||
|
background-color: #28d42e !important;
|
||||||
|
padding: 15px;
|
||||||
|
border-bottom-right-radius: 10%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -12,118 +12,19 @@
|
|||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
|
<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
|
||||||
<div class="label-pos">
|
|
||||||
<v-label class="labelTitle-style pb-4">Scores</v-label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Équipes Rouges et Bleues côte à côte -->
|
<CardScore/>
|
||||||
<v-row no-gutters class="scorebox-pos">
|
|
||||||
<!-- Équipe Rouge -->
|
<CardTimer/>
|
||||||
<v-col cols="6"> <!-- Colonnes de taille 6 pour chaque équipe -->
|
|
||||||
<v-row no-gutters>
|
|
||||||
<v-col class="scorediv-style-red">
|
|
||||||
<div>
|
|
||||||
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
|
|
||||||
<div>
|
|
||||||
<v-label class="labelRoundScore-style">{{ RedRoundScore }}</v-label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<v-divider color="background"/>
|
|
||||||
<div>
|
|
||||||
<v-label class="labelTotalScore-style pt-3">Total</v-label>
|
|
||||||
<div>
|
|
||||||
<v-label class="labelTotalScore-style pb-3">{{ RedTotalScore }}</v-label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<!-- Équipe Bleue -->
|
|
||||||
<v-col cols="6">
|
|
||||||
<v-row no-gutters>
|
|
||||||
<v-col class="scorediv-style-blue">
|
|
||||||
<div>
|
|
||||||
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
|
|
||||||
<div>
|
|
||||||
<v-label class="labelRoundScore-style">{{ BlueRoundScore }}</v-label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<v-divider color="background"/>
|
|
||||||
<div>
|
|
||||||
<v-label class="labelTotalScore-style pt-3">Total</v-label>
|
|
||||||
<div>
|
|
||||||
<v-label class="labelTotalScore-style pb-3">{{ BlueTotalScore }}</v-label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- Équipes Oranges et Vertes côte à côte -->
|
|
||||||
<v-row no-gutters class="scorebox-pos">
|
|
||||||
<!-- Équipe Orange -->
|
|
||||||
<v-col cols="6">
|
|
||||||
<v-row no-gutters>
|
|
||||||
<v-col class="scorediv-style-orange">
|
|
||||||
<div>
|
|
||||||
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
|
|
||||||
<div>
|
|
||||||
<v-label class="labelRoundScore-style">{{ OrangeRoundScore }}</v-label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<v-divider color="background"/>
|
|
||||||
<div>
|
|
||||||
<v-label class="labelTotalScore-style pt-3">Total</v-label>
|
|
||||||
<div>
|
|
||||||
<v-label class="labelTotalScore-style pb-3">{{ OrangeTotalScore }}</v-label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<!-- Équipe Verte -->
|
|
||||||
<v-col cols="6">
|
|
||||||
<v-row no-gutters>
|
|
||||||
<v-col class="scorediv-style-green">
|
|
||||||
<div>
|
|
||||||
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
|
|
||||||
<div>
|
|
||||||
<v-label class="labelRoundScore-style">{{ GreenRoundScore }}</v-label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<v-divider color="background"/>
|
|
||||||
<div>
|
|
||||||
<v-label class="labelTotalScore-style pt-3">Total</v-label>
|
|
||||||
<div>
|
|
||||||
<v-label class="labelTotalScore-style pb-3">{{ GreenTotalScore }}</v-label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
<CardTimer/>
|
|
||||||
</v-navigation-drawer>
|
</v-navigation-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import CardTimer from '@/components/CardTimer.vue'
|
import CardTimer from '@/components/CardTimer.vue'
|
||||||
|
import CardScore from '@/components/CardScore.vue'
|
||||||
import { ref } from 'vue'; // Import des fonctions de Vue 3
|
import { ref } from 'vue'; // Import des fonctions de Vue 3
|
||||||
import variables from '@/variables.js';
|
import variables from '@/variables.js';
|
||||||
|
|
||||||
// Déclaration des variables locales pour les scores
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -137,41 +38,8 @@ const GreenRoundScore = ref(variables.GreenRoundScore);
|
|||||||
color: #e91e1e !important;
|
color: #e91e1e !important;
|
||||||
opacity: 90% !important;
|
opacity: 90% !important;
|
||||||
}
|
}
|
||||||
.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 {
|
.button-pos {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
}
|
}
|
||||||
.scorebox-pos {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.scorediv-style-red {
|
|
||||||
background-color: #d42828 !important;
|
|
||||||
padding: 15px;
|
|
||||||
border-top-left-radius: 10%;
|
|
||||||
}
|
|
||||||
.scorediv-style-orange {
|
|
||||||
background-color: #d48f28 !important;
|
|
||||||
padding: 15px;
|
|
||||||
border-bottom-left-radius: 10%;
|
|
||||||
}
|
|
||||||
.scorediv-style-blue {
|
|
||||||
background-color: #2867d4 !important;
|
|
||||||
padding: 15px;
|
|
||||||
border-top-right-radius: 10%;
|
|
||||||
}
|
|
||||||
.scorediv-style-green {
|
|
||||||
background-color: #28d42e !important;
|
|
||||||
padding: 15px;
|
|
||||||
border-bottom-right-radius: 10%;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user