🚧: add objectives informations and style

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>

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>

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)

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',