From 1edb73bf5f2300035df2a1d43fe6d2fe1c5bc326 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Fri, 5 Apr 2024 15:00:41 +0200
Subject: [PATCH] =?UTF-8?q?Cr=C3=A9ation=20de=20la=20carte=20timer=20dans?=
 =?UTF-8?q?=20le=20GameStatus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/CardTimer.vue  | 101 +++++++++++++++++--------------
 ui/src/components/GameStatus.vue |   2 +-
 2 files changed, 56 insertions(+), 47 deletions(-)

diff --git a/ui/src/components/CardTimer.vue b/ui/src/components/CardTimer.vue
index a7d6404..fc0cc92 100644
--- a/ui/src/components/CardTimer.vue
+++ b/ui/src/components/CardTimer.vue
@@ -1,15 +1,18 @@
 <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 class="timer">
+        <v-label color="primary" class="labelTime-style" >{{ formatTime }}</v-label>
     </div>
-  </template>
+
+      <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>
+<script setup>
   import { ref, computed, onBeforeUnmount } from 'vue';
   
   const timerActive = ref(false);
@@ -62,48 +65,54 @@
   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 = () => {
+</script>
+    
+<script>
+    const startTimer = () => {
     if (!timerActive.value) {
-      timerActive.value = true;
-      startTime.value = Date.now() - elapsedTime.value;
-      updateTimer();
+        timerActive.value = true;
+        startTime.value = Date.now() - elapsedTime.value;
+        updateTimer();
     }
-  };
-  
-  const pauseTimer = () => {
+    };
+
+    const pauseTimer = () => {
     if (timerActive.value) {
-      timerActive.value = false;
-      clearInterval(currentTime.value);
+        timerActive.value = false;
+        clearInterval(currentTime.value);
     }
-  };
-  
-  const resetTimer = () => {
+    };
+
+    const resetTimer = () => {
     elapsedTime.value = 0;
     timerActive.value = false;
     clearInterval(currentTime.value);
-  };
-  
-  export { startTimer, pauseTimer, resetTimer };
-  </script>
-  
\ No newline at end of file
+    };
+
+    export { startTimer, pauseTimer, resetTimer };
+</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 */
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 20px;
+  }
+  .timer {
+    margin-bottom: 15px;
+  }
+  .labelTime-style {
+    font-size: 30px !important;
+    font-weight: 500;
+    color: #e91e1e !important;
+    opacity: 90% !important;
+  }
+  .buttons{
+    background-color: rgb(255, 255, 255);
+  }
+</style>
diff --git a/ui/src/components/GameStatus.vue b/ui/src/components/GameStatus.vue
index cd7ee10..0fac0a4 100644
--- a/ui/src/components/GameStatus.vue
+++ b/ui/src/components/GameStatus.vue
@@ -14,7 +14,7 @@
     <v-divider :thickness="2" class="border-opacity-100" color="primary"/>
 
     <CardScore/>
-    
+
     <CardTimer/>
   </v-navigation-drawer>
 </template>