(update) track the time in the new real timer for the remaining time

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 */