Ajout des scores dans les pastilles d'équipes et de le mise à jour en live des scores
This commit is contained in:
@@ -2,113 +2,113 @@
|
||||
<div class="main_div">
|
||||
<div>
|
||||
<v-container class="score_div_main">
|
||||
<v-container class="score_div color-blue"></v-container>
|
||||
<v-container class="score_div color-red"></v-container>
|
||||
<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>
|
||||
</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">
|
||||
<span class="v-label-time">00:00</span>
|
||||
</v-container>
|
||||
<v-container class="score_div color-green"></v-container>
|
||||
<v-container class="score_div color-yellow"></v-container>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<v-container v-show="gamehiding === true" class="v-container-game-hided">
|
||||
<v-img src="@\assets\v-hide.png" class="v-img-hidding"></v-img>
|
||||
</v-container>
|
||||
<v-container v-show="gamehiding === false" class="player_video_div">
|
||||
<video
|
||||
ref="videoJsPlayer"
|
||||
class="video-js player_video"
|
||||
controls
|
||||
></video>
|
||||
</v-container>
|
||||
<HidingOverlay/>
|
||||
<VideoPlayer/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import videojs from 'video.js';
|
||||
import 'video.js/dist/video-js.css';
|
||||
import Mysteryland_h264 from '../quizz/Quizz-1/festival/Mysteryland_h264.mp4';
|
||||
import { subscribeToTopic } from '@/services/mqttService';
|
||||
import VideoPlayer from "@/components/VideoPlayer.vue"
|
||||
import HidingOverlay from "@/components/HidingOverlay.vue"
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import mqtt from 'mqtt'
|
||||
import config from '@/config.js'
|
||||
|
||||
// --- Déclarations
|
||||
const player = ref(null);
|
||||
let gamehiding = ref(true)
|
||||
const mqttBrokerUrl = config.mqttBrokerUrl
|
||||
const client = mqtt.connect(mqttBrokerUrl)
|
||||
|
||||
const videoOptions = {
|
||||
autoplay: false,
|
||||
controls: false,
|
||||
preload: 'auto',
|
||||
fluid: true,
|
||||
loop: true,
|
||||
volume: 0,
|
||||
sources: [{ src: Mysteryland_h264, type: 'video/mp4' }],
|
||||
};
|
||||
|
||||
// --- 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 = () => {
|
||||
if (player.value) {
|
||||
console.log("⏸️ Pause de la vidéo !");
|
||||
player.value.pause();
|
||||
} else {
|
||||
console.warn("⚠️ Player non encore initialisé !");
|
||||
}
|
||||
};
|
||||
|
||||
const handleMessage = (topic, message) => {
|
||||
if (topic === "/display/control") {
|
||||
switch (message) {
|
||||
case "play":
|
||||
gamehiding.value = false;
|
||||
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
|
||||
onMounted(() => {
|
||||
player.value = videojs(
|
||||
document.querySelector('.video-js'),
|
||||
videoOptions,
|
||||
() => {
|
||||
console.log('🎥 Video player ready');
|
||||
}
|
||||
);
|
||||
|
||||
subscribeToTopic('#', (topic, message) => {
|
||||
handleMessage(topic, message);
|
||||
const scores = reactive({
|
||||
RedTotalScore: 0,
|
||||
BlueTotalScore: 0,
|
||||
YellowTotalScore: 0,
|
||||
GreenTotalScore: 0,
|
||||
RedRoundScore: 0,
|
||||
BlueRoundScore: 0,
|
||||
YellowRoundScore: 0,
|
||||
GreenRoundScore: 0,
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (player.value) {
|
||||
player.value.dispose();
|
||||
function handleMessage(topic, message) {
|
||||
let parsedMessage;
|
||||
try {
|
||||
parsedMessage = JSON.parse(message);
|
||||
} catch (e) {
|
||||
console.error("Erreur d'analyse JSON:", e);
|
||||
return;
|
||||
}
|
||||
|
||||
if (parsedMessage.TEAM) {
|
||||
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())
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
subscribeToTopic('game/score', (topic, message) => {
|
||||
handleMessage(topic, message);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -122,15 +122,18 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
background-color: rgb(80, 80, 80);
|
||||
background-color: rgb(40, 40, 40);
|
||||
padding: 25px 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 {
|
||||
height: 100px;
|
||||
width: 170px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.color-blue {
|
||||
background-color: rgb(var(--v-theme-BlueBuzzer), 1);
|
||||
@@ -158,31 +161,29 @@ onBeforeUnmount(() => {
|
||||
font-size: 49px;
|
||||
font-family: 'Bahnschrift';
|
||||
}
|
||||
.player_video_div {
|
||||
margin-top: 40px;
|
||||
width: calc(100vw - 20%);
|
||||
height: calc(100vh - 20%);
|
||||
border-radius: 20px !important;
|
||||
.v-label-score {
|
||||
color: white;
|
||||
font-size: 40px;
|
||||
font-family: 'Bahnschrift';
|
||||
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;
|
||||
|
||||
}
|
||||
.vjs-tech{
|
||||
border-radius: 25px;
|
||||
}
|
||||
.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;
|
||||
.score-fade-enter-from,
|
||||
.score-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user