Externalize maps infos + create map component

src/App.vue

@@ -19,7 +19,6 @@ export default {
 <style lang="sass">
   $blizzard-background-color: #0A020F
   $blizzard-font-color: #66CCFF
-
   =blizzard-header-gradient
     background: #0d39a0 /* Old browsers */
     background: -moz-linear-gradient(left,  #0d39a0 0%, #2f099b 100%) /* FF3.6-15 */
@@ -40,7 +39,7 @@ export default {
 
   main
 
-    margin-top: 40px
+    margin-top: 20px
 
   header
     margin: 0

src/components/Battleground.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>Welcome to {{ battleground.name }}</div>
+</template>
+
+<script>
+  import BATTLEGROUNDS from '../gameInfos/maps'
+
+  export default {
+    name: 'Battleground',
+    data () {
+      return {
+        battlegroundId: this.$route.params.battlegroundId,
+        battleground: BATTLEGROUNDS[this.$route.params.battlegroundId]
+      }
+    },
+    computed: {
+      battlegroundId () {
+        return this.$route.params.battlegroundId
+      },
+      battleground () {
+        return BATTLEGROUNDS[this.$route.params.battlegroundId]
+      }
+    }
+  }
+</script>
+
+<style lang="sass">
+
+</style>

src/components/BattlegroundSelector.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="map-selector">
+    <h1 class="map-selector__title">Battleground Selector</h1>
+    <ul class="map-selector__map-list">
+      <template v-for="(battleground, battlegroundId) in maps">
+        <router-link :to="`/battleground/${battlegroundId}`">
+          <li class="map-selector__map-list-item"><a>{{ battleground.name }}</a></li>
+        </router-link>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script type="text/javascript">
+  import MAPS from '../gameInfos/maps'
+
+  export default {
+    name: 'BattlegroundSelector',
+    data () {
+      return {
+        maps: MAPS
+      }
+    },
+    mounted () {
+      console.log(MAPS)
+    }
+  }
+</script>
+
+<style lang="sass">
+  .map-selector
+    &__map-list
+      list-style-type: none
+      padding-left: 0
+      &-item
+        font-size: 1.4rem
+        padding: 10px 0 10px 10px
+        border-top: solid #5659aa 1px
+        border-left: none
+</style>

src/components/Hello.vue

@@ -2,7 +2,7 @@
   <div class="hello">
     <h1>{{ msg }}</h1>
 
-    <router-link to="maps">Go to selector</router-link>
+    <router-link to="battlegrounds">Go to selector</router-link>
     <h2>Essential Links</h2>
     <ul>
       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
@@ -33,22 +33,18 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style>
-h1, h2 {
-  font-weight: normal;
-}
+<style lang="sass">
+h1, h2
+  font-weight: normal
 
-ul {
-  list-style-type: none;
-  padding: 0;
-}
+ul
+  list-style-type: none
+  padding: 0
 
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
+li
+  display: inline-block
+  margin: 0 10px
 
-a {
-  color: #35495E;
-}
+a
+  color: #35495E
 </style>

src/components/MapSelector.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="map-selector">
-    <h1 class="map-selector__title">Battleground Selector</h1>
-    <ul class="map-selector__map-list">
-      <li class="map-selector__map-list-item" v-for="map in maps"><a>{{ map.name }}</a></li>
-    </ul>
-  </div>
-</template>
-
-<script type="text/javascript">
-  const MAPS = {
-    alteracPass: {
-      name: 'Alterac Pass'
-    },
-    battlefieldOfEternity: {
-      name: 'Battlefield of Eternity'
-    },
-    blackheartSBay: {
-      name: "Blackheart's Bay"
-    },
-    gardenOfTerror: {
-      name: 'Garden of Terror'
-    },
-    HanamuraTemple: {
-      name: 'Hanamura Temple'
-    },
-    VolskayaFoundry: {
-      name: 'Volskaya Foundry'
-    },
-    HauntedMines: {
-      name: 'Haunted Mines'
-    },
-    TowersOfDoom: {
-      name: 'Towers of Doom'
-    },
-    InfernalShrines: {
-      name: 'Infernal Shrines'
-    },
-    TombOfTheSpiderQueen: {
-      name: 'Tomb of the Spider Queen'
-    },
-    SkyTemple: {
-      name: 'Sky Temple'
-    },
-    DragonShire: {
-      name: 'Dragon Shire'
-    },
-    CursedHollow: {
-      name: 'Cursed Hollow'
-    },
-    BraxisHoldout: {
-      name: 'Braxis Holdout'
-    },
-    WarheadJunction: {
-      name: 'Warhead Junction'
-    }
-  }
-
-  module.exports = {
-    name: 'MapSelector',
-    data: function () {
-      return {
-        maps: MAPS
-      }
-    }
-  }
-</script>
-
-<style lang="sass">
-  .map-selector
-    &__map-list
-      list-style-type: none
-      &-item
-        font-size: 2rem
-        padding: 10px 0 10px 5px
-</style>

src/gameInfos/maps.js

@@ -0,0 +1,47 @@
+export default {
+  alteracPass: {
+    name: 'Alterac Pass'
+  },
+  battlefieldOfEternity: {
+    name: 'Battlefield of Eternity'
+  },
+  blackheartSBay: {
+    name: "Blackheart's Bay"
+  },
+  gardenOfTerror: {
+    name: 'Garden of Terror'
+  },
+  hanamuraTemple: {
+    name: 'Hanamura Temple'
+  },
+  volskayaFoundry: {
+    name: 'Volskaya Foundry'
+  },
+  hauntedMines: {
+    name: 'Haunted Mines'
+  },
+  towersOfDoom: {
+    name: 'Towers of Doom'
+  },
+  infernalShrines: {
+    name: 'Infernal Shrines'
+  },
+  tombOfTheSpiderQueen: {
+    name: 'Tomb of the Spider Queen'
+  },
+  skyTemple: {
+    name: 'Sky Temple'
+  },
+  dragonShire: {
+    name: 'Dragon Shire'
+  },
+  cursedHollow: {
+    name: 'Cursed Hollow'
+  },
+  braxisHoldout: {
+    name: 'Braxis Holdout'
+  },
+  warheadJunction: {
+    name: 'Warhead Junction'
+  }
+}

src/router/index.js

@@ -2,7 +2,8 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 import Hello from '@/components/Hello'
-import MapSelector from '@/components/MapSelector'
+import BattlegroundSelector from '@/components/BattlegroundSelector'
+import Battleground from '@/components/Battleground'
 
 Vue.use(Router)
 
@@ -14,9 +15,12 @@ export default new Router({
       component: Hello
     },
     {
-      path: '/maps',
-      name: 'Map selector',
-      component: MapSelector
+      path: '/battlegrounds',
+      component: BattlegroundSelector
+    },
+    {
+      path: '/battleground/:battlegroundId',
+      component: Battleground
     }
   ]
 })

yarn.lock

@@ -6696,7 +6696,7 @@ sass-graph@^2.2.4:
     scss-tokenizer "^0.2.3"
     yargs "^7.0.0"
 
-sass-loader@7.1.3:
+sass-loader@7.3.1:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.3.1.tgz#a5bf68a04bcea1c13ff842d747150f7ab7d0d23f"
   integrity sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA==