Browse Source

🚧: init new backgrounds

undefined
Adrien 4 years ago
parent
commit
2426391b79
8 changed files with 30 additions and 18 deletions
  1. +1
    -2
      src/App.vue
  2. +22
    -10
      src/components/Battleground.vue
  3. +1
    -4
      src/components/TheBattlegroundSelector.vue
  4. +4
    -1
      src/components/Timer.vue
  5. +2
    -1
      src/styles/main.sass
  6. BIN
      static/backgrounds/alterac-pass.jpg
  7. BIN
      static/backgrounds/battlefieldofeternity.jpg
  8. BIN
      static/backgrounds/blackheartsbay.jpg

+ 1
- 2
src/App.vue View File

@@ -41,8 +41,7 @@
box-sizing: border-box
padding-top: 16px

main
margin-top: 20px

</style>

<style lang="sass">


+ 22
- 10
src/components/Battleground.vue View File

@@ -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(6px)
height: 100vh

.objectives
display: flex
flex-direction: column
height: 70vh
height: 100%

.row
display: flex
justify-content: space-between
@@ -46,8 +55,11 @@
}
},
computed: {
battlegroundId () {
return this.$route.params.battlegroundId
},
battleground () {
return BATTLEGROUNDS[this.$route.params.battlegroundId]
return BATTLEGROUNDS[this.battlegroundId]
}
},
watch: {


+ 1
- 4
src/components/TheBattlegroundSelector.vue View File

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


+ 4
- 1
src/components/Timer.vue View File

@@ -8,9 +8,12 @@
'use strict'
export default {
name: 'Timer',
props: {
initialTime: Number
},
data () {
return {
currentTime: this.$attrs.initialTime,
currentTime: this.initialTime,
timerIntervalId: null
}
},


+ 2
- 1
src/styles/main.sass View File

@@ -7,7 +7,8 @@
// ## Colors ##
// ############
$blizzard-background-color: #0A020F
$blizzard-font-color: #66CCFF
$blizzard-background-color-transparent: #0A020FCC
$blizzard-font-color: #6CF

=blizzard-header-gradient
background: #0d39a0 /* Old browsers */


BIN
static/backgrounds/alterac-pass.jpg View File

Before After
Width: 6000  |  Height: 3375  |  Size: 909 KiB

BIN
static/backgrounds/battlefieldofeternity.jpg View File

Before After
Width: 1920  |  Height: 1080  |  Size: 103 KiB

BIN
static/backgrounds/blackheartsbay.jpg View File

Before After
Width: 3300  |  Height: 1856  |  Size: 762 KiB

Loading…
Cancel
Save