|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <template>
- <div class="battleground" v-if="battleground">
- <div class="battleground-background" :style="backgroundCss"/>
- <div class="battleground-objectives">
- <div class="battleground-objectives-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>
- </template>
-
- <style lang="sass" scoped>
- $border-style: 1px solid $blizzard-font-color
-
- .battleground
- &-background, &-objectives
- height: 100vh
- width: 100vw
-
- &-background
- position: absolute
- background-size: cover
- background-position: center
- filter: blur(2px) brightness(70%)
- z-index: -10
-
- &-objectives
- display: flex
- flex-direction: column
-
- &-row
- display: flex
- justify-content: space-between
- flex-grow: 1
- &:first-child
- border-top: $border-style
- border-bottom: $border-style
-
- .objective
- &:first-child
- border-left: $border-style
- border-right: $border-style
- </style>
-
- <script>
- import BATTLEGROUNDS from '@/gameInfos/battlegrounds'
- import Timer from '@/components/Timer'
- import Objective from '@/components/Objective'
-
- export default {
- name: 'Battleground',
- data () {
- return {
- }
- },
- computed: {
- battlegroundId () {
- return this.$route.params.battlegroundId
- },
- battleground () {
- return BATTLEGROUNDS[this.battlegroundId]
- },
- backgroundCss () {
- return {
- backgroundImage: `url(${this.battleground.backgroundUrl})`
- }
- }
- },
- watch: {
- $route (to) {
- this.battlegroundId = to.params.battlegroundId
- }
- },
- mounted: function () {
- console.log('Mounted : lock landscape orientation')
- screen.orientation.lock('landscape')
- },
- destroyed: function () {
- console.log('Destroyed : unlock orientation')
- screen.orientation.unlock()
- },
- components: {
- Timer,
- Objective
- }
- }
- </script>
|