feat: Refactor VApp container to a development build and update its exposed port mapping in the run script.

VApp/package.json

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

VApp/src/App.vue

@@ -1,28 +1,19 @@
 <template>
   <v-app> 
-    <VultureBar v-if="showVultureBar" />   
+    <BrainBlastBar v-if="$route.name != 'Game Display (Projection)'" />   
-    <GameStatus v-if="showGameStatus" /> 
+    <GameStatus v-if="$route.name === 'Game Control (Présentateur)'">
+    </GameStatus> 
     <v-main>   
-      <RouterView :key="$route.fullPath" /> 
+      <RouterView /> 
     </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 { useRoute } from 'vue-router';
+import BrainBlastBar from '@/components/BrainBlastBar.vue'
-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>

VApp/src/components/BrainBlastBar.vue

@@ -0,0 +1,10 @@
+<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>

VApp/src/components/BuzzerValidationDialog.vue

@@ -1,146 +0,0 @@
-<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>

VApp/src/components/CardButtonScore.vue

@@ -4,54 +4,87 @@
       <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 pt-8">
+    <v-container class="text-center">
-      <!-- Team Lines -->
+      <v-row justify="center">
-      <v-row v-for="(team, color) in scores" :key="color" align="center" justify="center" class="mb-2">
+        <v-col cols="4" sm="6" md="3">
-         <!-- Icon/Label -->
+          <mqtt-button width="120" height="60" class="btn red xs12 sm6 md3" topic="game/score/update" message='{"Red": "-2"}'>
-         <v-col cols="2" class="d-flex justify-center">
+            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
-            <v-icon :color="getTeamColor(color)" size="40">mdi-circle</v-icon> 
+          </mqtt-button>
         </v-col>
-         
+        <v-col cols="4" sm="6" md="3">
-         <!-- Total Score Input -->
+          <mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "-1"}'>
-         <v-col cols="5">
+            <v-icon left size="40">mdi-minus-box</v-icon>
-            <v-text-field
+          </mqtt-button>
-              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">
-         <!-- Round Score Input -->
+          <mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "+1"}'>
-         <v-col cols="5">
+            <v-icon left size="40">mdi-plus-box</v-icon>
-            <v-text-field
+          </mqtt-button>
-              v-model.number="team.Round"
+        </v-col>
-              label="Manche"
+        <v-col cols="4" sm="6" md="3">
-              type="number"
+          <mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3 " topic="game/score/update" message='{"Red": "+2"}'>
-              variant="outlined"
+            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
-              density="compact"
+          </mqtt-button>
-              hide-details
+        </v-col>
-              prepend-inner-icon="mdi-minus"
+        <v-col cols="4" sm="6" md="3">
-              append-inner-icon="mdi-plus"
+          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-2"}'>
-              :color="getTeamColor(color)"
+            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
-              :base-color="getTeamColor(color)"
+          </mqtt-button>
-              @click:prepend-inner="changeScore(color, 'Round', -1)"
+        </v-col>
-              @click:append-inner="changeScore(color, 'Round', 1)"
+        <v-col cols="12" sm="6" md="3">
-              @update:model-value="updateScore(color)"
+          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-1"}'>
-              class="centered-input"
+            <v-icon left size="40">mdi-minus-box</v-icon>
-              readonly
+          </mqtt-button>
-            ></v-text-field>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "+1"}'>
+            <v-icon left size="40">mdi-plus-box</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "+2"}'>
+            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "-2"}'>
+            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "-1"}'>
+            <v-icon left size="40">mdi-minus-box</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "+1"}'>
+            <v-icon left size="40">mdi-plus-box</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "+2"}'>
+            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "-2"}'>
+            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "-1"}'>
+            <v-icon left size="40">mdi-minus-box</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "+1"}'>
+            <v-icon left size="40">mdi-plus-box</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "2"}'>
+            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
+          </mqtt-button>
         </v-col>
       </v-row>
     </v-container>
@@ -59,108 +92,23 @@
 </template>
 
 <script setup>
-  import { ref, reactive, onMounted, onUnmounted } from 'vue';
+  import MqttButton from './MqttButton.vue';
-  import mqtt from 'mqtt';
+  import { ref } from 'vue';
-  import config from '@/config.js'; // Ensure correct path
 
+  // Variable pour contrôler l'état de la carte
   const isCardReduced = ref(false);
 
-  const scores = reactive({
+  // Méthode pour basculer l'état de la carte
-    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;
+    height: 56px; /* Réglez la hauteur réduite selon vos besoins */
-    width: 60%; /* Adjusted width for layout */
+    width: 170px;
     overflow: hidden;
     transition: height 0.3s ease-in-out;
   }
-  
-  .centered-input input {
-    text-align: center;
-  }
-  .centered-input .v-field__label {
-    text-align: center;
-  }
-    
-  /* Remove number spin buttons */
-  .centered-input input[type=number]::-webkit-inner-spin-button, 
-  .centered-input input[type=number]::-webkit-outer-spin-button { 
-    -webkit-appearance: none; 
-    margin: 0; 
-  }
 </style>

VApp/src/components/CardCurrentQuizz.vue

@@ -28,12 +28,7 @@ const quizzList = ref([]);
 // Fonction pour mettre à jour la liste
 const handleMessage = (topic, message) => {
   try {
-    const parsed = JSON.parse(message.toString());
+    quizzList.value = 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);
   }

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.YellowRoundScore }}</v-label>             
+              <v-label class="labelRoundScore-style">{{ scores.OrangeRoundScore }}</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.YellowTotalScore }}</v-label>             
+              <v-label class="labelTotalScore-style pb-3">{{ scores.OrangeTotalScore }}</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
-  YellowTotalScore: 0, // Propriétés réactives
+  OrangeTotalScore: 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
-  YellowRoundScore: 0, // Propriétés réactives
+  OrangeRoundScore: 0, // Propriétés réactives
   GreenRoundScore: 0, // Propriétés réactives
 });
 // Fonction pour traiter chaque message reçu et réinitialiser le timeout

VApp/src/components/CardSolution.vue

@@ -3,35 +3,13 @@
 		<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-if="currentQuestion">
+		<v-container class="text-center">   
-            <div class="text-h6 mb-2">Question {{ currentQuestionIndex + 1 }}</div>
+			<v-row justify="center">     
-            <div class="text-body-1 font-weight-bold mb-4">{{ currentQuestion.QuestionText }}</div>
+				<v-container class="text-center">       <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->       
-            
+					<v-img width="450" src="@/assets/copilot-solution-FULL-HD.jpg" style="margin: 0 auto;">
-            <v-divider class="mb-4"></v-divider>
+					</v-img>     
-            
-            <v-btn 
-                :color="showSolution ? 'red' : 'green'" 
-                class="mb-4"
-                @click="showSolution = !showSolution"
-            >
-                {{ showSolution ? 'Masquer Solution' : 'Voir Solution' }}
-            </v-btn>
-
-            <v-slide-y-transition>
-                <div v-if="showSolution" class="solution-block">
-                    <div class="text-h5 success--text mb-2">{{ currentQuestion.MasterData.CorrectAnswer }}</div>
-                    <div class="text-body-2 grey--text text--lighten-1 mb-2">
-                        <v-icon small>mdi-information</v-icon> {{ currentQuestion.MasterData.MasterNotes }}
-                    </div>
-                     <div class="text-body-2 info--text">
-                        <v-icon small>mdi-help-circle</v-icon> {{ currentQuestion.MasterData.Help }}
-                    </div>
-                </div>
-            </v-slide-y-transition>
-
 				</v-container>   
-        <v-container v-else class="text-center">
+			</v-row> 
-            <div class="text-caption">Aucun quiz chargé ou fin du quiz.</div>
 		</v-container>
 	</v-card>
 </template>
@@ -56,18 +34,13 @@
 </style>
 
 <script setup>
-	import { ref, computed } from 'vue';
+	import { ref } 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>

VApp/src/components/CardTimer.vue

@@ -1,39 +1,85 @@
 <template> 
     <div class="container">   
         <div class="timer">     
-            <v-label class="labelTime-style" >{{ formatTime }}</v-label> 
+            <v-label color="primary" 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 { computed, watch } from 'vue';
+  import { ref, computed, onBeforeUnmount } from 'vue';
-  import quizStore from '@/store/quizStore';
   
-  const timer = quizStore.getters.timer;
+  const timerActive = ref(false);
-  
+  const startTime = ref(null);
-  watch(timer, (val) => {
+  const currentTime = ref(null);
-    console.log('CardTimer: timer value changed', val);
+  const elapsedTime = ref(0);
-  }, { immediate: true });
   
   const formatTime = computed(() => { 
-    const seconds = timer.value % 60;
+    let seconds = Math.floor(elapsedTime.value / 1000); 
-    const minutes = Math.floor(timer.value / 60);
+    let minutes = Math.floor(seconds / 60); 
-    const hours = Math.floor(minutes / 60);
+    let hours = Math.floor(minutes / 60);
-    return `${pad(minutes % 60)}:${pad(seconds)}`;
+    seconds = seconds % 60; minutes = minutes % 60;
+   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;
+		margin-top: auto; /* Place le container en bas de son parent */ 
-		margin-bottom: 1px;
+		margin-bottom: 1px; /* Marge en bas pour un espacement */ 
-		position: fixed;
+		position: fixed; /* Le positionne de manière fixe */ 
 		left: 0; 
 		right: 0; 
 		bottom: 0; 
@@ -43,9 +89,12 @@
 		margin-bottom: 15px;
   }
   .labelTime-style { 
-		font-size: 40px !important; 
+		font-size: 30px !important; 
 		font-weight: 500; 
 		color: #d42828 !important; 
 		opacity: 90% !important;
   }
+  .buttons{ 
+		background-color: rgb(255, 255, 255);
+  }
 </style>

VApp/src/components/GameMedia.vue

@@ -1,265 +0,0 @@
-<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>

VApp/src/components/HidingOverlay.vue

@@ -1,61 +0,0 @@
-<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>

VApp/src/components/MQTTDebugConsole.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container class="v-container-style-console">
-    <v-card tile outlined width="900">
+    <v-card tile outlined width="500">
       <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>
+      <v-container class="text-center">
         <div v-for="(log, index) in filteredLogs" :key="index">
           <v-label class="v-label-timestamp">{{ log.timestamp }} -&nbsp;</v-label>
           <v-label class="v-label-topic-message-title">Topic :&nbsp;</v-label>

VApp/src/components/MQTTDebugPublish.vue

@@ -1,18 +1,18 @@
 <template>
   <v-container class="v-container-style">
-    <v-card tile outlined width="600">
+    <v-card tile outlined width="500">
       <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-text-field
+        <v-select
           label="Topic"
           v-model="selectedTopic"
           :items="topics"
           prepend-icon="mdi-target"
-        ></v-text-field>
+        ></v-select>
 
         <v-text-field
           label="Message"
@@ -30,42 +30,6 @@
         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"
@@ -89,8 +53,7 @@ const topics = [
   'display/control',
   'sound/playsound',
   'game/score/update',
-  'game/score',
+  'game/score'
-  '/display/media'
 ];
 
 // Methods
@@ -99,18 +62,7 @@ const publisCustomMessage = () => {
 };
 
 const publishBuzzerUnblock = () => {
-  publishMessage('vulture/buzzer/unlock', "0");
+  publishMessage('brainblast/buzzer/unlock', "0");
-};
-const publishBuzzer = (inputColor) => {
-  publishMessage('vulture/buzzer/pressed/2',JSON.stringify({
-                buzzer_id: 1,
-                color: inputColor
-            }));
-  // Add a small delay before unlocking to ensure the score update is processed
-  setTimeout(() => {
-        publishMessage('/display/control', "pause");
-  }, 100);
-
 };
 </script>
 

VApp/src/components/VideoPlayer.vue

@@ -1,121 +0,0 @@
-<template>
-    <v-container v-show="gamehiding === false" class="player_video_div">
-        <video
-        ref="videoJsPlayer"
-        class="video-js  player_video"
-        controls
-        ></video>
-    </v-container>
-</template>
-
-<script setup>
-    import { ref, onMounted, onBeforeUnmount } from 'vue';
-    import videojs from 'video.js';
-    import 'video.js/dist/video-js.css';
-    import Mysteryland_h264 from '@/quizz/Quizz-1/festival/Mysteryland_h264.mp4';
-    import { subscribeToTopic } from '@/services/mqttService';
-    let gamehiding = ref(true);
-
-    let player = ref(null);
-    const videoOptions = {
-    autoplay: false,
-    controls: false,
-    preload: 'auto',
-    fluid: true,
-    loop: false,
-    volume: 0,
-    sources: [{ src: Mysteryland_h264, type: 'video/mp4' }],
-    };
-
-    const handleMessage = (topic, message) => {
-        console.log(topic, message)
-        if (topic === "/display/media") {
-            switch (message) {
-            case "BOX_BEAT.mp4":
-                changeVideoSource("BOX_BEAT.mp4")
-                break;
-            case "DARK_VALLEY.mp4":
-                changeVideoSource("DARK_VALLEY.mp4")
-                break;
-            }
-        }
-        if (topic === "/display/control") {
-            switch (message) {
-            case "play":
-                gamehiding.value = false;
-                console.log("▶️ Lecture de la vidéo !");
-                player.value.play().catch((error) => {
-                console.error("Erreur de lecture :", error);
-                });
-                break;
-            case "pause":
-                gamehiding.value = true;
-                console.log("⏸️ Pause de la vidéo !");
-                player.value.pause();
-                break;
-            case "hide":
-                console.log("🛑 Cacher la vidéo (implémentation à venir)");
-                break;
-            }
-        }
-    };
-    const changeVideoSource = (relativePath) => {
-    try {
-        const fullPath = new URL(`../quizz/Quizz-1/festival/${relativePath}`, import.meta.url).href;
-
-        if (player.value) {
-            if (relativePath.includes("mp4")){
-            player.value.src({ src: fullPath, type: 'video/mp4' });
-            }
-            if (relativePath.includes(".jpg")){
-            player.value.src({ src: fullPath, type: 'image/jpeg' });
-            }
-            player.value.load();
-            player.value.play().catch((err) => console.error('Erreur lecture :', err));
-        }
-    } catch (error) {
-        console.error('❌ Erreur lors du chargement de la vidéo :', error);
-    }
-    };
-
-    // --- Lifecycle
-    onMounted(() => {
-    player.value = videojs(
-        document.querySelector('.video-js'),
-        videoOptions,
-        () => {
-        console.log('🎥 Video player ready');
-        }
-    );
-
-    subscribeToTopic('#', (topic, message) => {
-        handleMessage(topic, message);
-        });
-    });
-
-    onBeforeUnmount(() => {
-    if (player) {
-        player.dispose();
-    }
-    });
-</script>
-
-<style>
-.player_video_div {
-    margin-top: 40px;
-    width: calc(100vw - 20%);
-    height: calc(100vh - 20%);
-    border-radius: 20px !important;
-  }
-  .player_video {
-    width: 100%;
-    height: 100%;
-    max-width: 100vw;
-    max-height: 100vh;
-    border-radius: 25px !important;
-  }
-  .vjs-tech{
-    border-radius: 25px;
-  }
-
-</style>

VApp/src/components/VultureBar.vue

@@ -1,10 +0,0 @@
-<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>

VApp/src/plugins/router.js

@@ -3,7 +3,7 @@ import HomeView from '../views/HomeView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [{
+  routes: [ {   
     path: '/',   
     name: 'Accueil',   
     component: HomeView 
@@ -18,11 +18,6 @@ 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',   
@@ -31,8 +26,7 @@ const router = createRouter({
   {   
     path: '/settings',   
     name: 'Paramètres',   
-    component: () => import('@/views/SettingsView.vue')
+    component: () => import('@/views/SettingsView.vue') }
-  }
   ]
 })
 

VApp/src/plugins/vuetify.js

@@ -21,7 +21,6 @@ const CustomThemeDark = {
     error: '#e91e1e', 
     warning: '#FFC107', 
     info: '#607D8B', 
-    inactiveButton: '#707070ff',
     success: '#15B01B', 
     BlueBuzzer: '#2867d4', 
     YellowBuzzer: '#D4D100', 
@@ -40,7 +39,6 @@ const CustomThemeLight = {
     error: '#e91e1e', 
     warning: '#FFC107', 
     info: '#607D8B', 
-    inactiveButton: '#707070ff',
     success: '#4CAF50', 
     BlueBuzzer: '#2867d4', 
     YellowBuzzer: '#D4D100', 
@@ -56,7 +54,6 @@ export default createVuetify({
     defaultTheme: 'CustomThemeDark', 
     themes: {   
       CustomThemeDark,   
-      CustomThemeLight,
+      CustomThemeLight, },
-    },
   },
 })

VApp/src/store/quizStore.js

@@ -1,166 +0,0 @@
-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
-};

VApp/src/variables.js

@@ -5,18 +5,18 @@ export default {
   RedTotalScore: 11,
   BlueTotalScore: 22,
   GreenTotalScore: 33,
-  YellowTotalScore: 44,
+  OrangeTotalScore: 44,
 
   // Score de la manche courante
   RedRoundScore: 1,
   BlueRoundScore: 2,
-  YellowRoundScore: 3,
+  OrangeRoundScore: 3,
   GreenRoundScore: 4,
 
   //Etat des buzzer
   BuzzerRed: false,
   BuzzerBlue: false,
-  BuzzerYellow: false,
+  BuzzerOrange: false,
   BuzzerGreen: false,
 
   // Ajoutez d'autres variables globales ici
@@ -24,4 +24,4 @@ export default {
 
 // Variables localStorage
 export const localStorageVars = { // Exemple de variable localStorage RedScorelocal: localStorage.getItem('RedScore') || '', BlueScorelocal: localStorage.getItem('BlueScore') || '', OrangeScorelocal: localStorage.getItem('OrangeScore') || '', GreenScorelocal: localStorage.getItem('GreenScore') || '',
-}; 
+  }; 

VApp/src/views/GameControl.vue

@@ -5,78 +5,71 @@
       <card-control /> 
     </v-col> 
     <v-col class="pl-3">   
-      <CardButtonScore />  
+      <card-soundboard /> 
     </v-col>
   </v-row>
 </v-container>
   <v-row no-gutters class="pr-4 pl-4"> 
     <v-row no-gutters>   
       <v-col class="align-start">     
-        <card-solution />   
+        <CardButtonScore />   
-         
       </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: rgb(var(--v-theme-primary)); /* Changez la couleur en fonction de votre thème */
+    background-color: #d42828; /* Changez la couleur en fonction de votre thème */
   }
   .card__title.feedback {   
-    background-color: rgb(var(--v-theme-success)); /* Changez la couleur en fonction de votre thème */
+    background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
   }
   .btn{ 
     border-radius:20px!important;
   }
   .btn.red { 
-    background-color: rgb(var(--v-theme-RedBuzzer)); /* Changez la couleur en fonction de votre thème */ 
+    background-color: #d42828; /* Changez la couleur en fonction de votre thème */ 
   }
   .btn.blue { 
-    background-color: rgb(var(--v-theme-BlueBuzzer)); /* Changez la couleur en fonction de votre thème */ 
+    background-color: #2867d4; /* Changez la couleur en fonction de votre thème */ 
   }
   .btn.yellow { 
-    background-color: rgb(var(--v-theme-YellowBuzzer)); /* Changez la couleur en fonction de votre thème */ 
+    background-color: #d4d100; /* Changez la couleur en fonction de votre thème */ 
   }
   .btn.green { 
-    background-color: rgb(var(--v-theme-GreenBuzzer)); /* Changez la couleur en fonction de votre thème */ 
+    background-color: #28d42e; /* Changez la couleur en fonction de votre thème */ 
   }
   .scorediv-style-red { 
-    background-color: rgb(var(--v-theme-RedBuzzer)) !important; 
+    background-color: #d42828 !important; 
     padding: 15px; 
     border-top-left-radius: 10%;
   }
   .scorediv-style-yellow { 
-    background-color: rgb(var(--v-theme-YellowBuzzer)) !important; 
+    background-color: #d4d100!important; 
     padding: 15px; 
     border-bottom-left-radius: 10%;
   }
   .scorediv-style-blue { 
-    background-color: rgb(var(--v-theme-BlueBuzzer)) !important; 
+    background-color: #2867d4 !important; 
     padding: 15px; 
     border-top-right-radius: 10%;    
   }
   .scorediv-style-green { 
-    background-color: rgb(var(--v-theme-GreenBuzzer)) !important; 
+    background-color: #28d42e !important; 
     padding: 15px; 
     border-bottom-right-radius: 10%;
   }

VApp/src/views/GameDisplay.vue

@@ -2,133 +2,113 @@
   <div class="main_div">
     <div>
       <v-container class="score_div_main">
-        <v-container class="score_div color-blue">
+        <v-container class="score_div color-blue"></v-container>
-          <div class="d-flex flex-column align-center">
+        <v-container class="score_div color-red"></v-container>
-            <Transition name="score-fade" mode="out-in">
-              <span :key="scores.BlueRoundScore" class="v-label-round-score">Manche : {{ scores.BlueRoundScore }}</span>
-            </Transition>
-            <Transition name="score-fade" mode="out-in">
-              <span :key="scores.BlueTotalScore" class="v-label-score">{{ scores.BlueTotalScore }}</span>
-            </Transition>
-          </div>
-        </v-container>
-        <v-container class="score_div color-red">
-          <div class="d-flex flex-column align-center">
-            <Transition name="score-fade" mode="out-in">
-              <span :key="scores.RedRoundScore" class="v-label-round-score">Manche : {{ scores.RedRoundScore }}</span>
-            </Transition>
-            <Transition name="score-fade" mode="out-in">
-              <span :key="scores.RedTotalScore" class="v-label-score">{{ scores.RedTotalScore }}</span>
-            </Transition>
-          </div>
-        </v-container>
         <v-container class="score_div color-white d-flex align-center justify-center">
-          <span class="v-label-time">{{ timerDisplay }}</span>
+          <span class="v-label-time">00:00</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>
-      <HidingOverlay/>
+      <v-container v-show="gamehiding === true" class="v-container-game-hided">
-      <GameMedia/>
+        <v-img src="@\assets\v-hide.png" class="v-img-hidding"></v-img>
+      </v-container>
+      <v-container v-show="gamehiding === false" class="player_video_div">
+          <video
+            ref="videoJsPlayer"
+            class="video-js  player_video"
+            controls
+          ></video>
+      </v-container>
     </div>
   </div>
 </template>
 
 <script setup>
-  //import VideoPlayer from "@/components/VideoPlayer.vue"
+import { ref, onMounted, onBeforeUnmount } from 'vue';
-  import GameMedia from "@/components/GameMedia.vue"
+import videojs from 'video.js';
-  import HidingOverlay from "@/components/HidingOverlay.vue"
+import 'video.js/dist/video-js.css';
-  import { onMounted, reactive } from 'vue';
+import Mysteryland_h264 from '../quizz/Quizz-1/festival/Mysteryland_h264.mp4';
-  import mqtt from 'mqtt'
+import { subscribeToTopic } from '@/services/mqttService';
-  import config from '@/config.js'
-  import quizStore from '@/store/quizStore';
 
-  const mqttBrokerUrl = config.mqttBrokerUrl
+// --- Déclarations
-  const client = mqtt.connect(mqttBrokerUrl)
+const player = ref(null);
+let gamehiding = ref(true)
 
-  const scores = reactive({
+const videoOptions = {
-    RedTotalScore: 0,
+  autoplay: false,
-    BlueTotalScore: 0,
+  controls: false,
-    YellowTotalScore: 0,
+  preload: 'auto',
-    GreenTotalScore: 0,
+  fluid: true,
-    RedRoundScore: 0,
+  loop: true,
-    BlueRoundScore: 0,
+  volume: 0,
-    YellowRoundScore: 0,
+  sources: [{ src: Mysteryland_h264, type: 'video/mp4' }],
-    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 {
-  import { ref } from 'vue';
+    console.warn("⚠️ Player non encore initialisé !");
-  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) {
+const pauseVideo = () => {
-    let parsedMessage;
+  if (player.value) {
-    try {
+    console.log("⏸️ Pause de la vidéo !");
-      parsedMessage = JSON.parse(message);
+    player.value.pause();
-    } catch (e) {
+  } else {
-      console.error("Erreur d'analyse JSON:", e);
+    console.warn("⚠️ Player non encore initialisé !");
-      return;
   }
+};
 
-    if (topic === 'game/score' && parsedMessage.TEAM) {
+const handleMessage = (topic, message) => {
-       scores.RedTotalScore = parsedMessage.TEAM.Red.TotalScore
+  if (topic === "/display/control") {
-       scores.BlueTotalScore = parsedMessage.TEAM.Blue.TotalScore
+    switch (message) {
-       scores.YellowTotalScore = parsedMessage.TEAM.Yellow.TotalScore
+      case "play":
-       scores.GreenTotalScore = parsedMessage.TEAM.Green.TotalScore
+        gamehiding.value = false;
-
+        playVideo();
-       scores.RedRoundScore = parsedMessage.TEAM.Red.RoundScore
+        break;
-       scores.BlueRoundScore = parsedMessage.TEAM.Blue.RoundScore
+      case "pause":
-       scores.YellowRoundScore = parsedMessage.TEAM.Yellow.RoundScore
+        gamehiding.value = true;
-       scores.GreenRoundScore = parsedMessage.TEAM.Green.RoundScore
+        pauseVideo();
-    }
+        break;
-
+      case "hide":
-    if (topic === 'game/timer' && parsedMessage.time !== undefined) {
+        console.log("🛑 Cacher la vidéo (implémentation à venir)");
-       timerDisplay.value = formatTime(parsedMessage.time);
+        break;
+      default:
+        console.warn("Commande non reconnue :", message);
     }
   }
+};
 
-  function subscribeToTopic(topic, callback) {
+// --- Lifecycle
-    client.subscribe(topic)
+onMounted(() => {
-    client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString())
+  player.value = videojs(
-    })
+    document.querySelector('.video-js'),
+    videoOptions,
+    () => {
+      console.log('🎥 Video player ready');
     }
+  );
 
-  onMounted(() => {
+  subscribeToTopic('#', (topic, message) => {
-    quizStore.actions.init();
-    
-    subscribeToTopic('game/score', (topic, message) => {
     handleMessage(topic, message);
   });
-    subscribeToTopic('game/timer', (topic, message) => {
+});
-      handleMessage(topic, message);
+
-    });
+onBeforeUnmount(() => {
-  });
+  if (player.value) {
+    player.value.dispose();
+  }
+});
 </script>
 
 <style scoped>
@@ -142,75 +122,67 @@
     display: flex;
     justify-content: center;
     gap: 5px;
-    background-color: rgb(40, 40, 40);
+    background-color: rgb(80, 80, 80);
     padding: 25px 30px;
     border-radius: 0px 0px 30px 30px;
-    box-shadow: 0px 3px 45px rgb(45, 115, 166);
+    box-shadow: 0px 1px 5px rgb(255, 0, 0);
   }
   .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: linear-gradient(135deg, rgb(var(--v-theme-BlueBuzzer)), #1a3a5a);
+    background-color: rgb(var(--v-theme-BlueBuzzer), 1);
     border-radius: 40px 5px 40px 5px;
   }
   .color-red {
-    background: linear-gradient(135deg, rgb(var(--v-theme-RedBuzzer)), #5a1a1a);
+    background-color: rgb(var(--v-theme-RedBuzzer), 1);
     border-radius: 40px 5px 40px 5px;
   }
   .color-green {
-    background: linear-gradient(135deg, rgb(var(--v-theme-GreenBuzzer)), #1a5a2a);
+    background-color: rgb(var(--v-theme-GreenBuzzer), 1);
     border-radius: 5px 40px 5px 40px;
   }
   .color-yellow {
-    background: linear-gradient(135deg, rgb(var(--v-theme-YellowBuzzer)), #5a5a1a);
+    background-color: rgb(var(--v-theme-YellowBuzzer), 1);
     border-radius: 5px 40px 5px 40px;
   }
   .color-white {
-    background-color: #1a1a1a;
+    background-color: white;
-    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: white;
+    color: black;
     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,
+  }
-  .score-fade-leave-to {
+  .vjs-tech{
-    opacity: 0;
+    border-radius: 25px;
+  }
+  .v-container-game-hided{
+    margin-top: 40px;
+    width: calc(100vw - 20%) !important;
+    height: calc(100vh - 20%) !important;
+    border-radius: 25px;
+  }
+  .v-img-hidding{
+    border-radius: 25px;
   }
 </style>

VApp/src/views/ScoreDisplay.vue

@@ -1,302 +0,0 @@
-<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>

VContainers/run_dev.sh

@@ -25,8 +25,8 @@ echo "Starting VNode..."
 podman run -dt --rm --network $NETWORK_NAME --name vnode vnode:latest
 
 echo "Starting VApp (DEV CONFIG)..."
-# VApp (nginx) needs port 5173 exposed
+# VApp (nginx) needs port 80 exposed
-podman run -dt --rm --network $NETWORK_NAME --name vapp -p 5173:5173 \
+podman run -dt --rm --network $NETWORK_NAME --name vapp -p 8080:5173 \
     -v ./VContainers/VApp/config/config_dev.js:/usr/share/nginx/html/config.js:Z \
     vapp:latest
 

VContainers/run_prod.sh

@@ -25,8 +25,8 @@ echo "Starting VNode..."
 podman run -dt --rm --network $NETWORK_NAME --name vnode vnode:latest
 
 echo "Starting VApp (PROD CONFIG)..."
-# VApp (nginx) needs port 5173 exposed
+# VApp (nginx) needs port 80 exposed
-podman run -dt --rm --network $NETWORK_NAME --name vapp -p 5173:5173 \
+podman run -dt --rm --network $NETWORK_NAME --name vapp -p 8080:5173 \
     -v ./VContainers/VApp/config/config_prod.js:/usr/share/nginx/html/config.js:Z \
     vapp:latest
 

VNode/services/buzzer/buzzer-manager.js

@@ -1,14 +1,8 @@
 // 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 = config.mqttHost;
+const brokerUrl = 'mqtt://nanomq'; // Broker URL (change if needed)
 const clientId = 'buzzer_manager';
 const options = {
     clientId,
@@ -70,7 +64,8 @@ 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`);
@@ -111,7 +106,8 @@ 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
@@ -135,7 +131,8 @@ 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
@@ -146,7 +143,8 @@ 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`
+                message: `Buzzer ID ${buzzerId} is in tilt mode and ignored.`,
+                timestamp: new Date().toISOString()
             }));
             return;
         }
@@ -156,7 +154,8 @@ 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) {
@@ -177,7 +176,8 @@ 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,12 +188,19 @@ 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;
@@ -201,7 +208,8 @@ 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');

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(__dirname, '../config/configuration.json'), 'utf8'));
+const config = JSON.parse(fs.readFileSync(path.join('services','config','config_network.json'), 'utf8'));
 
 // Extraction des informations de config
-const { mqttHost, hosts: { buzzers: { IP: buzzerIPs, MQTTconfig: { mqttTopic } } } } = config;
+const { hosts: { buzzers: { IP: buzzerIPs, MQTTconfig: { mqttHost, mqttTopic } } } } = config;
 
 // Connexion au broker MQTT
 const client = mqtt.connect(mqttHost);

VNode/services/config/config_game.json

@@ -1,6 +1,6 @@
 {
-    "mqttHost": "mqtt://192.168.1.201",
     "services": {
+        "mqttHost": "mqtt://nanomq",
         "score": {
             "MQTTconfig": {
                 "mqttScoreTopic": "game/score",
@@ -13,18 +13,5 @@
                 "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"
-            }
-        }
     }
 }

VNode/services/config/config_network.json

@@ -0,0 +1,16 @@
+{
+    "hosts": {
+        "buzzers": {
+            "IP": {
+                "redBuzzerIP": "192.168.73.40",
+                "blueBuzzerIP": "192.168.73.41",
+                "greenBuzzerIP": "192.168.73.43",
+                "yellowBuzzerIP": "192.168.73.42"
+            },
+            "MQTTconfig": {
+                "mqttHost": "mqtt://nanomq",
+                "mqttTopic": "buzzer/watcher"
+            }
+        }
+    }
+}

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(__dirname, '../config/configuration.json'), 'utf8'));
+const config = JSON.parse(fs.readFileSync(path.join('services','config','config_game.json'), 'utf8'));
 
 // Extraction des informations de config
-const { mqttHost, services: { quizzcollector: { MQTTconfig: { mqttQuizzCollectorListTopic, mqttQuizzCollectorCmdTopic } } } } = config;
+const { services: { mqttHost, quizzcollector: { MQTTconfig: { mqttQuizzCollectorListTopic, mqttQuizzCollectorCmdTopic } } } } = config;
 
 // Configuration
 const folderPath = 'quizz'; // Remplace par le chemin de ton dossier
@@ -41,7 +41,7 @@ function Collect() {
         }
         
         console.log('Dossiers trouvés:', files);
-        const message = JSON.stringify(files);
+        const message = JSON.stringify( files );
         client.publish(mqttQuizzCollectorListTopic, message, { qos: 1 }, (err) => {
             if (err) {
                 console.error('Erreur lors de la publication MQTT:', err);

VNode/services/game/score-manager.js

@@ -1,9 +1,9 @@
 const args = process.argv;
 
 // Vérification si un paramètre est passé, si c'est le cas c'est qu'on fournis un fichier de score pour reprendre le jeu la ou il était 
-if (args[2] !== undefined) {
+if (args[2] !== undefined){
     global.ScoreFile = args[2]
-} else {
+}else{
     global.ScoreFile = "XXX.json"
 }
 
@@ -132,15 +132,11 @@ function updateTeamTotalScore(teamColor, points) {
 
 
 // Lecture du fichier de configuration
-const configPath = path.join(__dirname, '../config/configuration.json');
+const config = JSON.parse(fs.readFileSync(path.join('services','config','config_game.json'), 'utf8'));
-const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
 
 // Extraction des informations de config
-const { mqttHost, services: { score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
+const { services: {  mqttHost, score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
-console.log("DEBUG: Config loaded from:", configPath);
+console.log(mqttScoreChangeTopic)
-console.log("DEBUG: MQTT Host:", mqttHost);
-console.log("DEBUG: Topics:", mqttScoreTopic, mqttScoreChangeTopic);
-
 // Connexion au broker MQTT
 const client = mqtt.connect(mqttHost);
 
@@ -160,8 +156,6 @@ client.on('message', (topic, message) => {
     let process;
     let Team;
     let Action;
-    let TotalScore = null;
-    let RoundScore = null;
 
     try {
         // Analyse du message reçu
@@ -174,74 +168,55 @@ 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é
-        let value = payload[Team];         // La valeur associée
+        Action = 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);
         process = false;
     }
 
-    if (process === true) {
+    if (process === true){
-        if (Action === "SET") {
+        let currentScore = 0;
-            // Mise à jour absolue
+        let change = 0 ;
-            updateTeamScoreAbsolute(Team, TotalScore, RoundScore);
+        switch (Team){
-        } else {
+            case "Red":
-            // Mise à jour relative (existant)
+                change = parseInt(Action, 10); // Convertit 'action' en entier
-            let change = parseInt(Action, 10);
                 if (!isNaN(change)) {
-                updateTeamTotalScore(Team, change);
+                    updateTeamTotalScore("Red", change)
                 } else {
-                console.error(`Action invalide : ${Action}`);
+                    console.error(`Action invalide : ${action}`);
                 }
+                break;
+            case "Blue":
+                change = parseInt(Action, 10); // Convertit 'action' en entier
+                if (!isNaN(change)) {
+                    updateTeamTotalScore("Blue", change)
+                } else {
+                    console.error(`Action invalide : ${action}`);
+                }
+                break;
+            case "Green":
+                change = parseInt(Action, 10); // Convertit 'action' en entier
+                if (!isNaN(change)) {
+                    updateTeamTotalScore("Green", change)
+                } else {
+                    console.error(`Action invalide : ${action}`);
+                }
+                break;
+            case "Yellow":
+                change = parseInt(Action, 10); // Convertit 'action' en entier
+                if (!isNaN(change)) {
+                    updateTeamTotalScore("Yellow", change)
+                } else {
+                    console.error(`Action invalide : ${action}`);
+                }
+                break;
         }
     }
 
 });
 
-// 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");
@@ -249,7 +224,7 @@ function updateTeamScoreAbsolute(teamColor, totalScore, roundScore) {
       await new Promise((resolve) => setTimeout(resolve, 2000)); // Pause de 2 secondes
       //client.publish(mqttScoreTopic, JSON.stringify(global.jsonData));
     }
-})();
+  })();
 
 client.on('error', (error) => {
     console.error('Erreur de connexion au broker MQTT:', error.message);