Tracking de l'application VApp (IHM du jeu)

VApp/src/views/GameControl.vue

@@ -0,0 +1,77 @@
+<template>
+<v-container>
+  <v-row no-gutters> 
+    <v-col class="align-start">   
+      <card-control /> 
+    </v-col> 
+    <v-col class="pl-3">   
+      <card-soundboard /> 
+    </v-col>
+  </v-row>
+</v-container>
+  <v-row no-gutters class="pr-4 pl-4"> 
+    <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>
+
+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>
+
+<style>
+@media (min-width: 1024px) {
+  .card__title.primary {   
+    background-color: #d42828; /* Changez la couleur en fonction de votre thème */
+  }
+  .card__title.feedback {   
+    background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
+  }
+  .btn{ 
+    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.yellow { 
+    background-color: #d4d100; /* 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-yellow { 
+    background-color: #d4d100!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>