From ee81d29fce2ac9c3a08f72e1090e0168ba5ab973 Mon Sep 17 00:00:00 2001
From: Adrien Agez <adrien.agez@hotmail.fr>
Date: Sat, 27 Jun 2020 21:16:47 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7:=20add=20objectives=20informations?=
 =?UTF-8?q?=20and=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Battleground.vue           | 35 +++++++++++++++++++----
 src/components/Battleground/Objective.vue | 27 +++++++++--------
 src/components/Battleground/Timer.vue     |  5 +++-
 src/components/BattlegroundSelector.vue   |  2 +-
 4 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/components/Battleground.vue b/src/components/Battleground.vue
index e2d8340..dadcad7 100644
--- a/src/components/Battleground.vue
+++ b/src/components/Battleground.vue
@@ -1,16 +1,44 @@
 <template>
   <div class="battleground" v-if="battleground">
     <div>Welcome to {{ battleground.name }}</div>
-    <Objective></Objective>
+
+    <div id="objectives" class="objectives">
+      <div class="row" v-for="objectiveRow in battleground.objectives">
+        <template v-for="objective in objectiveRow">
+          <Objective :objective="objective"></Objective>
+        </template>
+      </div>
+    </div>
     <router-link to="/battlegrounds">Back to selector</router-link>
 
   </div>
 </template>
 
+<style lang="sass" scoped>
+  $border-style: 1px solid #66CCFF
+
+  .objectives
+    display: flex
+    flex-direction: column
+    height: 70vh
+    .row
+      display: flex
+      justify-content: space-between
+      flex-grow: 1
+      &:first-child
+        border-top: $border-style
+      border-bottom: $border-style
+  .objective
+    &:first-child
+      border-left: $border-style
+    border-right: $border-style
+</style>
+
 <script>
-  import BATTLEGROUNDS from '../gameInfos/maps'
+  import BATTLEGROUNDS from '@/gameInfos/battlegrounds'
   import Timer from '@/components/Battleground/Timer'
   import Objective from '@/components/Battleground/Objective'
+
   export default {
     name: 'Battleground',
     data () {
@@ -34,6 +62,3 @@
   }
 </script>
 
-<style lang="sass">
-
-</style>
diff --git a/src/components/Battleground/Objective.vue b/src/components/Battleground/Objective.vue
index c4be8e4..277bda9 100644
--- a/src/components/Battleground/Objective.vue
+++ b/src/components/Battleground/Objective.vue
@@ -1,23 +1,30 @@
 <template>
 
-  <div class="objective" :click="onClick">
-    <div>Here is the picture</div>
+  <div class="objective" >
+    <div>
+      {{ objective.name }}
+      <span v-if="objective.position"> ({{ objective.position }})</span>
+    </div>
 
-    <div>Here is the objective name</div>
-
-    <div><Timer ref="timer" initialTime="90" /></div>
+    <div><Timer ref="timer" :initialTime="objective.initialSpawnTime" /></div>
   </div>
 </template>
 
+<style lang="sass" scoped>
+  .objective
+    width: 100%
+    text-align: center
+</style>
+
 <script>
   import Timer from '@/components/Battleground/Timer'
   export default {
     name: 'Objective',
+    props: {
+      objective: Object
+    },
     data () {
       return {
-        name: '',
-        initialSpawnTime: 90,
-        respawnTime: 120
       }
     },
     methods: {
@@ -27,7 +34,3 @@
     }
   }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/Battleground/Timer.vue b/src/components/Battleground/Timer.vue
index 4dbcbf9..59193aa 100644
--- a/src/components/Battleground/Timer.vue
+++ b/src/components/Battleground/Timer.vue
@@ -30,7 +30,10 @@
         return (this.currentTime % 60).toLocaleString('en', {minimumIntegerDigits: 2})
       },
       minutes: function () {
-        return (Math.floor(this.currentTime / 60) % 60)
+        let minutes = Math.floor(this.currentTime / 60) % 60
+        return this.displayHours > 0
+          ? minutes.toLocaleString('en', {minimumIntegerDigits: 2})
+          : minutes
       },
       hours: function () {
         return (Math.floor(this.currentTime / 3600) % 24)
diff --git a/src/components/BattlegroundSelector.vue b/src/components/BattlegroundSelector.vue
index c14958c..a396a70 100644
--- a/src/components/BattlegroundSelector.vue
+++ b/src/components/BattlegroundSelector.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script type="text/javascript">
-  import MAPS from '../gameInfos/maps'
+  import MAPS from '../gameInfos/battlegrounds'
 
   export default {
     name: 'BattlegroundSelector',