jchomaz/Vulture
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jérémy CHOMAZ
2026-02-03 20:37:53 +01:00
parent a844c21a1b
commit 4efe3b00c4
1 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
VApp/src/views/GameDisplay.vue
View File

@@ -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>
</Transition>
<Transition name="score-fade" mode="out-in">
<span :key="scores.BlueTotalScore" class="v-label-score">{{ scores.BlueTotalScore }}</span>
<span :key="scores.BlueTotalScore" class="v-label-score">{{ scores.BlueRoundScore }}</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>
</Transition>
<Transition name="score-fade" mode="out-in">
<span :key="scores.RedTotalScore" class="v-label-score">{{ scores.RedTotalScore }}</span>
<span :key="scores.RedTotalScore" class="v-label-score">{{ scores.RedRoundScore }}</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>
</Transition>
<Transition name="score-fade" mode="out-in">
<span :key="scores.GreenTotalScore" class="v-label-score">{{ scores.GreenTotalScore }}</span>
<span :key="scores.GreenTotalScore" class="v-label-score">{{ scores.GreenRoundScore }}</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>
</Transition>
<Transition name="score-fade" mode="out-in">
<span :key="scores.YellowTotalScore" class="v-label-score">{{ scores.YellowTotalScore }}</span>
<span :key="scores.YellowTotalScore" class="v-label-score">{{ scores.YellowRoundScore }}</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>