forked from jchomaz/Vulture
Tracking de l'application VApp (IHM du jeu)
This commit is contained in:
77
VApp/src/views/GameControl.vue
Normal file
77
VApp/src/views/GameControl.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row no-gutters>
|
||||
<v-col class="align-start">
|
||||
<card-control />
|
||||
</v-col>
|
||||
<v-col class="pl-3">
|
||||
<card-soundboard />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-row no-gutters class="pr-4 pl-4">
|
||||
<v-row no-gutters>
|
||||
<v-col class="align-start">
|
||||
<CardButtonScore />
|
||||
</v-col>
|
||||
<v-col class="pl-3">
|
||||
<card-solution />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import CardSolution from '@/components/CardSolution.vue'
|
||||
import CardControl from '@/components/CardControl.vue'
|
||||
import CardSoundboard from '@/components/CardSoundboard.vue';
|
||||
import CardButtonScore from '@/components/CardButtonScore.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
.card__title.primary {
|
||||
background-color: #d42828; /* Changez la couleur en fonction de votre thème */
|
||||
}
|
||||
.card__title.feedback {
|
||||
background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
|
||||
}
|
||||
.btn{
|
||||
border-radius:20px!important;
|
||||
}
|
||||
.btn.red {
|
||||
background-color: #d42828; /* Changez la couleur en fonction de votre thème */
|
||||
}
|
||||
.btn.blue {
|
||||
background-color: #2867d4; /* Changez la couleur en fonction de votre thème */
|
||||
}
|
||||
.btn.yellow {
|
||||
background-color: #d4d100; /* Changez la couleur en fonction de votre thème */
|
||||
}
|
||||
.btn.green {
|
||||
background-color: #28d42e; /* Changez la couleur en fonction de votre thème */
|
||||
}
|
||||
.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>
|
||||
188
VApp/src/views/GameDisplay.vue
Normal file
188
VApp/src/views/GameDisplay.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<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-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>
|
||||
</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>
|
||||
</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';
|
||||
|
||||
// --- Déclarations
|
||||
const player = ref(null);
|
||||
let gamehiding = ref(true)
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (player.value) {
|
||||
player.value.dispose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main_div {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 15px);
|
||||
text-align: center;
|
||||
}
|
||||
.score_div_main {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
background-color: rgb(80, 80, 80);
|
||||
padding: 25px 30px;
|
||||
border-radius: 0px 0px 30px 30px;
|
||||
box-shadow: 0px 1px 5px rgb(255, 0, 0);
|
||||
}
|
||||
.score_div {
|
||||
height: 100px;
|
||||
width: 170px;
|
||||
text-align: center;
|
||||
}
|
||||
.color-blue {
|
||||
background-color: rgb(var(--v-theme-BlueBuzzer), 1);
|
||||
border-radius: 40px 5px 40px 5px;
|
||||
}
|
||||
.color-red {
|
||||
background-color: rgb(var(--v-theme-RedBuzzer), 1);
|
||||
border-radius: 40px 5px 40px 5px;
|
||||
}
|
||||
.color-green {
|
||||
background-color: rgb(var(--v-theme-GreenBuzzer), 1);
|
||||
border-radius: 5px 40px 5px 40px;
|
||||
}
|
||||
.color-yellow {
|
||||
background-color: rgb(var(--v-theme-YellowBuzzer), 1);
|
||||
border-radius: 5px 40px 5px 40px;
|
||||
}
|
||||
.color-white {
|
||||
background-color: white;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.v-label-time {
|
||||
padding-top: 5px;
|
||||
color: black;
|
||||
font-size: 49px;
|
||||
font-family: 'Bahnschrift';
|
||||
}
|
||||
.player_video_div {
|
||||
margin-top: 40px;
|
||||
width: calc(100vw - 20%);
|
||||
height: calc(100vh - 20%);
|
||||
border-radius: 20px !important;
|
||||
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
3
VApp/src/views/HomeView.vue
Normal file
3
VApp/src/views/HomeView.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<v-img src="../assets/BrainBlast-For-HomeView-Alpha.png" class="fill-height"></v-img>
|
||||
</template>
|
||||
39
VApp/src/views/MQTTDebugView.vue
Normal file
39
VApp/src/views/MQTTDebugView.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<!-- Colonne gauche avec les trois composants empilés -->
|
||||
<v-col cols="6" class="d-flex flex-column" style="align-items: stretch; height: 100%;">
|
||||
<PublishMQTTComponent />
|
||||
<MQTTColorPublisher />
|
||||
<WSDebugControl />
|
||||
</v-col>
|
||||
|
||||
<!-- Colonne droite avec le composant unique -->
|
||||
<v-col cols="6">
|
||||
<MQTTConsoleComponent />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue';
|
||||
import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue';
|
||||
import MQTTColorPublisher from '@/components/MQTTColorPublisher.vue';
|
||||
import WSDebugControl from '@/components/WSDebugControl.vue';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media (min-width: 1024px) {
|
||||
.card__title.primary {
|
||||
background-color: rgba(var(--v-theme-primary)); /* Couleur basée sur le thème */
|
||||
}
|
||||
.card__title.feedback {
|
||||
background-color: rgba(var(--v-theme-success)); /* Couleur basée sur le thème */
|
||||
}
|
||||
.btn {
|
||||
border-radius: 30px !important;
|
||||
background-color: rgba(var(--v-theme-primary)); /* Couleur basée sur le thème */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
117
VApp/src/views/SettingsView.vue
Normal file
117
VApp/src/views/SettingsView.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<v-label class="title-style-1">Paramètres</v-label>
|
||||
<v-divider :thickness="2" class="border-opacity-100" color="primary" />
|
||||
|
||||
<v-label class="title-style-2">Son</v-label>
|
||||
<div class="mutltiple-per-line">
|
||||
<v-switch hide-details label="Activer le son intégré" v-model="embeddedSound" class="ml-15" color="primary" />
|
||||
<div>
|
||||
<v-slider hide-details class="v-slider-style ml-15" :disabled="!embeddedSound" v-model="embeddedSoundVolume" color="primary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-switch label="Activer le son MQTT" v-model="mqttSound" class="ml-15" color="primary" />
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-label class="title-style-2">Affichage</v-label>
|
||||
<div>
|
||||
<v-switch hide-details label="Activer l'affichage des satellites" v-model="satellitesDisplay" class="ml-15 pb-3" color="primary" />
|
||||
</div>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-label class="title-style-2">MQTT</v-label>
|
||||
<div class="mutltiple-per-line">
|
||||
<v-icon v-model="mqttBrokerState" class="ml-15 mb-5" color="error" icon="mdi-record" />
|
||||
<v-label class="ml-2 mb-10 mt-5">Etat du serveur MQTT</v-label>
|
||||
<v-btn class="ml-10 mb-5" color="primary" @click="goToDebugRoute">Debugger</v-btn>
|
||||
</div>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-label class="title-style-2">Jeu</v-label>
|
||||
<div class="mutltiple-per-line">
|
||||
<v-switch hide-details label="Jouer le son de succès lorsque des points sont ajoutés" v-model="successPlay" class="ml-15" color="primary" />
|
||||
</div>
|
||||
|
||||
<v-switch hide-details label="Jouer le son d'erreur lorsque des points sont enlevés" v-model="errorPlay" class="ml-15" color="primary" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
// Déclaration des variables réactives
|
||||
const embeddedSound = ref(false);
|
||||
const embeddedSoundVolume = ref(50);
|
||||
const mqttSound = ref(false);
|
||||
const mqttBrokerState = ref(false);
|
||||
const satellitesDisplay = ref(false);
|
||||
const successPlay = ref(false);
|
||||
const errorPlay = ref(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const goToDebugRoute = () => {
|
||||
router.push({ name: 'Debugger MQTT' });
|
||||
};
|
||||
|
||||
// Synchronisation avec le localStorage au montage
|
||||
onMounted(() => {
|
||||
embeddedSound.value = localStorage.getItem('EmbeddedSound') === 'true' || false;
|
||||
mqttSound.value = localStorage.getItem('MQTTSound') === 'true' || false;
|
||||
embeddedSoundVolume.value = Number(localStorage.getItem('EmbeddedSoundVolume')) || 50;
|
||||
satellitesDisplay.value = localStorage.getItem('SattelitesDisplay') === 'true' || false;
|
||||
successPlay.value = localStorage.getItem('SuccessPlay') === 'true' || false;
|
||||
errorPlay.value = localStorage.getItem('ErrorPlay') === 'true' || false;
|
||||
});
|
||||
|
||||
// Watchers pour mettre à jour localStorage automatiquement
|
||||
watch(embeddedSound, (val) => {
|
||||
localStorage.setItem('EmbeddedSound', val);
|
||||
});
|
||||
watch(embeddedSoundVolume, (val) => {
|
||||
localStorage.setItem('EmbeddedSoundVolume', val);
|
||||
});
|
||||
watch(mqttSound, (val) => {
|
||||
localStorage.setItem('MQTTSound', val);
|
||||
});
|
||||
watch(satellitesDisplay, (val) => {
|
||||
localStorage.setItem('SattelitesDisplay', val);
|
||||
});
|
||||
watch(successPlay, (val) => {
|
||||
localStorage.setItem('SuccessPlay', val);
|
||||
});
|
||||
watch(errorPlay, (val) => {
|
||||
localStorage.setItem('ErrorPlay', val);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title-style-1 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 16px;
|
||||
margin-left: 20px;
|
||||
font-size: 30px;
|
||||
opacity: 100%;
|
||||
font-weight: 500;
|
||||
}
|
||||
.title-style-2 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 40px;
|
||||
font-size: 25px;
|
||||
opacity: 100%;
|
||||
font-weight: 500;
|
||||
}
|
||||
.mutltiple-per-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.v-slider-style {
|
||||
width: 250px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user