(new) track the new quizstore.js for manage the current Vulture Session

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

VApp/src/components/CardTimer.vue

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

VApp/src/components/GameMedia.vue

@@ -0,0 +1,266 @@
+<template>
+    <v-container v-show="gamehiding === false" class="player_video_div">
+        <div v-if="currentQuestion" style="width: 100%; height: 100%;">
+            
+            <!-- VIDEO PLAYER -->
+            <div v-show="currentQuestion.Type === 'video'" style="width: 100%; height: 100%;">
+                <video ref="videoPlayer" class="video-js player_video" controls preload="auto">
+                </video>
+            </div>
+
+            <!-- PICTURE DISPLAY -->
+            <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>
+
+            <!-- AUDIO PLAYER -->
+             <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';
+
+// Store Access
+const currentQuestion = quizStore.getters.currentQuestion;
+
+// Video Player Refs
+const videoPlayer = ref(null);
+let vjsPlayer = null;
+
+// Audio Player Refs
+const audioPlayer = ref(null);
+
+let gamehiding = ref(true);
+
+// Methods
+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; // Already init
+    if (!videoPlayer.value) return; // DOM not ready
+
+    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');
+        // If current question is video, load it
+        if (currentQuestion.value && currentQuestion.value.Type === 'video') {
+             updateVideoSource();
+        }
+        
+        // Auto-hide when video ends
+        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 });
+    
+    // AutoPlay is managed by MQTT 'play' command now
+    // if (currentQuestion.value.Settings?.AutoPlay) {
+    //      vjsPlayer.play().catch(e => console.log('Autoplay blocked', e));
+    // }
+}
+
+// Watchers
+watch(currentQuestion, async (newVal, oldVal) => {
+    console.log('GameMedia: Question Changed', newVal);
+    
+    // Stop all media first
+    if (vjsPlayer) {
+        vjsPlayer.pause();
+    }
+    if (audioPlayer.value) {
+        audioPlayer.value.pause();
+    }
+    
+    // Ensure hidden on question change until played
+    gamehiding.value = true;
+    publishMessage('/display/control', 'hide');
+    if (!newVal) return;
+
+    await nextTick(); // Wait for DOM updates (v-if)
+
+    if (newVal.Type === 'video') {
+         if (!vjsPlayer) {
+             initVideoPlayer();
+         } else {
+             updateVideoSource();
+         }
+    } else if (newVal.Type === 'audio') {
+        // Audio loading (no autoplay)
+         setTimeout(() => {
+             if(audioPlayer.value){
+                  console.log('GameMedia: Loading Audio');
+                  audioPlayer.value.load();
+                  
+                  // Auto-hide when audio ends
+                  audioPlayer.value.onended = () => {
+                      console.log('GameMedia: Audio ended, hiding');
+                      gamehiding.value = true;
+                      publishMessage('/display/control', 'hide');
+                  };
+             }
+         }, 100);
+    }
+    // For 'picture' type, nothing to do, video/audio are already paused
+}, { immediate: true });
+
+// Lifecycle
+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') {
+                    // Start timer if PlayTime is configured
+                    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;
+        }
+    }
+    // Check for buzzer status if we want to auto-hide on buzz (like HidingOverlay)
+    // The user asked to replicate VideoPlayer, which only had /display/control in the provided snippet.
+    // But if "mesmes événéments" implies behavior of the system...
+    // I'll stick to VideoPlayer replication first.
+    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;
+  }
+  
+  /* Additional styles for Audio/Custom elements to fit the theme */
+  .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/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

@@ -58,13 +58,13 @@
     </div>
     
     <div class="timer-container">
-      <div class="timer-display">00:00</div>
+      <div class="timer-display">{{ timerDisplay }}</div>
     </div>
   </div>
 </template>
 
 <script setup>
-  import { onMounted, onUnmounted, reactive } from 'vue';
+  import { onMounted, onUnmounted, reactive, ref } from 'vue';
   import mqtt from 'mqtt'
   import config from '@/config.js'
 
@@ -82,6 +82,14 @@
     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 {
@@ -91,7 +99,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
@@ -102,6 +110,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) {
@@ -117,6 +129,9 @@
     subscribeToTopic('game/score', (topic, message) => {
       handleMessage(topic, message);
     });
+    subscribeToTopic('game/timer', (topic, message) => {
+      handleMessage(topic, message);
+    });
   });
 
   onUnmounted(() => {