(update) mise à jour des commentaires en francais

(new) track the new quizstore.js for manage the current Vulture Session
(update) track the time in the new real timer for the remaining time and new uix placements
2026-02-03 19:59:02 +01:00 · 2026-02-01 16:20:49 +01:00 · 2026-02-01 16:19:39 +01:00 · 2026-02-01 16:18:59 +01:00 · 2026-02-01 16:18:18 +01:00 · 2026-02-01 16:17:10 +01:00
49 changed files with 2074 additions and 581 deletions
--- a/VApp/index.html
+++ b/VApp/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
  <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Brain Blast</title>
+    <script src="/config.js"></script>
  </head>
  <body> <div id="app"></div> <script type="module" src="/src/main.js"></script>
  </body>
--- a/VApp/package.json
+++ b/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"
  }
 }
--- a/VApp/public/config.js
+++ b/VApp/public/config.js
@@ -0,0 +1,7 @@
+window.APP_CONFIG = {
+    mqttBrokerUrl: 'ws://192.168.73.252:9001',
+    redBuzzerIP: '192.168.73.40',
+    blueBuzzerIP: '192.168.73.41',
+    orangeBuzzerIP: '192.168.73.42',
+    greenBuzzerIP: '192.168.73.43'
+};
--- a/VApp/src/App.vue
+++ b/VApp/src/App.vue
@@ -1,19 +1,28 @@
 <template>
  <v-app> 
-    <BrainBlastBar v-if="$route.name != 'Game Display (Projection)'" />   
-    <GameStatus v-if="$route.name === 'Game Control (Présentateur)'">
-    </GameStatus> 
+    <VultureBar v-if="showVultureBar" />   
+    <GameStatus v-if="showGameStatus" /> 
    <v-main>   
-      <RouterView /> 
+      <RouterView :key="$route.fullPath" /> 
    </v-main> <!-- <v-footer class="footer" :elevation=12 border><v-row justify="center">© 2024 - ASCO section Fablab</v-row></v-footer> -->
  </v-app>
 </template>

 <script setup>
-
-import BrainBlastBar from '@/components/BrainBlastBar.vue'
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import VultureBar from '@/components/VultureBar.vue'
 import GameStatus from '@/components/GameStatus.vue'

+const route = useRoute();
+
+const showVultureBar = computed(() => {
+  return route.name !== 'Game Display (Projection)' && route.name !== 'Score Display (Projection)';
+});
+
+const showGameStatus = computed(() => {
+  return route.name === 'Game Control (Présentateur)';
+});
 </script>

 <style>
--- a/VApp/src/components/BrainBlastBar.vue
+++ b/VApp/src/components/BrainBlastBar.vue
@@ -1,10 +0,0 @@
-<template>
-  <v-app-bar :collapse="$route.name === 'Game Display (Projection)'" :elevation="5" height="50"> 
-    <RouterMenu /> 
-    <v-app-bar-title v-if="$route.name !== 'Accueil'">Brain Blast</v-app-bar-title>
-  </v-app-bar>
-</template>
-
-<script setup>
-  import RouterMenu from '@/components/RouterMenu.vue'
-</script>
--- a/VApp/src/components/BuzzerValidationDialog.vue
+++ b/VApp/src/components/BuzzerValidationDialog.vue
@@ -0,0 +1,146 @@
+<template>
+  <v-dialog v-model="dialog" persistent max-width="800" height="500" style="background-color: rgba(0, 0, 0, 0.8);">
+    <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%"
+          :style="{ backgroundColor: buzzerColor }"
+          @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);
+
+    // Associe les couleurs hex aux noms d'équipe si besoin, ou utilise directement la couleur
+    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; // Valeur par défaut
+    }
+
+    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') {
+                        // Optionnel : fermer automatiquement si débloqué depuis ailleurs
+                        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));
+        }
+        
+        // Petit délai avant le déblocage pour que la mise à jour du score soit traitée
+        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%; /* S'assure que l'élément occupe toute la hauteur du conteneur si possible, ou une hauteur substantielle */
+    }
+    .validate-btn {
+        color: rgb(var(--v-theme-background),1);
+    }
+    .refuse-btn {
+        background-color: rgb(var(--v-theme-inactiveButton),1);
+        color: rgb(var(--v-theme-background),1);
+    }
+</style>
--- a/VApp/src/components/CardButtonScore.vue
+++ b/VApp/src/components/CardButtonScore.vue
@@ -4,111 +4,163 @@
      <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-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>
-        </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>
-        </v-col>
+    <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>
+         
+         <!-- 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>
+
+         <!-- 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>
  </v-card>
 </template>

 <script setup>
-  import MqttButton from './MqttButton.vue';
-  import { ref } from 'vue';
+  import { ref, reactive, onMounted, onUnmounted } 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);
+  let client = null;
+  
+  onMounted(() => {
+    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);
+            }
+        }
+    });
+  });
+
+  onUnmounted(() => {
+    if (client) {
+      client.end();
+    }
+  });
+
  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>
--- a/VApp/src/components/CardCurrentQuizz.vue
+++ b/VApp/src/components/CardCurrentQuizz.vue
@@ -28,7 +28,12 @@ const quizzList = ref([]);
 // Fonction pour mettre à jour la liste
 const handleMessage = (topic, message) => {
  try {
-    quizzList.value = JSON.parse(message.toString());
+    const parsed = JSON.parse(message.toString());
+    if (Array.isArray(parsed)) {
+      quizzList.value = parsed;
+    } else {
+      console.warn('CardCurrentQuizz: Received non-array data', parsed);
+    }
  } catch (error) {
    console.error('Erreur de parsing JSON:', error);
  }
--- a/VApp/src/components/CardScore.vue
+++ b/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
--- a/VApp/src/components/CardSolution.vue
+++ b/VApp/src/components/CardSolution.vue
@@ -3,14 +3,36 @@
 		<v-card-title class="card__title primary" @click="toggleCardSize">   
 		<v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>   
 		Solution </v-card-title> 
-		<v-container class="text-center">   
-			<v-row justify="center">     
-				<v-container class="text-center">       <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->       
-					<v-img width="450" src="@/assets/copilot-solution-FULL-HD.jpg" style="margin: 0 auto;">
-					</v-img>     
-				</v-container>   
-			</v-row> 
+		<v-container class="text-center" v-if="currentQuestion">
+            <div class="text-h6 mb-2">Question {{ currentQuestionIndex + 1 }}</div>
+            <div class="text-body-1 font-weight-bold mb-4">{{ currentQuestion.QuestionText }}</div>
+            
+            <v-divider class="mb-4"></v-divider>
+            
+            <v-btn 
+                :color="showSolution ? 'red' : 'green'" 
+                class="mb-4"
+                @click="showSolution = !showSolution"
+            >
+                {{ showSolution ? 'Masquer Solution' : 'Voir Solution' }}
+            </v-btn>
+
+            <v-slide-y-transition>
+                <div v-if="showSolution" class="solution-block">
+                    <div class="text-h5 success--text mb-2">{{ currentQuestion.MasterData.CorrectAnswer }}</div>
+                    <div class="text-body-2 grey--text text--lighten-1 mb-2">
+                        <v-icon small>mdi-information</v-icon> {{ currentQuestion.MasterData.MasterNotes }}
+                    </div>
+                     <div class="text-body-2 info--text">
+                        <v-icon small>mdi-help-circle</v-icon> {{ currentQuestion.MasterData.Help }}
+                    </div>
+                </div>
+            </v-slide-y-transition>
+
 		</v-container>
+        <v-container v-else class="text-center">
+            <div class="text-caption">Aucun quiz chargé ou fin du quiz.</div>
+        </v-container>
 	</v-card>
 </template>
 <style>
@@ -34,13 +56,18 @@
 </style>

 <script setup>
-	import { ref } from 'vue';
+	import { ref, computed } from 'vue';
+    import quizStore from '@/store/quizStore';

 	// Variable pour contrôler l'état de la carte
 	const isCardReduced = ref(false);
+    const showSolution = ref(false);

 	// Méthode pour basculer l'état de la carte
 	function toggleCardSize() { 
 		isCardReduced.value = !isCardReduced.value;
 	}
+
+    const currentQuestion = quizStore.getters.currentQuestion;
+    const currentQuestionIndex = quizStore.getters.currentQuestionIndex;
 </script>
--- a/VApp/src/components/CardTimer.vue
+++ b/VApp/src/components/CardTimer.vue
@@ -1,85 +1,39 @@
 <template> 
    <div class="container">   
        <div class="timer">     
-            <v-label color="primary" class="labelTime-style" >{{ formatTime }}</v-label> 
+            <v-label class="labelTime-style" >{{ formatTime }}</v-label> 
        </div>
-        <v-row no-gutters justify="space-around" >     
-            <v-btn class="buttons" color="primary" icon="mdi-play" @click="startTimer"></v-btn>     
-            <v-btn color="primary"  icon="mdi-pause" @click="pauseTimer"></v-btn>     
-            <v-btn color="primary" icon="mdi-restart" @click="resetTimer"></v-btn>   
-        </v-row> 
    </div>
 </template>
  
 <script setup>
-  import { ref, computed, onBeforeUnmount } from 'vue';
+  import { computed, watch } from 'vue';
+  import quizStore from '@/store/quizStore';
  
-  const timerActive = ref(false);
-  const startTime = ref(null);
-  const currentTime = ref(null);
-  const elapsedTime = ref(0);
+  const timer = quizStore.getters.timer;
+  
+  watch(timer, (val) => {
+    console.log('CardTimer: timer value changed', val);
+  }, { immediate: true });
  
  const formatTime = computed(() => { 
-    let seconds = Math.floor(elapsedTime.value / 1000); 
-    let minutes = Math.floor(seconds / 60); 
-    let hours = Math.floor(minutes / 60);
-    seconds = seconds % 60; minutes = minutes % 60;
-   return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
-    });
+    const seconds = timer.value % 60;
+    const minutes = Math.floor(timer.value / 60);
+    const hours = Math.floor(minutes / 60);
+    return `${pad(minutes % 60)}:${pad(seconds)}`;
+  });

-    const pad = (number) => { 
-        return (number < 10 ? "0" : "") + number;
-    };
-
-    const startTimer = () => { 
-        if (!timerActive.value) {   
-            timerActive.value = true;   
-            startTime.value = Date.now() - elapsedTime.value;   
-            updateTimer(); }
-    };
-
-    const pauseTimer = () => { 
-        if (timerActive.value) {   
-            timerActive.value = false;   
-            clearInterval(currentTime.value); }
-    };
-
-    const resetTimer = () => { 
-        elapsedTime.value = 0; 
-        timerActive.value = false; 
-        clearInterval(currentTime.value);
-    };
-
-    const updateTimer = () => { 
-        currentTime.value = setInterval(() => {elapsedTime.value = Date.now() - startTime.value; }, 1000);
-    };
-
-    onBeforeUnmount(() => { clearInterval(currentTime.value);
-    });
-</script> 
-<script> 
-	const startTimer = () => { 
-		if (!timerActive.value) {     
-			timerActive.value = true;     
-			startTime.value = Date.now() - elapsedTime.value;     
-			updateTimer(); } };
-	const pauseTimer = () => { 
-		if (timerActive.value) {     
-			timerActive.value = false;     
-			clearInterval(currentTime.value); } };
-	const resetTimer = () => { 
-		elapsedTime.value = 0;
-		timerActive.value = false; 
-		clearInterval(currentTime.value); };
-	export { startTimer, pauseTimer, resetTimer };
+  const pad = (number) => { 
+      return (number < 10 ? "0" : "") + number;
+  };
 </script>

 <style>
 	.container { 
 		text-align: center; 
-		margin-top: auto; /* Place le container en bas de son parent */ 
-		margin-bottom: 1px; /* Marge en bas pour un espacement */ 
-		position: fixed; /* Le positionne de manière fixe */ 
+		margin-top: auto;
+		margin-bottom: 1px;
+		position: fixed;
 		left: 0; 
 		right: 0; 
 		bottom: 0; 
@@ -89,12 +43,9 @@
 		margin-bottom: 15px;
  }
  .labelTime-style { 
-		font-size: 30px !important; 
+		font-size: 40px !important; 
 		font-weight: 500; 
 		color: #d42828 !important; 
 		opacity: 90% !important;
  }
-  .buttons{ 
-		background-color: rgb(255, 255, 255);
-  }
 </style>
--- a/VApp/src/components/GameMedia.vue
+++ b/VApp/src/components/GameMedia.vue
@@ -0,0 +1,265 @@
+<template>
+    <v-container v-show="gamehiding === false" class="player_video_div">
+        <div v-if="currentQuestion" style="width: 100%; height: 100%;">
+            
+            <!-- LECTEUR VIDÉO -->
+            <div v-show="currentQuestion.Type === 'video'" style="width: 100%; height: 100%;">
+                <video ref="videoPlayer" class="video-js player_video" controls preload="auto">
+                </video>
+            </div>
+
+            <!-- AFFICHAGE IMAGE -->
+            <div v-if="currentQuestion.Type === 'picture'" style="width: 100%; height: 100%;">
+                <v-img 
+                    :src="getMediaUrl(currentQuestion.MediaUrl)" 
+                    :key="currentQuestion.QuestionId"
+                    class="player_video"
+                ></v-img>
+            </div>
+
+            <!-- LECTEUR AUDIO -->
+             <div v-if="currentQuestion.Type === 'audio'" class="audio-container player_video">
+                 <div class="audio-visualizer">
+                    <v-icon size="150" color="white" class="mb-4">mdi-music-circle</v-icon>
+                    <span class="text-h2 white--text">ÉCOUTEZ</span>
+                 </div>
+                 <audio ref="audioPlayer" :src="getMediaUrl(currentQuestion.MediaUrl)" class="custom-audio"></audio>
+             </div>
+
+        </div>
+    </v-container>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import quizStore from '@/store/quizStore';
+import videojs from 'video.js';
+import 'video.js/dist/video-js.css';
+import { subscribeToTopic, publishMessage } from '@/services/mqttService';
+
+// Accès au store
+const currentQuestion = quizStore.getters.currentQuestion;
+
+// Références du lecteur vidéo
+const videoPlayer = ref(null);
+let vjsPlayer = null;
+
+// Références du lecteur audio
+const audioPlayer = ref(null);
+
+let gamehiding = ref(true);
+
+// Méthodes
+function getMediaUrl(relativePath) {
+    if (!relativePath) return '';
+    const cleanPath = relativePath.startsWith('/') ? relativePath.substring(1) : relativePath;
+    const url = new URL(`../quizz/vulture-session-2026-01/${cleanPath}`, import.meta.url).href;
+    console.log('GameMedia: Resolved URL:', { relativePath, url });
+    return url;
+}
+
+function initVideoPlayer() {
+    if (vjsPlayer) return; // Déjà initialisé
+    if (!videoPlayer.value) return; // DOM pas prêt
+
+    console.log('GameMedia: Initializing VideoJS');
+    vjsPlayer = videojs(videoPlayer.value, {
+        autoplay: false,
+        controls: false,
+        preload: 'auto',
+        fluid: true,
+        loop: false,
+        volume: 0,
+    }, () => {
+        console.log('GameMedia: VideoJS Ready');
+        // Si la question courante est une vidéo, la charger
+        if (currentQuestion.value && currentQuestion.value.Type === 'video') {
+             updateVideoSource();
+        }
+        
+        // Masquer automatiquement à la fin de la vidéo
+        vjsPlayer.on('ended', () => {
+            console.log('GameMedia: Video ended, hiding');
+            gamehiding.value = true;
+            publishMessage('/display/control', 'hide');
+        });
+    });
+}
+
+function updateVideoSource() {
+    if (!vjsPlayer || !currentQuestion.value) return;
+    
+    const url = getMediaUrl(currentQuestion.value.MediaUrl);
+    console.log('GameMedia: Loading Video Source', url);
+    vjsPlayer.src({ type: 'video/mp4', src: url });
+    
+    // L'autoplay est géré par la commande MQTT 'play' maintenant
+    // if (currentQuestion.value.Settings?.AutoPlay) {
+    //      vjsPlayer.play().catch(e => console.log('Autoplay blocked', e));
+    // }
+}
+
+// Observateurs
+watch(currentQuestion, async (newVal, oldVal) => {
+    console.log('GameMedia: Question Changed', newVal);
+    
+    // Arrêter d'abord tous les médias
+    if (vjsPlayer) {
+        vjsPlayer.pause();
+    }
+    if (audioPlayer.value) {
+        audioPlayer.value.pause();
+    }
+    
+    // Rester masqué au changement de question jusqu'à la lecture
+    gamehiding.value = true;
+    publishMessage('/display/control', 'hide');
+    if (!newVal) return;
+
+    await nextTick(); // Attendre la mise à jour du DOM (v-if)
+
+    if (newVal.Type === 'video') {
+         if (!vjsPlayer) {
+             initVideoPlayer();
+         } else {
+             updateVideoSource();
+         }
+    } else if (newVal.Type === 'audio') {
+        // Chargement audio (pas d'autoplay)
+         setTimeout(() => {
+             if(audioPlayer.value){
+                  console.log('GameMedia: Loading Audio');
+                  audioPlayer.value.load();
+                  
+                  // Masquer automatiquement à la fin de l'audio
+                  audioPlayer.value.onended = () => {
+                      console.log('GameMedia: Audio ended, hiding');
+                      gamehiding.value = true;
+                      publishMessage('/display/control', 'hide');
+                  };
+             }
+         }, 100);
+    }
+    // Pour le type 'picture', rien à faire, vidéo/audio déjà en pause
+}, { immediate: true });
+
+// Cycle de vie
+onMounted(async () => {
+    await nextTick();
+    if (currentQuestion.value?.Type === 'video') {
+        initVideoPlayer();
+    }
+
+    subscribeToTopic('#', (topic, message) => {
+        handleMessage(topic, message);
+    });
+});
+
+const handleMessage = (topic, message) => {
+    console.log('GameMedia: Received', topic, message);
+    if (topic === "/display/control") {
+        switch (message) {
+            case "play":
+                gamehiding.value = false;
+                console.log("▶️ GameMedia: Play");
+                // Only play the media relevant to this question type
+                if (currentQuestion.value?.Type === 'video' && vjsPlayer) {
+                    vjsPlayer.play().catch(e => console.error("Error playing video:", e));
+                }
+                if (currentQuestion.value?.Type === 'audio' && audioPlayer.value) {
+                    audioPlayer.value.play().catch(e => console.error("Error playing audio:", e));
+                }
+                if (currentQuestion.value?.Type === 'picture') {
+                    // Démarrer le timer si PlayTime est configuré
+                    const playTime = currentQuestion.value.Settings?.PlayTime;
+                    if (playTime && playTime > 0) {
+                        quizStore.actions.startTimer(playTime);
+                    }
+                }
+                break;
+            case "pause":
+                gamehiding.value = true;
+                console.log("⏸️ GameMedia: Pause");
+                quizStore.actions.stopTimer();
+                if (vjsPlayer) {
+                    vjsPlayer.pause();
+                }
+                if (audioPlayer.value) {
+                    audioPlayer.value.pause();
+                }
+                break;
+             case "hide":
+                console.log("🛑 GameMedia: Hide");
+                gamehiding.value = true;
+                quizStore.actions.stopTimer();
+                break;
+        }
+    }
+    // Vérifier le statut du buzzer pour masquer automatiquement au buzz (comme HidingOverlay)
+    // Réplication de VideoPlayer qui n'avait que /display/control dans l'extrait fourni.
+    // Comportement optionnel selon les événements du système.
+    if (topic === 'vulture/buzzer/status') {
+         try {
+             const data = JSON.parse(message);
+             if (data.status === 'blocked') {
+                 console.log("GameMedia: Buzzer Blocked -> Hiding");
+                 gamehiding.value = true;
+                 if (vjsPlayer) vjsPlayer.pause();
+                 if (audioPlayer.value) audioPlayer.value.pause();
+             }
+         } catch (e) { console.error('JSON Error', e); }
+    }
+};
+
+onBeforeUnmount(() => {
+    if (vjsPlayer) {
+        vjsPlayer.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;
+  }
+  
+  /* Styles additionnels pour les éléments Audio/Custom pour s'adapter au thème */
+  .audio-container {
+      display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: linear-gradient(45deg, #1a1a1a, #2c3e50);
+  }
+  .audio-visualizer {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        animation: pulse 2s infinite;
+    }
+    .text-h2 {
+        font-family: 'Bahnschrift', sans-serif !important;
+    }
+    .custom-audio {
+        margin-top: 30px;
+        width: 80%;
+    }
+    @keyframes pulse {
+        0% { transform: scale(1); opacity: 0.8; }
+        50% { transform: scale(1.05); opacity: 1; }
+        100% { transform: scale(1); opacity: 0.8; }
+    }
+</style>
--- a/VApp/src/components/HidingOverlay.vue
+++ b/VApp/src/components/HidingOverlay.vue
@@ -0,0 +1,61 @@
+<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;
+        case "hide":
+          gamehiding.value = true;
+          break;
+        default:
+          console.warn("Commande non reconnue :", message);
+          gamehiding.value = true;
+      }
+    }
+  };
+
+  // --- Lifecycle
+  onMounted(() => {
+    subscribeToTopic('#', (topic, message) => {
+      handleMessage(topic, message);
+      
+      if (topic === 'vulture/buzzer/status') {
+          try {
+              const data = JSON.parse(message);
+              if (data.status === 'blocked') {
+                  gamehiding.value = true;
+              }
+          } catch (e) {
+              console.error('HidingOverlay JSON error', e);
+          }
+      }
+    });
+  });
+
+</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>
--- a/VApp/src/components/MQTTDebugConsole.vue
+++ b/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>
--- a/VApp/src/components/MQTTDebugPublish.vue
+++ b/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>

--- a/VApp/src/components/VideoPlayer.vue
+++ b/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>
--- a/VApp/src/components/VultureBar.vue
+++ b/VApp/src/components/VultureBar.vue
@@ -0,0 +1,10 @@
+<template>
+  <v-app-bar :elevation="5" height="50"> 
+    <RouterMenu /> 
+    <v-app-bar-title v-if="$route.name !== 'Accueil'">Vulture</v-app-bar-title>
+  </v-app-bar>
+</template>
+
+<script setup>
+  import RouterMenu from '@/components/RouterMenu.vue'
+</script>
--- a/VApp/src/config.js
+++ b/VApp/src/config.js
@@ -1,16 +1,15 @@
-// Fichier vide, regarde config.js.example pour personaliser ce fichier.
-// Note de dev : Normalement ce fichier ne devrait plus avoir de
-// modifications
-
 // config.js
-export default {
-  mqttBrokerUrl: 'ws://192.168.73.252:9001',
+// Reads configuration from window.APP_CONFIG (loaded via public/config.js)
+// This allows runtime configuration changes without rebuilding the app.

-  // Buzzer
+const defaults = {
+  mqttBrokerUrl: 'ws://192.168.73.252:9001',
  redBuzzerIP: '192.168.73.40',
  blueBuzzerIP: '192.168.73.41',
  orangeBuzzerIP: '192.168.73.42',
  greenBuzzerIP: '192.168.73.43'
-
-  // Light
 };
+
+const config = window.APP_CONFIG || defaults;
+
+export default config;
--- a/VApp/src/plugins/router.js
+++ b/VApp/src/plugins/router.js
@@ -3,30 +3,36 @@ import HomeView from '../views/HomeView.vue'

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [ {   
-    path: '/',   
-    name: 'Accueil',   
-    component: HomeView 
-  }, 
-  {   
-    path: '/game/control',  
-    name: 'Game Control (Présentateur)',   
-    component: () => import('@/views/GameControl.vue') 
-  }, 
-  {   
-    path: '/game/display',   
-    name: 'Game Display (Projection)',   
-    component: () => import('@/views/GameDisplay.vue') 
-  }, 
-  {   
-    path: '/mqtt-debugger',   
-    name: 'Debugger MQTT',   
-    component: () => import('@/views/MQTTDebugView.vue') 
-  }, 
-  {   
-    path: '/settings',   
-    name: 'Paramètres',   
-    component: () => import('@/views/SettingsView.vue') }
+  routes: [{
+    path: '/',
+    name: 'Accueil',
+    component: HomeView
+  },
+  {
+    path: '/game/control',
+    name: 'Game Control (Présentateur)',
+    component: () => import('@/views/GameControl.vue')
+  },
+  {
+    path: '/game/display',
+    name: 'Game Display (Projection)',
+    component: () => import('@/views/GameDisplay.vue')
+  },
+  {
+    path: '/score/display',
+    name: 'Score Display (Projection)',
+    component: () => import('@/views/ScoreDisplay.vue')
+  },
+  {
+    path: '/mqtt-debugger',
+    name: 'Debugger MQTT',
+    component: () => import('@/views/MQTTDebugView.vue')
+  },
+  {
+    path: '/settings',
+    name: 'Paramètres',
+    component: () => import('@/views/SettingsView.vue')
+  }
  ]
 })

--- a/VApp/src/plugins/vuetify.js
+++ b/VApp/src/plugins/vuetify.js
@@ -13,36 +13,38 @@ import { createVuetify } from 'vuetify'

 const CustomThemeDark = {
  dark: true,
-  colors: { 
-    background: '#121212', 
-    primary: '#d42828', 
-    secondary: '#F44336', 
-    accent: '#FFC107', 
-    error: '#e91e1e', 
-    warning: '#FFC107', 
-    info: '#607D8B', 
-    success: '#15B01B', 
-    BlueBuzzer: '#2867d4', 
-    YellowBuzzer: '#D4D100', 
-    RedBuzzer: '#d42828', 
+  colors: {
+    background: '#121212',
+    primary: '#d42828',
+    secondary: '#F44336',
+    accent: '#FFC107',
+    error: '#e91e1e',
+    warning: '#FFC107',
+    info: '#607D8B',
+    inactiveButton: '#707070ff',
+    success: '#15B01B',
+    BlueBuzzer: '#2867d4',
+    YellowBuzzer: '#D4D100',
+    RedBuzzer: '#d42828',
    GreenBuzzer: '#28d42e',
    DisconnectedBuzzer: '#595959',
  }
 }
 const CustomThemeLight = {
  dark: false,
-  colors: { 
-    background: '#ffffff', 
-    primary: '#d42828', 
-    secondary: '#F44336', 
-    accent: '#FFC107', 
-    error: '#e91e1e', 
-    warning: '#FFC107', 
-    info: '#607D8B', 
-    success: '#4CAF50', 
-    BlueBuzzer: '#2867d4', 
-    YellowBuzzer: '#D4D100', 
-    RedBuzzer: '#d42828', 
+  colors: {
+    background: '#ffffff',
+    primary: '#d42828',
+    secondary: '#F44336',
+    accent: '#FFC107',
+    error: '#e91e1e',
+    warning: '#FFC107',
+    info: '#607D8B',
+    inactiveButton: '#707070ff',
+    success: '#4CAF50',
+    BlueBuzzer: '#2867d4',
+    YellowBuzzer: '#D4D100',
+    RedBuzzer: '#d42828',
    GreenBuzzer: '#28d42e',
    DisconnectedBuzzer: '#595959',
  }
@@ -50,10 +52,11 @@ const CustomThemeLight = {

 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
-  theme: { 
-    defaultTheme: 'CustomThemeDark', 
-    themes: {   
-      CustomThemeDark,   
-      CustomThemeLight, },
+  theme: {
+    defaultTheme: 'CustomThemeDark',
+    themes: {
+      CustomThemeDark,
+      CustomThemeLight,
+    },
  },
 })
--- a/VApp/src/store/quizStore.js
+++ b/VApp/src/store/quizStore.js
@@ -0,0 +1,166 @@
+import { reactive, computed } from 'vue';
+import mqtt from 'mqtt';
+import config from '@/config.js';
+import sessionConfig from '@/quizz/vulture-session-2026-01/session-configuration.json';
+
+// Reactive state
+const state = reactive({
+    currentQuestionIndex: 0,
+    questions: [],
+    isMediaHidden: true,
+    packTitle: '',
+    timer: 0  // Timer in seconds
+});
+
+// MQTT Client
+let client = null;
+let timerInterval = null;
+let initialized = false;
+
+// Initialize Store
+function init() {
+    if (initialized) {
+        console.log('QuizStore: Already initialized');
+        return;
+    }
+    initialized = true;
+
+    // Load local config immediately
+    state.questions = sessionConfig.Questions || [];
+    state.packTitle = sessionConfig.PackTitle || '';
+
+    // Connect MQTT
+    client = mqtt.connect(config.mqttBrokerUrl);
+
+    client.on('connect', () => {
+        console.log('QuizStore: MQTT Connected');
+        client.subscribe('game/quiz/control');
+        client.subscribe('/display/control');
+    });
+
+    client.on('message', (topic, message) => {
+        const msgStr = message.toString();
+        console.log('QuizStore: MQTT Message Received', topic, msgStr);
+        if (topic === 'game/quiz/control') {
+            try {
+                const payload = JSON.parse(msgStr);
+                handleRemoteCommand(payload);
+            } catch (e) {
+                console.error('QuizStore: JSON Parse Error', e);
+            }
+        } else if (topic === '/display/control') {
+            // Handle raw string commands from MqttButtons
+            if (msgStr === 'next') {
+                _nextQuestion(true);
+            } else if (msgStr === 'previous') {
+                _prevQuestion(true);
+            } else if (msgStr === 'play') {
+                // Start timer for picture questions
+                const currentQ = state.questions[state.currentQuestionIndex];
+                if (currentQ?.Type === 'picture') {
+                    const playTime = currentQ.Settings?.PlayTime;
+                    if (playTime && playTime > 0) {
+                        console.log('QuizStore: Starting timer for picture', playTime);
+                        actions.startTimer(playTime);
+                    }
+                }
+            } else if (msgStr === 'pause') {
+                stopTimer();
+            }
+        }
+    });
+}
+
+function handleRemoteCommand(cmd) {
+    if (cmd.action === 'next') {
+        _nextQuestion(false);
+    } else if (cmd.action === 'prev') {
+        _prevQuestion(false);
+    } else if (cmd.action === 'setIndex') {
+        state.currentQuestionIndex = cmd.index;
+    }
+}
+
+// Internal actions (boolean publish determines if we send MQTT)
+function _nextQuestion(publish = true) {
+    if (state.currentQuestionIndex < state.questions.length - 1) {
+        state.currentQuestionIndex++;
+        if (publish && client) {
+            client.publish('game/quiz/control', JSON.stringify({ action: 'setIndex', index: state.currentQuestionIndex }));
+        }
+    }
+}
+
+function _prevQuestion(publish = true) {
+    if (state.currentQuestionIndex > 0) {
+        state.currentQuestionIndex--;
+        if (publish && client) {
+            client.publish('game/quiz/control', JSON.stringify({ action: 'setIndex', index: state.currentQuestionIndex }));
+        }
+    }
+}
+
+// Public Actions
+const actions = {
+    init,
+    nextQuestion: () => _nextQuestion(true),
+    prevQuestion: () => _prevQuestion(true),
+    setQuestion: (index) => {
+        if (index >= 0 && index < state.questions.length) {
+            state.currentQuestionIndex = index;
+            if (client) {
+                client.publish('game/quiz/control', JSON.stringify({ action: 'setIndex', index: index }));
+            }
+        }
+    },
+    startTimer: (seconds) => {
+        stopTimer();
+        state.timer = seconds;
+        publishTimer();
+        timerInterval = setInterval(() => {
+            if (state.timer > 0) {
+                state.timer--;
+                publishTimer();
+            } else {
+                stopTimer();
+                // Auto-hide by publishing pause
+                if (client) {
+                    client.publish('/display/control', 'pause');
+                }
+            }
+        }, 1000);
+    },
+    stopTimer
+};
+
+function stopTimer() {
+    if (timerInterval) {
+        clearInterval(timerInterval);
+        timerInterval = null;
+    }
+    state.timer = 0;
+    publishTimer();
+}
+
+function publishTimer() {
+    if (client) {
+        client.publish('game/timer', JSON.stringify({ time: state.timer }));
+    }
+}
+
+// Getters
+const getters = {
+    currentQuestion: computed(() => state.questions[state.currentQuestionIndex]),
+    isFirstQuestion: computed(() => state.currentQuestionIndex === 0),
+    isLastQuestion: computed(() => state.currentQuestionIndex === state.questions.length - 1),
+    totalQuestions: computed(() => state.questions.length),
+    packTitle: computed(() => state.packTitle),
+    currentQuestionIndex: computed(() => state.currentQuestionIndex),
+    timer: computed(() => state.timer)
+};
+
+export default {
+    state,
+    actions,
+    getters
+};
--- a/VApp/src/variables.js
+++ b/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
@@ -24,4 +24,4 @@ export default {

 // 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') || '',
-  }; 
+}; 
--- a/VApp/src/views/GameControl.vue
+++ b/VApp/src/views/GameControl.vue
@@ -5,71 +5,78 @@
      <card-control /> 
    </v-col> 
    <v-col class="pl-3">   
-      <card-soundboard /> 
+      <CardButtonScore />  
    </v-col>
  </v-row>
 </v-container>
  <v-row no-gutters class="pr-4 pl-4"> 
    <v-row no-gutters>   
      <v-col class="align-start">     
-        <CardButtonScore />   
+        <card-solution />   
+         
      </v-col>   
      <v-col class="pl-3">     
-        <card-solution />   
      </v-col> 
    </v-row>
  </v-row>
+  <BuzzerValidationDialog />
 </template>

 <script setup>

 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';
+import { onMounted } from 'vue';
+import quizStore from '@/store/quizStore';
+
+onMounted(() => {
+  quizStore.actions.init();
+});

 </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%;
  }
--- a/VApp/src/views/GameDisplay.vue
+++ b/VApp/src/views/GameDisplay.vue
@@ -2,113 +2,133 @@
  <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-white d-flex align-center justify-center">
-          <span class="v-label-time">00:00</span>
+        <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">{{ timerDisplay }}</span>
+        </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 class="score_div color-green"></v-container>
-        <v-container class="score_div color-yellow"></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/>
+      <GameMedia/>
    </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 GameMedia from "@/components/GameMedia.vue"
+  import HidingOverlay from "@/components/HidingOverlay.vue"
+  import { onMounted, reactive } from 'vue';
+  import mqtt from 'mqtt'
+  import config from '@/config.js'
+  import quizStore from '@/store/quizStore';

-// --- 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);
-    });
-  } 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);
+  const scores = reactive({
+    RedTotalScore: 0,
+    BlueTotalScore: 0,
+    YellowTotalScore: 0,
+    GreenTotalScore: 0,
+    RedRoundScore: 0,
+    BlueRoundScore: 0,
+    YellowRoundScore: 0,
+    GreenRoundScore: 0,
  });
-});

-onBeforeUnmount(() => {
-  if (player.value) {
-    player.value.dispose();
+  import { ref } from 'vue';
+  const timerDisplay = ref('00:00');
+
+  function formatTime(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
  }
-});
+
+  function handleMessage(topic, message) {
+    let parsedMessage;
+    try {
+      parsedMessage = JSON.parse(message);
+    } catch (e) {
+      console.error("Erreur d'analyse JSON:", e);
+      return;
+    }
+
+    if (topic === 'game/score' && 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
+    }
+
+    if (topic === 'game/timer' && parsedMessage.time !== undefined) {
+       timerDisplay.value = formatTime(parsedMessage.time);
+    }
+  }
+
+  function subscribeToTopic(topic, callback) {
+    client.subscribe(topic)
+    client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString())
+    })
+  }
+
+  onMounted(() => {
+    quizStore.actions.init();
+    
+    subscribeToTopic('game/score', (topic, message) => {
+      handleMessage(topic, message);
+    });
+    subscribeToTopic('game/timer', (topic, message) => {
+      handleMessage(topic, message);
+    });
+  });
 </script>

 <style scoped>
@@ -122,67 +142,75 @@ 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;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    transition: transform 0.2s;
  }
  .color-blue {
-    background-color: rgb(var(--v-theme-BlueBuzzer), 1);
+    background: linear-gradient(135deg, rgb(var(--v-theme-BlueBuzzer)), #1a3a5a);
    border-radius: 40px 5px 40px 5px;
  }
  .color-red {
-    background-color: rgb(var(--v-theme-RedBuzzer), 1);
+    background: linear-gradient(135deg, rgb(var(--v-theme-RedBuzzer)), #5a1a1a);
    border-radius: 40px 5px 40px 5px;
  }
  .color-green {
-    background-color: rgb(var(--v-theme-GreenBuzzer), 1);
+    background: linear-gradient(135deg, rgb(var(--v-theme-GreenBuzzer)), #1a5a2a);
    border-radius: 5px 40px 5px 40px;
  }
  .color-yellow {
-    background-color: rgb(var(--v-theme-YellowBuzzer), 1);
+    background: linear-gradient(135deg, rgb(var(--v-theme-YellowBuzzer)), #5a5a1a);
    border-radius: 5px 40px 5px 40px;
  }
  .color-white {
-    background-color: white;
+    background-color: #1a1a1a;
+    border: 3px solid #333;
    border-radius: 40px;
+    box-shadow: 0 0 30px rgba(0,0,0,0.6);
  }
  .v-label-time {
    padding-top: 5px;
-    color: black;
+    color: white;
    font-size: 49px;
    font-family: 'Bahnschrift';
+    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
+  }
+  .v-label-score {
+    color: white;
+    font-size: 40px;
+    font-family: 'Bahnschrift';
+    font-weight: bold;
+    line-height: 1;
+    text-shadow: 4px 4px 8px rgba(0,0,0,0.4);
+  }
+  .v-label-round-score {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 16px;
+      font-family: 'Bahnschrift';
+      font-weight: 500;
+      margin-bottom: 2px;
+      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+  }
+  
+  /* Transition styles */
+  .score-fade-enter-active,
+  .score-fade-leave-active {
+    transition: opacity 0.3s ease;
  }
-  .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;
-  }
-  .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>
--- a/VApp/src/views/ScoreDisplay.vue
+++ b/VApp/src/views/ScoreDisplay.vue
@@ -0,0 +1,302 @@
+<template>
+  <div class="score-grid">
+    <div class="score-cell cell-blue color-blue">
+      <div class="score-content">
+        <div class="score-info info-left">
+          <div class="team-name">Bleue</div>
+          <div class="sub-score-container sub-left">
+            <span class="sub-label">Total</span>
+            <span class="team-score sub-score">{{ scores.BlueTotalScore }}</span>
+          </div>
+        </div>
+        <div class="score-main">
+          <div class="team-score main-score">{{ scores.BlueRoundScore }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="score-cell cell-red color-red">
+      <div class="score-content">
+        <div class="score-main">
+          <div class="team-score main-score">{{ scores.RedRoundScore }}</div>
+        </div>
+        <div class="score-info info-right">
+          <div class="team-name">Rouge</div>
+          <div class="sub-score-container sub-right">
+            <span class="sub-label">Total</span>
+            <span class="team-score sub-score">{{ scores.RedTotalScore }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="score-cell cell-green color-green">
+      <div class="score-content">
+        <div class="score-info info-left">
+          <div class="team-name">Verte</div>
+          <div class="sub-score-container sub-left">
+            <span class="sub-label">Total</span>
+            <span class="team-score sub-score">{{ scores.GreenTotalScore }}</span>
+          </div>
+        </div>
+        <div class="score-main">
+          <div class="team-score main-score">{{ scores.GreenRoundScore }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="score-cell cell-yellow color-yellow">
+      <div class="score-content">
+        <div class="score-main">
+          <div class="team-score main-score">{{ scores.YellowRoundScore }}</div>
+        </div>
+        <div class="score-info info-right">
+          <div class="team-name">Jaune</div>
+          <div class="sub-score-container sub-right">
+            <span class="sub-label">Total</span>
+            <span class="team-score sub-score">{{ scores.YellowTotalScore }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="timer-container">
+      <div class="timer-display">{{ timerDisplay }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, onUnmounted, reactive, ref } from 'vue';
+  import mqtt from 'mqtt'
+  import config from '@/config.js'
+
+  const mqttBrokerUrl = config.mqttBrokerUrl
+  let client = null
+
+  const scores = reactive({
+    RedTotalScore: 0,
+    BlueTotalScore: 0,
+    YellowTotalScore: 0,
+    GreenTotalScore: 0,
+    RedRoundScore: 0,
+    BlueRoundScore: 0,
+    YellowRoundScore: 0,
+    GreenRoundScore: 0,
+  });
+
+  const timerDisplay = ref('00:00');
+
+  function formatTime(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+  }
+
+  function handleMessage(topic, message) {
+    let parsedMessage;
+    try {
+      parsedMessage = JSON.parse(message);
+    } catch (e) {
+      console.error("Erreur d'analyse JSON:", e);
+      return;
+    }
+
+    if (topic === 'game/score' && 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
+    }
+
+    if (topic === 'game/timer' && parsedMessage.time !== undefined) {
+       timerDisplay.value = formatTime(parsedMessage.time);
+    }
+  }
+
+  function subscribeToTopic(topic, callback) {
+    if(client) {
+        client.subscribe(topic)
+        client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString())
+        })
+    }
+  }
+
+  onMounted(() => {
+    client = mqtt.connect(mqttBrokerUrl)
+    subscribeToTopic('game/score', (topic, message) => {
+      handleMessage(topic, message);
+    });
+    subscribeToTopic('game/timer', (topic, message) => {
+      handleMessage(topic, message);
+    });
+  });
+
+  onUnmounted(() => {
+    if (client) {
+      client.end()
+    }
+  })
+</script>
+
+<style scoped>
+  .score-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    width: 100vw;
+    height: 100vh;
+    padding: 40px;
+    gap: 60px;
+    position: relative;
+    font-family: 'Bahnschrift', sans-serif;
+  }
+
+  .score-cell {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    transition: transform 0.2s;
+    overflow: hidden;
+  }
+  .cell-blue {
+    border-radius: 65px 225px 75px 225px !important;
+  }
+  .cell-red {
+    border-radius: 225px 65px 225px 75px !important;
+  }
+  .cell-green {
+    border-radius: 225px 65px 225px 75px !important;
+  } 
+  .cell-yellow {
+    border-radius: 75px 225px 65px 225px !important;
+  }
+
+  .score-content {
+    display: flex;
+    flex-direction: row; /* Horizontal layout */
+    align-items: center;
+    justify-content: space-around; /* Spread out */
+    width: 100%;
+    padding: 0 40px;
+  }
+
+  .score-main {
+    flex: 2; /* Takes more space */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .score-info {
+    flex: 1; /* Takes less space */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .info-right {
+    align-items: flex-end;
+    text-align: right;
+  }
+
+  .info-left {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .team-name {
+    font-size: 2.2rem;
+    font-weight: 900;
+    letter-spacing: 2px;
+    opacity: 0.9;
+    color: rgba(255, 255, 255, 0.95);
+    text-transform: uppercase;
+    margin-bottom: 15px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+  }
+
+  .team-score {
+    font-weight: bold;
+    color: white;
+    line-height: 1;
+    text-shadow: 4px 4px 8px rgba(0,0,0,0.4);
+  }
+
+  .main-score {
+    font-size: 10rem; /* Even larger */
+    margin: 0;
+  }
+
+  .sub-score-container {
+    background-color: rgba(0, 0, 0, 0.2);
+    padding: 10px 20px;
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    min-width: 120px;
+  }
+
+  .sub-right {
+    align-items: flex-end;
+  }
+
+  .sub-left {
+    align-items: flex-start;
+  }
+
+  .sub-label {
+    font-size: 1rem;
+    text-transform: uppercase;
+    opacity: 0.8;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 2px;
+    font-weight: 600;
+  }
+
+  .sub-score {
+    font-size: 2.5rem;
+  }
+
+  .timer-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+    background-color: #1a1a1a;
+    padding: 20px 40px;
+    border-radius: 80px;
+    border: 6px solid #333;
+    box-shadow: 0 0 50px rgba(0,0,0,0.8);
+  }
+
+  .timer-display {
+    font-size: 8rem;
+    font-weight: bold;
+    color: white;
+    font-family: monospace;
+    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
+  }
+
+  .color-blue {
+    background: linear-gradient(135deg, rgb(var(--v-theme-BlueBuzzer)), #1a3a5a);
+  }
+
+  .color-red {
+    background: linear-gradient(135deg, rgb(var(--v-theme-RedBuzzer)), #5a1a1a);
+  }
+
+  .color-green {
+    background: linear-gradient(135deg, rgb(var(--v-theme-GreenBuzzer)), #1a5a2a);
+  }
+
+  .color-yellow {
+    background: linear-gradient(135deg, rgb(var(--v-theme-YellowBuzzer)), #5a5a1a);
+  }
+</style>
--- a/VContainers/MQTT/config/nanomq.conf
+++ b/VContainers/MQTT/config/nanomq.conf
@@ -18,11 +18,11 @@ mqtt {
 }

 listeners.tcp {
-    bind = "127.0.0.1:1883"
+    bind = "0.0.0.0:1883"
 }

 listeners.ws {
-    bind = "127.0.0.1:9001"
+    bind = "0.0.0.0:9001"
 }

 http_server {
--- a/VContainers/README.md
+++ b/VContainers/README.md
@@ -1,31 +1,101 @@
 # VContainer - Vulture build script

 Construction et lancements des containers.
-Toutes les commandes sont a tapper depuis la racine du dépot.
+Toutes les commandes sont à taper depuis la racine du dépôt.

 ## Build

+```bash
+./VContainers/build.sh
+```

+Ou manuellement :
+```bash
 podman build . -f ./VContainers/VNode/Containerfile -t vnode
 podman build . -f ./VContainers/VApp/Containerfile -t vapp
-
+```

 ## Run

-Lancement des trois containers dans le même pod, ils partagent le réseau, les différents services sont disponibles sur localhost.
+### Mode Manuel avec Scripts

-podman pod create --name vulture -p 8080:80 -p 1883:1883 -p 8083:8083 -p 8883:8883
-podman run -dt --rm --pod vulture --name nanomq -v ./VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf docker.io/emqx/nanomq:latest
-podman run -dt --rm --pod vulture --name vnode vnode:latest
-podman run -dt --rm --pod vulture --name vapp vapp:latest
+**Développement (localhost):**
+```bash
+./VContainers/run_dev.sh
+```
+
+**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

-podman stop vapp
-podman stop vnode
-podman stop nanomq
-podman pod rm vulture
+```bash
+./VContainers/stop.sh
+```
+
+Ou manuellement :
+```bash
+podman stop vapp vnode nanomq
+podman network rm vulture-net
+```
+
+## Lancement automatique avec Quadlet
+
+Copier les fichiers du répertoire `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 enable --now nanomq.service
+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

-sudo sysctl -w net.ipv4.ip_unprivileged_port_start=80
+Pour permettre à Podman d'utiliser les ports privilégiés (<1024) :
+```bash
+sudo sysctl -w net.ipv4.ip_unprivileged_port_start=80
+```
--- a/VContainers/VApp/Containerfile
+++ b/VContainers/VApp/Containerfile
@@ -1,18 +1,16 @@
-#FROM docker.io/nginx:stable-alpine
-FROM docker.io/node:lts-alpine AS builder
-## Bundle APP files
+# Development Container for VApp
+FROM docker.io/node:lts-alpine
+
 WORKDIR /app
+
+# Copy VApp source code
 COPY VApp ./
+
+# Install dependencies
 RUN npm install
-RUN npm run build

-FROM docker.io/nginx:stable-alpine
-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
+# Expose Vite default port
+EXPOSE 5173

-
-EXPOSE 80
-
-# CMD ["npm","run","dev"]
-#CMD ["sleep", "1000"]
+# Start in development mode with host exposure
+CMD ["npm", "run", "dev", "--", "--host"]
--- a/VContainers/VApp/config/config_dev.js
+++ b/VContainers/VApp/config/config_dev.js
@@ -0,0 +1,11 @@
+window.APP_CONFIG = {
+    // URL du broker MQTT (WebSockets)
+    // Configuration DEV : localhost
+    mqttBrokerUrl: 'ws://localhost:9001',
+
+    // IPs des buzzers
+    redBuzzerIP: '192.168.73.40',
+    blueBuzzerIP: '192.168.73.41',
+    orangeBuzzerIP: '192.168.73.42',
+    greenBuzzerIP: '192.168.73.43'
+};
--- a/VContainers/VApp/config/config_prod.js
+++ b/VContainers/VApp/config/config_prod.js
@@ -0,0 +1,11 @@
+window.APP_CONFIG = {
+    // URL du broker MQTT (WebSockets)
+    // Configuration PROD : IP du serveur
+    mqttBrokerUrl: 'ws://192.168.73.252:9001',
+
+    // IPs des buzzers
+    redBuzzerIP: '192.168.73.40',
+    blueBuzzerIP: '192.168.73.41',
+    orangeBuzzerIP: '192.168.73.42',
+    greenBuzzerIP: '192.168.73.43'
+};
--- a/VContainers/build.sh
+++ b/VContainers/build.sh
@@ -0,0 +1,13 @@
+#!/bin/bash
+set -e
+
+# Move to repository root
+cd "$(dirname "$0")/.."
+
+echo "Building VNode..."
+podman build . -f ./VContainers/VNode/Containerfile -t vnode
+
+echo "Building VApp..."
+podman build . -f ./VContainers/VApp/Containerfile -t vapp
+
+echo "Build complete."
--- a/VContainers/quadlet/nanomq.container
+++ b/VContainers/quadlet/nanomq.container
@@ -0,0 +1,19 @@
+[Unit]
+Description=Broker MQTT NanoMQ
+Wants=network-online.target
+After=network-online.target
+
+[Container]
+Image=docker.io/emqx/nanomq:latest
+ContainerName=nanomq
+Network=vulture-net.network
+PublishPort=1883:1883
+PublishPort=9001:9001
+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]
+WantedBy=default.target
--- a/VContainers/quadlet/vapp.container
+++ b/VContainers/quadlet/vapp.container
@@ -0,0 +1,12 @@
+[Unit]
+Description=Application Node.js VApp
+Requires=vulture.pod
+After=vulture.pod
+
+[Container]
+Image=localhost/vapp:latest
+ContainerName=vapp
+Pod=vulture
+
+[Install]
+WantedBy=vulture.pod
--- a/VContainers/quadlet/vapp_dev.container
+++ b/VContainers/quadlet/vapp_dev.container
@@ -0,0 +1,16 @@
+[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
--- a/VContainers/quadlet/vapp_prod.container
+++ b/VContainers/quadlet/vapp_prod.container
@@ -0,0 +1,16 @@
+[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
--- a/VContainers/quadlet/vnode.container
+++ b/VContainers/quadlet/vnode.container
@@ -0,0 +1,14 @@
+[Unit]
+Description=Application Node.js VNode
+Wants=network-online.target
+After=network-online.target
+Requires=nanomq.service
+After=nanomq.service
+
+[Container]
+Image=localhost/vnode:latest
+ContainerName=vnode
+Network=vulture-net.network
+
+[Install]
+WantedBy=default.target
--- a/VContainers/quadlet/vulture-net.network
+++ b/VContainers/quadlet/vulture-net.network
@@ -0,0 +1,6 @@
+[Unit]
+Description=Reseau Bridge pour Vulture
+
+[Network]
+NetworkName=vulture-net
+Driver=bridge
--- a/VContainers/quadlet/vulture.pod
+++ b/VContainers/quadlet/vulture.pod
@@ -0,0 +1,14 @@
+[Unit]
+Description=Pod Vulture pour le Broker MQTT et les Applications Node
+Wants=network-online.target
+After=network-online.target
+
+[Pod]
+# Mappings de ports : Host:Container (ces ports sont partagés par tous les conteneurs)
+PublishPort=8080:80
+PublishPort=1883:1883
+PublishPort=8083:8083
+PublishPort=8883:8883
+
+[Install]
+WantedBy=default.target
--- a/VContainers/run_dev.sh
+++ b/VContainers/run_dev.sh
@@ -0,0 +1,33 @@
+#!/bin/bash
+set -e
+
+# Move to repository root
+cd "$(dirname "$0")/.."
+
+NETWORK_NAME="vulture-net"
+
+echo "Creating network $NETWORK_NAME..."
+if podman network exists $NETWORK_NAME; then
+    echo "Network $NETWORK_NAME already exists."
+else
+    podman network create $NETWORK_NAME
+fi
+
+echo "Starting NanoMQ..."
+# NanoMQ needs to expose ports for external access (e.g. VApp frontend) and be on the network for VNode
+podman run -dt --rm --network $NETWORK_NAME --name nanomq \
+    -p 1883:1883 -p 9001:9001 -p 8081:8081 -p 8083:8083 -p 8883:8883 \
+    -v ./VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf:Z \
+    docker.io/emqx/nanomq:latest --conf /etc/nanomq.conf
+
+echo "Starting VNode..."
+# VNode connects to nanomq via the network, no ports needed on host unless for debugging
+podman run -dt --rm --network $NETWORK_NAME --name vnode vnode:latest
+
+echo "Starting VApp (DEV CONFIG)..."
+# VApp (nginx) needs port 5173 exposed
+podman run -dt --rm --network $NETWORK_NAME --name vapp -p 5173:5173 \
+    -v ./VContainers/VApp/config/config_dev.js:/usr/share/nginx/html/config.js:Z \
+    vapp:latest
+
+echo "All containers started on network $NETWORK_NAME with DEV configuration."
--- a/VContainers/run_prod.sh
+++ b/VContainers/run_prod.sh
@@ -0,0 +1,33 @@
+#!/bin/bash
+set -e
+
+# Move to repository root
+cd "$(dirname "$0")/.."
+
+NETWORK_NAME="vulture-net"
+
+echo "Creating network $NETWORK_NAME..."
+if podman network exists $NETWORK_NAME; then
+    echo "Network $NETWORK_NAME already exists."
+else
+    podman network create $NETWORK_NAME
+fi
+
+echo "Starting NanoMQ..."
+# NanoMQ needs to expose ports for external access (e.g. VApp frontend) and be on the network for VNode
+podman run -dt --rm --network $NETWORK_NAME --name nanomq \
+    -p 1883:1883 -p 9001:9001 -p 8081:8081 -p 8083:8083 -p 8883:8883 \
+    -v ./VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf:Z \
+    docker.io/emqx/nanomq:latest --conf /etc/nanomq.conf
+
+echo "Starting VNode..."
+# VNode connects to nanomq via the network, no ports needed on host unless for debugging
+podman run -dt --rm --network $NETWORK_NAME --name vnode vnode:latest
+
+echo "Starting VApp (PROD CONFIG)..."
+# VApp (nginx) needs port 5173 exposed
+podman run -dt --rm --network $NETWORK_NAME --name vapp -p 5173:5173 \
+    -v ./VContainers/VApp/config/config_prod.js:/usr/share/nginx/html/config.js:Z \
+    vapp:latest
+
+echo "All containers started on network $NETWORK_NAME with PROD configuration."
--- a/VContainers/stop.sh
+++ b/VContainers/stop.sh
@@ -0,0 +1,11 @@
+#!/bin/bash
+
+echo "Stopping containers..."
+podman stop vapp || echo "vapp not running"
+podman stop vnode || echo "vnode not running"
+podman stop nanomq || echo "nanomq not running"
+
+echo "Removing network..."
+podman network rm vulture-net || echo "Network vulture-net not found"
+
+echo "Cleanup complete."
--- a/VNode/services/buzzer/buzzer-manager.js
+++ b/VNode/services/buzzer/buzzer-manager.js
@@ -1,8 +1,14 @@
 // Import necessary modules
 const mqtt = require('mqtt');
+const fs = require('fs');
+const path = require('path');
+
+// Load configuration
+const configPath = path.join(__dirname, '../config/configuration.json');
+const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));

 // MQTT broker configuration
-const brokerUrl = 'mqtt://localhost'; // Broker URL (change if needed)
+const brokerUrl = config.mqttHost;
 const clientId = 'buzzer_manager';
 const options = {
    clientId,
@@ -64,8 +70,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 +111,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 +135,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 +146,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 +156,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 +177,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 +188,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 +201,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');
--- a/VNode/services/buzzer/buzzer-watcher.js
+++ b/VNode/services/buzzer/buzzer-watcher.js
@@ -4,10 +4,10 @@ const mqtt = require('mqtt');
 const fs = require('fs');

 // Lecture du fichier de configuration
-const config = JSON.parse(fs.readFileSync(path.join('services','config','config_network.json'), 'utf8'));
+const config = JSON.parse(fs.readFileSync(path.join(__dirname, '../config/configuration.json'), 'utf8'));

 // Extraction des informations de config
-const { hosts: { buzzers: { IP: buzzerIPs, MQTTconfig: { mqttHost, mqttTopic } } } } = config;
+const { mqttHost, hosts: { buzzers: { IP: buzzerIPs, MQTTconfig: { mqttTopic } } } } = config;

 // Connexion au broker MQTT
 const client = mqtt.connect(mqttHost);
--- a/VNode/services/config/config_game.json
+++ b/VNode/services/config/config_game.json
@@ -1,18 +0,0 @@
-{
-    "services": {
-        "mqttHost": "mqtt://localhost",
-        "score":{
-            "MQTTconfig":{
-                "mqttScoreTopic": "game/score",
-                "mqttScoreChangeTopic": "game/score/update"
-            }
-        },
-        "quizzcollector":{
-            "MQTTconfig":{
-                "mqttQuizzCollectorListTopic": "game/quizz-collector/list",
-                "mqttQuizzCollectorCmdTopic": "game/quizz-collector/cmd"
-            }
-        }
-    }
-
-}
--- a/VNode/services/config/config_network.json
+++ b/VNode/services/config/config_network.json
@@ -1,17 +0,0 @@
-{
-    "hosts": {
-        "buzzers":{
-            "IP":{
-                "redBuzzerIP": "8.8.8.6",
-                "blueBuzzerIP": "8.8.8.8",
-                "greenBuzzerIP": "8.8.8.8",
-                "yellowBuzzerIP": "8.8.8.8"
-            },
-            "MQTTconfig":{
-                "mqttHost": "mqtt://localhost",
-                "mqttTopic": "buzzer/watcher"
-            }
-        }
-    }
-
-}
--- a/VNode/services/config/configuration.json
+++ b/VNode/services/config/configuration.json
@@ -0,0 +1,30 @@
+{
+    "mqttHost": "mqtt://192.168.1.201",
+    "services": {
+        "score": {
+            "MQTTconfig": {
+                "mqttScoreTopic": "game/score",
+                "mqttScoreChangeTopic": "game/score/update"
+            }
+        },
+        "quizzcollector": {
+            "MQTTconfig": {
+                "mqttQuizzCollectorListTopic": "game/quizz-collector/list",
+                "mqttQuizzCollectorCmdTopic": "game/quizz-collector/cmd"
+            }
+        }
+    },
+    "hosts": {
+        "buzzers": {
+            "IP": {
+                "redBuzzerIP": "8.8.8.6",
+                "blueBuzzerIP": "8.8.8.8",
+                "greenBuzzerIP": "8.8.8.8",
+                "yellowBuzzerIP": "8.8.8.8"
+            },
+            "MQTTconfig": {
+                "mqttTopic": "buzzer/watcher"
+            }
+        }
+    }
+}
--- a/VNode/services/game/quizz-collector.js
+++ b/VNode/services/game/quizz-collector.js
@@ -3,10 +3,10 @@ const mqtt = require('mqtt');
 const path = require('path');

 // Lecture du fichier de configuration
-const config = JSON.parse(fs.readFileSync(path.join('services','config','config_game.json'), 'utf8'));
+const config = JSON.parse(fs.readFileSync(path.join(__dirname, '../config/configuration.json'), 'utf8'));

 // Extraction des informations de config
-const { services: { mqttHost, quizzcollector: { MQTTconfig: { mqttQuizzCollectorListTopic, mqttQuizzCollectorCmdTopic } } } } = config;
+const { mqttHost, services: { quizzcollector: { MQTTconfig: { mqttQuizzCollectorListTopic, mqttQuizzCollectorCmdTopic } } } } = config;

 // Configuration
 const folderPath = 'quizz'; // Remplace par le chemin de ton dossier
@@ -39,9 +39,9 @@ function Collect() {
            console.error('Erreur lors de la lecture du dossier:', err);
            return;
        }
-        
+
        console.log('Dossiers trouvés:', files);
-        const message = JSON.stringify( files );
+        const message = JSON.stringify(files);
        client.publish(mqttQuizzCollectorListTopic, message, { qos: 1 }, (err) => {
            if (err) {
                console.error('Erreur lors de la publication MQTT:', err);
--- a/VNode/services/game/score-manager.js
+++ b/VNode/services/game/score-manager.js
@@ -1,9 +1,9 @@
 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 
-if (args[2] !== undefined){
+if (args[2] !== undefined) {
    global.ScoreFile = args[2]
-}else{
+} else {
    global.ScoreFile = "XXX.json"
 }

@@ -50,36 +50,36 @@ fs.access(filePath, fs.constants.F_OK, (err) => {
        const initialContent = {
            "TEAM": {
                "Red": {
-                  "Name": "XXX",
-                  "TotalScore": 0,
-                  "RoundScore": 0,
-                  "Penality": 0,
-                  "MasterPoint": 0
+                    "Name": "XXX",
+                    "TotalScore": 0,
+                    "RoundScore": 0,
+                    "Penality": 0,
+                    "MasterPoint": 0
                },
                "Blue": {
-                  "Name": "XXX",
-                  "TotalScore": 0,
-                  "RoundScore": 0,
-                  "Penality": 0,
-                  "MasterPoint": 0
+                    "Name": "XXX",
+                    "TotalScore": 0,
+                    "RoundScore": 0,
+                    "Penality": 0,
+                    "MasterPoint": 0
                },
                "Yellow": {
-                  "Name": "XXX",
-                  "TotalScore": 0,
-                  "RoundScore": 0,
-                  "Penality": 0,
-                  "MasterPoint": 0
+                    "Name": "XXX",
+                    "TotalScore": 0,
+                    "RoundScore": 0,
+                    "Penality": 0,
+                    "MasterPoint": 0
                },
                "Green": {
-                  "Name": "XXX",
-                  "TotalScore": 0,
-                  "RoundScore": 0,
-                  "Penality": 0,
-                  "MasterPoint": 0
+                    "Name": "XXX",
+                    "TotalScore": 0,
+                    "RoundScore": 0,
+                    "Penality": 0,
+                    "MasterPoint": 0
                }
            }
        };
-        
+
        fs.writeFile(newFilePath, JSON.stringify(initialContent, null, 2), (err) => {
            if (err) {
                console.error("Erreur de création du fichier :", err);
@@ -108,10 +108,10 @@ function updateTeamTotalScore(teamColor, points) {
            if (!jsonData.TEAM.hasOwnProperty(teamColor)) {
                console.error(`L'équipe ${teamColor} n'existe pas.`);
                return;
-            }  
-            
+            }
+
            const change = parseInt(points, 10);
-             
+
            // Mettre à jour le score
            jsonData.TEAM[teamColor].TotalScore += points;
            console.log(`Le score total pour l'équipe ${teamColor} est de ${jsonData.TEAM[teamColor].TotalScore} points !`)
@@ -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/configuration.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)
+const { mqttHost, services: { score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
+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,63 +174,82 @@ 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);
        process = false;
    }

-    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)
-                } else {
-                    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;
+    if (process === true) {
+        if (Action === "SET") {
+            // Mise à jour absolue
+            updateTeamScoreAbsolute(Team, TotalScore, RoundScore);
+        } else {
+            // Mise à jour relative (existant)
+            let change = parseInt(Action, 10);
+            if (!isNaN(change)) {
+                updateTeamTotalScore(Team, change);
+            } else {
+                console.error(`Action invalide : ${Action}`);
+            }
        }
    }

 });

+// 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");
-  
-      await new Promise((resolve) => setTimeout(resolve, 2000)); // Pause de 2 secondes
-      //client.publish(mqttScoreTopic, JSON.stringify(global.jsonData));
+        console.log("Boucle en arrière-plan");
+
+        await new Promise((resolve) => setTimeout(resolve, 2000)); // Pause de 2 secondes
+        //client.publish(mqttScoreTopic, JSON.stringify(global.jsonData));
    }
-  })();
+})();

 client.on('error', (error) => {
    console.error('Erreur de connexion au broker MQTT:', error.message);
--- a/VNode/services/light/light-manager.js
+++ b/VNode/services/light/light-manager.js
@@ -2,7 +2,7 @@
 const mqtt = require('mqtt');

 // Configuration du broker MQTT et de WLED
-const brokerUrl = 'mqtt://localhost';  // Change ce lien si nécessaire
+const brokerUrl = 'mqtt://nanomq';  // Change ce lien si nécessaire
 const clientId = 'light_manager_wled';
 const wledTopicBase = 'wled/all';  // Le topic de base pour ton ruban WLED
 const options = {
Author	SHA1	Message	Date
Jérémy CHOMAZ	332098a6fd	(update) mise à jour des commentaires en francais	2026-02-03 19:59:02 +01:00
Jérémy CHOMAZ	df2c9d4788	(new) track the new quizstore.js for manage the current Vulture Session	2026-02-01 16:20:49 +01:00
Jérémy CHOMAZ	2fe8527c37	(update) track the time in the new real timer for the remaining time and new uix placements	2026-02-01 16:19:39 +01:00
Jérémy CHOMAZ	5938e269e1	(update) track the time in the new real timer for the remaining time	2026-02-01 16:18:59 +01:00
Jérémy CHOMAZ	ff03299645	(update) track the time in the new real timer for the remaining time	2026-02-01 16:18:18 +01:00
Jérémy CHOMAZ	5624336173	(new) add the new media manager in the GameDisplay	2026-02-01 16:17:10 +01:00
Jérémy CHOMAZ	7aa5ddb4ec	(update) add buzzer blocked action in hiding overlay	2026-02-01 16:16:22 +01:00
Jérémy CHOMAZ	be8c18710d	(update) add info card about the current question for the game master	2026-02-01 16:15:28 +01:00
Jérémy CHOMAZ	f4530e8e50	(new) add info card about the current question for the game master	2026-02-01 16:14:20 +01:00
Jérémy CHOMAZ	8db6f16ac8	(update) add real timer from the current question	2026-02-01 16:12:21 +01:00
Jérémy CHOMAZ	fb3b7fabd4	Modification du thème de la fenêtre de validation de buzzer	2026-02-01 13:54:15 +01:00
Jérémy CHOMAZ	0244854ddb	patch MQTT	2026-02-01 13:53:36 +01:00
Jérémy CHOMAZ	bcec23a751	Mise à jour du fichier de configuration et patch MQTT	2026-02-01 13:52:24 +01:00
Jérémy CHOMAZ	70fb7cbcea	Mise à jour des couleur et du thème	2026-02-01 13:51:57 +01:00
Jérémy CHOMAZ	353541541d	Mise à jour du fichier de configuration et patch MQTT	2026-02-01 13:50:25 +01:00
Jérémy CHOMAZ	ee4c2604db	Retrait des anciens fichiers de configuration	2026-02-01 13:49:54 +01:00
Jérémy CHOMAZ	ad9b29ca93	Mise à jour du fichier de configuration et patch MQTT	2026-02-01 13:49:11 +01:00
Jérémy CHOMAZ	7413a2a78f	Mise à jour du fichier de configuration et patch MQTT	2026-02-01 13:48:53 +01:00
Jérémy CHOMAZ	54bbfa00b3	Ajout de la nouvelle page	2026-02-01 13:48:02 +01:00
Jérémy CHOMAZ	de8f8f051f	Patch des soucis de passage d'une page à une autre	2026-02-01 13:43:09 +01:00
Jérémy CHOMAZ	f855601217	update the configuration file to be in unique file	2026-02-01 13:41:09 +01:00
Jérémy CHOMAZ	ddbd00ae3f	Update components and remove BrainBlastBar.vue -> VultureBar.vue	2026-02-01 13:39:35 +01:00
Laurent Ollagnier	184a6ac600	config : corrige ip buzzer	2026-01-26 17:32:29 +01:00
Laurent Ollagnier	9a4a2cb6ad	Change le port exposé de l'app	2026-01-26 17:13:08 +01:00
Laurent Ollagnier	3a458be33d	feat: Refactor VApp container to a development build and update its exposed port mapping in the run script.	2026-01-26 17:13:08 +01:00
Laurent Ollagnier	4e0f34f75c	chore: Update buzzer IP addresses in network configuration.	2026-01-26 17:13:08 +01:00
Laurent Ollagnier	19fe61f077	feat: Introduce Quadlet units for dev/prod VApp containers and a custom network, update existing container configurations, and enhance documentation.	2026-01-26 17:13:07 +01:00
Laurent Ollagnier	b86909c744	Créer 2 scripts de lancement un pour le dev en local l'autre pour la prod	2026-01-26 17:13:07 +01:00
Laurent Ollagnier	4e57c70b3c	gestion d'une config pour les ip si prod ou dev	2026-01-26 17:13:07 +01:00
Laurent Ollagnier	da932bdcb3	Lancement en mode network plutot que pod	2026-01-26 17:13:02 +01:00
Laurent Ollagnier	6026bfb7ff	Quadlet (WiP)	2026-01-26 17:09:46 +01:00
Laurent Ollagnier	28a05c2104	scripts de gestion	2026-01-26 17:09:46 +01:00
Laurent Ollagnier	b9a2c53032	Correction des options de lancement	2026-01-26 17:09:46 +01:00
Jérémy CHOMAZ	c73322a67a	Mise à jour des paquets	2026-01-23 18:52:04 +01:00
Jérémy CHOMAZ	5900b1faa1	Ajout des boutons de simulation de buzzer et agrandissement de la fenêtre	2026-01-23 18:50:58 +01:00
Jérémy CHOMAZ	af58e9c30d	Agrandissement de la fenêtre de debug	2026-01-23 18:49:50 +01:00
Jérémy CHOMAZ	bc8846d9eb	Nouveau player video du game display	2026-01-23 18:48:41 +01:00
Jérémy CHOMAZ	5c16468157	Page d'overlay qui masque le player	2026-01-23 18:48:13 +01:00
Jérémy CHOMAZ	911671c653	Nouvelle page qui s'affiche en popup sur la page de controle	2026-01-23 18:47:44 +01:00
Jérémy CHOMAZ	cd540698a1	Modification de l'équipe Orange en jaune	2026-01-23 18:47:01 +01:00
Jérémy CHOMAZ	2a28526cb9	Modification de l'équipe Orange en jaune	2026-01-23 18:45:55 +01:00
Jérémy CHOMAZ	6666874913	Modification du controle manuel des score et suppression des 16 bouttons	2026-01-23 18:44:35 +01:00
Jérémy CHOMAZ	814c3d0e68	Ajout du popup quand les équipes buzz	2026-01-23 18:43:56 +01:00
Jérémy CHOMAZ	911497ab1d	Ajout des scores dans les pastilles d'équipes et de le mise à jour en live des scores	2026-01-23 18:42:42 +01:00
Jérémy CHOMAZ	905da933dc	Modification du score-manager	2026-01-23 18:40:44 +01:00
Jérémy CHOMAZ	0186a0a83e	Modification du buzzer-manager	2026-01-23 18:40:23 +01:00