🚧: init new backgrounds

src/App.vue

@@ -41,8 +41,7 @@
       box-sizing: border-box
       padding-top: 16px
 
-  main
-    margin-top: 20px
+
 </style>
 
 <style lang="sass">

src/components/Battleground.vue

@@ -1,26 +1,35 @@
 <template>
   <div class="battleground" v-if="battleground">
-    <div>Welcome to {{ battleground.name }}</div>
+    <div class="battleground-content">
+      <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 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>
-    <router-link to="/battlegrounds">Back to selector</router-link>
-
   </div>
 </template>
 
 <style lang="sass" scoped>
   $border-style: 1px solid #66CCFF
 
+  .battleground
+    background-image: url(/static/backgrounds/alterac-pass.jpg)
+    background-size: contain
+    &-content
+      backdrop-filter: blur(6px)
+      height: 100vh
+
   .objectives
     display: flex
     flex-direction: column
-    height: 70vh
+    height: 100%
+
     .row
       display: flex
       justify-content: space-between
@@ -46,8 +55,11 @@
       }
     },
     computed: {
+      battlegroundId () {
+        return this.$route.params.battlegroundId
+      },
       battleground () {
-        return BATTLEGROUNDS[this.$route.params.battlegroundId]
+        return BATTLEGROUNDS[this.battlegroundId]
       }
     },
     watch: {

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/components/Timer.vue

@@ -8,9 +8,12 @@
   'use strict'
   export default {
     name: 'Timer',
+    props: {
+      initialTime: Number
+    },
     data () {
       return {
-        currentTime: this.$attrs.initialTime,
+        currentTime: this.initialTime,
         timerIntervalId: null
       }
     },

src/styles/main.sass

@@ -7,7 +7,8 @@
 // ## Colors ##
 // ############
 $blizzard-background-color: #0A020F
-$blizzard-font-color: #66CCFF
+$blizzard-background-color-transparent: #0A020FCC
+$blizzard-font-color: #6CF
 
 =blizzard-header-gradient
   background: #0d39a0 /* Old browsers */