(update) mise à jour des commentaires en francais

VApp/src/App.vue

@@ -1,19 +1,28 @@
 <template>
   <v-app> 
-    <BrainBlastBar v-if="$route.name != 'Game Display (Projection)'" />   
-    <GameStatus v-if="$route.name === 'Game Control (Présentateur)'">
-    </GameStatus> 
+    <VultureBar v-if="showVultureBar" />   
+    <GameStatus v-if="showGameStatus" /> 
     <v-main>   
-      <RouterView /> 
+      <RouterView :key="$route.fullPath" /> 
     </v-main> <!-- <v-footer class="footer" :elevation=12 border><v-row justify="center">© 2024 - ASCO section Fablab</v-row></v-footer> -->
   </v-app>
 </template>
 
 <script setup>
-
-import BrainBlastBar from '@/components/BrainBlastBar.vue'
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import VultureBar from '@/components/VultureBar.vue'
 import GameStatus from '@/components/GameStatus.vue'
 
+const route = useRoute();
+
+const showVultureBar = computed(() => {
+  return route.name !== 'Game Display (Projection)' && route.name !== 'Score Display (Projection)';
+});
+
+const showGameStatus = computed(() => {
+  return route.name === 'Game Control (Présentateur)';
+});
 </script>
 
 <style>

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>

VApp/src/components/BuzzerValidationDialog.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-dialog v-model="dialog" persistent max-width="800" height="500">
-    <v-card  dark rounded="xl">
+  <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>
@@ -25,6 +25,7 @@
           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>
@@ -46,7 +47,7 @@
     const buzzerColor = ref('');
     const client = mqtt.connect(config.mqttBrokerUrl);
 
-    // Map hex colors to team names if needed, or just use the color directly
+    // 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;
@@ -58,7 +59,7 @@
         if (c === colors.BlueBuzzer.toUpperCase()) return 'bleue';
         if (c === colors.YellowBuzzer.toUpperCase()) return 'jaune';
         if (c === colors.GreenBuzzer.toUpperCase()) return 'verte';
-        return color; // Fallback
+        return color; // Valeur par défaut
     }
 
     function getTeamKeyFromColor(color) {
@@ -87,7 +88,7 @@
                         buzzerTeam.value = getTeamNameFromColor(data.color);
                         dialog.value = true;
                     } else if (data.status === 'unblocked') {
-                        // Optional: auto-close if unblocked from elsewhere
+                        // Optionnel : fermer automatiquement si débloqué depuis ailleurs
                         dialog.value = false;
                     }
                 } catch (e) {
@@ -108,7 +109,7 @@
             client.publish('game/score/update', JSON.stringify(payload));
         }
         
-        // Add a small delay before unlocking to ensure the score update is processed
+        // Petit délai avant le déblocage pour que la mise à jour du score soit traitée
         setTimeout(() => {
             unlockBuzzers();
         }, 100);
@@ -133,14 +134,13 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        height: 100%; /* Ensure it takes full height of the container if possible, or substantial height */
+        height: 100%; /* S'assure que l'élément occupe toute la hauteur du conteneur si possible, ou une hauteur substantielle */
     }
     .validate-btn {
-        background-color: rgb(var(--v-theme-success),1);
         color: rgb(var(--v-theme-background),1);
     }
     .refuse-btn {
-        background-color: rgb(var(--v-theme-error),1);
+        background-color: rgb(var(--v-theme-inactiveButton),1);
         color: rgb(var(--v-theme-background),1);
     }
 </style>

VApp/src/components/CardButtonScore.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script setup>
-  import { ref, reactive, onMounted } from 'vue';
+  import { ref, reactive, onMounted, onUnmounted } from 'vue';
   import mqtt from 'mqtt';
   import config from '@/config.js'; // Ensure correct path
 
@@ -72,34 +72,45 @@
     Green: { Total: 0, Round: 0 },
   });
 
-  const client = mqtt.connect(config.mqttBrokerUrl);
+  // const client = mqtt.connect(config.mqttBrokerUrl);
+  let client = null;
   
-  client.on('connect', () => {
-      console.log('CardButtonScore: Connected to MQTT broker at', config.mqttBrokerUrl);
-      client.subscribe('game/score');
+  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);
+            }
+        }
+    });
   });
 
-  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() {

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);
   }

VApp/src/components/CardSolution.vue

@@ -3,14 +3,36 @@
 		<v-card-title class="card__title primary" @click="toggleCardSize">   
 		<v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>   
 		Solution </v-card-title> 
-		<v-container class="text-center">   
-			<v-row justify="center">     
-				<v-container class="text-center">       <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->       
-					<v-img width="450" src="@/assets/copilot-solution-FULL-HD.jpg" style="margin: 0 auto;">
-					</v-img>     
-				</v-container>   
-			</v-row> 
+		<v-container class="text-center" v-if="currentQuestion">
+            <div class="text-h6 mb-2">Question {{ currentQuestionIndex + 1 }}</div>
+            <div class="text-body-1 font-weight-bold mb-4">{{ currentQuestion.QuestionText }}</div>
+            
+            <v-divider class="mb-4"></v-divider>
+            
+            <v-btn 
+                :color="showSolution ? 'red' : 'green'" 
+                class="mb-4"
+                @click="showSolution = !showSolution"
+            >
+                {{ showSolution ? 'Masquer Solution' : 'Voir Solution' }}
+            </v-btn>
+
+            <v-slide-y-transition>
+                <div v-if="showSolution" class="solution-block">
+                    <div class="text-h5 success--text mb-2">{{ currentQuestion.MasterData.CorrectAnswer }}</div>
+                    <div class="text-body-2 grey--text text--lighten-1 mb-2">
+                        <v-icon small>mdi-information</v-icon> {{ currentQuestion.MasterData.MasterNotes }}
+                    </div>
+                     <div class="text-body-2 info--text">
+                        <v-icon small>mdi-help-circle</v-icon> {{ currentQuestion.MasterData.Help }}
+                    </div>
+                </div>
+            </v-slide-y-transition>
+
 		</v-container>
+        <v-container v-else class="text-center">
+            <div class="text-caption">Aucun quiz chargé ou fin du quiz.</div>
+        </v-container>
 	</v-card>
 </template>
 <style>
@@ -34,13 +56,18 @@
 </style>
 
 <script setup>
-	import { ref } from 'vue';
+	import { ref, computed } from 'vue';
+    import quizStore from '@/store/quizStore';
 
 	// Variable pour contrôler l'état de la carte
 	const isCardReduced = ref(false);
+    const showSolution = ref(false);
 
 	// Méthode pour basculer l'état de la carte
 	function toggleCardSize() { 
 		isCardReduced.value = !isCardReduced.value;
 	}
+
+    const currentQuestion = quizStore.getters.currentQuestion;
+    const currentQuestionIndex = quizStore.getters.currentQuestionIndex;
 </script>

VApp/src/components/CardTimer.vue

@@ -1,85 +1,39 @@
 <template> 
     <div class="container">   
         <div class="timer">     
-            <v-label color="primary" class="labelTime-style" >{{ formatTime }}</v-label> 
+            <v-label class="labelTime-style" >{{ formatTime }}</v-label> 
         </div>
-        <v-row no-gutters justify="space-around" >     
-            <v-btn class="buttons" color="primary" icon="mdi-play" @click="startTimer"></v-btn>     
-            <v-btn color="primary"  icon="mdi-pause" @click="pauseTimer"></v-btn>     
-            <v-btn color="primary" icon="mdi-restart" @click="resetTimer"></v-btn>   
-        </v-row> 
     </div>
 </template>
   
 <script setup>
-  import { ref, computed, onBeforeUnmount } from 'vue';
+  import { computed, watch } from 'vue';
+  import quizStore from '@/store/quizStore';
   
-  const timerActive = ref(false);
-  const startTime = ref(null);
-  const currentTime = ref(null);
-  const elapsedTime = ref(0);
+  const timer = quizStore.getters.timer;
+  
+  watch(timer, (val) => {
+    console.log('CardTimer: timer value changed', val);
+  }, { immediate: true });
   
   const formatTime = computed(() => { 
-    let seconds = Math.floor(elapsedTime.value / 1000); 
-    let minutes = Math.floor(seconds / 60); 
-    let hours = Math.floor(minutes / 60);
-    seconds = seconds % 60; minutes = minutes % 60;
-   return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
-    });
+    const seconds = timer.value % 60;
+    const minutes = Math.floor(timer.value / 60);
+    const hours = Math.floor(minutes / 60);
+    return `${pad(minutes % 60)}:${pad(seconds)}`;
+  });
 
-    const pad = (number) => { 
-        return (number < 10 ? "0" : "") + number;
-    };
-
-    const startTimer = () => { 
-        if (!timerActive.value) {   
-            timerActive.value = true;   
-            startTime.value = Date.now() - elapsedTime.value;   
-            updateTimer(); }
-    };
-
-    const pauseTimer = () => { 
-        if (timerActive.value) {   
-            timerActive.value = false;   
-            clearInterval(currentTime.value); }
-    };
-
-    const resetTimer = () => { 
-        elapsedTime.value = 0; 
-        timerActive.value = false; 
-        clearInterval(currentTime.value);
-    };
-
-    const updateTimer = () => { 
-        currentTime.value = setInterval(() => {elapsedTime.value = Date.now() - startTime.value; }, 1000);
-    };
-
-    onBeforeUnmount(() => { clearInterval(currentTime.value);
-    });
-</script> 
-<script> 
-	const startTimer = () => { 
-		if (!timerActive.value) {     
-			timerActive.value = true;     
-			startTime.value = Date.now() - elapsedTime.value;     
-			updateTimer(); } };
-	const pauseTimer = () => { 
-		if (timerActive.value) {     
-			timerActive.value = false;     
-			clearInterval(currentTime.value); } };
-	const resetTimer = () => { 
-		elapsedTime.value = 0;
-		timerActive.value = false; 
-		clearInterval(currentTime.value); };
-	export { startTimer, pauseTimer, resetTimer };
+  const pad = (number) => { 
+      return (number < 10 ? "0" : "") + number;
+  };
 </script>
 
 <style>
 	.container { 
 		text-align: center; 
-		margin-top: auto; /* Place le container en bas de son parent */ 
-		margin-bottom: 1px; /* Marge en bas pour un espacement */ 
-		position: fixed; /* Le positionne de manière fixe */ 
+		margin-top: auto;
+		margin-bottom: 1px;
+		position: fixed;
 		left: 0; 
 		right: 0; 
 		bottom: 0; 
@@ -89,12 +43,9 @@
 		margin-bottom: 15px;
   }
   .labelTime-style { 
-		font-size: 30px !important; 
+		font-size: 40px !important; 
 		font-weight: 500; 
 		color: #d42828 !important; 
 		opacity: 90% !important;
   }
-  .buttons{ 
-		background-color: rgb(255, 255, 255);
-  }
 </style>

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>

VApp/src/components/HidingOverlay.vue

@@ -18,6 +18,9 @@
         case "pause":
           gamehiding.value = true;
           break;
+        case "hide":
+          gamehiding.value = true;
+          break;
         default:
           console.warn("Commande non reconnue :", message);
           gamehiding.value = true;
@@ -29,6 +32,17 @@
   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);
+          }
+      }
     });
   });
 

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>

VApp/src/plugins/router.js

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

VApp/src/plugins/vuetify.js

@@ -13,36 +13,38 @@ import { createVuetify } from 'vuetify'
 
 const CustomThemeDark = {
   dark: true,
-  colors: { 
-    background: '#121212', 
-    primary: '#d42828', 
-    secondary: '#F44336', 
-    accent: '#FFC107', 
-    error: '#e91e1e', 
-    warning: '#FFC107', 
-    info: '#607D8B', 
-    success: '#15B01B', 
-    BlueBuzzer: '#2867d4', 
-    YellowBuzzer: '#D4D100', 
-    RedBuzzer: '#d42828', 
+  colors: {
+    background: '#121212',
+    primary: '#d42828',
+    secondary: '#F44336',
+    accent: '#FFC107',
+    error: '#e91e1e',
+    warning: '#FFC107',
+    info: '#607D8B',
+    inactiveButton: '#707070ff',
+    success: '#15B01B',
+    BlueBuzzer: '#2867d4',
+    YellowBuzzer: '#D4D100',
+    RedBuzzer: '#d42828',
     GreenBuzzer: '#28d42e',
     DisconnectedBuzzer: '#595959',
   }
 }
 const CustomThemeLight = {
   dark: false,
-  colors: { 
-    background: '#ffffff', 
-    primary: '#d42828', 
-    secondary: '#F44336', 
-    accent: '#FFC107', 
-    error: '#e91e1e', 
-    warning: '#FFC107', 
-    info: '#607D8B', 
-    success: '#4CAF50', 
-    BlueBuzzer: '#2867d4', 
-    YellowBuzzer: '#D4D100', 
-    RedBuzzer: '#d42828', 
+  colors: {
+    background: '#ffffff',
+    primary: '#d42828',
+    secondary: '#F44336',
+    accent: '#FFC107',
+    error: '#e91e1e',
+    warning: '#FFC107',
+    info: '#607D8B',
+    inactiveButton: '#707070ff',
+    success: '#4CAF50',
+    BlueBuzzer: '#2867d4',
+    YellowBuzzer: '#D4D100',
+    RedBuzzer: '#d42828',
     GreenBuzzer: '#28d42e',
     DisconnectedBuzzer: '#595959',
   }
@@ -50,10 +52,11 @@ const CustomThemeLight = {
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
-  theme: { 
-    defaultTheme: 'CustomThemeDark', 
-    themes: {   
-      CustomThemeDark,   
-      CustomThemeLight, },
+  theme: {
+    defaultTheme: 'CustomThemeDark',
+    themes: {
+      CustomThemeDark,
+      CustomThemeLight,
+    },
   },
 })

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
+};

VApp/src/views/GameControl.vue

@@ -5,17 +5,17 @@
       <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>
@@ -26,9 +26,14 @@
 
 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>
 

VApp/src/views/GameDisplay.vue

@@ -23,7 +23,7 @@
           </div>
         </v-container>
         <v-container class="score_div color-white d-flex align-center justify-center">
-          <span class="v-label-time">00:00</span>
+          <span class="v-label-time">{{ timerDisplay }}</span>
         </v-container>
         <v-container class="score_div color-green">
           <div class="d-flex flex-column align-center">
@@ -50,17 +50,19 @@
 
     <div>
       <HidingOverlay/>
-      <VideoPlayer/>
+      <GameMedia/>
     </div>
   </div>
 </template>
 
 <script setup>
-  import VideoPlayer from "@/components/VideoPlayer.vue"
+  //import VideoPlayer from "@/components/VideoPlayer.vue"
+  import GameMedia from "@/components/GameMedia.vue"
   import HidingOverlay from "@/components/HidingOverlay.vue"
   import { onMounted, reactive } from 'vue';
   import mqtt from 'mqtt'
   import config from '@/config.js'
+  import quizStore from '@/store/quizStore';
 
   const mqttBrokerUrl = config.mqttBrokerUrl
   const client = mqtt.connect(mqttBrokerUrl)
@@ -76,6 +78,15 @@
     GreenRoundScore: 0,
   });
 
+  import { ref } from 'vue';
+  const timerDisplay = ref('00:00');
+
+  function formatTime(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+  }
+
   function handleMessage(topic, message) {
     let parsedMessage;
     try {
@@ -85,7 +96,7 @@
       return;
     }
 
-    if (parsedMessage.TEAM) {
+    if (topic === 'game/score' && parsedMessage.TEAM) {
        scores.RedTotalScore = parsedMessage.TEAM.Red.TotalScore
        scores.BlueTotalScore = parsedMessage.TEAM.Blue.TotalScore
        scores.YellowTotalScore = parsedMessage.TEAM.Yellow.TotalScore
@@ -96,6 +107,10 @@
        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) {
@@ -105,9 +120,14 @@
   }
 
   onMounted(() => {
+    quizStore.actions.init();
+    
     subscribeToTopic('game/score', (topic, message) => {
       handleMessage(topic, message);
     });
+    subscribeToTopic('game/timer', (topic, message) => {
+      handleMessage(topic, message);
+    });
   });
 </script>
 
@@ -134,32 +154,37 @@
     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;
@@ -167,6 +192,7 @@
     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);
@@ -174,6 +200,7 @@
       font-family: 'Bahnschrift';
       font-weight: 500;
       margin-bottom: 2px;
+      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
   }
   
   /* Transition styles */

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>

VHard/affichage_score_kiosque.md

@@ -1,84 +0,0 @@
-# Documentation Déploiement Kiosque - Tableau de Score
-
-Ce document décrit la configuration du serveur Fedora pour lancer automatiquement Google Chrome en mode plein écran au démarrage via un compositeur Wayland minimaliste (Cage).
-
-## 1. Installation des dépendances
-
-```bash
-sudo dnf install -y https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
-sudo dnf install -y cage
-
-```
-
-## 2. Configuration de l'Autologin (Systemd)
-
-Créer le fichier d'override pour que le serveur se connecte seul sur le TTY1 :
-`sudo systemctl edit getty@tty1.service`
-
-Coller le contenu suivant :
-
-```ini
-[Service]
-ExecStart=
-ExecStart=-/sbin/agetty --autologin VOTRE_USER --noclear %I $TERM
-
-```
-
-## 3. Script de lancement et Watchdog
-
-Créer un script nommé `kiosk-waiter.sh` dans votre dossier personnel pour relancer Chrome s'il crash :
-
-```bash
-#!/bin/bash
-# kiosk-waiter.sh
-
-URL="https://votre-url-quizz.com"
-
-while true; do
-  cage -- google-chrome-stable \
-    --kiosk \
-    --no-first-run \
-    --password-store=basic \
-    --ozone-platform=wayland \
-    --autoplay-policy=no-user-gesture-required \
-    --disable-component-update \
-    "$URL"
-
-  echo "Chrome s'est arrêté. Relancement dans 2 secondes..."
-  sleep 2
-done
-
-```
-
-*N'oubliez pas : `chmod +x ~/kiosk-waiter.sh*`
-
-## 4. Configuration Zsh (`~/.zlogin`)
-
-Ajouter ces lignes à la fin de votre fichier `~/.zlogin` pour déclencher l'affichage uniquement sur le port HDMI physique (TTY1) :
-
-```zsh
-# Empêcher la mise en veille de l'écran
-setterm --blank 0 --powersave off --powerdown 0
-
-if [[ -z "$DISPLAY" && "$XDG_VTNR" -eq 1 ]]; then
-  export MOZ_ENABLE_WAYLAND=1
-  export XDG_SESSION_TYPE=wayland
-
-  # Lancement du script de monitoring
-  exec ~/kiosk-waiter.sh
-fi
-
-```
-
-## 5. Debug et Commandes utiles
-
-* **Relancer le navigateur à distance (SSH) :**
-`pkill -u $USER cage` (Le script de boucle le relancera instantanément).
-* **Vérifier les logs :**
-`journalctl -u getty@tty1.service`
-* **Forcer l'arrêt :**
-Supprimer temporairement l'appel dans `~/.zlogin` ou tuer le script `kiosk-waiter.sh`.
-
----
-
-*Note : Si vous utilisez Podman pour le reste du projet (Vulture), ce setup "Bare Metal" pour l'affichage garantit une latence minimale pour les animations du tableau de score.*

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://nanomq'; // Broker URL (change if needed)
+const brokerUrl = config.mqttHost;
 const clientId = 'buzzer_manager';
 const options = {
     clientId,

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);

VNode/services/config/config_network.json

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

VNode/services/config/configuration.json

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

@@ -3,10 +3,10 @@ const mqtt = require('mqtt');
 const path = require('path');
 
 // Lecture du fichier de configuration
-const config = JSON.parse(fs.readFileSync(path.join('services','config','config_game.json'), 'utf8'));
+const config = JSON.parse(fs.readFileSync(path.join(__dirname, '../config/configuration.json'), 'utf8'));
 
 // Extraction des informations de config
-const { services: { mqttHost, quizzcollector: { MQTTconfig: { mqttQuizzCollectorListTopic, mqttQuizzCollectorCmdTopic } } } } = config;
+const { mqttHost, services: { quizzcollector: { MQTTconfig: { mqttQuizzCollectorListTopic, mqttQuizzCollectorCmdTopic } } } } = config;
 
 // Configuration
 const folderPath = 'quizz'; // Remplace par le chemin de ton dossier
@@ -39,9 +39,9 @@ function Collect() {
             console.error('Erreur lors de la lecture du dossier:', err);
             return;
         }
-        
+
         console.log('Dossiers trouvés:', files);
-        const message = JSON.stringify( files );
+        const message = JSON.stringify(files);
         client.publish(mqttQuizzCollectorListTopic, message, { qos: 1 }, (err) => {
             if (err) {
                 console.error('Erreur lors de la publication MQTT:', err);

VNode/services/game/score-manager.js

@@ -132,11 +132,11 @@ function updateTeamTotalScore(teamColor, points) {
 
 
 // Lecture du fichier de configuration
-const configPath = path.join(__dirname, '../config/config_game.json');
+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("DEBUG: Config loaded from:", configPath);
 console.log("DEBUG: MQTT Host:", mqttHost);
 console.log("DEBUG: Topics:", mqttScoreTopic, mqttScoreChangeTopic);