BrainBlast/ui/src/components/CardScore.vue

<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-yellow">         
          <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: #d42828 !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-yellow { 
    background-color: #d4d100 !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>