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

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(() => {