From c62f76aeecec22bdd1bac0b91152ff1743177f9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Sun, 8 Feb 2026 16:23:09 +0100
Subject: [PATCH] (update) GameDisplay : Feedback visuel lors des buzzer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ajout de l'état 'activeTeam' et 'flashingTeam' basé sur les messages MQTT

- Implémentation du grisement (dimming) des équipes inactives

- Ajout d'une lueur blanche clignotante (flash-glow) de 2s sur l'équipe active

- La box-shadow du panneau des scores prend la couleur de l'équipe active
---
 VApp/src/views/GameDisplay.vue | 114 +++++++++++++++++++++++++++++++--
 1 file changed, 108 insertions(+), 6 deletions(-)

diff --git a/VApp/src/views/GameDisplay.vue b/VApp/src/views/GameDisplay.vue
index 2e5537a4..c2a309d1 100644
--- a/VApp/src/views/GameDisplay.vue
+++ b/VApp/src/views/GameDisplay.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="main_div">
     <div>
-      <v-container class="score_div_main">
-        <v-container class="score_div color-blue">
+      <v-container class="score_div_main" :style="getMainShadow()">
+        <v-container class="score_div color-blue" :class="[getDimClass('Blue'), getFlashClass('Blue')]">
           <div class="d-flex flex-column align-center">
             <Transition name="score-fade" mode="out-in">
               <span :key="scores.BlueTotalScore" class="v-label-score">{{ scores.BlueRoundScore }}</span>
             </Transition>
           </div>
         </v-container>
-        <v-container class="score_div color-red">
+        <v-container class="score_div color-red" :class="[getDimClass('Red'), getFlashClass('Red')]">
           <div class="d-flex flex-column align-center">
             <Transition name="score-fade" mode="out-in">
               <span :key="scores.RedTotalScore" class="v-label-score">{{ scores.RedRoundScore }}</span>
@@ -19,14 +19,14 @@
         <v-container class="score_div color-white d-flex align-center justify-center">
           <span class="v-label-time">{{ timerDisplay }}</span>
         </v-container>
-        <v-container class="score_div color-green">
+        <v-container class="score_div color-green" :class="[getDimClass('Green'), getFlashClass('Green')]">
           <div class="d-flex flex-column align-center">
             <Transition name="score-fade" mode="out-in">
               <span :key="scores.GreenTotalScore" class="v-label-score">{{ scores.GreenRoundScore }}</span>
             </Transition>
           </div>
         </v-container>
-        <v-container class="score_div color-yellow">
+        <v-container class="score_div color-yellow" :class="[getDimClass('Yellow'), getFlashClass('Yellow')]">
           <div class="d-flex flex-column align-center">
             <Transition name="score-fade" mode="out-in">
               <span :key="scores.YellowTotalScore" class="v-label-score">{{ scores.YellowRoundScore }}</span>
@@ -129,7 +129,91 @@
     // Demande de rafraîchissement des scores au chargement
     // Cela permet de récupérer les scores actuels même après un rechargement de page
     client.publish('game/score/request', '{}');
+
+    // Abonnement au statut des buzzers
+    subscribeToTopic('vulture/buzzer/status', (topic, message) => {
+        try {
+            const data = JSON.parse(message);
+            if (data.status === 'blocked') {
+                const color = data.color || '';
+                const team = identifyTeamByColor(color);
+                activeTeam.value = team;
+                
+                // Trigger flash effect
+                if (team) {
+                    flashingTeam.value = team;
+                    setTimeout(() => {
+                        if (flashingTeam.value === team) {
+                            flashingTeam.value = null;
+                        }
+                    }, 2000);
+                }
+
+                console.log(`Buzzer Blocked: Color=${color}, Identified Team=${activeTeam.value}`);
+            } else if (data.status === 'unblocked') {
+                activeTeam.value = null;
+                flashingTeam.value = null;
+                console.log('Buzzer Unblocked');
+            }
+        } catch (e) {
+            console.error('Error parsing buzzer status', e);
+        }
+    });
   });
+
+  const activeTeam = ref(null);
+  const flashingTeam = ref(null);
+
+  function identifyTeamByColor(hexColor) {
+      if (!hexColor) return null;
+      // Normalisation (retirer le # et mettre en majuscule)
+      const color = hexColor.replace('#', '').toUpperCase();
+      
+      // Liste des couleurs connues (Theme + Standard)
+      // RED
+      if (['FF0000', 'D42828'].includes(color)) return 'Red';
+      // BLUE
+      if (['0000FF', '2867D4'].includes(color)) return 'Blue';
+      // GREEN
+      if (['00FF00', '28D42E'].includes(color)) return 'Green';
+      // YELLOW
+      if (['FFFF00', 'D4D100'].includes(color)) return 'Yellow';
+
+      // Fallback: Détection approximative par composante dominante
+      const r = parseInt(color.substr(0, 2), 16);
+      const g = parseInt(color.substr(2, 2), 16);
+      const b = parseInt(color.substr(4, 2), 16);
+
+      if (r > 200 && g > 200 && b < 100) return 'Yellow';
+      if (g > r && g > b) return 'Green';
+      if (b > r && b > g) return 'Blue';
+      if (r > g && r > b) return 'Red';
+
+      return null;
+  }
+
+  function getDimClass(team) {
+      if (!activeTeam.value) return '';
+      return activeTeam.value !== team ? 'dimmed-score' : '';
+  }
+
+  function getFlashClass(team) {
+      return flashingTeam.value === team ? 'flashing-glow' : '';
+  }
+
+  function getMainShadow() {
+      if (!activeTeam.value) return {};
+      
+      let shadowColor = '';
+      switch (activeTeam.value) {
+          case 'Blue': shadowColor = 'rgb(40, 103, 212)'; break;
+          case 'Red': shadowColor = 'rgb(212, 40, 40)'; break;
+          case 'Green': shadowColor = 'rgb(40, 212, 46)'; break;
+          case 'Yellow': shadowColor = 'rgb(212, 209, 0)'; break;
+          default: return {};
+      }
+      return { boxShadow: `0px 3px 45px ${shadowColor}` };
+  }
 </script>
 
 <style scoped>
@@ -146,7 +230,7 @@
     background-color: rgb(40, 40, 40);
     padding: 25px 30px;
     border-radius: 0px 0px 30px 30px;
-    box-shadow: 0px 3px 45px rgb(45, 115, 166);
+    box-shadow: 0px 3px 45px rgb(141, 141, 141);
   }
   .score_div {
     height: 100px;
@@ -214,4 +298,22 @@
   .score-fade-leave-to {
     opacity: 0;
   }
+
+  .dimmed-score {
+      opacity: 0.3;
+      transform: scale(0.95);
+      filter: grayscale(100%);
+      transition: all 0.3s ease;
+  }
+
+  @keyframes flash-glow {
+      0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
+      10% { box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.9); }
+  }
+
+  .flashing-glow {
+      animation: flash-glow 0.5s ease-in-out infinite;
+      z-index: 10;
+      position: relative;
+  }
 </style>