nexus-timers/src/components/Battleground.vue

<template>
  <div class="battleground" v-if="battleground">
    <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>
      </div>
      <router-link to="/battlegrounds">Back to selector</router-link>
    </div>
  </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(4px)
      height: 100vh

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

    .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]
      }
    },
    watch: {
      $route (to) {
        this.battlegroundId = to.params.battlegroundId
      }
    },
    components: {
      Timer,
      Objective
    }
  }
</script>