nexus-timers/src/components/Battleground.vue

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