From 66adaa89266b54a4e39d036d9e97648898e0db17 Mon Sep 17 00:00:00 2001
From: Adrien Agez <adrien.agez@hotmail.fr>
Date: Thu, 28 May 2020 15:13:33 +0200
Subject: [PATCH] feat : create timer component

---
 src/components/Battleground.vue       |  9 +++--
 src/components/Battleground/Timer.vue | 53 +++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Battleground/Timer.vue

diff --git a/src/components/Battleground.vue b/src/components/Battleground.vue
index 84a8144..dd82c4e 100644
--- a/src/components/Battleground.vue
+++ b/src/components/Battleground.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="battleground" v-if="battleground">
     <div>Welcome to {{ battleground.name }}</div>
-    <router-link to="alteracPass">Go to Alterac Pass</router-link>
-    <router-link to="battlefieldOfEternity">Go to Battlefield Of Eternity</router-link>
+    <Timer initialTime="90"></Timer>
     <router-link to="/battlegrounds">Back to selector</router-link>
+
   </div>
 </template>
 
 <script>
   import BATTLEGROUNDS from '../gameInfos/maps'
-
+  import Timer from '@/components/Battleground/Timer'
   export default {
     name: 'Battleground',
     data () {
@@ -25,6 +25,9 @@
       $route (to) {
         this.battlegroundId = to.params.battlegroundId
       }
+    },
+    components: {
+      Timer
     }
   }
 </script>
diff --git a/src/components/Battleground/Timer.vue b/src/components/Battleground/Timer.vue
new file mode 100644
index 0000000..4dbcbf9
--- /dev/null
+++ b/src/components/Battleground/Timer.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="timer">
+    <span v-if="displayHours">{{ hours }}:</span><span v-if="displayMinutes">{{ minutes }}</span><span>:{{ seconds }}</span>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Timer',
+    data () {
+      return {
+        currentTime: this.$attrs.initialTime
+      }
+    },
+    methods: {
+      startTimer: function () {
+        this.timerIntevalId = setInterval(() => {
+          this.currentTime--
+          if (this.currentTime === 0) {
+            this.stopTimer()
+          }
+        }, 1000)
+      },
+      stopTimer: function () {
+        clearInterval(this.timerIntevalId)
+      }
+    },
+    computed: {
+      seconds: function () {
+        return (this.currentTime % 60).toLocaleString('en', {minimumIntegerDigits: 2})
+      },
+      minutes: function () {
+        return (Math.floor(this.currentTime / 60) % 60)
+      },
+      hours: function () {
+        return (Math.floor(this.currentTime / 3600) % 24)
+      },
+      displayMinutes: function () {
+        return this.minutes > 0 || this.hours > 0
+      },
+      displayHours: function () {
+        return this.hours > 0
+      }
+    },
+    mounted () {
+      this.startTimer()
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>