Ajout des variables réactives dans le card score

ui/src/components/CardScore.vue

@@ -10,14 +10,14 @@
           <div>             
             <v-label class="labelRoundScore-style pt-3">Manche</v-label>             
             <div>             
-              <v-label class="labelRoundScore-style">{{ RedRoundScore }}</v-label>             
+              <v-label class="labelRoundScore-style">{{ scores.RedRoundScore }}</v-label>             
             </div>         
           </div>         
           <v-divider color="background"/>         
           <div>             
             <v-label class="labelTotalScore-style pt-3">Total</v-label>             
             <div>             
-              <v-label class="labelTotalScore-style pb-3">{{ RedTotalScore }}</v-label>             
+              <v-label class="labelTotalScore-style pb-3">{{ scores.RedTotalScore }}</v-label>             
             </div>         
           </div>         
         </v-col>     
@@ -30,14 +30,14 @@
             <div>             
               <v-label class="labelRoundScore-style pt-3">Manche</v-label>             
               <div>             
-                <v-label class="labelRoundScore-style">{{ BlueRoundScore }}</v-label>             
+                <v-label class="labelRoundScore-style">{{ scores.BlueRoundScore }}</v-label>             
               </div>         
             </div>        
             <v-divider color="background"/>         
             <div>             
               <v-label class="labelTotalScore-style pt-3">Total</v-label>             
               <div>             
-                <v-label class="labelTotalScore-style pb-3">{{ BlueTotalScore }}</v-label>             
+                <v-label class="labelTotalScore-style pb-3">{{ scores.BlueTotalScore }}</v-label>             
               </div>         
             </div>         
           </v-col>     
@@ -53,14 +53,14 @@
           <div>             
             <v-label class="labelRoundScore-style pt-3">Manche</v-label>             
             <div>             
-              <v-label class="labelRoundScore-style">{{ OrangeRoundScore }}</v-label>             
+              <v-label class="labelRoundScore-style">{{ scores.OrangeRoundScore }}</v-label>             
             </div>         
           </div>         
           <v-divider color="background"/>         
           <div>             
             <v-label class="labelTotalScore-style pt-3">Total</v-label>             
             <div>             
-              <v-label class="labelTotalScore-style pb-3">{{ OrangeTotalScore }}</v-label>             
+              <v-label class="labelTotalScore-style pb-3">{{ scores.OrangeTotalScore }}</v-label>             
             </div>         
           </div>         
         </v-col>     
@@ -73,14 +73,14 @@
             <div>             
               <v-label class="labelRoundScore-style pt-3">Manche</v-label>             
               <div>             
-                <v-label class="labelRoundScore-style">{{ GreenRoundScore }}</v-label>             
+                <v-label class="labelRoundScore-style">{{ scores.GreenRoundScore }}</v-label>             
               </div>         
             </div>         
             <v-divider color="background"/>         
             <div>             
               <v-label class="labelTotalScore-style pt-3">Total</v-label>             
               <div>             
-                <v-label class="labelTotalScore-style pb-3">{{ GreenTotalScore }}</v-label>             
+                <v-label class="labelTotalScore-style pb-3">{{ scores.GreenTotalScore }}</v-label>             
               </div>         
             </div>         
           </v-col>     
@@ -90,18 +90,80 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'; // Import des fonctions de Vue 3
+import { onMounted, ref, reactive } from 'vue';
 import variables from '@/variables.js';
+import mqtt from 'mqtt'
+import config from '@/config.js'
+
+const mqttBrokerUrl = config.mqttBrokerUrl
+// Créer une instance de client MQTT
+const client = mqtt.connect(mqttBrokerUrl)
 
 // Déclaration des variables locales pour les scores
-const RedTotalScore = ref(variables.RedTotalScore);
+const scores = reactive({
-const BlueTotalScore = ref(variables.BlueTotalScore);
+  RedTotalScore: 0, // Propriétés réactives
-const OrangeTotalScore = ref(variables.OrangeTotalScore);
+  BlueTotalScore: 0, // Propriétés réactives
-const GreenTotalScore = ref(variables.GreenTotalScore);
+  OrangeTotalScore: 0, // Propriétés réactives
-const RedRoundScore = ref(variables.RedRoundScore);
+  GreenTotalScore: 0, // Propriétés réactives
-const BlueRoundScore = ref(variables.BlueRoundScore);
+  RedRoundScore: 0, // Propriétés réactives
-const OrangeRoundScore = ref(variables.OrangeRoundScore);
+  BlueRoundScore: 0, // Propriétés réactives
-const GreenRoundScore = ref(variables.GreenRoundScore);
+  OrangeRoundScore: 0, // Propriétés réactives
+  GreenRoundScore: 0, // Propriétés réactives
+});
+// Fonction pour traiter chaque message reçu et réinitialiser le timeout
+function handleMessage(topic, message) {
+	let parsedMessage;
+	try {
+		parsedMessage = JSON.parse(message);
+	} catch (e) {
+		console.error("Erreur d'analyse JSON:", e);
+		return;
+	}
+
+	// Extraire les informations
+	//const { TEAM, Name } = parsedMessage;
+  scores.RedTotalScore = parsedMessage.TEAM.Red.TotalScore
+  scores.BlueTotalScore = parsedMessage.TEAM.Blue.TotalScore
+  scores.YellowTotalScore = parsedMessage.TEAM.Yellow.TotalScore
+  scores.GreenTotalScore = parsedMessage.TEAM.Green.TotalScore
+
+  scores.RedRoundScore = parsedMessage.TEAM.Red.RoundScore
+  scores.BlueRoundScore = parsedMessage.TEAM.Blue.RoundScore
+  scores.YellowRoundScore = parsedMessage.TEAM.Yellow.RoundScore
+  scores.GreenRoundScore = parsedMessage.TEAM.Green.RoundScore
+	// Mettre à jour l'état des buzzers en fonction des messages
+  /*
+	switch (buzzer) {
+		case 'redBuzzerIP':
+			redBuzzerState.value = status === "online" ? 1 : 0;
+			break;
+		case 'blueBuzzerIP':
+			blueBuzzerState.value = status === "online" ? 1 : 0;
+			break;
+		case 'yellowBuzzerIP':
+			yellowBuzzerState.value = status === "online" ? 1 : 0;
+			break;
+		case 'greenBuzzerIP':
+			greenBuzzerState.value = status === "online" ? 1 : 0;
+			break;
+	}
+  */
+
+}
+
+
+function subscribeToTopic(topic, callback) {
+  client.subscribe(topic)
+  client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString())
+  })
+}
+// S'abonner au topic lorsque le composant est monté
+onMounted(() => {
+	subscribeToTopic('game/score', (topic, message) => {
+		handleMessage(topic, message);
+	});
+  
+});
 
 </script>