1
0
forked from jchomaz/Vulture

25 Commits

Author SHA1 Message Date
184a6ac600 config : corrige ip buzzer 2026-01-26 17:32:29 +01:00
9a4a2cb6ad Change le port exposé de l'app 2026-01-26 17:13:08 +01:00
3a458be33d feat: Refactor VApp container to a development build and update its exposed port mapping in the run script. 2026-01-26 17:13:08 +01:00
4e0f34f75c chore: Update buzzer IP addresses in network configuration. 2026-01-26 17:13:08 +01:00
19fe61f077 feat: Introduce Quadlet units for dev/prod VApp containers and a custom network, update existing container configurations, and enhance documentation. 2026-01-26 17:13:07 +01:00
b86909c744 Créer 2 scripts de lancement un pour le dev en local l'autre pour la prod 2026-01-26 17:13:07 +01:00
4e57c70b3c gestion d'une config pour les ip si prod ou dev 2026-01-26 17:13:07 +01:00
da932bdcb3 Lancement en mode network plutot que pod 2026-01-26 17:13:02 +01:00
6026bfb7ff Quadlet (WiP) 2026-01-26 17:09:46 +01:00
28a05c2104 scripts de gestion 2026-01-26 17:09:46 +01:00
b9a2c53032 Correction des options de lancement 2026-01-26 17:09:46 +01:00
c73322a67a Mise à jour des paquets 2026-01-23 18:52:04 +01:00
5900b1faa1 Ajout des boutons de simulation de buzzer et agrandissement de la fenêtre 2026-01-23 18:50:58 +01:00
af58e9c30d Agrandissement de la fenêtre de debug 2026-01-23 18:49:50 +01:00
bc8846d9eb Nouveau player video du game display 2026-01-23 18:48:41 +01:00
5c16468157 Page d'overlay qui masque le player 2026-01-23 18:48:13 +01:00
911671c653 Nouvelle page qui s'affiche en popup sur la page de controle 2026-01-23 18:47:44 +01:00
cd540698a1 Modification de l'équipe Orange en jaune 2026-01-23 18:47:01 +01:00
2a28526cb9 Modification de l'équipe Orange en jaune 2026-01-23 18:45:55 +01:00
6666874913 Modification du controle manuel des score et suppression des 16 bouttons 2026-01-23 18:44:35 +01:00
814c3d0e68 Ajout du popup quand les équipes buzz 2026-01-23 18:43:56 +01:00
911497ab1d Ajout des scores dans les pastilles d'équipes et de le mise à jour en live des scores 2026-01-23 18:42:42 +01:00
905da933dc Modification du score-manager 2026-01-23 18:40:44 +01:00
0186a0a83e Modification du buzzer-manager 2026-01-23 18:40:23 +01:00
da929ecb89 Merge pull request 'container-integration' (#1) from lol/Vulture:container-integration into main
Reviewed-on: jchomaz/Vulture#1
2025-11-24 17:47:13 +01:00
23 changed files with 909 additions and 388 deletions

View File

@@ -12,27 +12,27 @@
"format": "prettier --write src/" "format": "prettier --write src/"
}, },
"dependencies": { "dependencies": {
"@mdi/font": "latest", "@mdi/font": "^7.4.47",
"@videojs-player/vue": "latest", "@videojs-player/vue": "^1.0.0",
"express": "latest", "express": "^5.0.0",
"mqtt": "latest", "mqtt": "^5.3.5",
"ping": "latest", "ping": "^0.4.4",
"roboto-fontface": "latest", "roboto-fontface": "^0.10.0",
"video.js": "latest", "video.js": "^8.22.0",
"vue": "latest", "vue": "^3.4.19",
"vue-router": "latest", "vue-router": "^4.2.5",
"vuex": "latest" "vuex": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@rushstack/eslint-patch": "latest", "@rushstack/eslint-patch": "^1.3.3",
"@vitejs/plugin-vue": "latest", "@vitejs/plugin-vue": "^5.0.3",
"@vue/eslint-config-prettier": "latest", "@vue/eslint-config-prettier": "^8.0.0",
"concurrently": "latest", "concurrently": "^8.2.2",
"eslint": "latest", "eslint": "^8.49.0",
"eslint-plugin-vue": "latest", "eslint-plugin-vue": "^9.17.0",
"prettier": "latest", "prettier": "^3.0.3",
"unplugin-fonts": "latest", "unplugin-fonts": "^1.1.1",
"vite": "latest", "vite": "^5.1.6",
"vite-plugin-vuetify": "latest" "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,87 +4,54 @@
<v-icon left class="white--text pr-5 pl-2" size="40">mdi-calculator-variant</v-icon> <v-icon left class="white--text pr-5 pl-2" size="40">mdi-calculator-variant</v-icon>
Gestion des scores Gestion des scores
</v-card-title> </v-card-title>
<v-container class="text-center"> <v-container class="text-center pt-8">
<v-row justify="center"> <!-- Team Lines -->
<v-col cols="4" sm="6" md="3"> <v-row v-for="(team, color) in scores" :key="color" align="center" justify="center" class="mb-2">
<mqtt-button width="120" height="60" class="btn red xs12 sm6 md3" topic="game/score/update" message='{"Red": "-2"}'> <!-- Icon/Label -->
<v-icon left size="40">mdi-minus-box-multiple</v-icon> <v-col cols="2" class="d-flex justify-center">
</mqtt-button> <v-icon :color="getTeamColor(color)" size="40">mdi-circle</v-icon>
</v-col> </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"}'> <!-- Total Score Input -->
<v-icon left size="40">mdi-minus-box</v-icon> <v-col cols="5">
</mqtt-button> <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> </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"}'> <!-- Round Score Input -->
<v-icon left size="40">mdi-plus-box</v-icon> <v-col cols="5">
</mqtt-button> <v-text-field
</v-col> v-model.number="team.Round"
<v-col cols="4" sm="6" md="3"> label="Manche"
<mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3 " topic="game/score/update" message='{"Red": "+2"}'> type="number"
<v-icon left size="40">mdi-plus-box-multiple</v-icon> variant="outlined"
</mqtt-button> density="compact"
</v-col> hide-details
<v-col cols="4" sm="6" md="3"> prepend-inner-icon="mdi-minus"
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-2"}'> append-inner-icon="mdi-plus"
<v-icon left size="40">mdi-minus-box-multiple</v-icon> :color="getTeamColor(color)"
</mqtt-button> :base-color="getTeamColor(color)"
</v-col> @click:prepend-inner="changeScore(color, 'Round', -1)"
<v-col cols="12" sm="6" md="3"> @click:append-inner="changeScore(color, 'Round', 1)"
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-1"}'> @update:model-value="updateScore(color)"
<v-icon left size="40">mdi-minus-box</v-icon> class="centered-input"
</mqtt-button> readonly
</v-col> ></v-text-field>
<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-col>
</v-row> </v-row>
</v-container> </v-container>
@@ -92,23 +59,97 @@
</template> </template>
<script setup> <script setup>
import MqttButton from './MqttButton.vue'; import { ref, reactive, onMounted } from 'vue';
import { ref } 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); 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() { function toggleCardSize() {
isCardReduced.value = !isCardReduced.value; 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> </script>
<style> <style>
.card--reduced { .card--reduced {
height: 56px; /* Réglez la hauteur réduite selon vos besoins */ height: 56px;
width: 170px; width: 60%; /* Adjusted width for layout */
overflow: hidden; overflow: hidden;
transition: height 0.3s ease-in-out; 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> </style>

View File

@@ -53,14 +53,14 @@
<div> <div>
<v-label class="labelRoundScore-style pt-3">Manche</v-label> <v-label class="labelRoundScore-style pt-3">Manche</v-label>
<div> <div>
<v-label class="labelRoundScore-style">{{ scores.OrangeRoundScore }}</v-label> <v-label class="labelRoundScore-style">{{ scores.YellowRoundScore }}</v-label>
</div> </div>
</div> </div>
<v-divider color="background"/> <v-divider color="background"/>
<div> <div>
<v-label class="labelTotalScore-style pt-3">Total</v-label> <v-label class="labelTotalScore-style pt-3">Total</v-label>
<div> <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>
</div> </div>
</v-col> </v-col>
@@ -103,11 +103,11 @@ const client = mqtt.connect(mqttBrokerUrl)
const scores = reactive({ const scores = reactive({
RedTotalScore: 0, // Propriétés réactives RedTotalScore: 0, // Propriétés réactives
BlueTotalScore: 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 GreenTotalScore: 0, // Propriétés réactives
RedRoundScore: 0, // Propriétés réactives RedRoundScore: 0, // Propriétés réactives
BlueRoundScore: 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 GreenRoundScore: 0, // Propriétés réactives
}); });
// Fonction pour traiter chaque message reçu et réinitialiser le timeout // 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> <template>
<v-container class="v-container-style-console"> <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-card-title class="card__title primary centered-title">
<v-icon left class="pr-5 pl-2" size="40">mdi-console-line</v-icon> <v-icon left class="pr-5 pl-2" size="40">mdi-console-line</v-icon>
Console MQTT Console MQTT
@@ -27,7 +27,7 @@
</div> </div>
</div> </div>
<v-container class="text-center"> <v-container>
<div v-for="(log, index) in filteredLogs" :key="index"> <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-timestamp">{{ log.timestamp }} -&nbsp;</v-label>
<v-label class="v-label-topic-message-title">Topic :&nbsp;</v-label> <v-label class="v-label-topic-message-title">Topic :&nbsp;</v-label>

View File

@@ -1,18 +1,18 @@
<template> <template>
<v-container class="v-container-style"> <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-card-title class="card__title primary centered-title">
<v-icon left class="pr-5 pl-2" size="30">mdi-send</v-icon> <v-icon left class="pr-5 pl-2" size="30">mdi-send</v-icon>
Publier un message Publier un message
</v-card-title> </v-card-title>
<div class="input-style"> <div class="input-style">
<v-select <v-text-field
label="Topic" label="Topic"
v-model="selectedTopic" v-model="selectedTopic"
:items="topics" :items="topics"
prepend-icon="mdi-target" prepend-icon="mdi-target"
></v-select> ></v-text-field>
<v-text-field <v-text-field
label="Message" label="Message"
@@ -30,6 +30,42 @@
Déblocage<br>Buzzer Déblocage<br>Buzzer
</v-btn> </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 <v-btn
class="v-btn-style-validate" class="v-btn-style-validate"
height="50" height="50"
@@ -53,7 +89,8 @@ const topics = [
'display/control', 'display/control',
'sound/playsound', 'sound/playsound',
'game/score/update', 'game/score/update',
'game/score' 'game/score',
'/display/media'
]; ];
// Methods // Methods
@@ -62,7 +99,18 @@ const publisCustomMessage = () => {
}; };
const publishBuzzerUnblock = () => { 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> </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, RedTotalScore: 11,
BlueTotalScore: 22, BlueTotalScore: 22,
GreenTotalScore: 33, GreenTotalScore: 33,
OrangeTotalScore: 44, YellowTotalScore: 44,
// Score de la manche courante // Score de la manche courante
RedRoundScore: 1, RedRoundScore: 1,
BlueRoundScore: 2, BlueRoundScore: 2,
OrangeRoundScore: 3, YellowRoundScore: 3,
GreenRoundScore: 4, GreenRoundScore: 4,
//Etat des buzzer //Etat des buzzer
BuzzerRed: false, BuzzerRed: false,
BuzzerBlue: false, BuzzerBlue: false,
BuzzerOrange: false, BuzzerYellow: false,
BuzzerGreen: false, BuzzerGreen: false,
// Ajoutez d'autres variables globales ici // Ajoutez d'autres variables globales ici

View File

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

View File

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

View File

@@ -1,40 +1,101 @@
# VContainer - Vulture build script # VContainer - Vulture build script
Construction et lancements des containers. Construction et lancements des containers.
Toutes les commandes sont a tapper depuis la racine du dépot. Toutes les commandes sont à taper depuis la racine du dépôt.
## Build ## Build
```bash
./VContainers/build.sh
```
Ou manuellement :
```bash
podman build . -f ./VContainers/VNode/Containerfile -t vnode podman build . -f ./VContainers/VNode/Containerfile -t vnode
podman build . -f ./VContainers/VApp/Containerfile -t vapp podman build . -f ./VContainers/VApp/Containerfile -t vapp
```
## Run ## Run
Lancement des trois containers dans le même pod, ils partagent le réseau, les différents services sont disponibles sur localhost. ### Mode Manuel avec Scripts
podman pod create --name vulture -p 8080:80 -p 1883:1883 -p 8081:8081 -p 8083:8083 -p 8883:8883 -p 9001:9001 **Développement (localhost):**
podman run -dt --rm --pod vulture --name nanomq -v ./VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf docker.io/emqx/nanomq:latest --conf /etc/nanomq.conf ```bash
podman run -dt --rm --pod vulture --name vnode vnode:latest ./VContainers/run_dev.sh
podman run -dt --rm --pod vulture --name vapp vapp:latest ```
**Production (IP 192.168.73.252):**
```bash
./VContainers/run_prod.sh
```
Les containers sont lancés sur le réseau bridge `vulture-net` :
- **nanomq** : Broker MQTT (ports 1883, 9001, 8081, 8083, 8883)
- **vnode** : Services Node.js backend
- **vapp** : Frontend Vue.js (port 8080)
## Stop ## Stop
podman stop vapp ```bash
podman stop vnode ./VContainers/stop.sh
podman stop nanomq ```
podman pod rm vulture
Ou manuellement :
```bash
podman stop vapp vnode nanomq
podman network rm vulture-net
```
## Lancement automatique avec Quadlet ## Lancement automatique avec Quadlet
Copier les fichiers du repertoire quadlet vers ~/.config/containers/systemd/ Copier les fichiers du répertoire `quadlet` vers `~/.config/containers/systemd/`
```bash
cp ./VContainers/quadlet/*.network ~/.config/containers/systemd/
cp ./VContainers/quadlet/*.container ~/.config/containers/systemd/
``` ```
**Pour l'environnement de développement :**
```bash
systemctl --user daemon-reload systemctl --user daemon-reload
systemctl --user enable --now vulture.pod systemctl --user enable --now nanomq.service
systemctl --user enable --now vnode.service
systemctl --user enable --now vapp_dev.service
```
**Pour l'environnement de production :**
```bash
systemctl --user daemon-reload
systemctl --user enable --now nanomq.service
systemctl --user enable --now vnode.service
systemctl --user enable --now vapp_prod.service
```
**Vérifier le statut :**
```bash
systemctl --user status nanomq.service vnode.service vapp_dev.service
```
**Arrêter les services :**
```bash
systemctl --user stop vapp_dev.service vnode.service nanomq.service
systemctl --user disable vapp_dev.service vnode.service nanomq.service
```
## Configuration
Les fichiers de configuration se trouvent dans `VContainers/VApp/config/` :
- `config_dev.js` : Configuration développement (MQTT sur localhost)
- `config_prod.js` : Configuration production (MQTT sur 192.168.73.252)
Vous pouvez modifier ces fichiers selon vos besoins. En mode manuel, redémarrez les containers. Avec Quadlet, redémarrez le service correspondant :
```bash
systemctl --user restart vapp_dev.service
``` ```
## Tip ## Tip
Pour permettre à Podman d'utiliser les ports privilégiés (<1024) :
```bash
sudo sysctl -w net.ipv4.ip_unprivileged_port_start=80 sudo sysctl -w net.ipv4.ip_unprivileged_port_start=80
```

View File

@@ -1,18 +1,16 @@
#FROM docker.io/nginx:stable-alpine # Development Container for VApp
FROM docker.io/node:lts-alpine AS builder FROM docker.io/node:lts-alpine
## Bundle APP files
WORKDIR /app WORKDIR /app
# Copy VApp source code
COPY VApp ./ COPY VApp ./
# Install dependencies
RUN npm install RUN npm install
RUN npm run build
FROM docker.io/nginx:stable-alpine # Expose Vite default port
RUN rm /etc/nginx/conf.d/default.conf EXPOSE 5173
COPY ./VContainers/VApp/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/dist /usr/share/nginx/html
# Start in development mode with host exposure
EXPOSE 80 CMD ["npm", "run", "dev", "--", "--host"]
# CMD ["npm","run","dev"]
#CMD ["sleep", "1000"]

View File

@@ -1,14 +1,19 @@
[Unit] [Unit]
Description=Broker MQTT NanoMQ Description=Broker MQTT NanoMQ
Requires=vulture.pod Wants=network-online.target
After=vulture.pod After=network-online.target
[Container] [Container]
Image=docker.io/emqx/nanomq:latest Image=docker.io/emqx/nanomq:latest
ContainerName=nanomq ContainerName=nanomq
Pod=vulture Network=vulture-net.network
# Correspond à -v ./VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf PublishPort=1883:1883
Volume=./VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf PublishPort=9001:9001
PublishPort=8081:8081
PublishPort=8083:8083
PublishPort=8883:8883
Volume=%h/Src/Fablab/Vulture/VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf:Z
Exec=--conf /etc/nanomq.conf
[Install] [Install]
WantedBy=vulture.pod WantedBy=default.target

View File

@@ -0,0 +1,16 @@
[Unit]
Description=Application Vue.js VApp (DEV)
Wants=network-online.target
After=network-online.target
Requires=nanomq.service
After=nanomq.service
[Container]
Image=localhost/vapp:latest
ContainerName=vapp
Network=vulture-net.network
PublishPort=8080:80
Volume=%h/Src/Fablab/Vulture/VContainers/VApp/config/config_dev.js:/usr/share/nginx/html/config.js:Z
[Install]
WantedBy=default.target

View File

@@ -0,0 +1,16 @@
[Unit]
Description=Application Vue.js VApp (PROD)
Wants=network-online.target
After=network-online.target
Requires=nanomq.service
After=nanomq.service
[Container]
Image=localhost/vapp:latest
ContainerName=vapp
Network=vulture-net.network
PublishPort=8080:80
Volume=%h/Src/Fablab/Vulture/VContainers/VApp/config/config_prod.js:/usr/share/nginx/html/config.js:Z
[Install]
WantedBy=default.target

View File

@@ -1,12 +1,14 @@
[Unit] [Unit]
Description=Application Node.js VNode Description=Application Node.js VNode
Requires=vulture.pod Wants=network-online.target
After=vulture.pod After=network-online.target
Requires=nanomq.service
After=nanomq.service
[Container] [Container]
Image=localhost/vnode:latest Image=localhost/vnode:latest
ContainerName=vnode ContainerName=vnode
Pod=vulture Network=vulture-net.network
[Install] [Install]
WantedBy=vulture.pod WantedBy=default.target

View File

@@ -0,0 +1,6 @@
[Unit]
Description=Reseau Bridge pour Vulture
[Network]
NetworkName=vulture-net
Driver=bridge

View File

@@ -25,8 +25,8 @@ echo "Starting VNode..."
podman run -dt --rm --network $NETWORK_NAME --name vnode vnode:latest podman run -dt --rm --network $NETWORK_NAME --name vnode vnode:latest
echo "Starting VApp (DEV CONFIG)..." echo "Starting VApp (DEV CONFIG)..."
# VApp (nginx) needs port 80 exposed # VApp (nginx) needs port 5173 exposed
podman run -dt --rm --network $NETWORK_NAME --name vapp -p 8080:80 \ podman run -dt --rm --network $NETWORK_NAME --name vapp -p 5173:5173 \
-v ./VContainers/VApp/config/config_dev.js:/usr/share/nginx/html/config.js:Z \ -v ./VContainers/VApp/config/config_dev.js:/usr/share/nginx/html/config.js:Z \
vapp:latest vapp:latest

View File

@@ -25,8 +25,8 @@ echo "Starting VNode..."
podman run -dt --rm --network $NETWORK_NAME --name vnode vnode:latest podman run -dt --rm --network $NETWORK_NAME --name vnode vnode:latest
echo "Starting VApp (PROD CONFIG)..." echo "Starting VApp (PROD CONFIG)..."
# VApp (nginx) needs port 80 exposed # VApp (nginx) needs port 5173 exposed
podman run -dt --rm --network $NETWORK_NAME --name vapp -p 8080:80 \ podman run -dt --rm --network $NETWORK_NAME --name vapp -p 5173:5173 \
-v ./VContainers/VApp/config/config_prod.js:/usr/share/nginx/html/config.js:Z \ -v ./VContainers/VApp/config/config_prod.js:/usr/share/nginx/html/config.js:Z \
vapp:latest vapp:latest

View File

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

View File

@@ -2,10 +2,10 @@
"hosts": { "hosts": {
"buzzers": { "buzzers": {
"IP": { "IP": {
"redBuzzerIP": "8.8.8.6", "redBuzzerIP": "192.168.73.40",
"blueBuzzerIP": "8.8.8.8", "blueBuzzerIP": "192.168.73.41",
"greenBuzzerIP": "8.8.8.8", "greenBuzzerIP": "192.168.73.42",
"yellowBuzzerIP": "8.8.8.8" "yellowBuzzerIP": "192.168.73.43"
}, },
"MQTTconfig": { "MQTTconfig": {
"mqttHost": "mqtt://nanomq", "mqttHost": "mqtt://nanomq",

View File

@@ -132,11 +132,15 @@ function updateTeamTotalScore(teamColor, points) {
// 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 configPath = path.join(__dirname, '../config/config_game.json');
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 { services: { mqttHost, score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
console.log(mqttScoreChangeTopic) console.log("DEBUG: Config loaded from:", configPath);
console.log("DEBUG: MQTT Host:", mqttHost);
console.log("DEBUG: Topics:", mqttScoreTopic, mqttScoreChangeTopic);
// Connexion au broker MQTT // Connexion au broker MQTT
const client = mqtt.connect(mqttHost); const client = mqtt.connect(mqttHost);
@@ -156,6 +160,8 @@ client.on('message', (topic, message) => {
let process; let process;
let Team; let Team;
let Action; let Action;
let TotalScore = null;
let RoundScore = null;
try { try {
// Analyse du message reçu // Analyse du message reçu
@@ -168,8 +174,18 @@ client.on('message', (topic, message) => {
if (payload && typeof payload === 'object') { if (payload && typeof payload === 'object') {
// Extraire la clé (la couleur) et la valeur associée // Extraire la clé (la couleur) et la valeur associée
Team = Object.keys(payload)[0]; // La première (et unique) clé Team = Object.keys(payload)[0]; // La première (et unique) clé
Action = payload[Team]; // La valeur associée let value = payload[Team]; // La valeur associée
//console.log(`Team: ${Team}, Action: ${Action}`);
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; process = true;
} else { } else {
console.error(typeof payload); console.error(typeof payload);
@@ -177,46 +193,55 @@ client.on('message', (topic, message) => {
} }
if (process === true) { if (process === true) {
let currentScore = 0; if (Action === "SET") {
let change = 0 ; // Mise à jour absolue
switch (Team){ updateTeamScoreAbsolute(Team, TotalScore, RoundScore);
case "Red":
change = parseInt(Action, 10); // Convertit 'action' en entier
if (!isNaN(change)) {
updateTeamTotalScore("Red", change)
} else { } else {
console.error(`Action invalide : ${action}`); // Mise à jour relative (existant)
} let change = parseInt(Action, 10);
break;
case "Blue":
change = parseInt(Action, 10); // Convertit 'action' en entier
if (!isNaN(change)) { if (!isNaN(change)) {
updateTeamTotalScore("Blue", change) updateTeamTotalScore(Team, change);
} else { } else {
console.error(`Action invalide : ${action}`); 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;
} }
} }
}); });
// 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 () => { (async () => {
while (true) { while (true) {
console.log("Boucle en arrière-plan"); console.log("Boucle en arrière-plan");