From 5a983f2c7ec61056b296e98f96ccb360cb269ba4 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:33:54 +0200
Subject: [PATCH] Transformation des scores en card

---
 ui/src/components/CardScore.vue  | 161 +++++++++++++++++++++++++++++++
 ui/src/components/GameStatus.vue | 140 +--------------------------
 2 files changed, 165 insertions(+), 136 deletions(-)
 create mode 100644 ui/src/components/CardScore.vue

diff --git a/ui/src/components/CardScore.vue b/ui/src/components/CardScore.vue
new file mode 100644
index 0000000..d842106
--- /dev/null
+++ b/ui/src/components/CardScore.vue
@@ -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>
\ No newline at end of file
diff --git a/ui/src/components/GameStatus.vue b/ui/src/components/GameStatus.vue
index bfdb772..cd7ee10 100644
--- a/ui/src/components/GameStatus.vue
+++ b/ui/src/components/GameStatus.vue
@@ -12,118 +12,19 @@
     </v-row>
 
     <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 -->
-    <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>
-  <CardTimer/>
+    <CardScore/>
+    
+    <CardTimer/>
   </v-navigation-drawer>
 </template>
 
 <script setup>
 import CardTimer from '@/components/CardTimer.vue'
+import CardScore from '@/components/CardScore.vue'
 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>
@@ -137,41 +38,8 @@ const GreenRoundScore = ref(variables.GreenRoundScore);
     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>
\ No newline at end of file