forked from jchomaz/Vulture
Compare commits
6 Commits
container-
...
31911a56d2
| Author | SHA1 | Date | |
|---|---|---|---|
| 31911a56d2 | |||
| 10a04de1e6 | |||
| 6633ecbe70 | |||
| 516ca23c5e | |||
| f0b828a615 | |||
| 7c5a1d7c6b |
@@ -12,27 +12,27 @@
|
|||||||
"format": "prettier --write src/"
|
"format": "prettier --write src/"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@mdi/font": "^7.4.47",
|
"@mdi/font": "latest",
|
||||||
"@videojs-player/vue": "^1.0.0",
|
"@videojs-player/vue": "latest",
|
||||||
"express": "^5.0.0",
|
"express": "latest",
|
||||||
"mqtt": "^5.3.5",
|
"mqtt": "latest",
|
||||||
"ping": "^0.4.4",
|
"ping": "latest",
|
||||||
"roboto-fontface": "^0.10.0",
|
"roboto-fontface": "latest",
|
||||||
"video.js": "^8.22.0",
|
"video.js": "latest",
|
||||||
"vue": "^3.4.19",
|
"vue": "latest",
|
||||||
"vue-router": "^4.2.5",
|
"vue-router": "latest",
|
||||||
"vuex": "^4.1.0"
|
"vuex": "latest"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@rushstack/eslint-patch": "^1.3.3",
|
"@rushstack/eslint-patch": "latest",
|
||||||
"@vitejs/plugin-vue": "^5.0.3",
|
"@vitejs/plugin-vue": "latest",
|
||||||
"@vue/eslint-config-prettier": "^8.0.0",
|
"@vue/eslint-config-prettier": "latest",
|
||||||
"concurrently": "^8.2.2",
|
"concurrently": "latest",
|
||||||
"eslint": "^8.49.0",
|
"eslint": "latest",
|
||||||
"eslint-plugin-vue": "^9.17.0",
|
"eslint-plugin-vue": "latest",
|
||||||
"prettier": "^3.0.3",
|
"prettier": "latest",
|
||||||
"unplugin-fonts": "^1.1.1",
|
"unplugin-fonts": "latest",
|
||||||
"vite": "^5.1.6",
|
"vite": "latest",
|
||||||
"vite-plugin-vuetify": "^2.0.1"
|
"vite-plugin-vuetify": "latest"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,146 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -4,152 +4,111 @@
|
|||||||
<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 pt-8">
|
<v-container class="text-center">
|
||||||
<!-- Team Lines -->
|
<v-row justify="center">
|
||||||
<v-row v-for="(team, color) in scores" :key="color" align="center" justify="center" class="mb-2">
|
<v-col cols="4" sm="6" md="3">
|
||||||
<!-- Icon/Label -->
|
<mqtt-button width="120" height="60" class="btn red xs12 sm6 md3" topic="game/score/update" message='{"Red": "-2"}'>
|
||||||
<v-col cols="2" class="d-flex justify-center">
|
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
|
||||||
<v-icon :color="getTeamColor(color)" size="40">mdi-circle</v-icon>
|
</mqtt-button>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
<v-col cols="4" sm="6" md="3">
|
||||||
<!-- Total Score Input -->
|
<mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "-1"}'>
|
||||||
<v-col cols="5">
|
<v-icon left size="40">mdi-minus-box</v-icon>
|
||||||
<v-text-field
|
</mqtt-button>
|
||||||
v-model.number="team.Total"
|
</v-col>
|
||||||
label="Total"
|
<v-col cols="4" sm="6" md="3">
|
||||||
type="number"
|
<mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "+1"}'>
|
||||||
variant="outlined"
|
<v-icon left size="40">mdi-plus-box</v-icon>
|
||||||
density="compact"
|
</mqtt-button>
|
||||||
hide-details
|
</v-col>
|
||||||
prepend-inner-icon="mdi-minus"
|
<v-col cols="4" sm="6" md="3">
|
||||||
append-inner-icon="mdi-plus"
|
<mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3 " topic="game/score/update" message='{"Red": "+2"}'>
|
||||||
:color="getTeamColor(color)"
|
<v-icon left size="40">mdi-plus-box-multiple</v-icon>
|
||||||
:base-color="getTeamColor(color)"
|
</mqtt-button>
|
||||||
@click:prepend-inner="changeScore(color, 'Total', -1)"
|
</v-col>
|
||||||
@click:append-inner="changeScore(color, 'Total', 1)"
|
<v-col cols="4" sm="6" md="3">
|
||||||
@update:model-value="updateScore(color)"
|
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-2"}'>
|
||||||
class="centered-input"
|
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
|
||||||
readonly
|
</mqtt-button>
|
||||||
></v-text-field>
|
</v-col>
|
||||||
</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"}'>
|
||||||
<!-- Round Score Input -->
|
<v-icon left size="40">mdi-minus-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 blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "+1"}'>
|
||||||
type="number"
|
<v-icon left size="40">mdi-plus-box</v-icon>
|
||||||
variant="outlined"
|
</mqtt-button>
|
||||||
density="compact"
|
</v-col>
|
||||||
hide-details
|
<v-col cols="12" 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-plus-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="4" sm="6" md="3">
|
||||||
@click:append-inner="changeScore(color, 'Round', 1)"
|
<mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "-2"}'>
|
||||||
@update:model-value="updateScore(color)"
|
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
|
||||||
class="centered-input"
|
</mqtt-button>
|
||||||
readonly
|
</v-col>
|
||||||
></v-text-field>
|
<v-col cols="12" sm="6" md="3">
|
||||||
</v-col>
|
<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-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-card>
|
</v-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
import MqttButton from './MqttButton.vue';
|
||||||
import mqtt from 'mqtt';
|
import { ref } from 'vue';
|
||||||
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);
|
||||||
|
|
||||||
const scores = reactive({
|
// Méthode pour basculer l'état de la carte
|
||||||
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;
|
height: 56px; /* Réglez la hauteur réduite selon vos besoins */
|
||||||
width: 60%; /* Adjusted width for layout */
|
width: 170px;
|
||||||
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>
|
||||||
@@ -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.YellowRoundScore }}</v-label>
|
<v-label class="labelRoundScore-style">{{ scores.OrangeRoundScore }}</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.YellowTotalScore }}</v-label>
|
<v-label class="labelTotalScore-style pb-3">{{ scores.OrangeTotalScore }}</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
|
||||||
YellowTotalScore: 0, // Propriétés réactives
|
OrangeTotalScore: 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
|
||||||
YellowRoundScore: 0, // Propriétés réactives
|
OrangeRoundScore: 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
|
||||||
|
|||||||
@@ -1,47 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -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="900">
|
<v-card tile outlined width="500">
|
||||||
<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>
|
<v-container class="text-center">
|
||||||
<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 }} - </v-label>
|
<v-label class="v-label-timestamp">{{ log.timestamp }} - </v-label>
|
||||||
<v-label class="v-label-topic-message-title">Topic : </v-label>
|
<v-label class="v-label-topic-message-title">Topic : </v-label>
|
||||||
|
|||||||
@@ -1,18 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-container class="v-container-style">
|
<v-container class="v-container-style">
|
||||||
<v-card tile outlined width="600">
|
<v-card tile outlined width="500">
|
||||||
<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-text-field
|
<v-select
|
||||||
label="Topic"
|
label="Topic"
|
||||||
v-model="selectedTopic"
|
v-model="selectedTopic"
|
||||||
:items="topics"
|
:items="topics"
|
||||||
prepend-icon="mdi-target"
|
prepend-icon="mdi-target"
|
||||||
></v-text-field>
|
></v-select>
|
||||||
|
|
||||||
<v-text-field
|
<v-text-field
|
||||||
label="Message"
|
label="Message"
|
||||||
@@ -30,42 +30,6 @@
|
|||||||
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"
|
||||||
@@ -89,8 +53,7 @@ const topics = [
|
|||||||
'display/control',
|
'display/control',
|
||||||
'sound/playsound',
|
'sound/playsound',
|
||||||
'game/score/update',
|
'game/score/update',
|
||||||
'game/score',
|
'game/score'
|
||||||
'/display/media'
|
|
||||||
];
|
];
|
||||||
|
|
||||||
// Methods
|
// Methods
|
||||||
@@ -99,18 +62,7 @@ const publisCustomMessage = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const publishBuzzerUnblock = () => {
|
const publishBuzzerUnblock = () => {
|
||||||
publishMessage('vulture/buzzer/unlock', "0");
|
publishMessage('brainblast/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>
|
||||||
|
|
||||||
|
|||||||
@@ -1,121 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -5,18 +5,18 @@ export default {
|
|||||||
RedTotalScore: 11,
|
RedTotalScore: 11,
|
||||||
BlueTotalScore: 22,
|
BlueTotalScore: 22,
|
||||||
GreenTotalScore: 33,
|
GreenTotalScore: 33,
|
||||||
YellowTotalScore: 44,
|
OrangeTotalScore: 44,
|
||||||
|
|
||||||
// Score de la manche courante
|
// Score de la manche courante
|
||||||
RedRoundScore: 1,
|
RedRoundScore: 1,
|
||||||
BlueRoundScore: 2,
|
BlueRoundScore: 2,
|
||||||
YellowRoundScore: 3,
|
OrangeRoundScore: 3,
|
||||||
GreenRoundScore: 4,
|
GreenRoundScore: 4,
|
||||||
|
|
||||||
//Etat des buzzer
|
//Etat des buzzer
|
||||||
BuzzerRed: false,
|
BuzzerRed: false,
|
||||||
BuzzerBlue: false,
|
BuzzerBlue: false,
|
||||||
BuzzerYellow: false,
|
BuzzerOrange: false,
|
||||||
BuzzerGreen: false,
|
BuzzerGreen: false,
|
||||||
|
|
||||||
// Ajoutez d'autres variables globales ici
|
// Ajoutez d'autres variables globales ici
|
||||||
@@ -24,4 +24,4 @@ export default {
|
|||||||
|
|
||||||
// Variables localStorage
|
// 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') || '',
|
export const localStorageVars = { // Exemple de variable localStorage RedScorelocal: localStorage.getItem('RedScore') || '', BlueScorelocal: localStorage.getItem('BlueScore') || '', OrangeScorelocal: localStorage.getItem('OrangeScore') || '', GreenScorelocal: localStorage.getItem('GreenScore') || '',
|
||||||
};
|
};
|
||||||
@@ -19,7 +19,6 @@
|
|||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-row>
|
</v-row>
|
||||||
<BuzzerValidationDialog />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@@ -28,50 +27,49 @@ 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: rgb(var(--v-theme-primary)); /* Changez la couleur en fonction de votre thème */
|
background-color: #d42828; /* Changez la couleur en fonction de votre thème */
|
||||||
}
|
}
|
||||||
.card__title.feedback {
|
.card__title.feedback {
|
||||||
background-color: rgb(var(--v-theme-success)); /* Changez la couleur en fonction de votre thème */
|
background-color: #2E7D32; /* 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: rgb(var(--v-theme-RedBuzzer)); /* Changez la couleur en fonction de votre thème */
|
background-color: #d42828; /* Changez la couleur en fonction de votre thème */
|
||||||
}
|
}
|
||||||
.btn.blue {
|
.btn.blue {
|
||||||
background-color: rgb(var(--v-theme-BlueBuzzer)); /* Changez la couleur en fonction de votre thème */
|
background-color: #2867d4; /* Changez la couleur en fonction de votre thème */
|
||||||
}
|
}
|
||||||
.btn.yellow {
|
.btn.yellow {
|
||||||
background-color: rgb(var(--v-theme-YellowBuzzer)); /* Changez la couleur en fonction de votre thème */
|
background-color: #d4d100; /* Changez la couleur en fonction de votre thème */
|
||||||
}
|
}
|
||||||
.btn.green {
|
.btn.green {
|
||||||
background-color: rgb(var(--v-theme-GreenBuzzer)); /* Changez la couleur en fonction de votre thème */
|
background-color: #28d42e; /* Changez la couleur en fonction de votre thème */
|
||||||
}
|
}
|
||||||
.scorediv-style-red {
|
.scorediv-style-red {
|
||||||
background-color: rgb(var(--v-theme-RedBuzzer)) !important;
|
background-color: #d42828 !important;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-top-left-radius: 10%;
|
border-top-left-radius: 10%;
|
||||||
}
|
}
|
||||||
.scorediv-style-yellow {
|
.scorediv-style-yellow {
|
||||||
background-color: rgb(var(--v-theme-YellowBuzzer)) !important;
|
background-color: #d4d100!important;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-bottom-left-radius: 10%;
|
border-bottom-left-radius: 10%;
|
||||||
}
|
}
|
||||||
.scorediv-style-blue {
|
.scorediv-style-blue {
|
||||||
background-color: rgb(var(--v-theme-BlueBuzzer)) !important;
|
background-color: #2867d4 !important;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-top-right-radius: 10%;
|
border-top-right-radius: 10%;
|
||||||
}
|
}
|
||||||
.scorediv-style-green {
|
.scorediv-style-green {
|
||||||
background-color: rgb(var(--v-theme-GreenBuzzer)) !important;
|
background-color: #28d42e !important;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-bottom-right-radius: 10%;
|
border-bottom-right-radius: 10%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 class="score_div color-blue"></v-container>
|
||||||
<div class="d-flex flex-column align-center">
|
<v-container class="score_div color-red"></v-container>
|
||||||
<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 class="score_div color-green"></v-container>
|
||||||
<div class="d-flex flex-column align-center">
|
<v-container class="score_div color-yellow"></v-container>
|
||||||
<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>
|
||||||
<HidingOverlay/>
|
<v-container v-show="gamehiding === true" class="v-container-game-hided">
|
||||||
<VideoPlayer/>
|
<v-img src="@\assets\v-hide.png" class="v-img-hidding"></v-img>
|
||||||
|
</v-container>
|
||||||
|
<v-container v-show="gamehiding === false" class="player_video_div">
|
||||||
|
<video
|
||||||
|
ref="videoJsPlayer"
|
||||||
|
class="video-js player_video"
|
||||||
|
controls
|
||||||
|
></video>
|
||||||
|
</v-container>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import VideoPlayer from "@/components/VideoPlayer.vue"
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||||
import HidingOverlay from "@/components/HidingOverlay.vue"
|
import videojs from 'video.js';
|
||||||
import { onMounted, reactive } from 'vue';
|
import 'video.js/dist/video-js.css';
|
||||||
import mqtt from 'mqtt'
|
import Mysteryland_h264 from '../quizz/Quizz-1/festival/Mysteryland_h264.mp4';
|
||||||
import config from '@/config.js'
|
import { subscribeToTopic } from '@/services/mqttService';
|
||||||
|
|
||||||
const mqttBrokerUrl = config.mqttBrokerUrl
|
// --- Déclarations
|
||||||
const client = mqtt.connect(mqttBrokerUrl)
|
const player = ref(null);
|
||||||
|
let gamehiding = ref(true)
|
||||||
|
|
||||||
const scores = reactive({
|
const videoOptions = {
|
||||||
RedTotalScore: 0,
|
autoplay: false,
|
||||||
BlueTotalScore: 0,
|
controls: false,
|
||||||
YellowTotalScore: 0,
|
preload: 'auto',
|
||||||
GreenTotalScore: 0,
|
fluid: true,
|
||||||
RedRoundScore: 0,
|
loop: true,
|
||||||
BlueRoundScore: 0,
|
volume: 0,
|
||||||
YellowRoundScore: 0,
|
sources: [{ src: Mysteryland_h264, type: 'video/mp4' }],
|
||||||
GreenRoundScore: 0,
|
};
|
||||||
});
|
|
||||||
|
|
||||||
function handleMessage(topic, message) {
|
// --- Fonctions
|
||||||
let parsedMessage;
|
const playVideo = () => {
|
||||||
try {
|
if (player.value) {
|
||||||
parsedMessage = JSON.parse(message);
|
console.log("▶️ Lecture de la vidéo !");
|
||||||
} catch (e) {
|
player.value.play().catch((error) => {
|
||||||
console.error("Erreur d'analyse JSON:", e);
|
console.error("Erreur de lecture :", error);
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
console.warn("⚠️ Player non encore initialisé !");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const pauseVideo = () => {
|
||||||
|
if (player.value) {
|
||||||
|
console.log("⏸️ Pause de la vidéo !");
|
||||||
|
player.value.pause();
|
||||||
|
} else {
|
||||||
|
console.warn("⚠️ Player non encore initialisé !");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMessage = (topic, message) => {
|
||||||
|
if (topic === "/display/control") {
|
||||||
|
switch (message) {
|
||||||
|
case "play":
|
||||||
|
gamehiding.value = false;
|
||||||
|
playVideo();
|
||||||
|
break;
|
||||||
|
case "pause":
|
||||||
|
gamehiding.value = true;
|
||||||
|
pauseVideo();
|
||||||
|
break;
|
||||||
|
case "hide":
|
||||||
|
console.log("🛑 Cacher la vidéo (implémentation à venir)");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.warn("Commande non reconnue :", message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- Lifecycle
|
||||||
|
onMounted(() => {
|
||||||
|
player.value = videojs(
|
||||||
|
document.querySelector('.video-js'),
|
||||||
|
videoOptions,
|
||||||
|
() => {
|
||||||
|
console.log('🎥 Video player ready');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
subscribeToTopic('#', (topic, message) => {
|
||||||
|
handleMessage(topic, message);
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (player.value) {
|
||||||
|
player.value.dispose();
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -122,18 +122,15 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
background-color: rgb(40, 40, 40);
|
background-color: rgb(80, 80, 80);
|
||||||
padding: 25px 30px;
|
padding: 25px 30px;
|
||||||
border-radius: 0px 0px 30px 30px;
|
border-radius: 0px 0px 30px 30px;
|
||||||
box-shadow: 0px 3px 45px rgb(45, 115, 166);
|
box-shadow: 0px 1px 5px rgb(255, 0, 0);
|
||||||
}
|
}
|
||||||
.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);
|
||||||
@@ -161,29 +158,31 @@
|
|||||||
font-size: 49px;
|
font-size: 49px;
|
||||||
font-family: 'Bahnschrift';
|
font-family: 'Bahnschrift';
|
||||||
}
|
}
|
||||||
.v-label-score {
|
.player_video_div {
|
||||||
color: white;
|
margin-top: 40px;
|
||||||
font-size: 40px;
|
width: calc(100vw - 20%);
|
||||||
font-family: 'Bahnschrift';
|
height: calc(100vh - 20%);
|
||||||
font-weight: bold;
|
border-radius: 20px !important;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.score-fade-enter-from,
|
}
|
||||||
.score-fade-leave-to {
|
.player_video {
|
||||||
opacity: 0;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 100vw;
|
||||||
|
max-height: 100vh;
|
||||||
|
border-radius: 25px !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
.vjs-tech{
|
||||||
|
border-radius: 25px;
|
||||||
|
}
|
||||||
|
.v-container-game-hided{
|
||||||
|
margin-top: 40px;
|
||||||
|
width: calc(100vw - 20%) !important;
|
||||||
|
height: calc(100vh - 20%) !important;
|
||||||
|
border-radius: 25px;
|
||||||
|
}
|
||||||
|
.v-img-hidding{
|
||||||
|
border-radius: 25px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,101 +1,40 @@
|
|||||||
# VContainer - Vulture build script
|
# VContainer - Vulture build script
|
||||||
|
|
||||||
Construction et lancements des containers.
|
Construction et lancements des containers.
|
||||||
Toutes les commandes sont à taper depuis la racine du dépôt.
|
Toutes les commandes sont a tapper depuis la racine du dépot.
|
||||||
|
|
||||||
## 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
|
||||||
|
|
||||||
### Mode Manuel avec Scripts
|
Lancement des trois containers dans le même pod, ils partagent le réseau, les différents services sont disponibles sur localhost.
|
||||||
|
|
||||||
**Développement (localhost):**
|
podman pod create --name vulture -p 8080:80 -p 1883:1883 -p 8081:8081 -p 8083:8083 -p 8883:8883 -p 9001:9001
|
||||||
```bash
|
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
|
||||||
./VContainers/run_dev.sh
|
podman run -dt --rm --pod vulture --name vnode vnode:latest
|
||||||
```
|
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
|
||||||
|
|
||||||
```bash
|
podman stop vapp
|
||||||
./VContainers/stop.sh
|
podman stop vnode
|
||||||
```
|
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 répertoire `quadlet` vers `~/.config/containers/systemd/`
|
Copier les fichiers du repertoire 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 nanomq.service
|
systemctl --user enable --now vulture.pod
|
||||||
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) :
|
sudo sysctl -w net.ipv4.ip_unprivileged_port_start=80
|
||||||
```bash
|
|
||||||
sudo sysctl -w net.ipv4.ip_unprivileged_port_start=80
|
|
||||||
```
|
|
||||||
@@ -1,16 +1,18 @@
|
|||||||
# Development Container for VApp
|
#FROM docker.io/nginx:stable-alpine
|
||||||
FROM docker.io/node:lts-alpine
|
FROM docker.io/node:lts-alpine AS builder
|
||||||
|
## 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
|
||||||
|
|
||||||
# Expose Vite default port
|
FROM docker.io/nginx:stable-alpine
|
||||||
EXPOSE 5173
|
RUN rm /etc/nginx/conf.d/default.conf
|
||||||
|
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
|
|
||||||
CMD ["npm", "run", "dev", "--", "--host"]
|
EXPOSE 80
|
||||||
|
|
||||||
|
# CMD ["npm","run","dev"]
|
||||||
|
#CMD ["sleep", "1000"]
|
||||||
@@ -1,19 +1,14 @@
|
|||||||
[Unit]
|
[Unit]
|
||||||
Description=Broker MQTT NanoMQ
|
Description=Broker MQTT NanoMQ
|
||||||
Wants=network-online.target
|
Requires=vulture.pod
|
||||||
After=network-online.target
|
After=vulture.pod
|
||||||
|
|
||||||
[Container]
|
[Container]
|
||||||
Image=docker.io/emqx/nanomq:latest
|
Image=docker.io/emqx/nanomq:latest
|
||||||
ContainerName=nanomq
|
ContainerName=nanomq
|
||||||
Network=vulture-net.network
|
Pod=vulture
|
||||||
PublishPort=1883:1883
|
# Correspond à -v ./VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf
|
||||||
PublishPort=9001:9001
|
Volume=./VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf
|
||||||
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=default.target
|
WantedBy=vulture.pod
|
||||||
|
|||||||
@@ -1,16 +0,0 @@
|
|||||||
[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
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
[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
|
|
||||||
@@ -1,14 +1,12 @@
|
|||||||
[Unit]
|
[Unit]
|
||||||
Description=Application Node.js VNode
|
Description=Application Node.js VNode
|
||||||
Wants=network-online.target
|
Requires=vulture.pod
|
||||||
After=network-online.target
|
After=vulture.pod
|
||||||
Requires=nanomq.service
|
|
||||||
After=nanomq.service
|
|
||||||
|
|
||||||
[Container]
|
[Container]
|
||||||
Image=localhost/vnode:latest
|
Image=localhost/vnode:latest
|
||||||
ContainerName=vnode
|
ContainerName=vnode
|
||||||
Network=vulture-net.network
|
Pod=vulture
|
||||||
|
|
||||||
[Install]
|
[Install]
|
||||||
WantedBy=default.target
|
WantedBy=vulture.pod
|
||||||
|
|||||||
@@ -1,6 +0,0 @@
|
|||||||
[Unit]
|
|
||||||
Description=Reseau Bridge pour Vulture
|
|
||||||
|
|
||||||
[Network]
|
|
||||||
NetworkName=vulture-net
|
|
||||||
Driver=bridge
|
|
||||||
@@ -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 5173 exposed
|
# VApp (nginx) needs port 80 exposed
|
||||||
podman run -dt --rm --network $NETWORK_NAME --name vapp -p 5173:5173 \
|
podman run -dt --rm --network $NETWORK_NAME --name vapp -p 8080:80 \
|
||||||
-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
|
||||||
|
|
||||||
|
|||||||
@@ -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 5173 exposed
|
# VApp (nginx) needs port 80 exposed
|
||||||
podman run -dt --rm --network $NETWORK_NAME --name vapp -p 5173:5173 \
|
podman run -dt --rm --network $NETWORK_NAME --name vapp -p 8080:80 \
|
||||||
-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
|
||||||
|
|
||||||
|
|||||||
@@ -64,7 +64,8 @@ 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`);
|
||||||
@@ -105,7 +106,8 @@ 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
|
||||||
@@ -129,7 +131,8 @@ 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
|
||||||
@@ -140,7 +143,8 @@ 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`
|
message: `Buzzer ID ${buzzerId} is in tilt mode and ignored.`,
|
||||||
|
timestamp: new Date().toISOString()
|
||||||
}));
|
}));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -150,7 +154,8 @@ 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) {
|
||||||
@@ -171,7 +176,8 @@ 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`);
|
||||||
@@ -182,12 +188,19 @@ 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;
|
||||||
@@ -195,7 +208,8 @@ 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');
|
||||||
|
|||||||
@@ -2,10 +2,10 @@
|
|||||||
"hosts": {
|
"hosts": {
|
||||||
"buzzers": {
|
"buzzers": {
|
||||||
"IP": {
|
"IP": {
|
||||||
"redBuzzerIP": "192.168.73.40",
|
"redBuzzerIP": "8.8.8.6",
|
||||||
"blueBuzzerIP": "192.168.73.41",
|
"blueBuzzerIP": "8.8.8.8",
|
||||||
"greenBuzzerIP": "192.168.73.42",
|
"greenBuzzerIP": "8.8.8.8",
|
||||||
"yellowBuzzerIP": "192.168.73.43"
|
"yellowBuzzerIP": "8.8.8.8"
|
||||||
},
|
},
|
||||||
"MQTTconfig": {
|
"MQTTconfig": {
|
||||||
"mqttHost": "mqtt://nanomq",
|
"mqttHost": "mqtt://nanomq",
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
const args = process.argv;
|
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
|
// 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]
|
global.ScoreFile = args[2]
|
||||||
} else {
|
}else{
|
||||||
global.ScoreFile = "XXX.json"
|
global.ScoreFile = "XXX.json"
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -50,36 +50,36 @@ fs.access(filePath, fs.constants.F_OK, (err) => {
|
|||||||
const initialContent = {
|
const initialContent = {
|
||||||
"TEAM": {
|
"TEAM": {
|
||||||
"Red": {
|
"Red": {
|
||||||
"Name": "XXX",
|
"Name": "XXX",
|
||||||
"TotalScore": 0,
|
"TotalScore": 0,
|
||||||
"RoundScore": 0,
|
"RoundScore": 0,
|
||||||
"Penality": 0,
|
"Penality": 0,
|
||||||
"MasterPoint": 0
|
"MasterPoint": 0
|
||||||
},
|
},
|
||||||
"Blue": {
|
"Blue": {
|
||||||
"Name": "XXX",
|
"Name": "XXX",
|
||||||
"TotalScore": 0,
|
"TotalScore": 0,
|
||||||
"RoundScore": 0,
|
"RoundScore": 0,
|
||||||
"Penality": 0,
|
"Penality": 0,
|
||||||
"MasterPoint": 0
|
"MasterPoint": 0
|
||||||
},
|
},
|
||||||
"Yellow": {
|
"Yellow": {
|
||||||
"Name": "XXX",
|
"Name": "XXX",
|
||||||
"TotalScore": 0,
|
"TotalScore": 0,
|
||||||
"RoundScore": 0,
|
"RoundScore": 0,
|
||||||
"Penality": 0,
|
"Penality": 0,
|
||||||
"MasterPoint": 0
|
"MasterPoint": 0
|
||||||
},
|
},
|
||||||
"Green": {
|
"Green": {
|
||||||
"Name": "XXX",
|
"Name": "XXX",
|
||||||
"TotalScore": 0,
|
"TotalScore": 0,
|
||||||
"RoundScore": 0,
|
"RoundScore": 0,
|
||||||
"Penality": 0,
|
"Penality": 0,
|
||||||
"MasterPoint": 0
|
"MasterPoint": 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
fs.writeFile(newFilePath, JSON.stringify(initialContent, null, 2), (err) => {
|
fs.writeFile(newFilePath, JSON.stringify(initialContent, null, 2), (err) => {
|
||||||
if (err) {
|
if (err) {
|
||||||
console.error("Erreur de création du fichier :", err);
|
console.error("Erreur de création du fichier :", err);
|
||||||
@@ -108,10 +108,10 @@ function updateTeamTotalScore(teamColor, points) {
|
|||||||
if (!jsonData.TEAM.hasOwnProperty(teamColor)) {
|
if (!jsonData.TEAM.hasOwnProperty(teamColor)) {
|
||||||
console.error(`L'équipe ${teamColor} n'existe pas.`);
|
console.error(`L'équipe ${teamColor} n'existe pas.`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const change = parseInt(points, 10);
|
const change = parseInt(points, 10);
|
||||||
|
|
||||||
// Mettre à jour le score
|
// Mettre à jour le score
|
||||||
jsonData.TEAM[teamColor].TotalScore += points;
|
jsonData.TEAM[teamColor].TotalScore += points;
|
||||||
console.log(`Le score total pour l'équipe ${teamColor} est de ${jsonData.TEAM[teamColor].TotalScore} points !`)
|
console.log(`Le score total pour l'équipe ${teamColor} est de ${jsonData.TEAM[teamColor].TotalScore} points !`)
|
||||||
@@ -132,15 +132,11 @@ function updateTeamTotalScore(teamColor, points) {
|
|||||||
|
|
||||||
|
|
||||||
// Lecture du fichier de configuration
|
// Lecture du fichier de configuration
|
||||||
const configPath = path.join(__dirname, '../config/config_game.json');
|
const config = JSON.parse(fs.readFileSync(path.join('services','config','config_game.json'), 'utf8'));
|
||||||
const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
|
|
||||||
|
|
||||||
// Extraction des informations de config
|
// Extraction des informations de config
|
||||||
const { services: { mqttHost, score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
|
const { services: { mqttHost, score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
|
||||||
console.log("DEBUG: Config loaded from:", configPath);
|
console.log(mqttScoreChangeTopic)
|
||||||
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);
|
||||||
|
|
||||||
@@ -160,8 +156,6 @@ 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
|
||||||
@@ -174,82 +168,63 @@ 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é
|
||||||
let value = payload[Team]; // La valeur associée
|
Action = 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);
|
||||||
process = false;
|
process = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (process === true) {
|
if (process === true){
|
||||||
if (Action === "SET") {
|
let currentScore = 0;
|
||||||
// Mise à jour absolue
|
let change = 0 ;
|
||||||
updateTeamScoreAbsolute(Team, TotalScore, RoundScore);
|
switch (Team){
|
||||||
} else {
|
case "Red":
|
||||||
// Mise à jour relative (existant)
|
change = parseInt(Action, 10); // Convertit 'action' en entier
|
||||||
let change = parseInt(Action, 10);
|
if (!isNaN(change)) {
|
||||||
if (!isNaN(change)) {
|
updateTeamTotalScore("Red", change)
|
||||||
updateTeamTotalScore(Team, change);
|
} else {
|
||||||
} else {
|
console.error(`Action invalide : ${action}`);
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 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");
|
||||||
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 2000)); // Pause de 2 secondes
|
await new Promise((resolve) => setTimeout(resolve, 2000)); // Pause de 2 secondes
|
||||||
//client.publish(mqttScoreTopic, JSON.stringify(global.jsonData));
|
//client.publish(mqttScoreTopic, JSON.stringify(global.jsonData));
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
client.on('error', (error) => {
|
client.on('error', (error) => {
|
||||||
console.error('Erreur de connexion au broker MQTT:', error.message);
|
console.error('Erreur de connexion au broker MQTT:', error.message);
|
||||||
|
|||||||
Reference in New Issue
Block a user