From 080601b79288b5218f30656a58c64757afbb674f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Fri, 5 Apr 2024 14:12:22 +0200
Subject: [PATCH] =?UTF-8?q?Ajustement=20du=20placement=20des=20score,=20to?=
 =?UTF-8?q?ut=20est=20bien=20align=C3=A9=20et=20centr=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/GameStatus.vue | 201 ++++++++++++++++---------------
 1 file changed, 103 insertions(+), 98 deletions(-)

diff --git a/ui/src/components/GameStatus.vue b/ui/src/components/GameStatus.vue
index 66d8173..af28989 100644
--- a/ui/src/components/GameStatus.vue
+++ b/ui/src/components/GameStatus.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-navigation-drawer width="250">
+  <v-navigation-drawer width="250"> <!-- Augmenter la largeur pour deux équipes côte à côte -->
     <div class="label-pos">
-    <v-label class="labelTitle-style">Buzzer connectés</v-label>
+      <v-label class="labelTitle-style">Buzzer connectés</v-label>
     </div>
 
     <v-row no-gutters justify="space-around" class="button-pos">
@@ -13,102 +13,104 @@
 
     <v-divider :thickness="2" class="border-opacity-100" color="primary"/>
     <div class="label-pos">
-      <v-label class="labelTitle-style pb-7">Scores</v-label>
+      <v-label class="labelTitle-style pb-4">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>
+    <!-- É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>
-             <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-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>
-             <v-label class="labelTotalScore-style">{{ BlueTotalScore }}</v-label>
-           </div>
+            </div>
           </v-col>
         </v-row>
-      </v-row>
-    </div>
+      </v-col>
 
-
-
-    <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>
+      <!-- É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>
-             <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-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>
-             <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>
+            </div>
           </v-col>
         </v-row>
-      </v-row>
-    </div>
+      </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>
+
   </v-navigation-drawer>
 </template>
 
 <script setup>
-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';
 
 // Déclaration des variables locales pour les scores
@@ -124,48 +126,51 @@ const GreenRoundScore = ref(variables.GreenRoundScore);
 </script>
 
 <style>
-  .label-pos{
+  .label-pos {
     padding-top: 15px;
     text-align: center;
   }
-  .labelTitle-style{
+  .labelTitle-style {
     font-size: 20px !important;
     font-weight: 500;
     color: #e91e1e !important;
     opacity: 90% !important;
   }
-  .labelRoundScore-style{
+  .labelRoundScore-style {
     opacity: 100% !important;
     font-size: 25px !important;
     font-weight: 500;
   }
-  .labelTotalScore-style{
+  .labelTotalScore-style {
     opacity: 100% !important;
     font-size: 15px !important;
     font-weight: 500;
   }
-  .button-pos{
+  .button-pos {
     padding-top: 10px;
     padding-bottom: 15px;
   }
-  .scorebox-1-pos{
-    padding-bottom: 15px;
+  .scorebox-pos {
     text-align: center;
   }
-  .scorebox-2-pos{
-    padding-top: 9px;
-    text-align: center;
-  }
-  .scorediv-style-red{
+  .scorediv-style-red {
     background-color: #d42828 !important;
+    padding: 15px;
+    border-top-left-radius: 10%;
   }
-  .scorediv-style-orange{
+  .scorediv-style-orange {
     background-color: #d48f28 !important;
+    padding: 15px;
+    border-bottom-left-radius: 10%;
   }
-  .scorediv-style-blue{
+  .scorediv-style-blue {
     background-color: #2867d4 !important;
+    padding: 15px;
+    border-top-right-radius: 10%;    
   }
-  .scorediv-style-green{
+  .scorediv-style-green {
     background-color: #28d42e !important;
+    padding: 15px;
+    border-bottom-right-radius: 10%;
   }
 </style>
\ No newline at end of file