BrainBlast/ui/src/components/GameStatus.vue

<template>
  <v-navigation-drawer width="250">
    <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"/>
    <div class="label-pos">
      <v-label class="labelTitle-style pb-7">Scores</v-label>
    </div>
    <div>
      <v-row no-gutters justify="space-around" class="scorebox-1-pos">
        <v-row>
          <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-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="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-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>
    </div>
  </v-navigation-drawer>
</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-1-pos{
    padding-bottom: 15px;
    text-align: center;
  }
  .scorebox-2-pos{
    padding-top: 9px;
    text-align: center;
  }
  .scorediv-style-red{
    background-color: #d42828 !important;
  }
  .scorediv-style-orange{
    background-color: #d48f28 !important;
  }
  .scorediv-style-blue{
    background-color: #2867d4 !important;
  }
  .scorediv-style-green{
    background-color: #28d42e !important;
  }
</style>