Vulture/VApp/src/components/CardScore.vue

<template>  
  <div class="label-pos">     
    <v-label class="labelTitle-style pb-4">Scores</v-label> 
  </div>
 <!-- Équipes Rouges et Bleues côte à côte --> 
  <v-row no-gutters class="scorebox-pos">     <!-- Équipe Rouge -->     
    <v-col cols="6"> <!-- Colonnes de taille 6 pour chaque équipe -->     
      <v-row no-gutters>         
        <v-col class="scorediv-style-red">         
          <div>             
            <v-label class="labelRoundScore-style pt-3">Manche</v-label>             
            <div>             
              <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">{{ scores.RedTotalScore }}</v-label>             
            </div>         
          </div>         
        </v-col>     
      </v-row>     
    </v-col>
     <!-- Équipe Bleue -->     
      <v-col cols="6">     
        <v-row no-gutters>         
          <v-col class="scorediv-style-blue">         
            <div>             
              <v-label class="labelRoundScore-style pt-3">Manche</v-label>             
              <div>             
                <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">{{ scores.BlueTotalScore }}</v-label>             
              </div>         
            </div>         
          </v-col>     
        </v-row>     
      </v-col> 
    </v-row>
 <!-- Équipes Oranges et Vertes côte à côte --> 
  <v-row no-gutters class="scorebox-pos">     
    <!-- Équipe Orange -->     
    <v-col cols="6">     
      <v-row no-gutters>         
        <v-col class="scorediv-style-yellow">         
          <div>             
            <v-label class="labelRoundScore-style pt-3">Manche</v-label>             
            <div>             
              <v-label class="labelRoundScore-style">{{ scores.YellowRoundScore }}</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">{{ scores.YellowTotalScore }}</v-label>             
            </div>         
          </div>         
        </v-col>     
      </v-row>     
    </v-col>
     <!-- Équipe Verte -->     
      <v-col cols="6">     
        <v-row no-gutters>         
          <v-col class="scorediv-style-green">         
            <div>             
              <v-label class="labelRoundScore-style pt-3">Manche</v-label>             
              <div>             
                <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">{{ scores.GreenTotalScore }}</v-label>             
              </div>         
            </div>         
          </v-col>     
        </v-row>     
      </v-col> 
  </v-row>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue';
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 scores = reactive({
  RedTotalScore: 0, // Propriétés réactives
  BlueTotalScore: 0, // Propriétés réactives
  YellowTotalScore: 0, // Propriétés réactives
  GreenTotalScore: 0, // Propriétés réactives
  RedRoundScore: 0, // Propriétés réactives
  BlueRoundScore: 0, // Propriétés réactives
  YellowRoundScore: 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
}


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);
	});

  // Request score refresh
  client.publish('game/score/request', '{}');
});

</script>

<style>
  .label-pos { 
    padding-top: 15px; 
    text-align: center;
  }
  .labelTitle-style { 
    font-size: 20px !important; 
    font-weight: 500; 
    color: #d42828 !important; 
    opacity: 90% !important;
  }
  .labelRoundScore-style { 
    opacity: 100% !important; 
    font-size: 25px !important; 
    font-weight: 500;
  }
  .labelTotalScore-style { 
    opacity: 100% !important; 
    font-size: 15px !important; 
    font-weight: 500;
  }
  .button-pos { 
    padding-top: 10px; 
    padding-bottom: 15px;
  }
  .scorebox-pos { 
    text-align: center;
  }
  .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>