Ajout de la fonctionnalité de réduction de card lorsque l'on clique sur une des trois card dans le gamecontrol

ui/src/components/CardSolution.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-card tile outlined class="card">
-    <v-card-title class="card__title feedback">
+  <v-card tile outlined :class="{ 'card--reduced': isCardReduced }">
+    <v-card-title class="card__title feedback" @click="toggleCardSize">
       <v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>
       Solution
     </v-card-title>
@@ -27,4 +27,22 @@
     display: block; /* Pour éviter l'espace réservé pour les images */
   }
 }
+.card--reduced {
+    height: 56px; /* Réglez la hauteur réduite selon vos besoins */
+    width: 160px;
+    overflow: hidden;
+    transition: height 0.6s ease-in-out;
+  }
 </style>
+
+<script setup>
+  import { ref } from 'vue';
+
+  // Variable pour contrôler l'état de la carte
+  const isCardReduced = ref(false);
+
+  // Méthode pour basculer l'état de la carte
+  function toggleCardSize() {
+    isCardReduced.value = !isCardReduced.value;
+  }
+</script>