Compare commits

..

13 Commits

13 changed files with 761 additions and 344 deletions

View File

@@ -12,27 +12,27 @@
"format": "prettier --write src/"
},
"dependencies": {
"@mdi/font": "latest",
"@videojs-player/vue": "latest",
"express": "latest",
"mqtt": "latest",
"ping": "latest",
"roboto-fontface": "latest",
"video.js": "latest",
"vue": "latest",
"vue-router": "latest",
"vuex": "latest"
"@mdi/font": "^7.4.47",
"@videojs-player/vue": "^1.0.0",
"express": "^5.0.0",
"mqtt": "^5.3.5",
"ping": "^0.4.4",
"roboto-fontface": "^0.10.0",
"video.js": "^8.22.0",
"vue": "^3.4.19",
"vue-router": "^4.2.5",
"vuex": "^4.1.0"
},
"devDependencies": {
"@rushstack/eslint-patch": "latest",
"@vitejs/plugin-vue": "latest",
"@vue/eslint-config-prettier": "latest",
"concurrently": "latest",
"eslint": "latest",
"eslint-plugin-vue": "latest",
"prettier": "latest",
"unplugin-fonts": "latest",
"vite": "latest",
"vite-plugin-vuetify": "latest"
"@rushstack/eslint-patch": "^1.3.3",
"@vitejs/plugin-vue": "^5.0.3",
"@vue/eslint-config-prettier": "^8.0.0",
"concurrently": "^8.2.2",
"eslint": "^8.49.0",
"eslint-plugin-vue": "^9.17.0",
"prettier": "^3.0.3",
"unplugin-fonts": "^1.1.1",
"vite": "^5.1.6",
"vite-plugin-vuetify": "^2.0.1"
}
}

View File

@@ -0,0 +1,146 @@
<template>
<v-dialog v-model="dialog" persistent max-width="800" height="500">
<v-card dark rounded="xl">
<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-card-title>
<v-card-text :style="{ color: buzzerColor }" class="text-style">
L'équipe {{ buzzerTeam }} a buzzé !
</v-card-text>
<v-card-actions class="justify-center pa-0 ma-0" style="height: 100px; gap: 0;">
<v-btn
class="refuse-btn ma-0"
tile
rounded="0"
height="100%"
width="50%"
@click="refuse">
<v-icon left size="40">mdi-close-circle</v-icon>
<span style="font-size: 20px; padding-left: 10px;">Refuser</span>
</v-btn>
<v-btn
class="validate-btn ma-0"
tile
rounded="0"
height="100%"
width="50%"
@click="validate">
<v-icon left size="40">mdi-check-circle</v-icon>
<span style="font-size: 20px; padding-left: 10px;">Valider (+1)</span>
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import mqtt from 'mqtt';
import config from '@/config.js';
import { useTheme } from 'vuetify';
const theme = useTheme();
const dialog = ref(false);
const buzzerTeam = ref('');
const buzzerColor = ref('');
const client = mqtt.connect(config.mqttBrokerUrl);
// Map hex colors to team names if needed, or just use the color directly
function getTeamNameFromColor(color) {
const c = color.toUpperCase();
const colors = theme.current.value.colors;
console.log('Received Color:', c);
console.log('Comparing against:', colors.RedBuzzer.toUpperCase(), colors.BlueBuzzer.toUpperCase(), colors.YellowBuzzer.toUpperCase(), colors.GreenBuzzer.toUpperCase());
if (c === colors.RedBuzzer.toUpperCase()) return 'rouge';
if (c === colors.BlueBuzzer.toUpperCase()) return 'bleue';
if (c === colors.YellowBuzzer.toUpperCase()) return 'jaune';
if (c === colors.GreenBuzzer.toUpperCase()) return 'verte';
return color; // Fallback
}
function getTeamKeyFromColor(color) {
const c = color.toUpperCase();
const colors = theme.current.value.colors;
if (c === colors.RedBuzzer.toUpperCase()) return 'Red';
if (c === colors.BlueBuzzer.toUpperCase()) return 'Blue';
if (c === colors.YellowBuzzer.toUpperCase()) return 'Yellow';
if (c === colors.GreenBuzzer.toUpperCase()) return 'Green';
return null;
}
onMounted(() => {
client.on('connect', () => {
console.log('BuzzerValidation: Connected');
client.subscribe('vulture/buzzer/status');
});
client.on('message', (topic, message) => {
if (topic === 'vulture/buzzer/status') {
try {
const data = JSON.parse(message.toString());
if (data.status === 'blocked') {
buzzerColor.value = data.color;
buzzerTeam.value = getTeamNameFromColor(data.color);
dialog.value = true;
} else if (data.status === 'unblocked') {
// Optional: auto-close if unblocked from elsewhere
dialog.value = false;
}
} catch (e) {
console.error('Error parsing buzzer status:', e);
}
}
});
});
function unlockBuzzers() {
client.publish('vulture/buzzer/unlock','0');
}
function validate() {
const teamKey = getTeamKeyFromColor(buzzerColor.value);
if (teamKey) {
const payload = { [teamKey]: "+1" };
client.publish('game/score/update', JSON.stringify(payload));
}
// Add a small delay before unlocking to ensure the score update is processed
setTimeout(() => {
unlockBuzzers();
}, 100);
dialog.value = false;
}
function refuse() {
unlockBuzzers();
dialog.value = false;
}
</script>
<style scoped>
.headline {
font-weight: bold;
}
.text-style {
font-size: 45px!important;
font-weight: 600;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 100%; /* Ensure it takes full height of the container if possible, or substantial height */
}
.validate-btn {
background-color: rgb(var(--v-theme-success),1);
color: rgb(var(--v-theme-background),1);
}
.refuse-btn {
background-color: rgb(var(--v-theme-error),1);
color: rgb(var(--v-theme-background),1);
}
</style>

View File

@@ -4,111 +4,152 @@
<v-icon left class="white--text pr-5 pl-2" size="40">mdi-calculator-variant</v-icon>
Gestion des scores
</v-card-title>
<v-container class="text-center">
<v-row justify="center">
<v-col cols="4" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn red xs12 sm6 md3" topic="game/score/update" message='{"Red": "-2"}'>
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
</mqtt-button>
</v-col>
<v-col cols="4" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "-1"}'>
<v-icon left size="40">mdi-minus-box</v-icon>
</mqtt-button>
</v-col>
<v-col cols="4" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "+1"}'>
<v-icon left size="40">mdi-plus-box</v-icon>
</mqtt-button>
</v-col>
<v-col cols="4" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3 " topic="game/score/update" message='{"Red": "+2"}'>
<v-icon left size="40">mdi-plus-box-multiple</v-icon>
</mqtt-button>
</v-col>
<v-col cols="4" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-2"}'>
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-1"}'>
<v-icon left size="40">mdi-minus-box</v-icon>
</mqtt-button>
</v-col>
<v-col cols="4" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "+1"}'>
<v-icon left size="40">mdi-plus-box</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "+2"}'>
<v-icon left size="40">mdi-plus-box-multiple</v-icon>
</mqtt-button>
</v-col>
<v-col cols="4" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "-2"}'>
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "-1"}'>
<v-icon left size="40">mdi-minus-box</v-icon>
</mqtt-button>
</v-col>
<v-col cols="4" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "+1"}'>
<v-icon left size="40">mdi-plus-box</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "+2"}'>
<v-icon left size="40">mdi-plus-box-multiple</v-icon>
</mqtt-button>
</v-col>
<v-col cols="4" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "-2"}'>
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "-1"}'>
<v-icon left size="40">mdi-minus-box</v-icon>
</mqtt-button>
</v-col>
<v-col cols="4" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "+1"}'>
<v-icon left size="40">mdi-plus-box</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="3">
<mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "2"}'>
<v-icon left size="40">mdi-plus-box-multiple</v-icon>
</mqtt-button>
</v-col>
<v-container class="text-center pt-8">
<!-- Team Lines -->
<v-row v-for="(team, color) in scores" :key="color" align="center" justify="center" class="mb-2">
<!-- Icon/Label -->
<v-col cols="2" class="d-flex justify-center">
<v-icon :color="getTeamColor(color)" size="40">mdi-circle</v-icon>
</v-col>
<!-- Total Score Input -->
<v-col cols="5">
<v-text-field
v-model.number="team.Total"
label="Total"
type="number"
variant="outlined"
density="compact"
hide-details
prepend-inner-icon="mdi-minus"
append-inner-icon="mdi-plus"
:color="getTeamColor(color)"
:base-color="getTeamColor(color)"
@click:prepend-inner="changeScore(color, 'Total', -1)"
@click:append-inner="changeScore(color, 'Total', 1)"
@update:model-value="updateScore(color)"
class="centered-input"
readonly
></v-text-field>
</v-col>
<!-- Round Score Input -->
<v-col cols="5">
<v-text-field
v-model.number="team.Round"
label="Manche"
type="number"
variant="outlined"
density="compact"
hide-details
prepend-inner-icon="mdi-minus"
append-inner-icon="mdi-plus"
:color="getTeamColor(color)"
:base-color="getTeamColor(color)"
@click:prepend-inner="changeScore(color, 'Round', -1)"
@click:append-inner="changeScore(color, 'Round', 1)"
@update:model-value="updateScore(color)"
class="centered-input"
readonly
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
<script setup>
import MqttButton from './MqttButton.vue';
import { ref } from 'vue';
import { ref, reactive, onMounted } from 'vue';
import mqtt from 'mqtt';
import config from '@/config.js'; // Ensure correct path
// Variable pour contrôler l'état de la carte
const isCardReduced = ref(false);
// Méthode pour basculer l'état de la carte
const scores = reactive({
Red: { Total: 0, Round: 0 },
Blue: { Total: 0, Round: 0 },
Yellow: { Total: 0, Round: 0 },
Green: { Total: 0, Round: 0 },
});
const client = mqtt.connect(config.mqttBrokerUrl);
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);
}
}
});
function toggleCardSize() {
isCardReduced.value = !isCardReduced.value;
}
function getTeamColor(color) {
if (color === 'Yellow') return '#D4D100'; // Custom yellow
if (color === 'Red') return '#d42828';
if (color === 'Blue') return '#2867d4';
if (color === 'Green') return '#28d42e';
return color.toLowerCase();
}
function changeScore(teamColor, field, delta) {
scores[teamColor][field] += delta;
updateScore(teamColor);
}
function updateScore(teamColor) {
const payload = {
[teamColor]: {
Total: scores[teamColor].Total,
Round: scores[teamColor].Round
}
};
console.log('CardButtonScore: Publishing update:', payload);
client.publish('game/score/update', JSON.stringify(payload));
}
</script>
<style>
.card--reduced {
height: 56px; /* Réglez la hauteur réduite selon vos besoins */
width: 170px;
height: 56px;
width: 60%; /* Adjusted width for layout */
overflow: hidden;
transition: height 0.3s ease-in-out;
}
.centered-input input {
text-align: center;
}
.centered-input .v-field__label {
text-align: center;
}
/* Remove number spin buttons */
.centered-input input[type=number]::-webkit-inner-spin-button,
.centered-input input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>

View File

@@ -53,14 +53,14 @@
<div>
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
<div>
<v-label class="labelRoundScore-style">{{ scores.OrangeRoundScore }}</v-label>
<v-label class="labelRoundScore-style">{{ scores.YellowRoundScore }}</v-label>
</div>
</div>
<v-divider color="background"/>
<div>
<v-label class="labelTotalScore-style pt-3">Total</v-label>
<div>
<v-label class="labelTotalScore-style pb-3">{{ scores.OrangeTotalScore }}</v-label>
<v-label class="labelTotalScore-style pb-3">{{ scores.YellowTotalScore }}</v-label>
</div>
</div>
</v-col>
@@ -103,11 +103,11 @@ const client = mqtt.connect(mqttBrokerUrl)
const scores = reactive({
RedTotalScore: 0, // Propriétés réactives
BlueTotalScore: 0, // Propriétés réactives
OrangeTotalScore: 0, // Propriétés réactives
YellowTotalScore: 0, // Propriétés réactives
GreenTotalScore: 0, // Propriétés réactives
RedRoundScore: 0, // Propriétés réactives
BlueRoundScore: 0, // Propriétés réactives
OrangeRoundScore: 0, // Propriétés réactives
YellowRoundScore: 0, // Propriétés réactives
GreenRoundScore: 0, // Propriétés réactives
});
// Fonction pour traiter chaque message reçu et réinitialiser le timeout

View File

@@ -0,0 +1,47 @@
<template>
<v-container v-show="gamehiding === true" class="v-container-game-hided">
<v-img src="@\assets\v-hide.png" class="v-img-hidding"/>
</v-container>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { subscribeToTopic } from '@/services/mqttService';
let gamehiding = ref(true);
const handleMessage = (topic, message) => {
if (topic === "/display/control") {
switch (message) {
case "play":
gamehiding.value = false;
break;
case "pause":
gamehiding.value = true;
break;
default:
console.warn("Commande non reconnue :", message);
gamehiding.value = true;
}
}
};
// --- Lifecycle
onMounted(() => {
subscribeToTopic('#', (topic, message) => {
handleMessage(topic, message);
});
});
</script>
<style>
.v-img-hidding{
border-radius: 25px;
}
.v-container-game-hided{
margin-top: 40px;
width: calc(100vw - 20%) !important;
height: calc(100vh - 20%) !important;
border-radius: 25px;
}
</style>

View File

@@ -1,6 +1,6 @@
<template>
<v-container class="v-container-style-console">
<v-card tile outlined width="500">
<v-card tile outlined width="900">
<v-card-title class="card__title primary centered-title">
<v-icon left class="pr-5 pl-2" size="40">mdi-console-line</v-icon>
Console MQTT
@@ -27,7 +27,7 @@
</div>
</div>
<v-container class="text-center">
<v-container>
<div v-for="(log, index) in filteredLogs" :key="index">
<v-label class="v-label-timestamp">{{ log.timestamp }} -&nbsp;</v-label>
<v-label class="v-label-topic-message-title">Topic :&nbsp;</v-label>

View File

@@ -1,18 +1,18 @@
<template>
<v-container class="v-container-style">
<v-card tile outlined width="500">
<v-card tile outlined width="600">
<v-card-title class="card__title primary centered-title">
<v-icon left class="pr-5 pl-2" size="30">mdi-send</v-icon>
Publier un message
</v-card-title>
<div class="input-style">
<v-select
<v-text-field
label="Topic"
v-model="selectedTopic"
:items="topics"
prepend-icon="mdi-target"
></v-select>
></v-text-field>
<v-text-field
label="Message"
@@ -30,6 +30,42 @@
Déblocage<br>Buzzer
</v-btn>
<v-btn
rounded
color="RedBuzzer"
class="v-btn-style-standalone"
height="40"
@click="publishBuzzer('#d42828')"
>
Buzzer
</v-btn>
<v-btn
rounded
color="BlueBuzzer"
class="v-btn-style-standalone"
height="40"
@click="publishBuzzer('#2867d4')"
>
Buzzer
</v-btn>
<v-btn
rounded
color="YellowBuzzer"
class="v-btn-style-standalone"
height="40"
@click="publishBuzzer('#D4D100')"
>
Buzzer
</v-btn>
<v-btn
rounded
color="GreenBuzzer"
class="v-btn-style-standalone"
height="40"
@click="publishBuzzer('#28d42e')"
>
Buzzer
</v-btn>
<v-btn
class="v-btn-style-validate"
height="50"
@@ -53,7 +89,8 @@ const topics = [
'display/control',
'sound/playsound',
'game/score/update',
'game/score'
'game/score',
'/display/media'
];
// Methods
@@ -62,7 +99,18 @@ const publisCustomMessage = () => {
};
const publishBuzzerUnblock = () => {
publishMessage('brainblast/buzzer/unlock', "0");
publishMessage('vulture/buzzer/unlock', "0");
};
const publishBuzzer = (inputColor) => {
publishMessage('vulture/buzzer/pressed/2',JSON.stringify({
buzzer_id: 1,
color: inputColor
}));
// Add a small delay before unlocking to ensure the score update is processed
setTimeout(() => {
publishMessage('/display/control', "pause");
}, 100);
};
</script>

View File

@@ -0,0 +1,121 @@
<template>
<v-container v-show="gamehiding === false" class="player_video_div">
<video
ref="videoJsPlayer"
class="video-js player_video"
controls
></video>
</v-container>
</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';
let gamehiding = ref(true);
let player = ref(null);
const videoOptions = {
autoplay: false,
controls: false,
preload: 'auto',
fluid: true,
loop: false,
volume: 0,
sources: [{ src: Mysteryland_h264, type: 'video/mp4' }],
};
const handleMessage = (topic, message) => {
console.log(topic, message)
if (topic === "/display/media") {
switch (message) {
case "BOX_BEAT.mp4":
changeVideoSource("BOX_BEAT.mp4")
break;
case "DARK_VALLEY.mp4":
changeVideoSource("DARK_VALLEY.mp4")
break;
}
}
if (topic === "/display/control") {
switch (message) {
case "play":
gamehiding.value = false;
console.log("▶️ Lecture de la vidéo !");
player.value.play().catch((error) => {
console.error("Erreur de lecture :", error);
});
break;
case "pause":
gamehiding.value = true;
console.log("⏸️ Pause de la vidéo !");
player.value.pause();
break;
case "hide":
console.log("🛑 Cacher la vidéo (implémentation à venir)");
break;
}
}
};
const changeVideoSource = (relativePath) => {
try {
const fullPath = new URL(`../quizz/Quizz-1/festival/${relativePath}`, import.meta.url).href;
if (player.value) {
if (relativePath.includes("mp4")){
player.value.src({ src: fullPath, type: 'video/mp4' });
}
if (relativePath.includes(".jpg")){
player.value.src({ src: fullPath, type: 'image/jpeg' });
}
player.value.load();
player.value.play().catch((err) => console.error('Erreur lecture :', err));
}
} catch (error) {
console.error('❌ Erreur lors du chargement de la vidéo :', error);
}
};
// --- Lifecycle
onMounted(() => {
player.value = videojs(
document.querySelector('.video-js'),
videoOptions,
() => {
console.log('🎥 Video player ready');
}
);
subscribeToTopic('#', (topic, message) => {
handleMessage(topic, message);
});
});
onBeforeUnmount(() => {
if (player) {
player.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;
}
</style>

View File

@@ -5,18 +5,18 @@ export default {
RedTotalScore: 11,
BlueTotalScore: 22,
GreenTotalScore: 33,
OrangeTotalScore: 44,
YellowTotalScore: 44,
// Score de la manche courante
RedRoundScore: 1,
BlueRoundScore: 2,
OrangeRoundScore: 3,
YellowRoundScore: 3,
GreenRoundScore: 4,
//Etat des buzzer
BuzzerRed: false,
BuzzerBlue: false,
BuzzerOrange: false,
BuzzerYellow: false,
BuzzerGreen: false,
// Ajoutez d'autres variables globales ici
@@ -24,4 +24,4 @@ export default {
// Variables localStorage
export const localStorageVars = { // Exemple de variable localStorage RedScorelocal: localStorage.getItem('RedScore') || '', BlueScorelocal: localStorage.getItem('BlueScore') || '', OrangeScorelocal: localStorage.getItem('OrangeScore') || '', GreenScorelocal: localStorage.getItem('GreenScore') || '',
};
};

View File

@@ -19,6 +19,7 @@
</v-col>
</v-row>
</v-row>
<BuzzerValidationDialog />
</template>
<script setup>
@@ -27,49 +28,50 @@ import CardSolution from '@/components/CardSolution.vue'
import CardControl from '@/components/CardControl.vue'
import CardSoundboard from '@/components/CardSoundboard.vue';
import CardButtonScore from '@/components/CardButtonScore.vue'
import BuzzerValidationDialog from '@/components/BuzzerValidationDialog.vue';
</script>
<style>
@media (min-width: 1024px) {
.card__title.primary {
background-color: #d42828; /* Changez la couleur en fonction de votre thème */
background-color: rgb(var(--v-theme-primary)); /* Changez la couleur en fonction de votre thème */
}
.card__title.feedback {
background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
background-color: rgb(var(--v-theme-success)); /* 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 */
background-color: rgb(var(--v-theme-RedBuzzer)); /* Changez la couleur en fonction de votre thème */
}
.btn.blue {
background-color: #2867d4; /* Changez la couleur en fonction de votre thème */
background-color: rgb(var(--v-theme-BlueBuzzer)); /* Changez la couleur en fonction de votre thème */
}
.btn.yellow {
background-color: #d4d100; /* Changez la couleur en fonction de votre thème */
background-color: rgb(var(--v-theme-YellowBuzzer)); /* Changez la couleur en fonction de votre thème */
}
.btn.green {
background-color: #28d42e; /* Changez la couleur en fonction de votre thème */
background-color: rgb(var(--v-theme-GreenBuzzer)); /* Changez la couleur en fonction de votre thème */
}
.scorediv-style-red {
background-color: #d42828 !important;
background-color: rgb(var(--v-theme-RedBuzzer)) !important;
padding: 15px;
border-top-left-radius: 10%;
}
.scorediv-style-yellow {
background-color: #d4d100!important;
background-color: rgb(var(--v-theme-YellowBuzzer)) !important;
padding: 15px;
border-bottom-left-radius: 10%;
}
.scorediv-style-blue {
background-color: #2867d4 !important;
background-color: rgb(var(--v-theme-BlueBuzzer)) !important;
padding: 15px;
border-top-right-radius: 10%;
}
.scorediv-style-green {
background-color: #28d42e !important;
background-color: rgb(var(--v-theme-GreenBuzzer)) !important;
padding: 15px;
border-bottom-right-radius: 10%;
}

View File

@@ -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>

View File

@@ -2,7 +2,7 @@
const mqtt = require('mqtt');
// MQTT broker configuration
const brokerUrl = 'mqtt://localhost'; // Broker URL (change if needed)
const brokerUrl = 'mqtt://192.168.1.178'; // Broker URL (change if needed)
const clientId = 'buzzer_manager';
const options = {
clientId,
@@ -64,8 +64,7 @@ function sendTiltStatus(action, buzzerId) {
client.publish('vulture/buzzer/status', JSON.stringify({
status: "tilt_update",
tilt_buzzers: tiltList,
message: `Buzzer ID ${buzzerId} ${action} to tilt mode`,
timestamp: new Date().toISOString()
message: `Buzzer ID ${buzzerId} ${action} to tilt mode`
}));
console.log(`[INFO] Tilt status updated: ${tiltList.length} buzzers in tilt mode`);
@@ -106,8 +105,7 @@ client.on('message', (topic, message) => {
status: "received",
action: status,
buzzer_id: buzzer_id,
message: `Tilt command '${status}' received for buzzer ID ${buzzer_id}`,
timestamp: new Date().toISOString()
message: `Tilt command '${status}' received for buzzer ID ${buzzer_id}`
}));
// Send the updated tilt status to all components
@@ -131,8 +129,7 @@ client.on('message', (topic, message) => {
client.publish(`vulture/buzzer/confirmation/${buzzerId}`, JSON.stringify({
status: "received",
buzzer_id: buzzerId,
message: `Buzzer ID ${buzzerId} received (Color: ${color})`,
timestamp: new Date().toISOString()
message: `Buzzer ID ${buzzerId} received (Color: ${color})`
}));
// Ignore if the buzzer is in tilt mode, but notify this event
@@ -143,8 +140,7 @@ client.on('message', (topic, message) => {
client.publish(`vulture/buzzer/tilt/ignored/${buzzerId}`, JSON.stringify({
status: "tilt_ignored",
buzzer_id: buzzerId,
message: `Buzzer ID ${buzzerId} is in tilt mode and ignored.`,
timestamp: new Date().toISOString()
message: `Buzzer ID ${buzzerId} is in tilt`
}));
return;
}
@@ -154,8 +150,7 @@ client.on('message', (topic, message) => {
buzzer_id: buzzerId,
color: color,
status: buzzerActive ? "blocked" : "free",
message: `Activity detected on buzzer ID ${buzzerId} (Color: ${color})`,
timestamp: new Date().toISOString()
message: `Activity detected on buzzer ID ${buzzerId} (Color: ${color})`
}));
if (!buzzerActive) {
@@ -176,8 +171,7 @@ client.on('message', (topic, message) => {
status: "blocked",
buzzer_id: buzzerId,
color: color,
message: `Buzzer activated by ID ${buzzerId} (Color: ${color})`,
timestamp: new Date().toISOString()
message: `Buzzer activated by ID ${buzzerId} (Color: ${color})`
}));
console.log(`[INFO] Buzzers blocked and notification sent`);
@@ -188,19 +182,12 @@ client.on('message', (topic, message) => {
if (topic === 'vulture/buzzer/unlock') {
console.log('[INFO] Buzzer unlock requested');
// Confirm receipt of unlock command
client.publish('vulture/buzzer/unlock/confirmation', JSON.stringify({
status: "received",
message: "Buzzer unlock command received.",
timestamp: new Date().toISOString()
}));
// Notify the light manager to change to the team's color
client.publish('vulture/light/change', JSON.stringify({
color: "#FFFFFF",
effect: 'rainbow'
}));
// Reset buzzer manager state
buzzerActive = false;
buzzerThatPressed = null;
@@ -208,8 +195,7 @@ client.on('message', (topic, message) => {
// Notify all components of buzzer unlock
client.publish('vulture/buzzer/status', JSON.stringify({
status: "unblocked",
message: "Buzzers unblocked and ready for activation.",
timestamp: new Date().toISOString()
message: "Buzzers unblocked and ready for activation."
}));
console.log('[INFO] Buzzers unblocked and notification sent');

View File

@@ -1,9 +1,9 @@
const args = process.argv;
// Vérification si un paramètre est passé, si c'est le cas c'est qu'on fournis un fichier de score pour reprendre le jeu la ou il était
if (args[2] !== undefined){
if (args[2] !== undefined) {
global.ScoreFile = args[2]
}else{
} else {
global.ScoreFile = "XXX.json"
}
@@ -50,36 +50,36 @@ fs.access(filePath, fs.constants.F_OK, (err) => {
const initialContent = {
"TEAM": {
"Red": {
"Name": "XXX",
"TotalScore": 0,
"RoundScore": 0,
"Penality": 0,
"MasterPoint": 0
"Name": "XXX",
"TotalScore": 0,
"RoundScore": 0,
"Penality": 0,
"MasterPoint": 0
},
"Blue": {
"Name": "XXX",
"TotalScore": 0,
"RoundScore": 0,
"Penality": 0,
"MasterPoint": 0
"Name": "XXX",
"TotalScore": 0,
"RoundScore": 0,
"Penality": 0,
"MasterPoint": 0
},
"Yellow": {
"Name": "XXX",
"TotalScore": 0,
"RoundScore": 0,
"Penality": 0,
"MasterPoint": 0
"Name": "XXX",
"TotalScore": 0,
"RoundScore": 0,
"Penality": 0,
"MasterPoint": 0
},
"Green": {
"Name": "XXX",
"TotalScore": 0,
"RoundScore": 0,
"Penality": 0,
"MasterPoint": 0
"Name": "XXX",
"TotalScore": 0,
"RoundScore": 0,
"Penality": 0,
"MasterPoint": 0
}
}
};
fs.writeFile(newFilePath, JSON.stringify(initialContent, null, 2), (err) => {
if (err) {
console.error("Erreur de création du fichier :", err);
@@ -108,10 +108,10 @@ function updateTeamTotalScore(teamColor, points) {
if (!jsonData.TEAM.hasOwnProperty(teamColor)) {
console.error(`L'équipe ${teamColor} n'existe pas.`);
return;
}
}
const change = parseInt(points, 10);
// Mettre à jour le score
jsonData.TEAM[teamColor].TotalScore += points;
console.log(`Le score total pour l'équipe ${teamColor} est de ${jsonData.TEAM[teamColor].TotalScore} points !`)
@@ -132,11 +132,15 @@ function updateTeamTotalScore(teamColor, points) {
// Lecture du fichier de configuration
const config = JSON.parse(fs.readFileSync(path.join('services','config','config_game.json'), 'utf8'));
const configPath = path.join(__dirname, '../config/config_game.json');
const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
// Extraction des informations de config
const { services: { mqttHost, score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
console.log(mqttScoreChangeTopic)
const { services: { mqttHost, score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
console.log("DEBUG: Config loaded from:", configPath);
console.log("DEBUG: MQTT Host:", mqttHost);
console.log("DEBUG: Topics:", mqttScoreTopic, mqttScoreChangeTopic);
// Connexion au broker MQTT
const client = mqtt.connect(mqttHost);
@@ -156,6 +160,8 @@ client.on('message', (topic, message) => {
let process;
let Team;
let Action;
let TotalScore = null;
let RoundScore = null;
try {
// Analyse du message reçu
@@ -168,63 +174,82 @@ client.on('message', (topic, message) => {
if (payload && typeof payload === 'object') {
// Extraire la clé (la couleur) et la valeur associée
Team = Object.keys(payload)[0]; // La première (et unique) clé
Action = payload[Team]; // La valeur associée
//console.log(`Team: ${Team}, Action: ${Action}`);
let value = payload[Team]; // La valeur associée
if (typeof value === 'object') {
// Mode SET (valeur absolue)
if (value.hasOwnProperty('Total')) TotalScore = parseInt(value.Total, 10);
if (value.hasOwnProperty('Round')) RoundScore = parseInt(value.Round, 10);
Action = "SET";
} else {
// Mode ADD (relatif)
Action = value;
}
process = true;
} else {
console.error(typeof payload);
process = false;
}
if (process === true){
let currentScore = 0;
let change = 0 ;
switch (Team){
case "Red":
change = parseInt(Action, 10); // Convertit 'action' en entier
if (!isNaN(change)) {
updateTeamTotalScore("Red", change)
} else {
console.error(`Action invalide : ${action}`);
}
break;
case "Blue":
change = parseInt(Action, 10); // Convertit 'action' en entier
if (!isNaN(change)) {
updateTeamTotalScore("Blue", change)
} else {
console.error(`Action invalide : ${action}`);
}
break;
case "Green":
change = parseInt(Action, 10); // Convertit 'action' en entier
if (!isNaN(change)) {
updateTeamTotalScore("Green", change)
} else {
console.error(`Action invalide : ${action}`);
}
break;
case "Yellow":
change = parseInt(Action, 10); // Convertit 'action' en entier
if (!isNaN(change)) {
updateTeamTotalScore("Yellow", change)
} else {
console.error(`Action invalide : ${action}`);
}
break;
if (process === true) {
if (Action === "SET") {
// Mise à jour absolue
updateTeamScoreAbsolute(Team, TotalScore, RoundScore);
} else {
// Mise à jour relative (existant)
let change = parseInt(Action, 10);
if (!isNaN(change)) {
updateTeamTotalScore(Team, change);
} else {
console.error(`Action invalide : ${Action}`);
}
}
}
});
// Fonction pour mettre à jour le score d'une équipe (Absolu)
function updateTeamScoreAbsolute(teamColor, totalScore, roundScore) {
fs.readFile(filePath, 'utf8', (err, data) => {
if (err) {
console.error("Erreur de lecture du fichier :", err);
return;
}
try {
const jsonData = JSON.parse(data);
if (!jsonData.TEAM.hasOwnProperty(teamColor)) {
console.error(`L'équipe ${teamColor} n'existe pas.`);
return;
}
if (totalScore !== null && !isNaN(totalScore)) {
jsonData.TEAM[teamColor].TotalScore = totalScore;
}
if (roundScore !== null && !isNaN(roundScore)) {
jsonData.TEAM[teamColor].RoundScore = roundScore;
}
console.log(`Mise à jour absolue pour ${teamColor} -> Total: ${jsonData.TEAM[teamColor].TotalScore}, Round: ${jsonData.TEAM[teamColor].RoundScore}`);
client.publish(mqttScoreTopic, JSON.stringify(jsonData));
fs.writeFile(filePath, JSON.stringify(jsonData, null, 2), (err) => {
if (err) console.error("Erreur d'écriture :", err);
});
} catch (parseErr) {
console.error("Erreur JSON :", parseErr);
}
});
}
(async () => {
while (true) {
console.log("Boucle en arrière-plan");
await new Promise((resolve) => setTimeout(resolve, 2000)); // Pause de 2 secondes
//client.publish(mqttScoreTopic, JSON.stringify(global.jsonData));
console.log("Boucle en arrière-plan");
await new Promise((resolve) => setTimeout(resolve, 2000)); // Pause de 2 secondes
//client.publish(mqttScoreTopic, JSON.stringify(global.jsonData));
}
})();
})();
client.on('error', (error) => {
console.error('Erreur de connexion au broker MQTT:', error.message);