Timers and other features for Heroes of the Storm
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 
 
 

91 Zeilen
2.1 KiB

  1. <template>
  2. <div class="battleground" v-if="battleground">
  3. <div class="battleground-background" :style="backgroundCss"/>
  4. <div class="battleground-objectives">
  5. <div class="battleground-objectives-row" v-for="objectiveRow in battleground.objectives">
  6. <template v-for="objective in objectiveRow">
  7. <Objective :objective="objective"></Objective>
  8. </template>
  9. </div>
  10. </div>
  11. <router-link to="/battlegrounds">Back to selector</router-link>
  12. </div>
  13. </template>
  14. <style lang="sass" scoped>
  15. $border-style: 1px solid $blizzard-font-color
  16. .battleground
  17. &-background, &-objectives
  18. height: 100vh
  19. width: 100vw
  20. &-background
  21. position: absolute
  22. background-size: cover
  23. background-position: center
  24. filter: blur(2px) brightness(70%)
  25. z-index: -10
  26. &-objectives
  27. display: flex
  28. flex-direction: column
  29. &-row
  30. display: flex
  31. justify-content: space-between
  32. flex-grow: 1
  33. &:first-child
  34. border-top: $border-style
  35. border-bottom: $border-style
  36. .objective
  37. &:first-child
  38. border-left: $border-style
  39. border-right: $border-style
  40. </style>
  41. <script>
  42. import BATTLEGROUNDS from '@/gameInfos/battlegrounds'
  43. import Timer from '@/components/Timer'
  44. import Objective from '@/components/Objective'
  45. export default {
  46. name: 'Battleground',
  47. data () {
  48. return {
  49. }
  50. },
  51. computed: {
  52. battlegroundId () {
  53. return this.$route.params.battlegroundId
  54. },
  55. battleground () {
  56. return BATTLEGROUNDS[this.battlegroundId]
  57. },
  58. backgroundCss () {
  59. return {
  60. backgroundImage: `url(${this.battleground.backgroundUrl})`
  61. }
  62. }
  63. },
  64. watch: {
  65. $route (to) {
  66. this.battlegroundId = to.params.battlegroundId
  67. }
  68. },
  69. mounted: function () {
  70. console.log('Mounted : lock landscape orientation')
  71. screen.orientation.lock('landscape')
  72. },
  73. destroyed: function () {
  74. console.log('Destroyed : unlock orientation')
  75. screen.orientation.unlock()
  76. },
  77. components: {
  78. Timer,
  79. Objective
  80. }
  81. }
  82. </script>