🍱: add maps backgrounds

src/components/Battleground.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="battleground" v-if="battleground">
+    <div class="battleground-background" :style="backgroundCss"/>
     <div class="battleground-content">
-      <div>Welcome to {{ battleground.name }}</div>
-
       <div id="objectives" class="objectives">
-        <div class="row" v-for="objectiveRow in battleground.objectives">
+        <div class="objectives-row" v-for="objectiveRow in battleground.objectives">
           <template v-for="objective in objectiveRow">
             <Objective :objective="objective"></Objective>
           </template>
@@ -16,21 +15,26 @@
 </template>
 
 <style lang="sass" scoped>
-  $border-style: 1px solid #66CCFF
+  $border-style: 1px solid $blizzard-font-color
 
   .battleground
-    background-image: url(/static/backgrounds/alterac-pass.jpg)
-    background-size: contain
-    &-content
-      backdrop-filter: blur(4px)
+    &-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: 100%
 
-    .row
+    &-row
       display: flex
       justify-content: space-between
       flex-grow: 1
@@ -60,6 +64,11 @@
       },
       battleground () {
         return BATTLEGROUNDS[this.battlegroundId]
+      },
+      backgroundCss () {
+        return {
+          backgroundImage: `url(${this.battleground.backgroundUrl})`
+        }
       }
     },
     watch: {
@@ -73,4 +82,3 @@
     }
   }
 </script>
-

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}