Ajout de la card Timer pour créer un chronomètre de jeu

ui/src/components/CardTimer.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="container">
+      <div class="timer">{{ formatTime }}</div>
+      <div class="buttons">
+        <button @click="startTimer" :disabled="timerActive">Start</button>
+        <button @click="pauseTimer" :disabled="!timerActive">Pause</button>
+        <button @click="resetTimer">Reset</button>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, computed, onBeforeUnmount } from 'vue';
+  
+  const timerActive = ref(false);
+  const startTime = ref(null);
+  const currentTime = ref(null);
+  const elapsedTime = ref(0);
+  
+  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 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>
+  
+  <style>
+  .container {
+    text-align: center;
+    margin-top: 20px;
+  }
+  
+  .timer {
+    font-size: 2em;
+    margin-bottom: 20px;
+  }
+  
+  .buttons button {
+    margin: 0 10px;
+    padding: 10px 20px;
+    font-size: 1em;
+  }
+  </style>
+  
+  <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>
+  

ui/src/components/GameStatus.vue

@@ -105,11 +105,12 @@
         </v-row>
       </v-col>
     </v-row>
-
+  <CardTimer/>
   </v-navigation-drawer>
 </template>
 
 <script setup>
+import CardTimer from '@/components/CardTimer.vue'
 import { ref } from 'vue'; // Import des fonctions de Vue 3
 import variables from '@/variables.js';
 

ui/src/views/GameDisplay.vue

@@ -1,15 +0,0 @@
-<template>
-    <v-container>
-        <v-btn @click="update"></v-btn>
-    </v-container>
-</template>
-
-<script setup>
-    import { ref} from 'vue'; // Import des fonctions de Vue 3
-    import variables from '@/variables.js';
-
-    function update() {
-        variables.RedScore = '10'
-        
-    }
-</script>