Suppression du toggle de thème. Raison ? -> toute l'interface est faite pour fonctionner en version dark, c'est bien plus ergonomique, le logo est également prévu pour être affiché sur une version dark

ui/src/components/BrainBlastBar.vue

@@ -2,26 +2,9 @@
   <v-app-bar :elevation="5" height="50">
     <RouterMenu />
     <v-app-bar-title v-if="$route.name !== 'Accueil'">Brain Blast</v-app-bar-title>
-
-    <template v-slot:append>
-      <v-btn icon @click="toggleTheme">
-        <v-icon>{{ darkTheme ? 'mdi-white-balance-sunny' : 'mdi-moon-waning-crescent' }}</v-icon>
-      </v-btn>
-    </template>
   </v-app-bar>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
-  import { useTheme } from 'vuetify'
   import RouterMenu from '@/components/RouterMenu.vue'
-
-  const theme = useTheme()
-  const darkTheme = ref(true)
-
-  function toggleTheme() {
-    darkTheme.value = !darkTheme.value
-    theme.global.name.value = theme.global.current.value.dark ? 'CustomThemeLight' : 'CustomThemeDark'
-  }
-
 </script>

ui/src/components/CardScore.vue

@@ -118,7 +118,7 @@ const GreenRoundScore = ref(variables.GreenRoundScore);
   .labelTitle-style {
     font-size: 20px !important;
     font-weight: 500;
-    color: #e91e1e !important;
+    color: #d42828 !important;
     opacity: 90% !important;
   }
   .labelRoundScore-style {

ui/src/components/CardTimer.vue

@@ -109,7 +109,7 @@
   .labelTime-style {
     font-size: 30px !important;
     font-weight: 500;
-    color: #e91e1e !important;
+    color: #d42828 !important;
     opacity: 90% !important;
   }
   .buttons{

ui/src/components/MQTTDebugConsole.vue

@@ -1,8 +1,19 @@
 <template>
-  <div>
+  <v-container class="v-container-style">
-    <h1>Console MQTT</h1>
+    <v-card tile outlined width="500">
-    <div v-for="(message, index) in messages" :key="index">{{ message }}</div>
+      <v-card-title class="card__title primary centered-title">
+        <v-icon left class="pr-5 pl-2" size="40">mdi-console-line</v-icon>
+        Console MQTT
+      </v-card-title>
+      <v-container class="text-center">
+        <div v-for="(log, index) in messageLogs" :key="index">
+          <v-label class="v-label-timestamp">{{ log.timestamp }} </v-label>
+           - 
+          <v-label>{{ log.message }}</v-label>
         </div>
+      </v-container>
+    </v-card>
+  </v-container>
 </template>
 
 <script>
@@ -11,13 +22,42 @@ import { subscribeToTopic } from '@/services/mqttService'
 export default {
   data() {
     return {
-      messages: [] // Initialiser un tableau pour stocker les messages MQTT
+      messageLogs: [] // Initialiser un tableau pour stocker les messages MQTT avec horodatage
     }
   },
   created() {
     subscribeToTopic('#', (topic, message) => {
-      this.messages.push(`Topic: ${topic}, Message: ${message}`) // Ajouter le message à la liste des messages
+      // Obtenir l'horodatage actuel
+      const timestamp = new Date().toLocaleString('fr-FR', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+      });
+
+      // Ajouter le message avec l'horodatage à la liste des messages
+      this.messageLogs.push({ timestamp, message: `Topic: ${topic}, Message: ${message}` });
+
+      // Limiter la liste à 10 messages
+      if (this.messageLogs.length > 10) {
+        this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien)
+      }
     }) // S'abonner à tous les topics MQTT
   }
 }
 </script>
+
+<style>
+  .v-container-style {
+    display: flex;
+    justify-content: center;
+  }
+  .centered-title {
+    text-align: center;
+  }
+  .v-label-timestamp{
+    opacity: 100%;
+    font-weight: 700;
+    color: #d42828;
+  }
+</style>

ui/src/components/MQTTDebugPublish.vue

@@ -1,12 +1,18 @@
 <template>
-  <div>
+  <v-container class="v-container-style">
-    <h1>Publier sur MQTT</h1>
+      <v-card tile outlined width="500">
-    <select v-model="selectedTopic">
+        <v-card-title class="card__title primary centered-title">
-      <option v-for="topic in topics" :key="topic">{{ topic }}</option>
+          <v-icon left class="pr-5 pl-2" size="30">mdi-send</v-icon>
-    </select>
+          Publier un message
-    <input type="text" v-model="message" placeholder="Saisissez votre message" />
+        </v-card-title>
-    <button @click="publishMessage">Publier sur MQTT</button>
+        <div class="input-style">
+          <v-select label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select>
+          <v-text-field label="Message" v-model="message" prepend-icon="mdi-text-box"></v-text-field>
         </div>
+          <v-btn class="v-btn-style" height="50" @click="publishMessage">Publier</v-btn>
+      </v-card>
+    </v-container>
+
 </template>
 
 <script>
@@ -18,8 +24,8 @@ export default {
       message: '', // Initialiser la variable message
       selectedTopic: 'topic1',
       topics: [
-        'topic1',
+        '/display/control',
-        'topic2',
+        '/sound/playsound',
         'topic3',
         'topic4',
         'topic5',
@@ -38,3 +44,24 @@ export default {
   }
 }
 </script>
+
+<style>
+  .v-container-style {
+    align-items: center;
+    justify-content: center;
+  }
+  .input-style{
+    margin: 20px;
+  }
+  .v-btn-style{
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    background-color: #d42828; /* Changez la couleur en fonction de votre thème */
+    border-top-right-radius: 0%;
+    border-top-left-radius: 0%;
+  }
+  .centered-title {
+    text-align: center;
+  }
+</style>

ui/src/plugins/vuetify.js

@@ -15,7 +15,7 @@ const CustomThemeDark = {
   dark: true,
   colors: {
     background: '#121212',
-    primary: '#e91e1e',
+    primary: '#d42828',
     secondary: '#F44336',
     accent: '#FFC107',
     error: '#e91e1e',
@@ -32,7 +32,7 @@ const CustomThemeLight = {
   dark: false,
   colors: {
     background: '#ffffff',
-    primary: '#e91e1e',
+    primary: '#d42828',
     secondary: '#F44336',
     accent: '#FFC107',
     error: '#e91e1e',

ui/src/views/GameControl.vue

@@ -29,14 +29,14 @@ import CardSoundboard from '@/components/CardSoundboard.vue';
 <style>
 @media (min-width: 1024px) {
   .card__title.primary {
-      background-color: #e91e1e; /* Changez la couleur en fonction de votre thème */
+      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:30px!important;
-    background-color: #e91e1e; /* Changez la couleur en fonction de votre thème */
+    background-color: #d42828; /* Changez la couleur en fonction de votre thème */
   }
 }
 </style>

ui/src/views/MQTTDebugView.vue

@@ -19,3 +19,18 @@ export default {
   }
 }
 </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:30px!important;
+    background-color: #d42828; /* Changez la couleur en fonction de votre thème */
+  }
+}
+</style>

ui/src/views/SettingsView.vue

@@ -13,7 +13,10 @@
     <v-divider />
     <v-label class="title-style-2">Affichage</v-label>
 
-    <v-switch label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15" color="primary"/>
+    <div>
+      <v-switch hide-details label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15 pb-3" color="primary"/>
+    </div>
+
     <v-divider />
     <v-label class="title-style-2">MQTT</v-label>
     
@@ -24,6 +27,14 @@
 
     </div>
     <v-divider />
+    <v-label class="title-style-2">Jeu</v-label>
+    
+    <div class="mutltiple-per-line">
+      <v-switch hide-details label='Jouer le son de succès lorsque des points sont ajoutés' v-model="SuccessPlay" class="ml-15" color="primary"/>
+      </div>
+
+    <v-switch hide-details label='Jouer le son de erreur lorsque des points sont enlevés' v-model="ErrorPlay" class="ml-15" color="primary"/>
+
 </template>
 
   
@@ -36,6 +47,8 @@
   const MQTTSound = ref(false);  // Définition d'une référence pour la case à cocher. Initialement décochée.
   const MQTTBrokerState = ref(false);  // Définition d'une référence pour la case à cocher. Initialement décochée.
   const SattelitesDisplay = ref(false);
+  const SuccessPlay = ref(false);
+  const ErrorPlay = ref(false);
   const router = useRouter();
 
   const goToDebugRoute = () => {
@@ -55,17 +68,26 @@
       if (localStorage.getItem('SattelitesDisplay')) {
         SattelitesDisplay.value = localStorage.getItem('SattelitesDisplay') === 'true';  // Added a default value for this switch
       }  
+      if (localStorage.getItem('SuccessPlay')) {
+        SuccessPlay.value = localStorage.getItem('SuccessPlay') === 'true';  // Added a default value for this switch
+      } 
+      if (localStorage.getItem('ErrorPlay')) {
+        ErrorPlay.value = localStorage.getItem('ErrorPlay') === 'true';  // Added a default value for this switch
+      }
   });
+  
   watch(EmbeddedSound, (EmbeddedSoundNewValue) => {
       if (EmbeddedSoundNewValue !== null) {
           localStorage.setItem('EmbeddedSound', EmbeddedSoundNewValue);  // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
       } 
   });
+
   watch(EmbeddedSoundVolume, (EmbeddedSoundVolumeNewValue) => {
       if (EmbeddedSoundVolumeNewValue !== null) {
           localStorage.setItem('EmbeddedSoundVolume', EmbeddedSoundVolumeNewValue);  // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
       } 
   });
+
   watch(MQTTSound, (MQTTSoundNewValue) => {
 
       if (MQTTSoundNewValue !== null) {
@@ -78,6 +100,17 @@
     }
   });
 
+  watch(SuccessPlay, (SuccessPlaynewValue) => {
+    if (SuccessPlaynewValue !== null) {
+        localStorage.setItem('SuccessPlay', SuccessPlaynewValue);  // Added a default value for this switch
+    } 
+  });
+
+  watch(ErrorPlay, (ErrorPlaynewValue) => {
+    if (ErrorPlaynewValue !== null) {
+        localStorage.setItem('ErrorPlay', ErrorPlaynewValue);  // Added a default value for this switch
+    } 
+  });
 </script>
 
 <style>