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

Ajout des scores dans les pastilles d'équipes et de le mise à jour en live des scores

Browse Source
This commit is contained in:
Jérémy CHOMAZ
2026-01-23 18:42:42 +01:00
parent 905da933dc
commit 911497ab1d
1 changed files with 118 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,113 +2,113 @@
<div class="main_div"> <div class="main_div">
<div> <div>
<v-container class="score_div_main"> <v-container class="score_div_main">
<v-container class="score_div color-blue"></v-container> <v-container class="score_div color-blue">
<v-container class="score_div color-red"></v-container> <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>
</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>
</Transition>
</div>
</v-container>
<v-container class="score_div color-white d-flex align-center justify-center"> <v-container class="score_div color-white d-flex align-center justify-center">
<span class="v-label-time">00:00</span> <span class="v-label-time">00:00</span>
</v-container> </v-container>
<v-container class="score_div color-green"></v-container> <v-container class="score_div color-green">
<v-container class="score_div color-yellow"></v-container> <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>
</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>
</Transition>
</div>
</v-container>
</v-container> </v-container>
</div> </div>
<div> <div>
<v-container v-show="gamehiding === true" class="v-container-game-hided"> <HidingOverlay/>
<v-img src="@\assets\v-hide.png" class="v-img-hidding"></v-img> <VideoPlayer/>
</v-container>
<v-container v-show="gamehiding === false" class="player_video_div">
<video
ref="videoJsPlayer"
class="video-js player_video"
controls
></video>
</v-container>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'; import VideoPlayer from "@/components/VideoPlayer.vue"
import videojs from 'video.js'; import HidingOverlay from "@/components/HidingOverlay.vue"
import 'video.js/dist/video-js.css'; import { onMounted, reactive } from 'vue';
import Mysteryland_h264 from '../quizz/Quizz-1/festival/Mysteryland_h264.mp4'; import mqtt from 'mqtt'
import { subscribeToTopic } from '@/services/mqttService'; import config from '@/config.js'
// --- Déclarations const mqttBrokerUrl = config.mqttBrokerUrl
const player = ref(null); const client = mqtt.connect(mqttBrokerUrl)
let gamehiding = ref(true)
const videoOptions = { const scores = reactive({
autoplay: false, RedTotalScore: 0,
controls: false, BlueTotalScore: 0,
preload: 'auto', YellowTotalScore: 0,
fluid: true, GreenTotalScore: 0,
loop: true, RedRoundScore: 0,
volume: 0, BlueRoundScore: 0,
sources: [{ src: Mysteryland_h264, type: 'video/mp4' }], YellowRoundScore: 0,
}; GreenRoundScore: 0,
// --- Fonctions
const playVideo = () => {
if (player.value) {
console.log("▶️ Lecture de la vidéo !");
player.value.play().catch((error) => {
console.error("Erreur de lecture :", error);
}); });
} else {
console.warn("⚠️ Player non encore initialisé !");
}
};
const pauseVideo = () => { function handleMessage(topic, message) {
if (player.value) { let parsedMessage;
console.log("⏸️ Pause de la vidéo !"); try {
player.value.pause(); parsedMessage = JSON.parse(message);
} else { } catch (e) {
console.warn("⚠️ Player non encore initialisé !"); console.error("Erreur d'analyse JSON:", e);
return;
} }
};
const handleMessage = (topic, message) => { if (parsedMessage.TEAM) {
if (topic === "/display/control") { scores.RedTotalScore = parsedMessage.TEAM.Red.TotalScore
switch (message) { scores.BlueTotalScore = parsedMessage.TEAM.Blue.TotalScore
case "play": scores.YellowTotalScore = parsedMessage.TEAM.Yellow.TotalScore
gamehiding.value = false; scores.GreenTotalScore = parsedMessage.TEAM.Green.TotalScore
playVideo();
break;
case "pause":
gamehiding.value = true;
pauseVideo();
break;
case "hide":
console.log("🛑 Cacher la vidéo (implémentation à venir)");
break;
default:
console.warn("Commande non reconnue :", message);
}
}
};
// --- Lifecycle scores.RedRoundScore = parsedMessage.TEAM.Red.RoundScore
onMounted(() => { scores.BlueRoundScore = parsedMessage.TEAM.Blue.RoundScore
player.value = videojs( scores.YellowRoundScore = parsedMessage.TEAM.Yellow.RoundScore
document.querySelector('.video-js'), scores.GreenRoundScore = parsedMessage.TEAM.Green.RoundScore
videoOptions, }
() => {
console.log('🎥 Video player ready');
} }
);
subscribeToTopic('#', (topic, message) => { function subscribeToTopic(topic, callback) {
client.subscribe(topic)
client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString())
})
}
onMounted(() => {
subscribeToTopic('game/score', (topic, message) => {
handleMessage(topic, message); handleMessage(topic, message);
}); });
}); });
onBeforeUnmount(() => {
if (player.value) {
player.value.dispose();
}
});
</script> </script>
<style scoped> <style scoped>
@@ -122,15 +122,18 @@ onBeforeUnmount(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 5px; gap: 5px;
background-color: rgb(80, 80, 80); background-color: rgb(40, 40, 40);
padding: 25px 30px; padding: 25px 30px;
border-radius: 0px 0px 30px 30px; border-radius: 0px 0px 30px 30px;
box-shadow: 0px 1px 5px rgb(255, 0, 0); box-shadow: 0px 3px 45px rgb(45, 115, 166);
} }
.score_div { .score_div {
height: 100px; height: 100px;
width: 170px; width: 170px;
text-align: center; text-align: center;
display: flex;
justify-content: center;
align-items: center;
} }
.color-blue { .color-blue {
background-color: rgb(var(--v-theme-BlueBuzzer), 1); background-color: rgb(var(--v-theme-BlueBuzzer), 1);
@@ -158,31 +161,29 @@ onBeforeUnmount(() => {
font-size: 49px; font-size: 49px;
font-family: 'Bahnschrift'; font-family: 'Bahnschrift';
} }
.player_video_div { .v-label-score {
margin-top: 40px; color: white;
width: calc(100vw - 20%); font-size: 40px;
height: calc(100vh - 20%); font-family: 'Bahnschrift';
border-radius: 20px !important; font-weight: bold;
line-height: 1;
}
.v-label-round-score {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
font-family: 'Bahnschrift';
font-weight: 500;
margin-bottom: 2px;
}
/* Transition styles */
.score-fade-enter-active,
.score-fade-leave-active {
transition: opacity 0.3s ease;
} }
.player_video {
width: 100%;
height: 100%;
max-width: 100vw;
max-height: 100vh;
border-radius: 25px !important;
} .score-fade-enter-from,
.vjs-tech{ .score-fade-leave-to {
border-radius: 25px; opacity: 0;
}
.v-container-game-hided{
margin-top: 40px;
width: calc(100vw - 20%) !important;
height: calc(100vh - 20%) !important;
border-radius: 25px;
}
.v-img-hidding{
border-radius: 25px;
} }
</style> </style>