💄:: make timers bigger

see https://vuejs.org/v2/style-guide/#Tightly-coupled-component-names-strongly-recommended for Objective and Timer
see https://vuejs.org/v2/style-guide/#Single-instance-component-names-strongly-recommended for TheSelector

src/App.vue

@@ -28,7 +28,7 @@
     margin: 0
     height: 56px
     padding: 0 16px 0 24px
-    +blizzard-header-gradient
+    @include blizzard-header-gradient
     text-shadow: 0 0 1rem #009cff
     color: #fff
     span
@@ -41,8 +41,7 @@
       box-sizing: border-box
       padding-top: 16px
 
-  main
-    margin-top: 20px
+
 </style>
 
 <style lang="sass">

src/components/Battleground.vue

@@ -1,27 +1,40 @@
 <template>
   <div class="battleground" v-if="battleground">
-    <div>Welcome to {{ battleground.name }}</div>
-
-    <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 class="battleground-background" :style="backgroundCss"/>
+    <div class="battleground-content">
+      <div id="objectives" class="objectives">
+        <div class="objectives-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>
-    <router-link to="/battlegrounds">Back to selector</router-link>
-
   </div>
 </template>
 
 <style lang="sass" scoped>
-  $border-style: 1px solid #66CCFF
+  $border-style: 1px solid $blizzard-font-color
+
+  .battleground
+    &-background, &-content
+      height: 100vh
+      width: 100vw
+
+    &-background
+      position: absolute
+      background-size: cover
+      background-position: center
+      filter: blur(2px) brightness(70%)
+      z-index: -10
 
   .objectives
     display: flex
     flex-direction: column
-    height: 70vh
-    .row
+    height: 100%
+
+    &-row
       display: flex
       justify-content: space-between
       flex-grow: 1
@@ -36,8 +49,8 @@
 
 <script>
   import BATTLEGROUNDS from '@/gameInfos/battlegrounds'
-  import Timer from '@/components/Battleground/Timer'
-  import Objective from '@/components/Battleground/Objective'
+  import Timer from '@/components/Timer'
+  import Objective from '@/components/Objective'
 
   export default {
     name: 'Battleground',
@@ -46,8 +59,16 @@
       }
     },
     computed: {
+      battlegroundId () {
+        return this.$route.params.battlegroundId
+      },
       battleground () {
-        return BATTLEGROUNDS[this.$route.params.battlegroundId]
+        return BATTLEGROUNDS[this.battlegroundId]
+      },
+      backgroundCss () {
+        return {
+          backgroundImage: `url(${this.battleground.backgroundUrl})`
+        }
       }
     },
     watch: {
@@ -61,4 +82,3 @@
     }
   }
 </script>
-

src/components/Battleground/Objective.vue → src/components/Objective.vue

@@ -12,6 +12,7 @@
     <div>
       <Timer
         ref="timer"
+        class="objective-timer"
         :initialTime="objective.initialSpawnTime"
         />
     </div>
@@ -22,10 +23,13 @@
   .objective
     width: 100%
     text-align: center
+
+    &-timer
+      font-size: 2rem
 </style>
 
 <script>
-  import Timer from '@/components/Battleground/Timer'
+  import Timer from '@/components/Timer'
   export default {
     name: 'Objective',
     props: {

src/components/BattlegroundSelector.vue → src/components/TheBattlegroundSelector.vue

@@ -24,7 +24,7 @@
   }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
   .map-selector
     &__map-list
       list-style-type: none
@@ -34,9 +34,6 @@
         padding: 10px 0 10px 10px
         border-top: solid #5659aa 1px
         border-left: none
-</style>
-
-<style lang="sass" scoped>
   a
     text-decoration: none
     color: inherit

src/gameInfos/battlegrounds.js

@@ -16,6 +16,7 @@ const BOT = 'bottom'
 export default {
   alteracPass: {
     name: 'Alterac Pass',
+    backgroundUrl: '/static/backgrounds/alterac-pass.jpg',
     objectives: [
       [
         MAP.cavalryPrison
@@ -34,6 +35,7 @@ export default {
   },
   battlefieldOfEternity: {
     name: 'Battlefield of Eternity',
+    backgroundUrl: '/static/backgrounds/battlefield-of-eternity.jpg',
     objectives: [
       [
         MAP.immortals
@@ -52,6 +54,7 @@ export default {
   },
   blackheartSBay: {
     name: "Blackheart's Bay",
+    backgroundUrl: '/static/backgrounds/blackhearts-bay.jpg',
     objectives: [
       [
         CAMPS.graveGolem
@@ -75,6 +78,7 @@ export default {
   },
   gardenOfTerror: {
     name: 'Garden of Terror',
+    backgroundUrl: '/static/backgrounds/garden-of-terror.jpg',
     objectives: [
       [
         {...CAMPS.giants, position: 'blue top'},
@@ -94,6 +98,7 @@ export default {
   },
   hanamuraTemple: {
     name: 'Hanamura Temple',
+    backgroundUrl: '/static/backgrounds/hanamura.jpg',
     objectives: [
       [
         {...CAMPS.fortifiaction, position: TOP}
@@ -113,6 +118,7 @@ export default {
   },
   volskayaFoundry: {
     name: 'Volskaya Foundry',
+    backgroundUrl: '/static/backgrounds/volskaya.jpg',
     objectives: [
       [
         MAP.capturePoints
@@ -141,6 +147,7 @@ export default {
   },
   towersOfDoom: {
     name: 'Towers of Doom',
+    backgroundUrl: '/static/backgrounds/towers-of-doom.jpg',
     objectives: [
       [
         MAP.altars
@@ -159,6 +166,7 @@ export default {
   },
   infernalShrines: {
     name: 'Infernal Shrines',
+    backgroundUrl: '/static/backgrounds/infernal-shrines.jpg',
     objectives: [
       [
         MAP.shrine
@@ -178,6 +186,7 @@ export default {
   },
   tombOfTheSpiderQueen: {
     name: 'Tomb of the Spider Queen',
+    backgroundUrl: '/static/backgrounds/tomb-of-spider-queen.jpg',
     objectives: [
       [
         CAMPS.sandGolem
@@ -193,6 +202,7 @@ export default {
   },
   skyTemple: {
     name: 'Sky Temple',
+    backgroundUrl: '/static/backgrounds/sky-temple.jpg',
     objectives: [
       [
         MAP.temples
@@ -212,6 +222,7 @@ export default {
   },
   dragonShire: {
     name: 'Dragon Shire',
+    backgroundUrl: '/static/backgrounds/dragon-shire.jpg',
     objectives: [
       [
         MAP.dragon
@@ -228,6 +239,7 @@ export default {
   },
   cursedHollow: {
     name: 'Cursed Hollow',
+    backgroundUrl: '/static/backgrounds/cursed-hollow.jpg',
     objectives: [
       [
         {...CAMPS.graveGolem, position: RED}
@@ -247,6 +259,7 @@ export default {
   },
   braxisHoldout: {
     name: 'Braxis Holdout',
+    backgroundUrl: '/static/backgrounds/braxis-holdout.jpg',
     objectives: [
       [
         {...CAMPS.goliaths, position: BLUE},
@@ -263,6 +276,7 @@ export default {
   },
   warheadJunction: {
     name: 'Warhead Junction',
+    backgroundUrl: '/static/backgrounds/warhead-junction.jpg',
     objectives: [
       [
         {...CAMPS.slime, position: TOP}

src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 import Hello from '@/components/Hello'
-import BattlegroundSelector from '@/components/BattlegroundSelector'
+import TheBattlegroundSelector from '@/components/TheBattlegroundSelector'
 import Battleground from '@/components/Battleground'
 
 Vue.use(Router)
@@ -16,7 +16,7 @@ export default new Router({
     },
     {
       path: '/battlegrounds',
-      component: BattlegroundSelector
+      component: TheBattlegroundSelector
     },
     {
       path: '/battleground/:battlegroundId',

src/styles/main.sass

@@ -6,10 +6,12 @@
 // ############
 // ## Colors ##
 // ############
+
 $blizzard-background-color: #0A020F
-$blizzard-font-color: #66CCFF
+$blizzard-background-color-transparent: #0A020FCC
+$blizzard-font-color: #6CF
 
-=blizzard-header-gradient
+@mixin blizzard-header-gradient
   background: #0d39a0 /* Old browsers */
   background: -moz-linear-gradient(left,  #0d39a0 0%, #2f099b 100%) /* FF3.6-15 */
   background: -webkit-linear-gradient(left,  #0d39a0 0%,#2f099b 100%) /* Chrome10-25,Safari5.1-6 */