Création du groupe de controle des scores dans la zone de boutton

ui/src/views/GameControl.vue

@@ -11,11 +11,15 @@
 </v-container>
 
   <v-row no-gutters class="pr-4 pl-4">
-    <v-col>
-      <card-solution />
-    </v-col>
+    <v-row no-gutters>
+      <v-col class="align-start">
+        <CardButtonScore />
+      </v-col>
+      <v-col class="pl-3">
+        <card-solution />
+      </v-col>
+    </v-row>
   </v-row>
-
 </template>
 
 <script setup>
@@ -23,6 +27,7 @@
 import CardSolution from '@/components/CardSolution.vue'
 import CardControl from '@/components/CardControl.vue'
 import CardSoundboard from '@/components/CardSoundboard.vue';
+import CardButtonScore from '@/components/CardButtonScore.vue'
 
 </script>
 
@@ -35,8 +40,43 @@ import CardSoundboard from '@/components/CardSoundboard.vue';
       background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
   }
   .btn{
-    border-radius:30px!important;
+    border-radius:20px!important;
+  }
+  .btn.red {
     background-color: #d42828; /* Changez la couleur en fonction de votre thème */
+    
+  }
+  .btn.blue {
+    background-color: #2867d4; /* Changez la couleur en fonction de votre thème */
+    
+  }
+  .btn.orange {
+    background-color: #d48f28; /* Changez la couleur en fonction de votre thème */
+    
+  }
+  .btn.green {
+    background-color: #28d42e; /* Changez la couleur en fonction de votre thème */
+    
+  }
+  .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>