Browse Source

Externalize maps infos + create map component

master
Adrien 4 years ago
parent
commit
8d7a870510
8 changed files with 138 additions and 99 deletions
  1. +1
    -2
      src/App.vue
  2. +29
    -0
      src/components/Battleground.vue
  3. +40
    -0
      src/components/BattlegroundSelector.vue
  4. +12
    -16
      src/components/Hello.vue
  5. +0
    -76
      src/components/MapSelector.vue
  6. +47
    -0
      src/gameInfos/maps.js
  7. +8
    -4
      src/router/index.js
  8. +1
    -1
      yarn.lock

+ 1
- 2
src/App.vue View File

@@ -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


+ 29
- 0
src/components/Battleground.vue View File

@@ -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>

+ 40
- 0
src/components/BattlegroundSelector.vue View File

@@ -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>

+ 12
- 16
src/components/Hello.vue View File

@@ -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>

+ 0
- 76
src/components/MapSelector.vue View File

@@ -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>

+ 47
- 0
src/gameInfos/maps.js View File

@@ -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'
}
}

+ 8
- 4
src/router/index.js View File

@@ -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
}
]
})

+ 1
- 1
yarn.lock View File

@@ -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==


Loading…
Cancel
Save