(update) Mise à jour de GameDisplay pour récupérer les scores si la page est rechargée.

VApp/src/views/GameDisplay.vue

@@ -5,20 +5,14 @@
         <v-container class="score_div color-blue">
           <div class="d-flex flex-column align-center">
             <Transition name="score-fade" mode="out-in">
-              <span :key="scores.BlueRoundScore" class="v-label-round-score">Manche : {{ scores.BlueRoundScore }}</span>
+              <span :key="scores.BlueTotalScore" class="v-label-score">{{ scores.BlueRoundScore }}</span>
-            </Transition>
-            <Transition name="score-fade" mode="out-in">
-              <span :key="scores.BlueTotalScore" class="v-label-score">{{ scores.BlueTotalScore }}</span>
             </Transition>
           </div>
         </v-container>
         <v-container class="score_div color-red">
           <div class="d-flex flex-column align-center">
             <Transition name="score-fade" mode="out-in">
-              <span :key="scores.RedRoundScore" class="v-label-round-score">Manche : {{ scores.RedRoundScore }}</span>
+              <span :key="scores.RedTotalScore" class="v-label-score">{{ scores.RedRoundScore }}</span>
-            </Transition>
-            <Transition name="score-fade" mode="out-in">
-              <span :key="scores.RedTotalScore" class="v-label-score">{{ scores.RedTotalScore }}</span>
             </Transition>
           </div>
         </v-container>
@@ -28,20 +22,14 @@
         <v-container class="score_div color-green">
           <div class="d-flex flex-column align-center">
             <Transition name="score-fade" mode="out-in">
-              <span :key="scores.GreenRoundScore" class="v-label-round-score">Manche : {{ scores.GreenRoundScore }}</span>
+              <span :key="scores.GreenTotalScore" class="v-label-score">{{ scores.GreenRoundScore }}</span>
-            </Transition>
-            <Transition name="score-fade" mode="out-in">
-              <span :key="scores.GreenTotalScore" class="v-label-score">{{ scores.GreenTotalScore }}</span>
             </Transition>
           </div>
         </v-container>
         <v-container class="score_div color-yellow">
           <div class="d-flex flex-column align-center">
             <Transition name="score-fade" mode="out-in">
-              <span :key="scores.YellowRoundScore" class="v-label-round-score">Manche : {{ scores.YellowRoundScore }}</span>
+              <span :key="scores.YellowTotalScore" class="v-label-score">{{ scores.YellowRoundScore }}</span>
-            </Transition>
-            <Transition name="score-fade" mode="out-in">
-              <span :key="scores.YellowTotalScore" class="v-label-score">{{ scores.YellowTotalScore }}</span>
             </Transition>
           </div>
         </v-container>
@@ -56,7 +44,6 @@
 </template>
 
 <script setup>
-  //import VideoPlayer from "@/components/VideoPlayer.vue"
   import GameMedia from "@/components/GameMedia.vue"
   import HidingOverlay from "@/components/HidingOverlay.vue"
   import { onMounted, reactive } from 'vue';
@@ -64,9 +51,11 @@
   import config from '@/config.js'
   import quizStore from '@/store/quizStore';
 
+  // Configuration MQTT
   const mqttBrokerUrl = config.mqttBrokerUrl
   const client = mqtt.connect(mqttBrokerUrl)
 
+  // Objet réactif pour stocker les scores des équipes
   const scores = reactive({
     RedTotalScore: 0,
     BlueTotalScore: 0,
@@ -79,14 +68,17 @@
   });
 
   import { ref } from 'vue';
+  // Variable réactive pour l'affichage du timer
   const timerDisplay = ref('00:00');
 
+  // Fonction pour formater le temps en mm:ss
   function formatTime(seconds) {
     const mins = Math.floor(seconds / 60);
     const secs = seconds % 60;
     return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
   }
 
+  // Fonction de gestion des messages MQTT reçus
   function handleMessage(topic, message) {
     let parsedMessage;
     try {
@@ -96,6 +88,7 @@
       return;
     }
 
+    // Mise à jour des scores si le message vient du topic 'game/score'
     if (topic === 'game/score' && parsedMessage.TEAM) {
        scores.RedTotalScore = parsedMessage.TEAM.Red.TotalScore
        scores.BlueTotalScore = parsedMessage.TEAM.Blue.TotalScore
@@ -108,11 +101,13 @@
        scores.GreenRoundScore = parsedMessage.TEAM.Green.RoundScore
     }
 
+    // Mise à jour du timer si le message vient du topic 'game/timer'
     if (topic === 'game/timer' && parsedMessage.time !== undefined) {
        timerDisplay.value = formatTime(parsedMessage.time);
     }
   }
 
+  // Fonction utilitaire pour s'abonner à un topic MQTT
   function subscribeToTopic(topic, callback) {
     client.subscribe(topic)
     client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString())
@@ -120,14 +115,20 @@
   }
 
   onMounted(() => {
+    // Initialisation du store du quiz
     quizStore.actions.init();
     
+    // Abonnement aux topics MQTT pour les scores et le timer
     subscribeToTopic('game/score', (topic, message) => {
       handleMessage(topic, message);
     });
     subscribeToTopic('game/timer', (topic, message) => {
       handleMessage(topic, message);
     });
+
+    // Demande de rafraîchissement des scores au chargement
+    // Cela permet de récupérer les scores actuels même après un rechargement de page
+    client.publish('game/score/request', '{}');
   });
 </script>