From 911671c65377b1d218457584ddab27f5866b648f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Fri, 23 Jan 2026 18:47:44 +0100
Subject: [PATCH] Nouvelle page qui s'affiche en popup sur la page de controle

---
 .../src/components/BuzzerValidationDialog.vue | 146 ++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 VApp/src/components/BuzzerValidationDialog.vue

diff --git a/VApp/src/components/BuzzerValidationDialog.vue b/VApp/src/components/BuzzerValidationDialog.vue
new file mode 100644
index 00000000..eff01663
--- /dev/null
+++ b/VApp/src/components/BuzzerValidationDialog.vue
@@ -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>