Mise à jour des paquets

VApp/package.json

@@ -12,27 +12,27 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@mdi/font": "latest",
-    "@videojs-player/vue": "latest",
-    "express": "latest",
-    "mqtt": "latest",
-    "ping": "latest",
-    "roboto-fontface": "latest",
-    "video.js": "latest",
-    "vue": "latest",
-    "vue-router": "latest",
-    "vuex": "latest"
+    "@mdi/font": "^7.4.47",
+    "@videojs-player/vue": "^1.0.0",
+    "express": "^5.0.0",
+    "mqtt": "^5.3.5",
+    "ping": "^0.4.4",
+    "roboto-fontface": "^0.10.0",
+    "video.js": "^8.22.0",
+    "vue": "^3.4.19",
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "latest",
-    "@vitejs/plugin-vue": "latest",
-    "@vue/eslint-config-prettier": "latest",
-    "concurrently": "latest",
-    "eslint": "latest",
-    "eslint-plugin-vue": "latest",
-    "prettier": "latest",
-    "unplugin-fonts": "latest",
-    "vite": "latest",
-    "vite-plugin-vuetify": "latest"
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.49.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "prettier": "^3.0.3",
+    "unplugin-fonts": "^1.1.1",
+    "vite": "^5.1.6",
+    "vite-plugin-vuetify": "^2.0.1"
   }
 }

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>

VApp/src/components/CardButtonScore.vue

@@ -4,87 +4,54 @@
       <v-icon left class="white--text pr-5 pl-2" size="40">mdi-calculator-variant</v-icon>
       Gestion des scores
     </v-card-title>
-    <v-container class="text-center">
-      <v-row justify="center">
-        <v-col cols="4" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn red xs12 sm6 md3" topic="game/score/update" message='{"Red": "-2"}'>
-            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
-          </mqtt-button>
+    <v-container class="text-center pt-8">
+      <!-- Team Lines -->
+      <v-row v-for="(team, color) in scores" :key="color" align="center" justify="center" class="mb-2">
+         <!-- Icon/Label -->
+         <v-col cols="2" class="d-flex justify-center">
+            <v-icon :color="getTeamColor(color)" size="40">mdi-circle</v-icon> 
          </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"}'>
-            <v-icon left size="40">mdi-minus-box</v-icon>
-          </mqtt-button>
+         
+         <!-- Total Score Input -->
+         <v-col cols="5">
+            <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 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"}'>
-            <v-icon left size="40">mdi-plus-box</v-icon>
-          </mqtt-button>
-        </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": "+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 blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-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 blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-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 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>
+
+         <!-- Round Score Input -->
+         <v-col cols="5">
+            <v-text-field
+              v-model.number="team.Round"
+              label="Manche"
+              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, 'Round', -1)"
+              @click:append-inner="changeScore(color, 'Round', 1)"
+              @update:model-value="updateScore(color)"
+              class="centered-input"
+              readonly
+            ></v-text-field>
          </v-col>
       </v-row>
     </v-container>
@@ -92,23 +59,97 @@
 </template>
 
 <script setup>
-  import MqttButton from './MqttButton.vue';
-  import { ref } from 'vue';
+  import { ref, reactive, onMounted } 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);
 
-  // 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() {
     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>
 
 <style>
   .card--reduced {
-    height: 56px; /* Réglez la hauteur réduite selon vos besoins */
-    width: 170px;
+    height: 56px;
+    width: 60%; /* Adjusted width for layout */
     overflow: hidden;
     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>

VApp/src/components/CardScore.vue

@@ -53,14 +53,14 @@
           <div>             
             <v-label class="labelRoundScore-style pt-3">Manche</v-label>             
             <div>             
-              <v-label class="labelRoundScore-style">{{ scores.OrangeRoundScore }}</v-label>             
+              <v-label class="labelRoundScore-style">{{ scores.YellowRoundScore }}</v-label>             
             </div>         
           </div>         
           <v-divider color="background"/>         
           <div>             
             <v-label class="labelTotalScore-style pt-3">Total</v-label>             
             <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>         
         </v-col>     
@@ -103,11 +103,11 @@ const client = mqtt.connect(mqttBrokerUrl)
 const scores = reactive({
   RedTotalScore: 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
   RedRoundScore: 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
 });
 // Fonction pour traiter chaque message reçu et réinitialiser le timeout

VApp/src/components/HidingOverlay.vue

@@ -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>

VApp/src/components/MQTTDebugConsole.vue

@@ -1,6 +1,6 @@
 <template>
   <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-icon left class="pr-5 pl-2" size="40">mdi-console-line</v-icon>
         Console MQTT
@@ -27,7 +27,7 @@
         </div>
       </div>
 
-      <v-container class="text-center">
+      <v-container>
         <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-topic-message-title">Topic :&nbsp;</v-label>

VApp/src/components/MQTTDebugPublish.vue

@@ -1,18 +1,18 @@
 <template>
   <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-icon left class="pr-5 pl-2" size="30">mdi-send</v-icon>
         Publier un message
       </v-card-title>
 
       <div class="input-style">
-        <v-select
+        <v-text-field
           label="Topic"
           v-model="selectedTopic"
           :items="topics"
           prepend-icon="mdi-target"
-        ></v-select>
+        ></v-text-field>
 
         <v-text-field
           label="Message"
@@ -30,6 +30,42 @@
         Déblocage<br>Buzzer
       </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
         class="v-btn-style-validate"
         height="50"
@@ -53,7 +89,8 @@ const topics = [
   'display/control',
   'sound/playsound',
   'game/score/update',
-  'game/score'
+  'game/score',
+  '/display/media'
 ];
 
 // Methods
@@ -62,7 +99,18 @@ const publisCustomMessage = () => {
 };
 
 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>
 

VApp/src/components/VideoPlayer.vue

@@ -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>

VApp/src/variables.js

@@ -5,18 +5,18 @@ export default {
   RedTotalScore: 11,
   BlueTotalScore: 22,
   GreenTotalScore: 33,
-  OrangeTotalScore: 44,
+  YellowTotalScore: 44,
 
   // Score de la manche courante
   RedRoundScore: 1,
   BlueRoundScore: 2,
-  OrangeRoundScore: 3,
+  YellowRoundScore: 3,
   GreenRoundScore: 4,
 
   //Etat des buzzer
   BuzzerRed: false,
   BuzzerBlue: false,
-  BuzzerOrange: false,
+  BuzzerYellow: false,
   BuzzerGreen: false,
 
   // Ajoutez d'autres variables globales ici

VApp/src/views/GameControl.vue

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

VApp/src/views/GameDisplay.vue

@@ -2,113 +2,113 @@
   <div class="main_div">
     <div>
       <v-container class="score_div_main">
-        <v-container class="score_div color-blue"></v-container>
-        <v-container class="score_div color-red"></v-container>
+        <v-container class="score_div color-blue">
+          <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">
           <span class="v-label-time">00:00</span>
         </v-container>
-        <v-container class="score_div color-green"></v-container>
-        <v-container class="score_div color-yellow"></v-container>
+        <v-container class="score_div color-green">
+          <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>
     </div>
 
     <div>
-      <v-container v-show="gamehiding === true" class="v-container-game-hided">
-        <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>
+      <HidingOverlay/>
+      <VideoPlayer/>
     </div>
   </div>
 </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';
+  import VideoPlayer from "@/components/VideoPlayer.vue"
+  import HidingOverlay from "@/components/HidingOverlay.vue"
+  import { onMounted, reactive } from 'vue';
+  import mqtt from 'mqtt'
+  import config from '@/config.js'
 
-// --- Déclarations
-const player = ref(null);
-let gamehiding = ref(true)
+  const mqttBrokerUrl = config.mqttBrokerUrl
+  const client = mqtt.connect(mqttBrokerUrl)
 
-const videoOptions = {
-  autoplay: false,
-  controls: false,
-  preload: 'auto',
-  fluid: true,
-  loop: true,
-  volume: 0,
-  sources: [{ src: Mysteryland_h264, type: 'video/mp4' }],
-};
-
-// --- Fonctions
-const playVideo = () => {
-  if (player.value) {
-    console.log("▶️ Lecture de la vidéo !");
-    player.value.play().catch((error) => {
-      console.error("Erreur de lecture :", error);
+  const scores = reactive({
+    RedTotalScore: 0,
+    BlueTotalScore: 0,
+    YellowTotalScore: 0,
+    GreenTotalScore: 0,
+    RedRoundScore: 0,
+    BlueRoundScore: 0,
+    YellowRoundScore: 0,
+    GreenRoundScore: 0,
   });
-  } 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é !");
+  function handleMessage(topic, message) {
+    let parsedMessage;
+    try {
+      parsedMessage = JSON.parse(message);
+    } catch (e) {
+      console.error("Erreur d'analyse JSON:", e);
+      return;
     }
-};
 
-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);
-    }
-  }
-};
+    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())
+    })
+  }
 
-// --- Lifecycle
   onMounted(() => {
-  player.value = videojs(
-    document.querySelector('.video-js'),
-    videoOptions,
-    () => {
-      console.log('🎥 Video player ready');
-    }
-  );
-
-  subscribeToTopic('#', (topic, message) => {
+    subscribeToTopic('game/score', (topic, message) => {
       handleMessage(topic, message);
     });
   });
-
-onBeforeUnmount(() => {
-  if (player.value) {
-    player.value.dispose();
-  }
-});
 </script>
 
 <style scoped>
@@ -122,15 +122,18 @@ onBeforeUnmount(() => {
     display: flex;
     justify-content: center;
     gap: 5px;
-    background-color: rgb(80, 80, 80);
+    background-color: rgb(40, 40, 40);
     padding: 25px 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 {
     height: 100px;
     width: 170px;
     text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
   .color-blue {
     background-color: rgb(var(--v-theme-BlueBuzzer), 1);
@@ -158,31 +161,29 @@ onBeforeUnmount(() => {
     font-size: 49px;
     font-family: 'Bahnschrift';
   }
-  .player_video_div {
-    margin-top: 40px;
-    width: calc(100vw - 20%);
-    height: calc(100vh - 20%);
-    border-radius: 20px !important;
+  .v-label-score {
+    color: white;
+    font-size: 40px;
+    font-family: 'Bahnschrift';
+    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;
 
-  }
-  .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;
+  .score-fade-enter-from,
+  .score-fade-leave-to {
+    opacity: 0;
   }
 </style>

VNode/services/buzzer/buzzer-manager.js

@@ -2,7 +2,7 @@
 const mqtt = require('mqtt');
 
 // MQTT broker configuration
-const brokerUrl = 'mqtt://localhost'; // Broker URL (change if needed)
+const brokerUrl = 'mqtt://192.168.1.178'; // Broker URL (change if needed)
 const clientId = 'buzzer_manager';
 const options = {
     clientId,
@@ -64,8 +64,7 @@ function sendTiltStatus(action, buzzerId) {
     client.publish('vulture/buzzer/status', JSON.stringify({
         status: "tilt_update",
         tilt_buzzers: tiltList,
-        message: `Buzzer ID ${buzzerId} ${action} to tilt mode`,
-        timestamp: new Date().toISOString()
+        message: `Buzzer ID ${buzzerId} ${action} to 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",
             action: status,
             buzzer_id: buzzer_id,
-            message: `Tilt command '${status}' received for buzzer ID ${buzzer_id}`,
-            timestamp: new Date().toISOString()
+            message: `Tilt command '${status}' received for buzzer ID ${buzzer_id}`
         }));
 
         // 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({
             status: "received",
             buzzer_id: buzzerId,
-            message: `Buzzer ID ${buzzerId} received (Color: ${color})`,
-            timestamp: new Date().toISOString()
+            message: `Buzzer ID ${buzzerId} received (Color: ${color})`
         }));
 
         // 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({
                 status: "tilt_ignored",
                 buzzer_id: buzzerId,
-                message: `Buzzer ID ${buzzerId} is in tilt mode and ignored.`,
-                timestamp: new Date().toISOString()
+                message: `Buzzer ID ${buzzerId} is in tilt`
             }));
             return;
         }
@@ -154,8 +150,7 @@ client.on('message', (topic, message) => {
             buzzer_id: buzzerId,
             color: color,
             status: buzzerActive ? "blocked" : "free",
-            message: `Activity detected on buzzer ID ${buzzerId} (Color: ${color})`,
-            timestamp: new Date().toISOString()
+            message: `Activity detected on buzzer ID ${buzzerId} (Color: ${color})`
         }));
 
         if (!buzzerActive) {
@@ -176,8 +171,7 @@ client.on('message', (topic, message) => {
                 status: "blocked",
                 buzzer_id: buzzerId,
                 color: color,
-                message: `Buzzer activated by ID ${buzzerId} (Color: ${color})`,
-                timestamp: new Date().toISOString()
+                message: `Buzzer activated by ID ${buzzerId} (Color: ${color})`
             }));
 
             console.log(`[INFO] Buzzers blocked and notification sent`);
@@ -188,19 +182,12 @@ client.on('message', (topic, message) => {
     if (topic === 'vulture/buzzer/unlock') {
         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
         client.publish('vulture/light/change', JSON.stringify({
             color: "#FFFFFF",
             effect: 'rainbow'
         }));
 
-
         // Reset buzzer manager state
         buzzerActive = false;
         buzzerThatPressed = null;
@@ -208,8 +195,7 @@ client.on('message', (topic, message) => {
         // Notify all components of buzzer unlock
         client.publish('vulture/buzzer/status', JSON.stringify({
             status: "unblocked",
-            message: "Buzzers unblocked and ready for activation.",
-            timestamp: new Date().toISOString()
+            message: "Buzzers unblocked and ready for activation."
         }));
 
         console.log('[INFO] Buzzers unblocked and notification sent');

VNode/services/game/score-manager.js

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