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)

ui/src/components/GameStatus.vue

@@ -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;

ui/src/variables.js

@@ -1,16 +1,24 @@
 export default {
   // Gestion des score et des Buzzers
-  RedScore: 9999,
-  BlueScore: 1321,
-  OrangeScore: 10,
-  GreenScore: 10,
+
+  // Scores totaux
+  RedTotalScore: 11,
+  BlueTotalScore: 22,
+  GreenTotalScore: 33,
+  OrangeTotalScore: 44,
+
+  // Score de la manche courante
+  RedRoundScore: 1,
+  BlueRoundScore: 2,
+  OrangeRoundScore: 3,
+  GreenRoundScore: 4,
+
+  //Etat des buzzer
   BuzzerRed: false,
   BuzzerBlue: false,
   BuzzerOrange: false,
   BuzzerGreen: false,
 
-
-  
   // Ajoutez d'autres variables globales ici
 };