Browse Source

🚧: add objectives informations and style

master
Adrien 4 years ago
parent
commit
ee81d29fce
4 changed files with 50 additions and 19 deletions
  1. +30
    -5
      src/components/Battleground.vue
  2. +15
    -12
      src/components/Battleground/Objective.vue
  3. +4
    -1
      src/components/Battleground/Timer.vue
  4. +1
    -1
      src/components/BattlegroundSelector.vue

+ 30
- 5
src/components/Battleground.vue View File

@@ -1,16 +1,44 @@
<template>
<div class="battleground" v-if="battleground">
<div>Welcome to {{ battleground.name }}</div>
<Objective></Objective>

<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/maps'
import BATTLEGROUNDS from '@/gameInfos/battlegrounds'
import Timer from '@/components/Battleground/Timer'
import Objective from '@/components/Battleground/Objective'

export default {
name: 'Battleground',
data () {
@@ -34,6 +62,3 @@
}
</script>

<style lang="sass">

</style>

+ 15
- 12
src/components/Battleground/Objective.vue View File

@@ -1,23 +1,30 @@
<template>

<div class="objective" :click="onClick">
<div>Here is the picture</div>
<div class="objective" >
<div>
{{ objective.name }}
<span v-if="objective.position"> ({{ objective.position }})</span>
</div>

<div>Here is the objective name</div>

<div><Timer ref="timer" initialTime="90" /></div>
<div><Timer ref="timer" :initialTime="objective.initialSpawnTime" /></div>
</div>
</template>

<style lang="sass" scoped>
.objective
width: 100%
text-align: center
</style>

<script>
import Timer from '@/components/Battleground/Timer'
export default {
name: 'Objective',
props: {
objective: Object
},
data () {
return {
name: '',
initialSpawnTime: 90,
respawnTime: 120
}
},
methods: {
@@ -27,7 +34,3 @@
}
}
</script>

<style scoped>

</style>

+ 4
- 1
src/components/Battleground/Timer.vue View File

@@ -30,7 +30,10 @@
return (this.currentTime % 60).toLocaleString('en', {minimumIntegerDigits: 2})
},
minutes: function () {
return (Math.floor(this.currentTime / 60) % 60)
let minutes = Math.floor(this.currentTime / 60) % 60
return this.displayHours > 0
? minutes.toLocaleString('en', {minimumIntegerDigits: 2})
: minutes
},
hours: function () {
return (Math.floor(this.currentTime / 3600) % 24)


+ 1
- 1
src/components/BattlegroundSelector.vue View File

@@ -12,7 +12,7 @@
</template>

<script type="text/javascript">
import MAPS from '../gameInfos/maps'
import MAPS from '../gameInfos/battlegrounds'

export default {
name: 'BattlegroundSelector',


Loading…
Cancel
Save