4 Commits

22 geänderte Dateien mit 64 neuen und 28 gelöschten Zeilen
  1. +2
    -3
      src/App.vue
  2. +36
    -16
      src/components/Battleground.vue
  3. +5
    -1
      src/components/Objective.vue
  4. +1
    -4
      src/components/TheBattlegroundSelector.vue
  5. +0
    -0
      src/components/Timer.vue
  6. +14
    -0
      src/gameInfos/battlegrounds.js
  7. +2
    -2
      src/router/index.js
  8. +4
    -2
      src/styles/main.sass
  9. BIN
      static/backgrounds/alterac-pass.jpg
  10. BIN
      static/backgrounds/battlefield-of-eternity.jpg
  11. BIN
      static/backgrounds/blackhearts-bay.jpg
  12. BIN
      static/backgrounds/braxis-holdout.jpg
  13. BIN
      static/backgrounds/cursed-hollow.jpg
  14. BIN
      static/backgrounds/dragon-shire.jpg
  15. BIN
      static/backgrounds/garden-of-terror.jpg
  16. BIN
      static/backgrounds/hanamura.jpg
  17. BIN
      static/backgrounds/infernal-shrines.jpg
  18. BIN
      static/backgrounds/sky-temple.jpg
  19. BIN
      static/backgrounds/tomb-of-spider-queen.jpg
  20. BIN
      static/backgrounds/towers-of-doom.jpg
  21. BIN
      static/backgrounds/volskaya.jpg
  22. BIN
      static/backgrounds/warhead-junction.jpg

+ 2
- 3
src/App.vue Datei anzeigen

@@ -28,7 +28,7 @@
margin: 0
height: 56px
padding: 0 16px 0 24px
+blizzard-header-gradient
@include blizzard-header-gradient
text-shadow: 0 0 1rem #009cff
color: #fff
span
@@ -41,8 +41,7 @@
box-sizing: border-box
padding-top: 16px

main
margin-top: 20px

</style>

<style lang="sass">


+ 36
- 16
src/components/Battleground.vue Datei anzeigen

@@ -1,27 +1,40 @@
<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 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>
<router-link to="/battlegrounds">Back to selector</router-link>

</div>
</template>

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

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

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

.objectives
display: flex
flex-direction: column
height: 70vh
.row
height: 100%

&-row
display: flex
justify-content: space-between
flex-grow: 1
@@ -36,8 +49,8 @@

<script>
import BATTLEGROUNDS from '@/gameInfos/battlegrounds'
import Timer from '@/components/Battleground/Timer'
import Objective from '@/components/Battleground/Objective'
import Timer from '@/components/Timer'
import Objective from '@/components/Objective'

export default {
name: 'Battleground',
@@ -46,8 +59,16 @@
}
},
computed: {
battlegroundId () {
return this.$route.params.battlegroundId
},
battleground () {
return BATTLEGROUNDS[this.$route.params.battlegroundId]
return BATTLEGROUNDS[this.battlegroundId]
},
backgroundCss () {
return {
backgroundImage: `url(${this.battleground.backgroundUrl})`
}
}
},
watch: {
@@ -61,4 +82,3 @@
}
}
</script>


src/components/Battleground/Objective.vue → src/components/Objective.vue Datei anzeigen

@@ -12,6 +12,7 @@
<div>
<Timer
ref="timer"
class="objective-timer"
:initialTime="objective.initialSpawnTime"
/>
</div>
@@ -22,10 +23,13 @@
.objective
width: 100%
text-align: center

&-timer
font-size: 2rem
</style>

<script>
import Timer from '@/components/Battleground/Timer'
import Timer from '@/components/Timer'
export default {
name: 'Objective',
props: {

src/components/BattlegroundSelector.vue → src/components/TheBattlegroundSelector.vue Datei anzeigen

@@ -24,7 +24,7 @@
}
</script>

<style lang="sass">
<style lang="sass" scoped>
.map-selector
&__map-list
list-style-type: none
@@ -34,9 +34,6 @@
padding: 10px 0 10px 10px
border-top: solid #5659aa 1px
border-left: none
</style>

<style lang="sass" scoped>
a
text-decoration: none
color: inherit

src/components/Battleground/Timer.vue → src/components/Timer.vue Datei anzeigen


+ 14
- 0
src/gameInfos/battlegrounds.js Datei anzeigen

@@ -16,6 +16,7 @@ const BOT = 'bottom'
export default {
alteracPass: {
name: 'Alterac Pass',
backgroundUrl: '/static/backgrounds/alterac-pass.jpg',
objectives: [
[
MAP.cavalryPrison
@@ -34,6 +35,7 @@ export default {
},
battlefieldOfEternity: {
name: 'Battlefield of Eternity',
backgroundUrl: '/static/backgrounds/battlefield-of-eternity.jpg',
objectives: [
[
MAP.immortals
@@ -52,6 +54,7 @@ export default {
},
blackheartSBay: {
name: "Blackheart's Bay",
backgroundUrl: '/static/backgrounds/blackhearts-bay.jpg',
objectives: [
[
CAMPS.graveGolem
@@ -75,6 +78,7 @@ export default {
},
gardenOfTerror: {
name: 'Garden of Terror',
backgroundUrl: '/static/backgrounds/garden-of-terror.jpg',
objectives: [
[
{...CAMPS.giants, position: 'blue top'},
@@ -94,6 +98,7 @@ export default {
},
hanamuraTemple: {
name: 'Hanamura Temple',
backgroundUrl: '/static/backgrounds/hanamura.jpg',
objectives: [
[
{...CAMPS.fortifiaction, position: TOP}
@@ -113,6 +118,7 @@ export default {
},
volskayaFoundry: {
name: 'Volskaya Foundry',
backgroundUrl: '/static/backgrounds/volskaya.jpg',
objectives: [
[
MAP.capturePoints
@@ -141,6 +147,7 @@ export default {
},
towersOfDoom: {
name: 'Towers of Doom',
backgroundUrl: '/static/backgrounds/towers-of-doom.jpg',
objectives: [
[
MAP.altars
@@ -159,6 +166,7 @@ export default {
},
infernalShrines: {
name: 'Infernal Shrines',
backgroundUrl: '/static/backgrounds/infernal-shrines.jpg',
objectives: [
[
MAP.shrine
@@ -178,6 +186,7 @@ export default {
},
tombOfTheSpiderQueen: {
name: 'Tomb of the Spider Queen',
backgroundUrl: '/static/backgrounds/tomb-of-spider-queen.jpg',
objectives: [
[
CAMPS.sandGolem
@@ -193,6 +202,7 @@ export default {
},
skyTemple: {
name: 'Sky Temple',
backgroundUrl: '/static/backgrounds/sky-temple.jpg',
objectives: [
[
MAP.temples
@@ -212,6 +222,7 @@ export default {
},
dragonShire: {
name: 'Dragon Shire',
backgroundUrl: '/static/backgrounds/dragon-shire.jpg',
objectives: [
[
MAP.dragon
@@ -228,6 +239,7 @@ export default {
},
cursedHollow: {
name: 'Cursed Hollow',
backgroundUrl: '/static/backgrounds/cursed-hollow.jpg',
objectives: [
[
{...CAMPS.graveGolem, position: RED}
@@ -247,6 +259,7 @@ export default {
},
braxisHoldout: {
name: 'Braxis Holdout',
backgroundUrl: '/static/backgrounds/braxis-holdout.jpg',
objectives: [
[
{...CAMPS.goliaths, position: BLUE},
@@ -263,6 +276,7 @@ export default {
},
warheadJunction: {
name: 'Warhead Junction',
backgroundUrl: '/static/backgrounds/warhead-junction.jpg',
objectives: [
[
{...CAMPS.slime, position: TOP}


+ 2
- 2
src/router/index.js Datei anzeigen

@@ -2,7 +2,7 @@ import Vue from 'vue'
import Router from 'vue-router'

import Hello from '@/components/Hello'
import BattlegroundSelector from '@/components/BattlegroundSelector'
import TheBattlegroundSelector from '@/components/TheBattlegroundSelector'
import Battleground from '@/components/Battleground'

Vue.use(Router)
@@ -16,7 +16,7 @@ export default new Router({
},
{
path: '/battlegrounds',
component: BattlegroundSelector
component: TheBattlegroundSelector
},
{
path: '/battleground/:battlegroundId',


+ 4
- 2
src/styles/main.sass Datei anzeigen

@@ -6,10 +6,12 @@
// ############
// ## Colors ##
// ############

$blizzard-background-color: #0A020F
$blizzard-font-color: #66CCFF
$blizzard-background-color-transparent: #0A020FCC
$blizzard-font-color: #6CF

=blizzard-header-gradient
@mixin blizzard-header-gradient
background: #0d39a0 /* Old browsers */
background: -moz-linear-gradient(left, #0d39a0 0%, #2f099b 100%) /* FF3.6-15 */
background: -webkit-linear-gradient(left, #0d39a0 0%,#2f099b 100%) /* Chrome10-25,Safari5.1-6 */


BIN
static/backgrounds/alterac-pass.jpg Datei anzeigen

Vorher Nachher
Breite: 1920  |  Höhe: 1080  |  Größe: 250 KiB

BIN
static/backgrounds/battlefield-of-eternity.jpg Datei anzeigen

Vorher Nachher
Breite: 1920  |  Höhe: 1080  |  Größe: 103 KiB

BIN
static/backgrounds/blackhearts-bay.jpg Datei anzeigen

Vorher Nachher
Breite: 1920  |  Höhe: 1080  |  Größe: 162 KiB

BIN
static/backgrounds/braxis-holdout.jpg Datei anzeigen

Vorher Nachher
Breite: 2016  |  Höhe: 1080  |  Größe: 134 KiB

BIN
static/backgrounds/cursed-hollow.jpg Datei anzeigen

Vorher Nachher
Breite: 1920  |  Höhe: 1080  |  Größe: 112 KiB

BIN
static/backgrounds/dragon-shire.jpg Datei anzeigen

Vorher Nachher
Breite: 1000  |  Höhe: 563  |  Größe: 62 KiB

BIN
static/backgrounds/garden-of-terror.jpg Datei anzeigen

Vorher Nachher
Breite: 1920  |  Höhe: 1080  |  Größe: 189 KiB

BIN
static/backgrounds/hanamura.jpg Datei anzeigen

Vorher Nachher
Breite: 1920  |  Höhe: 1080  |  Größe: 177 KiB

BIN
static/backgrounds/infernal-shrines.jpg Datei anzeigen

Vorher Nachher
Breite: 1920  |  Höhe: 1076  |  Größe: 123 KiB

BIN
static/backgrounds/sky-temple.jpg Datei anzeigen

Vorher Nachher
Breite: 1920  |  Höhe: 1080  |  Größe: 119 KiB

BIN
static/backgrounds/tomb-of-spider-queen.jpg Datei anzeigen

Vorher Nachher
Breite: 1920  |  Höhe: 1080  |  Größe: 59 KiB

BIN
static/backgrounds/towers-of-doom.jpg Datei anzeigen

Vorher Nachher
Breite: 1920  |  Höhe: 1080  |  Größe: 119 KiB

BIN
static/backgrounds/volskaya.jpg Datei anzeigen

Vorher Nachher
Breite: 1280  |  Höhe: 720  |  Größe: 186 KiB

BIN
static/backgrounds/warhead-junction.jpg Datei anzeigen

Vorher Nachher
Breite: 1920  |  Höhe: 913  |  Größe: 116 KiB

Laden…
Abbrechen
Speichern