🚧: init new backgrounds

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

.nvmrc

@@ -1 +1 @@
-12
+14

Dockerfile

@@ -1,5 +1,5 @@
-FROM node:erbium-alpine
-RUN apk add python2
+FROM node:fermium-alpine
+RUN apk add python2 make g++
 WORKDIR /home/node
 COPY package.json yarn.lock ./
 RUN chown node:node -R .

README.md

@@ -9,7 +9,7 @@
 
 ## Build Setup
 
-This project run on the node 12 LTS version (Erbium)
+This project run on the node 14 LTS version (Fermium)
 
 ``` bash
 # install dependencies

package.json

@@ -52,7 +52,7 @@
     "rimraf": "^2.6.2",
     "sass-loader": "7.3.1",
     "semver": "^5.4.1",
-    "shelljs": "^0.7.8",
+    "shelljs": "^0.8.4",
     "sw-precache-webpack-plugin": "^0.11.4",
     "uglify-es": "^3.1.3",
     "url-loader": "^0.6.2",

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(4px)
+      height: 100vh
+
   .objectives
     display: flex
     flex-direction: column
-    height: 70vh
+    height: 100%
+
     .row
       display: flex
       justify-content: space-between
@@ -36,8 +45,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 +55,11 @@
       }
     },
     computed: {
+      battlegroundId () {
+        return this.$route.params.battlegroundId
+      },
       battleground () {
-        return BATTLEGROUNDS[this.$route.params.battlegroundId]
+        return BATTLEGROUNDS[this.battlegroundId]
       }
     },
     watch: {

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

@@ -25,7 +25,7 @@
 </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/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

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