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