Nouvelle page qui s'affiche en popup sur la page de controle
This commit is contained in:
146
VApp/src/components/BuzzerValidationDialog.vue
Normal file
146
VApp/src/components/BuzzerValidationDialog.vue
Normal 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>
|
||||||
Reference in New Issue
Block a user