asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Ajout des variables réactives dans le card score

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-12-23 21:58:07 +01:00
parent c29191d01b
commit 60789f440c
1 changed files with 79 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
ui/src/components/CardScore.vue
View File

@ -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 BlueTotalScore = ref(variables.BlueTotalScore);
const OrangeTotalScore = ref(variables.OrangeTotalScore);
const GreenTotalScore = ref(variables.GreenTotalScore);
const RedRoundScore = ref(variables.RedRoundScore);
const BlueRoundScore = ref(variables.BlueRoundScore);
const OrangeRoundScore = ref(variables.OrangeRoundScore);
const GreenRoundScore = ref(variables.GreenRoundScore);
const scores = reactive({
RedTotalScore: 0, // Propriétés réactives
BlueTotalScore: 0, // Propriétés réactives
OrangeTotalScore: 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
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>