(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",
+    "@mdi/font": "^7.4.47",
-    "@videojs-player/vue": "latest",
+    "@videojs-player/vue": "^1.0.0",
-    "express": "latest",
+    "express": "^5.0.0",
-    "mqtt": "latest",
+    "mqtt": "^5.3.5",
-    "ping": "latest",
+    "ping": "^0.4.4",
-    "roboto-fontface": "latest",
+    "roboto-fontface": "^0.10.0",
-    "video.js": "latest",
+    "video.js": "^8.22.0",
-    "vue": "latest",
+    "vue": "^3.4.19",
-    "vue-router": "latest",
+    "vue-router": "^4.2.5",
-    "vuex": "latest"
+    "vuex": "^4.1.0"
  },
  "devDependencies": {
-    "@rushstack/eslint-patch": "latest",
+    "@rushstack/eslint-patch": "^1.3.3",
-    "@vitejs/plugin-vue": "latest",
+    "@vitejs/plugin-vue": "^5.0.3",
-    "@vue/eslint-config-prettier": "latest",
+    "@vue/eslint-config-prettier": "^8.0.0",
-    "concurrently": "latest",
+    "concurrently": "^8.2.2",
-    "eslint": "latest",
+    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "latest",
+    "eslint-plugin-vue": "^9.17.0",
-    "prettier": "latest",
+    "prettier": "^3.0.3",
-    "unplugin-fonts": "latest",
+    "unplugin-fonts": "^1.1.1",
-    "vite": "latest",
+    "vite": "^5.1.6",
-    "vite-plugin-vuetify": "latest"
+    "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)'" />   
+    <VultureBar v-if="showVultureBar" />   
-    <GameStatus v-if="$route.name === 'Game Control (Présentateur)'">
+    <GameStatus v-if="showGameStatus" /> 
    </GameStatus> 
    <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 { computed } from 'vue';
-import BrainBlastBar from '@/components/BrainBlastBar.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,87 +4,54 @@
      <v-icon left class="white--text pr-5 pl-2" size="40">mdi-calculator-variant</v-icon>
      Gestion des scores
    </v-card-title>
-    <v-container class="text-center">
+    <v-container class="text-center pt-8">
-      <v-row justify="center">
+      <!-- Team Lines -->
-        <v-col cols="4" sm="6" md="3">
+      <v-row v-for="(team, color) in scores" :key="color" align="center" justify="center" class="mb-2">
-          <mqtt-button width="120" height="60" class="btn red xs12 sm6 md3" topic="game/score/update" message='{"Red": "-2"}'>
+         <!-- Icon/Label -->
-            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
+         <v-col cols="2" class="d-flex justify-center">
-          </mqtt-button>
+            <v-icon :color="getTeamColor(color)" size="40">mdi-circle</v-icon> 
         </v-col>
-        <v-col cols="4" sm="6" md="3">
+         
-          <mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "-1"}'>
+         <!-- Total Score Input -->
-            <v-icon left size="40">mdi-minus-box</v-icon>
+         <v-col cols="5">
-          </mqtt-button>
+            <v-text-field
              v-model.number="team.Total"
              label="Total"
              type="number"
              variant="outlined"
              density="compact"
              hide-details
              prepend-inner-icon="mdi-minus"
              append-inner-icon="mdi-plus"
              :color="getTeamColor(color)"
              :base-color="getTeamColor(color)"
              @click:prepend-inner="changeScore(color, 'Total', -1)"
              @click:append-inner="changeScore(color, 'Total', 1)"
              @update:model-value="updateScore(color)"
              class="centered-input"
              readonly
            ></v-text-field>
         </v-col>
-        <v-col cols="4" sm="6" md="3">
+
-          <mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "+1"}'>
+         <!-- Round Score Input -->
-            <v-icon left size="40">mdi-plus-box</v-icon>
+         <v-col cols="5">
-          </mqtt-button>
+            <v-text-field
-        </v-col>
+              v-model.number="team.Round"
-        <v-col cols="4" sm="6" md="3">
+              label="Manche"
-          <mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3 " topic="game/score/update" message='{"Red": "+2"}'>
+              type="number"
-            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
+              variant="outlined"
-          </mqtt-button>
+              density="compact"
-        </v-col>
+              hide-details
-        <v-col cols="4" sm="6" md="3">
+              prepend-inner-icon="mdi-minus"
-          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-2"}'>
+              append-inner-icon="mdi-plus"
-            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
+              :color="getTeamColor(color)"
-          </mqtt-button>
+              :base-color="getTeamColor(color)"
-        </v-col>
+              @click:prepend-inner="changeScore(color, 'Round', -1)"
-        <v-col cols="12" sm="6" md="3">
+              @click:append-inner="changeScore(color, 'Round', 1)"
-          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-1"}'>
+              @update:model-value="updateScore(color)"
-            <v-icon left size="40">mdi-minus-box</v-icon>
+              class="centered-input"
-          </mqtt-button>
+              readonly
-        </v-col>
+            ></v-text-field>
        <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-row>
    </v-container>
@@ -92,23 +59,108 @@
 </template>
 <script setup>
-  import MqttButton from './MqttButton.vue';
+  import { ref, reactive, onMounted, onUnmounted } from 'vue';
-  import { ref } 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 */
+    height: 56px;
-    width: 170px;
+    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,13 +3,35 @@
 		<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-container class="text-center" v-if="currentQuestion">
-			<v-row justify="center">     
+            <div class="text-h6 mb-2">Question {{ currentQuestionIndex + 1 }}</div>
-				<v-container class="text-center">       <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->       
+            <div class="text-body-1 font-weight-bold mb-4">{{ currentQuestion.QuestionText }}</div>
-					<v-img width="450" src="@/assets/copilot-solution-FULL-HD.jpg" style="margin: 0 auto;">
+            
-					</v-img>     
+            <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-row> 
+        <v-container v-else class="text-center">
            <div class="text-caption">Aucun quiz chargé ou fin du quiz.</div>
        </v-container>
 	</v-card>
 </template>
@@ -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 timer = quizStore.getters.timer;
-  const startTime = ref(null);
+  
-  const currentTime = ref(null);
+  watch(timer, (val) => {
-  const elapsedTime = ref(0);
+    console.log('CardTimer: timer value changed', val);
  }, { immediate: true });
  const formatTime = computed(() => { 
-    let seconds = Math.floor(elapsedTime.value / 1000); 
+    const seconds = timer.value % 60;
-    let minutes = Math.floor(seconds / 60); 
+    const minutes = Math.floor(timer.value / 60);
-    let hours = Math.floor(minutes / 60);
+    const hours = Math.floor(minutes / 60);
-    seconds = seconds % 60; minutes = minutes % 60;
+    return `${pad(minutes % 60)}:${pad(seconds)}`;
   return `${pad(hours)}:${pad(minutes)}:${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 };
 </script>
 <style>
 	.container { 
 		text-align: center; 
-		margin-top: auto; /* Place le container en bas de son parent */ 
+		margin-top: auto;
-		margin-bottom: 1px; /* Marge en bas pour un espacement */ 
+		margin-bottom: 1px;
-		position: fixed; /* Le positionne de manière fixe */ 
+		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 {
+// Reads configuration from window.APP_CONFIG (loaded via public/config.js)
-  mqttBrokerUrl: 'ws://192.168.73.252:9001',
+// 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
@@ -18,6 +18,11 @@ const router = createRouter({
    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',
@@ -26,7 +31,8 @@ const router = createRouter({
  {
    path: '/settings',
    name: 'Paramètres',
-    component: () => import('@/views/SettingsView.vue') }
+    component: () => import('@/views/SettingsView.vue')
  }
  ]
 })
--- a/VApp/src/plugins/vuetify.js
+++ b/VApp/src/plugins/vuetify.js
@@ -21,6 +21,7 @@ const CustomThemeDark = {
    error: '#e91e1e',
    warning: '#FFC107',
    info: '#607D8B',
    inactiveButton: '#707070ff',
    success: '#15B01B',
    BlueBuzzer: '#2867d4',
    YellowBuzzer: '#D4D100',
@@ -39,6 +40,7 @@ const CustomThemeLight = {
    error: '#e91e1e',
    warning: '#FFC107',
    info: '#607D8B',
    inactiveButton: '#707070ff',
    success: '#4CAF50',
    BlueBuzzer: '#2867d4',
    YellowBuzzer: '#D4D100',
@@ -54,6 +56,7 @@ export default createVuetify({
    defaultTheme: 'CustomThemeDark',
    themes: {
      CustomThemeDark,
-      CustomThemeLight, },
+      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
--- 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,112 +2,132 @@
  <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-blue">
-        <v-container class="score_div color-red"></v-container>
+          <div class="d-flex flex-column align-center">
-        <v-container class="score_div color-white d-flex align-center justify-center">
+            <Transition name="score-fade" mode="out-in">
-          <span class="v-label-time">00:00</span>
+              <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">
+      <HidingOverlay/>
-        <v-img src="@\assets\v-hide.png" class="v-img-hidding"></v-img>
+      <GameMedia/>
      </v-container>
      <v-container v-show="gamehiding === false" class="player_video_div">
          <video
            ref="videoJsPlayer"
            class="video-js  player_video"
            controls
          ></video>
      </v-container>
    </div>
  </div>
 </template>
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+  //import VideoPlayer from "@/components/VideoPlayer.vue"
-import videojs from 'video.js';
+  import GameMedia from "@/components/GameMedia.vue"
-import 'video.js/dist/video-js.css';
+  import HidingOverlay from "@/components/HidingOverlay.vue"
-import Mysteryland_h264 from '../quizz/Quizz-1/festival/Mysteryland_h264.mp4';
+  import { onMounted, reactive } from 'vue';
-import { subscribeToTopic } from '@/services/mqttService';
+  import mqtt from 'mqtt'
  import config from '@/config.js'
  import quizStore from '@/store/quizStore';
-// --- Déclarations
+  const mqttBrokerUrl = config.mqttBrokerUrl
-const player = ref(null);
+  const client = mqtt.connect(mqttBrokerUrl)
 let gamehiding = ref(true)
-const videoOptions = {
+  const scores = reactive({
-  autoplay: false,
+    RedTotalScore: 0,
-  controls: false,
+    BlueTotalScore: 0,
-  preload: 'auto',
+    YellowTotalScore: 0,
-  fluid: true,
+    GreenTotalScore: 0,
-  loop: true,
+    RedRoundScore: 0,
-  volume: 0,
+    BlueRoundScore: 0,
-  sources: [{ src: Mysteryland_h264, type: 'video/mp4' }],
+    YellowRoundScore: 0,
-};
+    GreenRoundScore: 0,
 // --- 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 = () => {
+  import { ref } from 'vue';
-  if (player.value) {
+  const timerDisplay = ref('00:00');
    console.log("⏸️ Pause de la vidéo !");
    player.value.pause();
  } else {
    console.warn("⚠️ Player non encore initialisé !");
  }
 };
-const handleMessage = (topic, message) => {
+  function formatTime(seconds) {
-  if (topic === "/display/control") {
+    const mins = Math.floor(seconds / 60);
-    switch (message) {
+    const secs = seconds % 60;
-      case "play":
+    return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
-        gamehiding.value = false;
+  }
-        playVideo();
+
-        break;
+  function handleMessage(topic, message) {
-      case "pause":
+    let parsedMessage;
-        gamehiding.value = true;
+    try {
-        pauseVideo();
+      parsedMessage = JSON.parse(message);
-        break;
+    } catch (e) {
-      case "hide":
+      console.error("Erreur d'analyse JSON:", e);
-        console.log("🛑 Cacher la vidéo (implémentation à venir)");
+      return;
-        break;
+    }
-      default:
+
-        console.warn("Commande non reconnue :", message);
+    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())
    })
  }
  }
 };
 // --- Lifecycle
  onMounted(() => {
-  player.value = videojs(
+    quizStore.actions.init();
    document.querySelector('.video-js'),
    videoOptions,
    () => {
      console.log('🎥 Video player ready');
    }
  );
-  subscribeToTopic('#', (topic, message) => {
+    subscribeToTopic('game/score', (topic, message) => {
      handleMessage(topic, message);
    });
    subscribeToTopic('game/timer', (topic, message) => {
      handleMessage(topic, message);
    });
 onBeforeUnmount(() => {
  if (player.value) {
    player.value.dispose();
  }
  });
 </script>
@@ -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);
  }
  .player_video_div {
    margin-top: 40px;
    width: calc(100vw - 20%);
    height: calc(100vh - 20%);
    border-radius: 20px !important;
  /* Transition styles */
  .score-fade-enter-active,
  .score-fade-leave-active {
    transition: opacity 0.3s ease;
  }
  .player_video {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 25px !important;
-  }
+  .score-fade-enter-from,
-  .vjs-tech{
+  .score-fade-leave-to {
-    border-radius: 25px;
+    opacity: 0;
  }
  .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;
  }
 </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
+**Développement (localhost):**
-podman run -dt --rm --pod vulture --name nanomq -v ./VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf docker.io/emqx/nanomq:latest
+```bash
-podman run -dt --rm --pod vulture --name vnode vnode:latest
+./VContainers/run_dev.sh
-podman run -dt --rm --pod vulture --name vapp vapp:latest
+```
 **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
+```bash
-podman stop vnode
+./VContainers/stop.sh
-podman stop nanomq
+```
-podman pod rm vulture
+
 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
 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
+# Development Container for VApp
-FROM docker.io/node:lts-alpine AS builder
+FROM docker.io/node:lts-alpine
-## Bundle APP files
+
 WORKDIR /app
 # Copy VApp source code
 COPY VApp ./
 # Install dependencies
 RUN npm install
 RUN npm run build
-FROM docker.io/nginx:stable-alpine
+# Expose Vite default port
-RUN rm /etc/nginx/conf.d/default.conf
+EXPOSE 5173
 COPY ./VContainers/VApp/nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=builder /app/dist /usr/share/nginx/html
-
+# Start in development mode with host exposure
-EXPOSE 80
+CMD ["npm", "run", "dev", "--", "--host"]
 # CMD ["npm","run","dev"]
 #CMD ["sleep", "1000"]
--- 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`,
+        message: `Buzzer ID ${buzzerId} ${action} to tilt mode`
        timestamp: new Date().toISOString()
    }));
    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}`,
+            message: `Tilt command '${status}' received for buzzer ID ${buzzer_id}`
            timestamp: new Date().toISOString()
        }));
        // 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})`,
+            message: `Buzzer ID ${buzzerId} received (Color: ${color})`
            timestamp: new Date().toISOString()
        }));
        // 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.`,
+                message: `Buzzer ID ${buzzerId} is in tilt`
                timestamp: new Date().toISOString()
            }));
            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})`,
+            message: `Activity detected on buzzer ID ${buzzerId} (Color: ${color})`
            timestamp: new Date().toISOString()
        }));
        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})`,
+                message: `Buzzer activated by ID ${buzzerId} (Color: ${color})`
                timestamp: new Date().toISOString()
            }));
            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.",
+            message: "Buzzers unblocked and ready for activation."
            timestamp: new Date().toISOString()
        }));
        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
--- a/VNode/services/game/score-manager.js
+++ b/VNode/services/game/score-manager.js
@@ -132,11 +132,15 @@ function updateTeamTotalScore(teamColor, points) {
 // Lecture du fichier de configuration
-const config = JSON.parse(fs.readFileSync(path.join('services','config','config_game.json'), 'utf8'));
+const configPath = path.join(__dirname, '../config/configuration.json');
 const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
 // Extraction des informations de config
-const { services: {  mqttHost, score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
+const { mqttHost, services: { score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
-console.log(mqttScoreChangeTopic)
+console.log("DEBUG: Config loaded from:", configPath);
 console.log("DEBUG: MQTT Host:", mqttHost);
 console.log("DEBUG: Topics:", mqttScoreTopic, mqttScoreChangeTopic);
 // Connexion au broker MQTT
 const client = mqtt.connect(mqttHost);
@@ -156,6 +160,8 @@ client.on('message', (topic, message) => {
    let process;
    let Team;
    let Action;
    let TotalScore = null;
    let RoundScore = null;
    try {
        // Analyse du message reçu
@@ -168,8 +174,18 @@ client.on('message', (topic, message) => {
    if (payload && typeof payload === 'object') {
        // Extraire la clé (la couleur) et la valeur associée
        Team = Object.keys(payload)[0]; // La première (et unique) clé
-        Action = payload[Team];         // La valeur associée
+        let value = payload[Team];         // La valeur associée
-        //console.log(`Team: ${Team}, Action: ${Action}`);
+
        if (typeof value === 'object') {
            // Mode SET (valeur absolue)
            if (value.hasOwnProperty('Total')) TotalScore = parseInt(value.Total, 10);
            if (value.hasOwnProperty('Round')) RoundScore = parseInt(value.Round, 10);
            Action = "SET";
        } else {
            // Mode ADD (relatif)
            Action = value;
        }
        process = true;
    } else {
        console.error(typeof payload);
@@ -177,46 +193,55 @@ client.on('message', (topic, message) => {
    }
    if (process === true) {
-        let currentScore = 0;
+        if (Action === "SET") {
-        let change = 0 ;
+            // Mise à jour absolue
-        switch (Team){
+            updateTeamScoreAbsolute(Team, TotalScore, RoundScore);
            case "Red":
                change = parseInt(Action, 10); // Convertit 'action' en entier
                if (!isNaN(change)) {
                    updateTeamTotalScore("Red", change)
        } else {
-                    console.error(`Action invalide : ${action}`);
+            // Mise à jour relative (existant)
-                }
+            let change = parseInt(Action, 10);
                break;
            case "Blue":
                change = parseInt(Action, 10); // Convertit 'action' en entier
            if (!isNaN(change)) {
-                    updateTeamTotalScore("Blue", change)
+                updateTeamTotalScore(Team, change);
            } else {
-                    console.error(`Action invalide : ${action}`);
+                console.error(`Action invalide : ${Action}`);
            }
                break;
            case "Green":
                change = parseInt(Action, 10); // Convertit 'action' en entier
                if (!isNaN(change)) {
                    updateTeamTotalScore("Green", change)
                } else {
                    console.error(`Action invalide : ${action}`);
                }
                break;
            case "Yellow":
                change = parseInt(Action, 10); // Convertit 'action' en entier
                if (!isNaN(change)) {
                    updateTeamTotalScore("Yellow", change)
                } else {
                    console.error(`Action invalide : ${action}`);
                }
                break;
        }
    }
 });
 // Fonction pour mettre à jour le score d'une équipe (Absolu)
 function updateTeamScoreAbsolute(teamColor, totalScore, roundScore) {
    fs.readFile(filePath, 'utf8', (err, data) => {
        if (err) {
            console.error("Erreur de lecture du fichier :", err);
            return;
        }
        try {
            const jsonData = JSON.parse(data);
            if (!jsonData.TEAM.hasOwnProperty(teamColor)) {
                console.error(`L'équipe ${teamColor} n'existe pas.`);
                return;
            }
            if (totalScore !== null && !isNaN(totalScore)) {
                jsonData.TEAM[teamColor].TotalScore = totalScore;
            }
            if (roundScore !== null && !isNaN(roundScore)) {
                jsonData.TEAM[teamColor].RoundScore = roundScore;
            }
            console.log(`Mise à jour absolue pour ${teamColor} -> Total: ${jsonData.TEAM[teamColor].TotalScore}, Round: ${jsonData.TEAM[teamColor].RoundScore}`);
            client.publish(mqttScoreTopic, JSON.stringify(jsonData));
            fs.writeFile(filePath, JSON.stringify(jsonData, null, 2), (err) => {
                if (err) console.error("Erreur d'écriture :", err);
            });
        } catch (parseErr) {
            console.error("Erreur JSON :", parseErr);
        }
    });
 }
 (async () => {
    while (true) {
        console.log("Boucle en arrière-plan");
--- 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