|
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- <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/Battleground/Timer'
- import Objective from '@/components/Battleground/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>
-
|