nexus-timers/src/components/Battleground.vue

<template>
  <div class="battleground" v-if="battleground">
    <div class="battleground-background" :style="backgroundCss"/>
    <div class="battleground-content">
      <div id="objectives" class="objectives">
        <div class="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>
  </div>
</template>

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

  .battleground
    &-background, &-content
      position: absolute
      height: 100vh
      width: 100vw

    &-background
      background-size: cover
      background-position: center
      filter: blur(2px) brightness(70%)
      z-index: 5

    &-content
      z-index: 10


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