(update) add real timer from the current question

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>