Compare commits
20 Commits
f855601217
...
update/imp
| Author | SHA1 | Date | |
|---|---|---|---|
| 332098a6fd | |||
| df2c9d4788 | |||
| 2fe8527c37 | |||
| 5938e269e1 | |||
| ff03299645 | |||
| 5624336173 | |||
| 7aa5ddb4ec | |||
| be8c18710d | |||
| f4530e8e50 | |||
| 8db6f16ac8 | |||
| fb3b7fabd4 | |||
| 0244854ddb | |||
| bcec23a751 | |||
| 70fb7cbcea | |||
| 353541541d | |||
| ee4c2604db | |||
| ad9b29ca93 | |||
| 7413a2a78f | |||
| 54bbfa00b3 | |||
| de8f8f051f |
@@ -1,19 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-app>
|
<v-app>
|
||||||
<BrainBlastBar v-if="$route.name != 'Game Display (Projection)'" />
|
<VultureBar v-if="showVultureBar" />
|
||||||
<GameStatus v-if="$route.name === 'Game Control (Présentateur)'">
|
<GameStatus v-if="showGameStatus" />
|
||||||
</GameStatus>
|
|
||||||
<v-main>
|
<v-main>
|
||||||
<RouterView />
|
<RouterView :key="$route.fullPath" />
|
||||||
</v-main> <!-- <v-footer class="footer" :elevation=12 border><v-row justify="center">© 2024 - ASCO section Fablab</v-row></v-footer> -->
|
</v-main> <!-- <v-footer class="footer" :elevation=12 border><v-row justify="center">© 2024 - ASCO section Fablab</v-row></v-footer> -->
|
||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
import BrainBlastBar from '@/components/BrainBlastBar.vue'
|
import { useRoute } from 'vue-router';
|
||||||
|
import VultureBar from '@/components/VultureBar.vue'
|
||||||
import GameStatus from '@/components/GameStatus.vue'
|
import GameStatus from '@/components/GameStatus.vue'
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const showVultureBar = computed(() => {
|
||||||
|
return route.name !== 'Game Display (Projection)' && route.name !== 'Score Display (Projection)';
|
||||||
|
});
|
||||||
|
|
||||||
|
const showGameStatus = computed(() => {
|
||||||
|
return route.name === 'Game Control (Présentateur)';
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-dialog v-model="dialog" persistent max-width="800" height="500">
|
<v-dialog v-model="dialog" persistent max-width="800" height="500" style="background-color: rgba(0, 0, 0, 0.8);">
|
||||||
<v-card dark rounded="xl">
|
<v-card dark rounded="xl">
|
||||||
<v-card-title :style="{ backgroundColor: buzzerColor }" class="headline text-center justify-center">
|
<v-card-title :style="{ backgroundColor: buzzerColor }" class="headline text-center justify-center">
|
||||||
<v-icon color="background" dark large left size="70">mdi-alarm-light</v-icon>
|
<v-icon color="background" dark large left size="70">mdi-alarm-light</v-icon>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
@@ -25,6 +25,7 @@
|
|||||||
rounded="0"
|
rounded="0"
|
||||||
height="100%"
|
height="100%"
|
||||||
width="50%"
|
width="50%"
|
||||||
|
:style="{ backgroundColor: buzzerColor }"
|
||||||
@click="validate">
|
@click="validate">
|
||||||
<v-icon left size="40">mdi-check-circle</v-icon>
|
<v-icon left size="40">mdi-check-circle</v-icon>
|
||||||
<span style="font-size: 20px; padding-left: 10px;">Valider (+1)</span>
|
<span style="font-size: 20px; padding-left: 10px;">Valider (+1)</span>
|
||||||
@@ -46,7 +47,7 @@
|
|||||||
const buzzerColor = ref('');
|
const buzzerColor = ref('');
|
||||||
const client = mqtt.connect(config.mqttBrokerUrl);
|
const client = mqtt.connect(config.mqttBrokerUrl);
|
||||||
|
|
||||||
// Map hex colors to team names if needed, or just use the color directly
|
// Associe les couleurs hex aux noms d'équipe si besoin, ou utilise directement la couleur
|
||||||
function getTeamNameFromColor(color) {
|
function getTeamNameFromColor(color) {
|
||||||
const c = color.toUpperCase();
|
const c = color.toUpperCase();
|
||||||
const colors = theme.current.value.colors;
|
const colors = theme.current.value.colors;
|
||||||
@@ -58,7 +59,7 @@
|
|||||||
if (c === colors.BlueBuzzer.toUpperCase()) return 'bleue';
|
if (c === colors.BlueBuzzer.toUpperCase()) return 'bleue';
|
||||||
if (c === colors.YellowBuzzer.toUpperCase()) return 'jaune';
|
if (c === colors.YellowBuzzer.toUpperCase()) return 'jaune';
|
||||||
if (c === colors.GreenBuzzer.toUpperCase()) return 'verte';
|
if (c === colors.GreenBuzzer.toUpperCase()) return 'verte';
|
||||||
return color; // Fallback
|
return color; // Valeur par défaut
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTeamKeyFromColor(color) {
|
function getTeamKeyFromColor(color) {
|
||||||
@@ -87,7 +88,7 @@
|
|||||||
buzzerTeam.value = getTeamNameFromColor(data.color);
|
buzzerTeam.value = getTeamNameFromColor(data.color);
|
||||||
dialog.value = true;
|
dialog.value = true;
|
||||||
} else if (data.status === 'unblocked') {
|
} else if (data.status === 'unblocked') {
|
||||||
// Optional: auto-close if unblocked from elsewhere
|
// Optionnel : fermer automatiquement si débloqué depuis ailleurs
|
||||||
dialog.value = false;
|
dialog.value = false;
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@@ -108,7 +109,7 @@
|
|||||||
client.publish('game/score/update', JSON.stringify(payload));
|
client.publish('game/score/update', JSON.stringify(payload));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add a small delay before unlocking to ensure the score update is processed
|
// Petit délai avant le déblocage pour que la mise à jour du score soit traitée
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
unlockBuzzers();
|
unlockBuzzers();
|
||||||
}, 100);
|
}, 100);
|
||||||
@@ -133,14 +134,13 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 100%; /* Ensure it takes full height of the container if possible, or substantial height */
|
height: 100%; /* S'assure que l'élément occupe toute la hauteur du conteneur si possible, ou une hauteur substantielle */
|
||||||
}
|
}
|
||||||
.validate-btn {
|
.validate-btn {
|
||||||
background-color: rgb(var(--v-theme-success),1);
|
|
||||||
color: rgb(var(--v-theme-background),1);
|
color: rgb(var(--v-theme-background),1);
|
||||||
}
|
}
|
||||||
.refuse-btn {
|
.refuse-btn {
|
||||||
background-color: rgb(var(--v-theme-error),1);
|
background-color: rgb(var(--v-theme-inactiveButton),1);
|
||||||
color: rgb(var(--v-theme-background),1);
|
color: rgb(var(--v-theme-background),1);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -59,7 +59,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
||||||
import mqtt from 'mqtt';
|
import mqtt from 'mqtt';
|
||||||
import config from '@/config.js'; // Ensure correct path
|
import config from '@/config.js'; // Ensure correct path
|
||||||
|
|
||||||
@@ -72,34 +72,45 @@
|
|||||||
Green: { Total: 0, Round: 0 },
|
Green: { Total: 0, Round: 0 },
|
||||||
});
|
});
|
||||||
|
|
||||||
const client = mqtt.connect(config.mqttBrokerUrl);
|
// const client = mqtt.connect(config.mqttBrokerUrl);
|
||||||
|
let client = null;
|
||||||
|
|
||||||
client.on('connect', () => {
|
onMounted(() => {
|
||||||
console.log('CardButtonScore: Connected to MQTT broker at', config.mqttBrokerUrl);
|
client = mqtt.connect(config.mqttBrokerUrl);
|
||||||
client.subscribe('game/score');
|
|
||||||
|
client.on('connect', () => {
|
||||||
|
console.log('CardButtonScore: Connected to MQTT broker at', config.mqttBrokerUrl);
|
||||||
|
client.subscribe('game/score');
|
||||||
|
});
|
||||||
|
|
||||||
|
client.on('error', (err) => {
|
||||||
|
console.error('CardButtonScore: MQTT Error:', err);
|
||||||
|
});
|
||||||
|
|
||||||
|
client.on('message', (topic, message) => {
|
||||||
|
if (topic === 'game/score') {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(message.toString());
|
||||||
|
console.log('CardButtonScore: Received score update:', data);
|
||||||
|
if (data && data.TEAM) {
|
||||||
|
Object.keys(scores).forEach(color => {
|
||||||
|
if (data.TEAM[color]) {
|
||||||
|
scores[color].Total = data.TEAM[color].TotalScore;
|
||||||
|
scores[color].Round = data.TEAM[color].RoundScore;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Error parsing score update:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
client.on('error', (err) => {
|
onUnmounted(() => {
|
||||||
console.error('CardButtonScore: MQTT Error:', err);
|
if (client) {
|
||||||
});
|
client.end();
|
||||||
|
}
|
||||||
client.on('message', (topic, message) => {
|
|
||||||
if (topic === 'game/score') {
|
|
||||||
try {
|
|
||||||
const data = JSON.parse(message.toString());
|
|
||||||
console.log('CardButtonScore: Received score update:', data);
|
|
||||||
if (data && data.TEAM) {
|
|
||||||
Object.keys(scores).forEach(color => {
|
|
||||||
if (data.TEAM[color]) {
|
|
||||||
scores[color].Total = data.TEAM[color].TotalScore;
|
|
||||||
scores[color].Round = data.TEAM[color].RoundScore;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Error parsing score update:", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function toggleCardSize() {
|
function toggleCardSize() {
|
||||||
|
|||||||
@@ -28,7 +28,12 @@ const quizzList = ref([]);
|
|||||||
// Fonction pour mettre à jour la liste
|
// Fonction pour mettre à jour la liste
|
||||||
const handleMessage = (topic, message) => {
|
const handleMessage = (topic, message) => {
|
||||||
try {
|
try {
|
||||||
quizzList.value = JSON.parse(message.toString());
|
const parsed = JSON.parse(message.toString());
|
||||||
|
if (Array.isArray(parsed)) {
|
||||||
|
quizzList.value = parsed;
|
||||||
|
} else {
|
||||||
|
console.warn('CardCurrentQuizz: Received non-array data', parsed);
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Erreur de parsing JSON:', error);
|
console.error('Erreur de parsing JSON:', error);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,14 +3,36 @@
|
|||||||
<v-card-title class="card__title primary" @click="toggleCardSize">
|
<v-card-title class="card__title primary" @click="toggleCardSize">
|
||||||
<v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>
|
<v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>
|
||||||
Solution </v-card-title>
|
Solution </v-card-title>
|
||||||
<v-container class="text-center">
|
<v-container class="text-center" v-if="currentQuestion">
|
||||||
<v-row justify="center">
|
<div class="text-h6 mb-2">Question {{ currentQuestionIndex + 1 }}</div>
|
||||||
<v-container class="text-center"> <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->
|
<div class="text-body-1 font-weight-bold mb-4">{{ currentQuestion.QuestionText }}</div>
|
||||||
<v-img width="450" src="@/assets/copilot-solution-FULL-HD.jpg" style="margin: 0 auto;">
|
|
||||||
</v-img>
|
<v-divider class="mb-4"></v-divider>
|
||||||
</v-container>
|
|
||||||
</v-row>
|
<v-btn
|
||||||
|
:color="showSolution ? 'red' : 'green'"
|
||||||
|
class="mb-4"
|
||||||
|
@click="showSolution = !showSolution"
|
||||||
|
>
|
||||||
|
{{ showSolution ? 'Masquer Solution' : 'Voir Solution' }}
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
|
<v-slide-y-transition>
|
||||||
|
<div v-if="showSolution" class="solution-block">
|
||||||
|
<div class="text-h5 success--text mb-2">{{ currentQuestion.MasterData.CorrectAnswer }}</div>
|
||||||
|
<div class="text-body-2 grey--text text--lighten-1 mb-2">
|
||||||
|
<v-icon small>mdi-information</v-icon> {{ currentQuestion.MasterData.MasterNotes }}
|
||||||
|
</div>
|
||||||
|
<div class="text-body-2 info--text">
|
||||||
|
<v-icon small>mdi-help-circle</v-icon> {{ currentQuestion.MasterData.Help }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-slide-y-transition>
|
||||||
|
|
||||||
</v-container>
|
</v-container>
|
||||||
|
<v-container v-else class="text-center">
|
||||||
|
<div class="text-caption">Aucun quiz chargé ou fin du quiz.</div>
|
||||||
|
</v-container>
|
||||||
</v-card>
|
</v-card>
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
@@ -34,13 +56,18 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
|
import quizStore from '@/store/quizStore';
|
||||||
|
|
||||||
// Variable pour contrôler l'état de la carte
|
// Variable pour contrôler l'état de la carte
|
||||||
const isCardReduced = ref(false);
|
const isCardReduced = ref(false);
|
||||||
|
const showSolution = ref(false);
|
||||||
|
|
||||||
// Méthode pour basculer l'état de la carte
|
// Méthode pour basculer l'état de la carte
|
||||||
function toggleCardSize() {
|
function toggleCardSize() {
|
||||||
isCardReduced.value = !isCardReduced.value;
|
isCardReduced.value = !isCardReduced.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const currentQuestion = quizStore.getters.currentQuestion;
|
||||||
|
const currentQuestionIndex = quizStore.getters.currentQuestionIndex;
|
||||||
</script>
|
</script>
|
||||||
@@ -1,85 +1,39 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="timer">
|
<div class="timer">
|
||||||
<v-label color="primary" class="labelTime-style" >{{ formatTime }}</v-label>
|
<v-label class="labelTime-style" >{{ formatTime }}</v-label>
|
||||||
</div>
|
</div>
|
||||||
<v-row no-gutters justify="space-around" >
|
|
||||||
<v-btn class="buttons" color="primary" icon="mdi-play" @click="startTimer"></v-btn>
|
|
||||||
<v-btn color="primary" icon="mdi-pause" @click="pauseTimer"></v-btn>
|
|
||||||
<v-btn color="primary" icon="mdi-restart" @click="resetTimer"></v-btn>
|
|
||||||
</v-row>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onBeforeUnmount } from 'vue';
|
import { computed, watch } from 'vue';
|
||||||
|
import quizStore from '@/store/quizStore';
|
||||||
|
|
||||||
const timerActive = ref(false);
|
const timer = quizStore.getters.timer;
|
||||||
const startTime = ref(null);
|
|
||||||
const currentTime = ref(null);
|
watch(timer, (val) => {
|
||||||
const elapsedTime = ref(0);
|
console.log('CardTimer: timer value changed', val);
|
||||||
|
}, { immediate: true });
|
||||||
|
|
||||||
const formatTime = computed(() => {
|
const formatTime = computed(() => {
|
||||||
let seconds = Math.floor(elapsedTime.value / 1000);
|
const seconds = timer.value % 60;
|
||||||
let minutes = Math.floor(seconds / 60);
|
const minutes = Math.floor(timer.value / 60);
|
||||||
let hours = Math.floor(minutes / 60);
|
const hours = Math.floor(minutes / 60);
|
||||||
seconds = seconds % 60; minutes = minutes % 60;
|
return `${pad(minutes % 60)}:${pad(seconds)}`;
|
||||||
return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
|
});
|
||||||
});
|
|
||||||
|
|
||||||
const pad = (number) => {
|
const pad = (number) => {
|
||||||
return (number < 10 ? "0" : "") + number;
|
return (number < 10 ? "0" : "") + number;
|
||||||
};
|
};
|
||||||
|
|
||||||
const startTimer = () => {
|
|
||||||
if (!timerActive.value) {
|
|
||||||
timerActive.value = true;
|
|
||||||
startTime.value = Date.now() - elapsedTime.value;
|
|
||||||
updateTimer(); }
|
|
||||||
};
|
|
||||||
|
|
||||||
const pauseTimer = () => {
|
|
||||||
if (timerActive.value) {
|
|
||||||
timerActive.value = false;
|
|
||||||
clearInterval(currentTime.value); }
|
|
||||||
};
|
|
||||||
|
|
||||||
const resetTimer = () => {
|
|
||||||
elapsedTime.value = 0;
|
|
||||||
timerActive.value = false;
|
|
||||||
clearInterval(currentTime.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateTimer = () => {
|
|
||||||
currentTime.value = setInterval(() => {elapsedTime.value = Date.now() - startTime.value; }, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
onBeforeUnmount(() => { clearInterval(currentTime.value);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
const startTimer = () => {
|
|
||||||
if (!timerActive.value) {
|
|
||||||
timerActive.value = true;
|
|
||||||
startTime.value = Date.now() - elapsedTime.value;
|
|
||||||
updateTimer(); } };
|
|
||||||
const pauseTimer = () => {
|
|
||||||
if (timerActive.value) {
|
|
||||||
timerActive.value = false;
|
|
||||||
clearInterval(currentTime.value); } };
|
|
||||||
const resetTimer = () => {
|
|
||||||
elapsedTime.value = 0;
|
|
||||||
timerActive.value = false;
|
|
||||||
clearInterval(currentTime.value); };
|
|
||||||
export { startTimer, pauseTimer, resetTimer };
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: auto; /* Place le container en bas de son parent */
|
margin-top: auto;
|
||||||
margin-bottom: 1px; /* Marge en bas pour un espacement */
|
margin-bottom: 1px;
|
||||||
position: fixed; /* Le positionne de manière fixe */
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@@ -89,12 +43,9 @@
|
|||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
.labelTime-style {
|
.labelTime-style {
|
||||||
font-size: 30px !important;
|
font-size: 40px !important;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #d42828 !important;
|
color: #d42828 !important;
|
||||||
opacity: 90% !important;
|
opacity: 90% !important;
|
||||||
}
|
}
|
||||||
.buttons{
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
265
VApp/src/components/GameMedia.vue
Normal file
265
VApp/src/components/GameMedia.vue
Normal file
@@ -0,0 +1,265 @@
|
|||||||
|
<template>
|
||||||
|
<v-container v-show="gamehiding === false" class="player_video_div">
|
||||||
|
<div v-if="currentQuestion" style="width: 100%; height: 100%;">
|
||||||
|
|
||||||
|
<!-- LECTEUR VIDÉO -->
|
||||||
|
<div v-show="currentQuestion.Type === 'video'" style="width: 100%; height: 100%;">
|
||||||
|
<video ref="videoPlayer" class="video-js player_video" controls preload="auto">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AFFICHAGE IMAGE -->
|
||||||
|
<div v-if="currentQuestion.Type === 'picture'" style="width: 100%; height: 100%;">
|
||||||
|
<v-img
|
||||||
|
:src="getMediaUrl(currentQuestion.MediaUrl)"
|
||||||
|
:key="currentQuestion.QuestionId"
|
||||||
|
class="player_video"
|
||||||
|
></v-img>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- LECTEUR AUDIO -->
|
||||||
|
<div v-if="currentQuestion.Type === 'audio'" class="audio-container player_video">
|
||||||
|
<div class="audio-visualizer">
|
||||||
|
<v-icon size="150" color="white" class="mb-4">mdi-music-circle</v-icon>
|
||||||
|
<span class="text-h2 white--text">ÉCOUTEZ</span>
|
||||||
|
</div>
|
||||||
|
<audio ref="audioPlayer" :src="getMediaUrl(currentQuestion.MediaUrl)" class="custom-audio"></audio>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
|
import quizStore from '@/store/quizStore';
|
||||||
|
import videojs from 'video.js';
|
||||||
|
import 'video.js/dist/video-js.css';
|
||||||
|
import { subscribeToTopic, publishMessage } from '@/services/mqttService';
|
||||||
|
|
||||||
|
// Accès au store
|
||||||
|
const currentQuestion = quizStore.getters.currentQuestion;
|
||||||
|
|
||||||
|
// Références du lecteur vidéo
|
||||||
|
const videoPlayer = ref(null);
|
||||||
|
let vjsPlayer = null;
|
||||||
|
|
||||||
|
// Références du lecteur audio
|
||||||
|
const audioPlayer = ref(null);
|
||||||
|
|
||||||
|
let gamehiding = ref(true);
|
||||||
|
|
||||||
|
// Méthodes
|
||||||
|
function getMediaUrl(relativePath) {
|
||||||
|
if (!relativePath) return '';
|
||||||
|
const cleanPath = relativePath.startsWith('/') ? relativePath.substring(1) : relativePath;
|
||||||
|
const url = new URL(`../quizz/vulture-session-2026-01/${cleanPath}`, import.meta.url).href;
|
||||||
|
console.log('GameMedia: Resolved URL:', { relativePath, url });
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
|
||||||
|
function initVideoPlayer() {
|
||||||
|
if (vjsPlayer) return; // Déjà initialisé
|
||||||
|
if (!videoPlayer.value) return; // DOM pas prêt
|
||||||
|
|
||||||
|
console.log('GameMedia: Initializing VideoJS');
|
||||||
|
vjsPlayer = videojs(videoPlayer.value, {
|
||||||
|
autoplay: false,
|
||||||
|
controls: false,
|
||||||
|
preload: 'auto',
|
||||||
|
fluid: true,
|
||||||
|
loop: false,
|
||||||
|
volume: 0,
|
||||||
|
}, () => {
|
||||||
|
console.log('GameMedia: VideoJS Ready');
|
||||||
|
// Si la question courante est une vidéo, la charger
|
||||||
|
if (currentQuestion.value && currentQuestion.value.Type === 'video') {
|
||||||
|
updateVideoSource();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Masquer automatiquement à la fin de la vidéo
|
||||||
|
vjsPlayer.on('ended', () => {
|
||||||
|
console.log('GameMedia: Video ended, hiding');
|
||||||
|
gamehiding.value = true;
|
||||||
|
publishMessage('/display/control', 'hide');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateVideoSource() {
|
||||||
|
if (!vjsPlayer || !currentQuestion.value) return;
|
||||||
|
|
||||||
|
const url = getMediaUrl(currentQuestion.value.MediaUrl);
|
||||||
|
console.log('GameMedia: Loading Video Source', url);
|
||||||
|
vjsPlayer.src({ type: 'video/mp4', src: url });
|
||||||
|
|
||||||
|
// L'autoplay est géré par la commande MQTT 'play' maintenant
|
||||||
|
// if (currentQuestion.value.Settings?.AutoPlay) {
|
||||||
|
// vjsPlayer.play().catch(e => console.log('Autoplay blocked', e));
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Observateurs
|
||||||
|
watch(currentQuestion, async (newVal, oldVal) => {
|
||||||
|
console.log('GameMedia: Question Changed', newVal);
|
||||||
|
|
||||||
|
// Arrêter d'abord tous les médias
|
||||||
|
if (vjsPlayer) {
|
||||||
|
vjsPlayer.pause();
|
||||||
|
}
|
||||||
|
if (audioPlayer.value) {
|
||||||
|
audioPlayer.value.pause();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rester masqué au changement de question jusqu'à la lecture
|
||||||
|
gamehiding.value = true;
|
||||||
|
publishMessage('/display/control', 'hide');
|
||||||
|
if (!newVal) return;
|
||||||
|
|
||||||
|
await nextTick(); // Attendre la mise à jour du DOM (v-if)
|
||||||
|
|
||||||
|
if (newVal.Type === 'video') {
|
||||||
|
if (!vjsPlayer) {
|
||||||
|
initVideoPlayer();
|
||||||
|
} else {
|
||||||
|
updateVideoSource();
|
||||||
|
}
|
||||||
|
} else if (newVal.Type === 'audio') {
|
||||||
|
// Chargement audio (pas d'autoplay)
|
||||||
|
setTimeout(() => {
|
||||||
|
if(audioPlayer.value){
|
||||||
|
console.log('GameMedia: Loading Audio');
|
||||||
|
audioPlayer.value.load();
|
||||||
|
|
||||||
|
// Masquer automatiquement à la fin de l'audio
|
||||||
|
audioPlayer.value.onended = () => {
|
||||||
|
console.log('GameMedia: Audio ended, hiding');
|
||||||
|
gamehiding.value = true;
|
||||||
|
publishMessage('/display/control', 'hide');
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
// Pour le type 'picture', rien à faire, vidéo/audio déjà en pause
|
||||||
|
}, { immediate: true });
|
||||||
|
|
||||||
|
// Cycle de vie
|
||||||
|
onMounted(async () => {
|
||||||
|
await nextTick();
|
||||||
|
if (currentQuestion.value?.Type === 'video') {
|
||||||
|
initVideoPlayer();
|
||||||
|
}
|
||||||
|
|
||||||
|
subscribeToTopic('#', (topic, message) => {
|
||||||
|
handleMessage(topic, message);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleMessage = (topic, message) => {
|
||||||
|
console.log('GameMedia: Received', topic, message);
|
||||||
|
if (topic === "/display/control") {
|
||||||
|
switch (message) {
|
||||||
|
case "play":
|
||||||
|
gamehiding.value = false;
|
||||||
|
console.log("▶️ GameMedia: Play");
|
||||||
|
// Only play the media relevant to this question type
|
||||||
|
if (currentQuestion.value?.Type === 'video' && vjsPlayer) {
|
||||||
|
vjsPlayer.play().catch(e => console.error("Error playing video:", e));
|
||||||
|
}
|
||||||
|
if (currentQuestion.value?.Type === 'audio' && audioPlayer.value) {
|
||||||
|
audioPlayer.value.play().catch(e => console.error("Error playing audio:", e));
|
||||||
|
}
|
||||||
|
if (currentQuestion.value?.Type === 'picture') {
|
||||||
|
// Démarrer le timer si PlayTime est configuré
|
||||||
|
const playTime = currentQuestion.value.Settings?.PlayTime;
|
||||||
|
if (playTime && playTime > 0) {
|
||||||
|
quizStore.actions.startTimer(playTime);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "pause":
|
||||||
|
gamehiding.value = true;
|
||||||
|
console.log("⏸️ GameMedia: Pause");
|
||||||
|
quizStore.actions.stopTimer();
|
||||||
|
if (vjsPlayer) {
|
||||||
|
vjsPlayer.pause();
|
||||||
|
}
|
||||||
|
if (audioPlayer.value) {
|
||||||
|
audioPlayer.value.pause();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "hide":
|
||||||
|
console.log("🛑 GameMedia: Hide");
|
||||||
|
gamehiding.value = true;
|
||||||
|
quizStore.actions.stopTimer();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Vérifier le statut du buzzer pour masquer automatiquement au buzz (comme HidingOverlay)
|
||||||
|
// Réplication de VideoPlayer qui n'avait que /display/control dans l'extrait fourni.
|
||||||
|
// Comportement optionnel selon les événements du système.
|
||||||
|
if (topic === 'vulture/buzzer/status') {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(message);
|
||||||
|
if (data.status === 'blocked') {
|
||||||
|
console.log("GameMedia: Buzzer Blocked -> Hiding");
|
||||||
|
gamehiding.value = true;
|
||||||
|
if (vjsPlayer) vjsPlayer.pause();
|
||||||
|
if (audioPlayer.value) audioPlayer.value.pause();
|
||||||
|
}
|
||||||
|
} catch (e) { console.error('JSON Error', e); }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (vjsPlayer) {
|
||||||
|
vjsPlayer.dispose();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styles additionnels pour les éléments Audio/Custom pour s'adapter au thème */
|
||||||
|
.audio-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(45deg, #1a1a1a, #2c3e50);
|
||||||
|
}
|
||||||
|
.audio-visualizer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
.text-h2 {
|
||||||
|
font-family: 'Bahnschrift', sans-serif !important;
|
||||||
|
}
|
||||||
|
.custom-audio {
|
||||||
|
margin-top: 30px;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
@keyframes pulse {
|
||||||
|
0% { transform: scale(1); opacity: 0.8; }
|
||||||
|
50% { transform: scale(1.05); opacity: 1; }
|
||||||
|
100% { transform: scale(1); opacity: 0.8; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -18,6 +18,9 @@
|
|||||||
case "pause":
|
case "pause":
|
||||||
gamehiding.value = true;
|
gamehiding.value = true;
|
||||||
break;
|
break;
|
||||||
|
case "hide":
|
||||||
|
gamehiding.value = true;
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
console.warn("Commande non reconnue :", message);
|
console.warn("Commande non reconnue :", message);
|
||||||
gamehiding.value = true;
|
gamehiding.value = true;
|
||||||
@@ -29,6 +32,17 @@
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
subscribeToTopic('#', (topic, message) => {
|
subscribeToTopic('#', (topic, message) => {
|
||||||
handleMessage(topic, message);
|
handleMessage(topic, message);
|
||||||
|
|
||||||
|
if (topic === 'vulture/buzzer/status') {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(message);
|
||||||
|
if (data.status === 'blocked') {
|
||||||
|
gamehiding.value = true;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('HidingOverlay JSON error', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -3,30 +3,36 @@ import HomeView from '../views/HomeView.vue'
|
|||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
routes: [ {
|
routes: [{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'Accueil',
|
name: 'Accueil',
|
||||||
component: HomeView
|
component: HomeView
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/game/control',
|
path: '/game/control',
|
||||||
name: 'Game Control (Présentateur)',
|
name: 'Game Control (Présentateur)',
|
||||||
component: () => import('@/views/GameControl.vue')
|
component: () => import('@/views/GameControl.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/game/display',
|
path: '/game/display',
|
||||||
name: 'Game Display (Projection)',
|
name: 'Game Display (Projection)',
|
||||||
component: () => import('@/views/GameDisplay.vue')
|
component: () => import('@/views/GameDisplay.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/mqtt-debugger',
|
path: '/score/display',
|
||||||
name: 'Debugger MQTT',
|
name: 'Score Display (Projection)',
|
||||||
component: () => import('@/views/MQTTDebugView.vue')
|
component: () => import('@/views/ScoreDisplay.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/settings',
|
path: '/mqtt-debugger',
|
||||||
name: 'Paramètres',
|
name: 'Debugger MQTT',
|
||||||
component: () => import('@/views/SettingsView.vue') }
|
component: () => import('@/views/MQTTDebugView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/settings',
|
||||||
|
name: 'Paramètres',
|
||||||
|
component: () => import('@/views/SettingsView.vue')
|
||||||
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -13,36 +13,38 @@ import { createVuetify } from 'vuetify'
|
|||||||
|
|
||||||
const CustomThemeDark = {
|
const CustomThemeDark = {
|
||||||
dark: true,
|
dark: true,
|
||||||
colors: {
|
colors: {
|
||||||
background: '#121212',
|
background: '#121212',
|
||||||
primary: '#d42828',
|
primary: '#d42828',
|
||||||
secondary: '#F44336',
|
secondary: '#F44336',
|
||||||
accent: '#FFC107',
|
accent: '#FFC107',
|
||||||
error: '#e91e1e',
|
error: '#e91e1e',
|
||||||
warning: '#FFC107',
|
warning: '#FFC107',
|
||||||
info: '#607D8B',
|
info: '#607D8B',
|
||||||
success: '#15B01B',
|
inactiveButton: '#707070ff',
|
||||||
BlueBuzzer: '#2867d4',
|
success: '#15B01B',
|
||||||
YellowBuzzer: '#D4D100',
|
BlueBuzzer: '#2867d4',
|
||||||
RedBuzzer: '#d42828',
|
YellowBuzzer: '#D4D100',
|
||||||
|
RedBuzzer: '#d42828',
|
||||||
GreenBuzzer: '#28d42e',
|
GreenBuzzer: '#28d42e',
|
||||||
DisconnectedBuzzer: '#595959',
|
DisconnectedBuzzer: '#595959',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const CustomThemeLight = {
|
const CustomThemeLight = {
|
||||||
dark: false,
|
dark: false,
|
||||||
colors: {
|
colors: {
|
||||||
background: '#ffffff',
|
background: '#ffffff',
|
||||||
primary: '#d42828',
|
primary: '#d42828',
|
||||||
secondary: '#F44336',
|
secondary: '#F44336',
|
||||||
accent: '#FFC107',
|
accent: '#FFC107',
|
||||||
error: '#e91e1e',
|
error: '#e91e1e',
|
||||||
warning: '#FFC107',
|
warning: '#FFC107',
|
||||||
info: '#607D8B',
|
info: '#607D8B',
|
||||||
success: '#4CAF50',
|
inactiveButton: '#707070ff',
|
||||||
BlueBuzzer: '#2867d4',
|
success: '#4CAF50',
|
||||||
YellowBuzzer: '#D4D100',
|
BlueBuzzer: '#2867d4',
|
||||||
RedBuzzer: '#d42828',
|
YellowBuzzer: '#D4D100',
|
||||||
|
RedBuzzer: '#d42828',
|
||||||
GreenBuzzer: '#28d42e',
|
GreenBuzzer: '#28d42e',
|
||||||
DisconnectedBuzzer: '#595959',
|
DisconnectedBuzzer: '#595959',
|
||||||
}
|
}
|
||||||
@@ -50,10 +52,11 @@ const CustomThemeLight = {
|
|||||||
|
|
||||||
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
||||||
export default createVuetify({
|
export default createVuetify({
|
||||||
theme: {
|
theme: {
|
||||||
defaultTheme: 'CustomThemeDark',
|
defaultTheme: 'CustomThemeDark',
|
||||||
themes: {
|
themes: {
|
||||||
CustomThemeDark,
|
CustomThemeDark,
|
||||||
CustomThemeLight, },
|
CustomThemeLight,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
166
VApp/src/store/quizStore.js
Normal file
166
VApp/src/store/quizStore.js
Normal file
@@ -0,0 +1,166 @@
|
|||||||
|
import { reactive, computed } from 'vue';
|
||||||
|
import mqtt from 'mqtt';
|
||||||
|
import config from '@/config.js';
|
||||||
|
import sessionConfig from '@/quizz/vulture-session-2026-01/session-configuration.json';
|
||||||
|
|
||||||
|
// Reactive state
|
||||||
|
const state = reactive({
|
||||||
|
currentQuestionIndex: 0,
|
||||||
|
questions: [],
|
||||||
|
isMediaHidden: true,
|
||||||
|
packTitle: '',
|
||||||
|
timer: 0 // Timer in seconds
|
||||||
|
});
|
||||||
|
|
||||||
|
// MQTT Client
|
||||||
|
let client = null;
|
||||||
|
let timerInterval = null;
|
||||||
|
let initialized = false;
|
||||||
|
|
||||||
|
// Initialize Store
|
||||||
|
function init() {
|
||||||
|
if (initialized) {
|
||||||
|
console.log('QuizStore: Already initialized');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
initialized = true;
|
||||||
|
|
||||||
|
// Load local config immediately
|
||||||
|
state.questions = sessionConfig.Questions || [];
|
||||||
|
state.packTitle = sessionConfig.PackTitle || '';
|
||||||
|
|
||||||
|
// Connect MQTT
|
||||||
|
client = mqtt.connect(config.mqttBrokerUrl);
|
||||||
|
|
||||||
|
client.on('connect', () => {
|
||||||
|
console.log('QuizStore: MQTT Connected');
|
||||||
|
client.subscribe('game/quiz/control');
|
||||||
|
client.subscribe('/display/control');
|
||||||
|
});
|
||||||
|
|
||||||
|
client.on('message', (topic, message) => {
|
||||||
|
const msgStr = message.toString();
|
||||||
|
console.log('QuizStore: MQTT Message Received', topic, msgStr);
|
||||||
|
if (topic === 'game/quiz/control') {
|
||||||
|
try {
|
||||||
|
const payload = JSON.parse(msgStr);
|
||||||
|
handleRemoteCommand(payload);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('QuizStore: JSON Parse Error', e);
|
||||||
|
}
|
||||||
|
} else if (topic === '/display/control') {
|
||||||
|
// Handle raw string commands from MqttButtons
|
||||||
|
if (msgStr === 'next') {
|
||||||
|
_nextQuestion(true);
|
||||||
|
} else if (msgStr === 'previous') {
|
||||||
|
_prevQuestion(true);
|
||||||
|
} else if (msgStr === 'play') {
|
||||||
|
// Start timer for picture questions
|
||||||
|
const currentQ = state.questions[state.currentQuestionIndex];
|
||||||
|
if (currentQ?.Type === 'picture') {
|
||||||
|
const playTime = currentQ.Settings?.PlayTime;
|
||||||
|
if (playTime && playTime > 0) {
|
||||||
|
console.log('QuizStore: Starting timer for picture', playTime);
|
||||||
|
actions.startTimer(playTime);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (msgStr === 'pause') {
|
||||||
|
stopTimer();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRemoteCommand(cmd) {
|
||||||
|
if (cmd.action === 'next') {
|
||||||
|
_nextQuestion(false);
|
||||||
|
} else if (cmd.action === 'prev') {
|
||||||
|
_prevQuestion(false);
|
||||||
|
} else if (cmd.action === 'setIndex') {
|
||||||
|
state.currentQuestionIndex = cmd.index;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Internal actions (boolean publish determines if we send MQTT)
|
||||||
|
function _nextQuestion(publish = true) {
|
||||||
|
if (state.currentQuestionIndex < state.questions.length - 1) {
|
||||||
|
state.currentQuestionIndex++;
|
||||||
|
if (publish && client) {
|
||||||
|
client.publish('game/quiz/control', JSON.stringify({ action: 'setIndex', index: state.currentQuestionIndex }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function _prevQuestion(publish = true) {
|
||||||
|
if (state.currentQuestionIndex > 0) {
|
||||||
|
state.currentQuestionIndex--;
|
||||||
|
if (publish && client) {
|
||||||
|
client.publish('game/quiz/control', JSON.stringify({ action: 'setIndex', index: state.currentQuestionIndex }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public Actions
|
||||||
|
const actions = {
|
||||||
|
init,
|
||||||
|
nextQuestion: () => _nextQuestion(true),
|
||||||
|
prevQuestion: () => _prevQuestion(true),
|
||||||
|
setQuestion: (index) => {
|
||||||
|
if (index >= 0 && index < state.questions.length) {
|
||||||
|
state.currentQuestionIndex = index;
|
||||||
|
if (client) {
|
||||||
|
client.publish('game/quiz/control', JSON.stringify({ action: 'setIndex', index: index }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
startTimer: (seconds) => {
|
||||||
|
stopTimer();
|
||||||
|
state.timer = seconds;
|
||||||
|
publishTimer();
|
||||||
|
timerInterval = setInterval(() => {
|
||||||
|
if (state.timer > 0) {
|
||||||
|
state.timer--;
|
||||||
|
publishTimer();
|
||||||
|
} else {
|
||||||
|
stopTimer();
|
||||||
|
// Auto-hide by publishing pause
|
||||||
|
if (client) {
|
||||||
|
client.publish('/display/control', 'pause');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
stopTimer
|
||||||
|
};
|
||||||
|
|
||||||
|
function stopTimer() {
|
||||||
|
if (timerInterval) {
|
||||||
|
clearInterval(timerInterval);
|
||||||
|
timerInterval = null;
|
||||||
|
}
|
||||||
|
state.timer = 0;
|
||||||
|
publishTimer();
|
||||||
|
}
|
||||||
|
|
||||||
|
function publishTimer() {
|
||||||
|
if (client) {
|
||||||
|
client.publish('game/timer', JSON.stringify({ time: state.timer }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Getters
|
||||||
|
const getters = {
|
||||||
|
currentQuestion: computed(() => state.questions[state.currentQuestionIndex]),
|
||||||
|
isFirstQuestion: computed(() => state.currentQuestionIndex === 0),
|
||||||
|
isLastQuestion: computed(() => state.currentQuestionIndex === state.questions.length - 1),
|
||||||
|
totalQuestions: computed(() => state.questions.length),
|
||||||
|
packTitle: computed(() => state.packTitle),
|
||||||
|
currentQuestionIndex: computed(() => state.currentQuestionIndex),
|
||||||
|
timer: computed(() => state.timer)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
state,
|
||||||
|
actions,
|
||||||
|
getters
|
||||||
|
};
|
||||||
@@ -5,17 +5,17 @@
|
|||||||
<card-control />
|
<card-control />
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col class="pl-3">
|
<v-col class="pl-3">
|
||||||
<card-soundboard />
|
<CardButtonScore />
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
<v-row no-gutters class="pr-4 pl-4">
|
<v-row no-gutters class="pr-4 pl-4">
|
||||||
<v-row no-gutters>
|
<v-row no-gutters>
|
||||||
<v-col class="align-start">
|
<v-col class="align-start">
|
||||||
<CardButtonScore />
|
<card-solution />
|
||||||
|
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col class="pl-3">
|
<v-col class="pl-3">
|
||||||
<card-solution />
|
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-row>
|
</v-row>
|
||||||
@@ -26,9 +26,14 @@
|
|||||||
|
|
||||||
import CardSolution from '@/components/CardSolution.vue'
|
import CardSolution from '@/components/CardSolution.vue'
|
||||||
import CardControl from '@/components/CardControl.vue'
|
import CardControl from '@/components/CardControl.vue'
|
||||||
import CardSoundboard from '@/components/CardSoundboard.vue';
|
|
||||||
import CardButtonScore from '@/components/CardButtonScore.vue'
|
import CardButtonScore from '@/components/CardButtonScore.vue'
|
||||||
import BuzzerValidationDialog from '@/components/BuzzerValidationDialog.vue';
|
import BuzzerValidationDialog from '@/components/BuzzerValidationDialog.vue';
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import quizStore from '@/store/quizStore';
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
quizStore.actions.init();
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</v-container>
|
</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">{{ timerDisplay }}</span>
|
||||||
</v-container>
|
</v-container>
|
||||||
<v-container class="score_div color-green">
|
<v-container class="score_div color-green">
|
||||||
<div class="d-flex flex-column align-center">
|
<div class="d-flex flex-column align-center">
|
||||||
@@ -50,17 +50,19 @@
|
|||||||
|
|
||||||
<div>
|
<div>
|
||||||
<HidingOverlay/>
|
<HidingOverlay/>
|
||||||
<VideoPlayer/>
|
<GameMedia/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import VideoPlayer from "@/components/VideoPlayer.vue"
|
//import VideoPlayer from "@/components/VideoPlayer.vue"
|
||||||
|
import GameMedia from "@/components/GameMedia.vue"
|
||||||
import HidingOverlay from "@/components/HidingOverlay.vue"
|
import HidingOverlay from "@/components/HidingOverlay.vue"
|
||||||
import { onMounted, reactive } from 'vue';
|
import { onMounted, reactive } from 'vue';
|
||||||
import mqtt from 'mqtt'
|
import mqtt from 'mqtt'
|
||||||
import config from '@/config.js'
|
import config from '@/config.js'
|
||||||
|
import quizStore from '@/store/quizStore';
|
||||||
|
|
||||||
const mqttBrokerUrl = config.mqttBrokerUrl
|
const mqttBrokerUrl = config.mqttBrokerUrl
|
||||||
const client = mqtt.connect(mqttBrokerUrl)
|
const client = mqtt.connect(mqttBrokerUrl)
|
||||||
@@ -76,6 +78,15 @@
|
|||||||
GreenRoundScore: 0,
|
GreenRoundScore: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
import { ref } from 'vue';
|
||||||
|
const timerDisplay = ref('00:00');
|
||||||
|
|
||||||
|
function formatTime(seconds) {
|
||||||
|
const mins = Math.floor(seconds / 60);
|
||||||
|
const secs = seconds % 60;
|
||||||
|
return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
function handleMessage(topic, message) {
|
function handleMessage(topic, message) {
|
||||||
let parsedMessage;
|
let parsedMessage;
|
||||||
try {
|
try {
|
||||||
@@ -85,7 +96,7 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (parsedMessage.TEAM) {
|
if (topic === 'game/score' && parsedMessage.TEAM) {
|
||||||
scores.RedTotalScore = parsedMessage.TEAM.Red.TotalScore
|
scores.RedTotalScore = parsedMessage.TEAM.Red.TotalScore
|
||||||
scores.BlueTotalScore = parsedMessage.TEAM.Blue.TotalScore
|
scores.BlueTotalScore = parsedMessage.TEAM.Blue.TotalScore
|
||||||
scores.YellowTotalScore = parsedMessage.TEAM.Yellow.TotalScore
|
scores.YellowTotalScore = parsedMessage.TEAM.Yellow.TotalScore
|
||||||
@@ -96,6 +107,10 @@
|
|||||||
scores.YellowRoundScore = parsedMessage.TEAM.Yellow.RoundScore
|
scores.YellowRoundScore = parsedMessage.TEAM.Yellow.RoundScore
|
||||||
scores.GreenRoundScore = parsedMessage.TEAM.Green.RoundScore
|
scores.GreenRoundScore = parsedMessage.TEAM.Green.RoundScore
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (topic === 'game/timer' && parsedMessage.time !== undefined) {
|
||||||
|
timerDisplay.value = formatTime(parsedMessage.time);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function subscribeToTopic(topic, callback) {
|
function subscribeToTopic(topic, callback) {
|
||||||
@@ -105,9 +120,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
quizStore.actions.init();
|
||||||
|
|
||||||
subscribeToTopic('game/score', (topic, message) => {
|
subscribeToTopic('game/score', (topic, message) => {
|
||||||
handleMessage(topic, message);
|
handleMessage(topic, message);
|
||||||
});
|
});
|
||||||
|
subscribeToTopic('game/timer', (topic, message) => {
|
||||||
|
handleMessage(topic, message);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -134,32 +154,37 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||||
|
transition: transform 0.2s;
|
||||||
}
|
}
|
||||||
.color-blue {
|
.color-blue {
|
||||||
background-color: rgb(var(--v-theme-BlueBuzzer), 1);
|
background: linear-gradient(135deg, rgb(var(--v-theme-BlueBuzzer)), #1a3a5a);
|
||||||
border-radius: 40px 5px 40px 5px;
|
border-radius: 40px 5px 40px 5px;
|
||||||
}
|
}
|
||||||
.color-red {
|
.color-red {
|
||||||
background-color: rgb(var(--v-theme-RedBuzzer), 1);
|
background: linear-gradient(135deg, rgb(var(--v-theme-RedBuzzer)), #5a1a1a);
|
||||||
border-radius: 40px 5px 40px 5px;
|
border-radius: 40px 5px 40px 5px;
|
||||||
}
|
}
|
||||||
.color-green {
|
.color-green {
|
||||||
background-color: rgb(var(--v-theme-GreenBuzzer), 1);
|
background: linear-gradient(135deg, rgb(var(--v-theme-GreenBuzzer)), #1a5a2a);
|
||||||
border-radius: 5px 40px 5px 40px;
|
border-radius: 5px 40px 5px 40px;
|
||||||
}
|
}
|
||||||
.color-yellow {
|
.color-yellow {
|
||||||
background-color: rgb(var(--v-theme-YellowBuzzer), 1);
|
background: linear-gradient(135deg, rgb(var(--v-theme-YellowBuzzer)), #5a5a1a);
|
||||||
border-radius: 5px 40px 5px 40px;
|
border-radius: 5px 40px 5px 40px;
|
||||||
}
|
}
|
||||||
.color-white {
|
.color-white {
|
||||||
background-color: white;
|
background-color: #1a1a1a;
|
||||||
|
border: 3px solid #333;
|
||||||
border-radius: 40px;
|
border-radius: 40px;
|
||||||
|
box-shadow: 0 0 30px rgba(0,0,0,0.6);
|
||||||
}
|
}
|
||||||
.v-label-time {
|
.v-label-time {
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
color: black;
|
color: white;
|
||||||
font-size: 49px;
|
font-size: 49px;
|
||||||
font-family: 'Bahnschrift';
|
font-family: 'Bahnschrift';
|
||||||
|
text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
.v-label-score {
|
.v-label-score {
|
||||||
color: white;
|
color: white;
|
||||||
@@ -167,6 +192,7 @@
|
|||||||
font-family: 'Bahnschrift';
|
font-family: 'Bahnschrift';
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
text-shadow: 4px 4px 8px rgba(0,0,0,0.4);
|
||||||
}
|
}
|
||||||
.v-label-round-score {
|
.v-label-round-score {
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
@@ -174,6 +200,7 @@
|
|||||||
font-family: 'Bahnschrift';
|
font-family: 'Bahnschrift';
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Transition styles */
|
/* Transition styles */
|
||||||
|
|||||||
302
VApp/src/views/ScoreDisplay.vue
Normal file
302
VApp/src/views/ScoreDisplay.vue
Normal file
@@ -0,0 +1,302 @@
|
|||||||
|
<template>
|
||||||
|
<div class="score-grid">
|
||||||
|
<div class="score-cell cell-blue color-blue">
|
||||||
|
<div class="score-content">
|
||||||
|
<div class="score-info info-left">
|
||||||
|
<div class="team-name">Bleue</div>
|
||||||
|
<div class="sub-score-container sub-left">
|
||||||
|
<span class="sub-label">Total</span>
|
||||||
|
<span class="team-score sub-score">{{ scores.BlueTotalScore }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-main">
|
||||||
|
<div class="team-score main-score">{{ scores.BlueRoundScore }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-cell cell-red color-red">
|
||||||
|
<div class="score-content">
|
||||||
|
<div class="score-main">
|
||||||
|
<div class="team-score main-score">{{ scores.RedRoundScore }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-info info-right">
|
||||||
|
<div class="team-name">Rouge</div>
|
||||||
|
<div class="sub-score-container sub-right">
|
||||||
|
<span class="sub-label">Total</span>
|
||||||
|
<span class="team-score sub-score">{{ scores.RedTotalScore }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-cell cell-green color-green">
|
||||||
|
<div class="score-content">
|
||||||
|
<div class="score-info info-left">
|
||||||
|
<div class="team-name">Verte</div>
|
||||||
|
<div class="sub-score-container sub-left">
|
||||||
|
<span class="sub-label">Total</span>
|
||||||
|
<span class="team-score sub-score">{{ scores.GreenTotalScore }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-main">
|
||||||
|
<div class="team-score main-score">{{ scores.GreenRoundScore }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-cell cell-yellow color-yellow">
|
||||||
|
<div class="score-content">
|
||||||
|
<div class="score-main">
|
||||||
|
<div class="team-score main-score">{{ scores.YellowRoundScore }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-info info-right">
|
||||||
|
<div class="team-name">Jaune</div>
|
||||||
|
<div class="sub-score-container sub-right">
|
||||||
|
<span class="sub-label">Total</span>
|
||||||
|
<span class="team-score sub-score">{{ scores.YellowTotalScore }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timer-container">
|
||||||
|
<div class="timer-display">{{ timerDisplay }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, onUnmounted, reactive, ref } from 'vue';
|
||||||
|
import mqtt from 'mqtt'
|
||||||
|
import config from '@/config.js'
|
||||||
|
|
||||||
|
const mqttBrokerUrl = config.mqttBrokerUrl
|
||||||
|
let client = null
|
||||||
|
|
||||||
|
const scores = reactive({
|
||||||
|
RedTotalScore: 0,
|
||||||
|
BlueTotalScore: 0,
|
||||||
|
YellowTotalScore: 0,
|
||||||
|
GreenTotalScore: 0,
|
||||||
|
RedRoundScore: 0,
|
||||||
|
BlueRoundScore: 0,
|
||||||
|
YellowRoundScore: 0,
|
||||||
|
GreenRoundScore: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const timerDisplay = ref('00:00');
|
||||||
|
|
||||||
|
function formatTime(seconds) {
|
||||||
|
const mins = Math.floor(seconds / 60);
|
||||||
|
const secs = seconds % 60;
|
||||||
|
return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMessage(topic, message) {
|
||||||
|
let parsedMessage;
|
||||||
|
try {
|
||||||
|
parsedMessage = JSON.parse(message);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Erreur d'analyse JSON:", e);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (topic === 'game/score' && 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
|
||||||
|
}
|
||||||
|
|
||||||
|
if (topic === 'game/timer' && parsedMessage.time !== undefined) {
|
||||||
|
timerDisplay.value = formatTime(parsedMessage.time);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function subscribeToTopic(topic, callback) {
|
||||||
|
if(client) {
|
||||||
|
client.subscribe(topic)
|
||||||
|
client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString())
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
client = mqtt.connect(mqttBrokerUrl)
|
||||||
|
subscribeToTopic('game/score', (topic, message) => {
|
||||||
|
handleMessage(topic, message);
|
||||||
|
});
|
||||||
|
subscribeToTopic('game/timer', (topic, message) => {
|
||||||
|
handleMessage(topic, message);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (client) {
|
||||||
|
client.end()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.score-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
padding: 40px;
|
||||||
|
gap: 60px;
|
||||||
|
position: relative;
|
||||||
|
font-family: 'Bahnschrift', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-cell {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||||
|
transition: transform 0.2s;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.cell-blue {
|
||||||
|
border-radius: 65px 225px 75px 225px !important;
|
||||||
|
}
|
||||||
|
.cell-red {
|
||||||
|
border-radius: 225px 65px 225px 75px !important;
|
||||||
|
}
|
||||||
|
.cell-green {
|
||||||
|
border-radius: 225px 65px 225px 75px !important;
|
||||||
|
}
|
||||||
|
.cell-yellow {
|
||||||
|
border-radius: 75px 225px 65px 225px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row; /* Horizontal layout */
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around; /* Spread out */
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-main {
|
||||||
|
flex: 2; /* Takes more space */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-info {
|
||||||
|
flex: 1; /* Takes less space */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-right {
|
||||||
|
align-items: flex-end;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-left {
|
||||||
|
align-items: flex-start;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-name {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
opacity: 0.9;
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-score {
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
line-height: 1;
|
||||||
|
text-shadow: 4px 4px 8px rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-score {
|
||||||
|
font-size: 10rem; /* Even larger */
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-score-container {
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-right {
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-left {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-label {
|
||||||
|
font-size: 1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
opacity: 0.8;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
margin-bottom: 2px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-score {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 10;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
padding: 20px 40px;
|
||||||
|
border-radius: 80px;
|
||||||
|
border: 6px solid #333;
|
||||||
|
box-shadow: 0 0 50px rgba(0,0,0,0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer-display {
|
||||||
|
font-size: 8rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
font-family: monospace;
|
||||||
|
text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-blue {
|
||||||
|
background: linear-gradient(135deg, rgb(var(--v-theme-BlueBuzzer)), #1a3a5a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-red {
|
||||||
|
background: linear-gradient(135deg, rgb(var(--v-theme-RedBuzzer)), #5a1a1a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-green {
|
||||||
|
background: linear-gradient(135deg, rgb(var(--v-theme-GreenBuzzer)), #1a5a2a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-yellow {
|
||||||
|
background: linear-gradient(135deg, rgb(var(--v-theme-YellowBuzzer)), #5a5a1a);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,8 +1,14 @@
|
|||||||
// Import necessary modules
|
// Import necessary modules
|
||||||
const mqtt = require('mqtt');
|
const mqtt = require('mqtt');
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
// Load configuration
|
||||||
|
const configPath = path.join(__dirname, '../config/configuration.json');
|
||||||
|
const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
|
||||||
|
|
||||||
// MQTT broker configuration
|
// MQTT broker configuration
|
||||||
const brokerUrl = 'mqtt://nanomq'; // Broker URL (change if needed)
|
const brokerUrl = config.mqttHost;
|
||||||
const clientId = 'buzzer_manager';
|
const clientId = 'buzzer_manager';
|
||||||
const options = {
|
const options = {
|
||||||
clientId,
|
clientId,
|
||||||
|
|||||||
@@ -4,10 +4,10 @@ const mqtt = require('mqtt');
|
|||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
|
|
||||||
// Lecture du fichier de configuration
|
// Lecture du fichier de configuration
|
||||||
const config = JSON.parse(fs.readFileSync(path.join('services','config','config_network.json'), 'utf8'));
|
const config = JSON.parse(fs.readFileSync(path.join(__dirname, '../config/configuration.json'), 'utf8'));
|
||||||
|
|
||||||
// Extraction des informations de config
|
// Extraction des informations de config
|
||||||
const { hosts: { buzzers: { IP: buzzerIPs, MQTTconfig: { mqttHost, mqttTopic } } } } = config;
|
const { mqttHost, hosts: { buzzers: { IP: buzzerIPs, MQTTconfig: { mqttTopic } } } } = config;
|
||||||
|
|
||||||
// Connexion au broker MQTT
|
// Connexion au broker MQTT
|
||||||
const client = mqtt.connect(mqttHost);
|
const client = mqtt.connect(mqttHost);
|
||||||
|
|||||||
@@ -1,17 +0,0 @@
|
|||||||
{
|
|
||||||
"services": {
|
|
||||||
"mqttHost": "mqtt://nanomq",
|
|
||||||
"score": {
|
|
||||||
"MQTTconfig": {
|
|
||||||
"mqttScoreTopic": "game/score",
|
|
||||||
"mqttScoreChangeTopic": "game/score/update"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"quizzcollector": {
|
|
||||||
"MQTTconfig": {
|
|
||||||
"mqttQuizzCollectorListTopic": "game/quizz-collector/list",
|
|
||||||
"mqttQuizzCollectorCmdTopic": "game/quizz-collector/cmd"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
{
|
|
||||||
"hosts": {
|
|
||||||
"buzzers": {
|
|
||||||
"IP": {
|
|
||||||
"redBuzzerIP": "192.168.73.40",
|
|
||||||
"blueBuzzerIP": "192.168.73.41",
|
|
||||||
"greenBuzzerIP": "192.168.73.42",
|
|
||||||
"yellowBuzzerIP": "192.168.73.43"
|
|
||||||
},
|
|
||||||
"MQTTconfig": {
|
|
||||||
"mqttHost": "mqtt://nanomq",
|
|
||||||
"mqttTopic": "buzzer/watcher"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -3,10 +3,10 @@ const mqtt = require('mqtt');
|
|||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
// Lecture du fichier de configuration
|
// Lecture du fichier de configuration
|
||||||
const config = JSON.parse(fs.readFileSync(path.join('services','config','config_game.json'), 'utf8'));
|
const config = JSON.parse(fs.readFileSync(path.join(__dirname, '../config/configuration.json'), 'utf8'));
|
||||||
|
|
||||||
// Extraction des informations de config
|
// Extraction des informations de config
|
||||||
const { services: { mqttHost, quizzcollector: { MQTTconfig: { mqttQuizzCollectorListTopic, mqttQuizzCollectorCmdTopic } } } } = config;
|
const { mqttHost, services: { quizzcollector: { MQTTconfig: { mqttQuizzCollectorListTopic, mqttQuizzCollectorCmdTopic } } } } = config;
|
||||||
|
|
||||||
// Configuration
|
// Configuration
|
||||||
const folderPath = 'quizz'; // Remplace par le chemin de ton dossier
|
const folderPath = 'quizz'; // Remplace par le chemin de ton dossier
|
||||||
@@ -39,9 +39,9 @@ function Collect() {
|
|||||||
console.error('Erreur lors de la lecture du dossier:', err);
|
console.error('Erreur lors de la lecture du dossier:', err);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('Dossiers trouvés:', files);
|
console.log('Dossiers trouvés:', files);
|
||||||
const message = JSON.stringify( files );
|
const message = JSON.stringify(files);
|
||||||
client.publish(mqttQuizzCollectorListTopic, message, { qos: 1 }, (err) => {
|
client.publish(mqttQuizzCollectorListTopic, message, { qos: 1 }, (err) => {
|
||||||
if (err) {
|
if (err) {
|
||||||
console.error('Erreur lors de la publication MQTT:', err);
|
console.error('Erreur lors de la publication MQTT:', err);
|
||||||
|
|||||||
@@ -132,11 +132,11 @@ function updateTeamTotalScore(teamColor, points) {
|
|||||||
|
|
||||||
|
|
||||||
// Lecture du fichier de configuration
|
// Lecture du fichier de configuration
|
||||||
const configPath = path.join(__dirname, '../config/config_game.json');
|
const configPath = path.join(__dirname, '../config/configuration.json');
|
||||||
const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
|
const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
|
||||||
|
|
||||||
// Extraction des informations de config
|
// Extraction des informations de config
|
||||||
const { services: { mqttHost, score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
|
const { mqttHost, services: { score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
|
||||||
console.log("DEBUG: Config loaded from:", configPath);
|
console.log("DEBUG: Config loaded from:", configPath);
|
||||||
console.log("DEBUG: MQTT Host:", mqttHost);
|
console.log("DEBUG: MQTT Host:", mqttHost);
|
||||||
console.log("DEBUG: Topics:", mqttScoreTopic, mqttScoreChangeTopic);
|
console.log("DEBUG: Topics:", mqttScoreTopic, mqttScoreChangeTopic);
|
||||||
|
|||||||
Reference in New Issue
Block a user