nexus-timers/src/components/Battleground.vue

<template>
  <div class="battleground" v-if="battleground">
    <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>
</template>

<style lang="sass" scoped>
  $border-style: 1px solid #66CCFF

  .objectives
    display: flex
    flex-direction: column
    height: 70vh
    .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: {
      battleground () {
        return BATTLEGROUNDS[this.$route.params.battlegroundId]
      }
    },
    watch: {
      $route (to) {
        this.battlegroundId = to.params.battlegroundId
      }
    },
    components: {
      Timer,
      Objective
    }
  }
</script>