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

Tracking de l'application VApp (IHM du jeu)

Browse Source
This commit is contained in:
Jérémy CHOMAZ
2025-05-11 18:04:12 +02:00
commit 89e9db9b62
17763 changed files with 3718499 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
VApp/src/components/CardScore.vue Normal file
View File

@@ -0,0 +1,218 @@
<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.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">{{ scores.OrangeTotalScore }}</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 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 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>
<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>