From c99b4b687640fb5bf86aa708a824139f8b462fe3 Mon Sep 17 00:00:00 2001
From: Adrien Agez <adrien.agez@hotmail.fr>
Date: Wed, 2 Dec 2020 22:11:21 +0100
Subject: [PATCH] WIP: modifs style

---
 src/App.vue                     |  2 +-
 src/components/Battleground.vue | 30 +++++++++++++++++++++---------
 src/components/Objective.vue    |  4 ++++
 src/gameInfos/battlegrounds.js  |  1 +
 src/styles/main.sass            | 21 +++++++++++++++++++--
 5 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c2d9df7..e6d6f64 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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
diff --git a/src/components/Battleground.vue b/src/components/Battleground.vue
index 82abb53..9bf6932 100644
--- a/src/components/Battleground.vue
+++ b/src/components/Battleground.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="battleground" v-if="battleground">
+    <div class="battleground-background" :style="backgroundCss"/>
     <div class="battleground-content">
-      <div>Welcome to {{ battleground.name }}</div>
-
       <div id="objectives" class="objectives">
-        <div class="row" v-for="objectiveRow in battleground.objectives">
+        <div class="objectives-row" v-for="objectiveRow in battleground.objectives">
           <template v-for="objective in objectiveRow">
             <Objective :objective="objective"></Objective>
           </template>
@@ -19,18 +18,27 @@
   $border-style: 1px solid #66CCFF
 
   .battleground
-    background-image: url(/static/backgrounds/alterac-pass.jpg)
-    background-size: contain
-    &-content
-      backdrop-filter: blur(4px)
+    &-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
+    &-row
       display: flex
       justify-content: space-between
       flex-grow: 1
@@ -60,6 +68,11 @@
       },
       battleground () {
         return BATTLEGROUNDS[this.battlegroundId]
+      },
+      backgroundCss () {
+        return {
+          backgroundImage: `url(${this.battleground.backgroundUrl})`
+        }
       }
     },
     watch: {
@@ -73,4 +86,3 @@
     }
   }
 </script>
-
diff --git a/src/components/Objective.vue b/src/components/Objective.vue
index 8bcfd49..3289c32 100644
--- a/src/components/Objective.vue
+++ b/src/components/Objective.vue
@@ -12,6 +12,7 @@
     <div>
       <Timer
         ref="timer"
+        class="objective-timer"
         :initialTime="objective.initialSpawnTime"
         />
     </div>
@@ -22,6 +23,9 @@
   .objective
     width: 100%
     text-align: center
+
+    &-timer
+      font-size: 2rem
 </style>
 
 <script>
diff --git a/src/gameInfos/battlegrounds.js b/src/gameInfos/battlegrounds.js
index e28effc..db49c78 100644
--- a/src/gameInfos/battlegrounds.js
+++ b/src/gameInfos/battlegrounds.js
@@ -16,6 +16,7 @@ const BOT = 'bottom'
 export default {
   alteracPass: {
     name: 'Alterac Pass',
+    backgroundUrl: '/static/backgrounds/alterac-pass.jpg',
     objectives: [
       [
         MAP.cavalryPrison
diff --git a/src/styles/main.sass b/src/styles/main.sass
index e938fd0..bb23ef9 100644
--- a/src/styles/main.sass
+++ b/src/styles/main.sass
@@ -6,12 +6,29 @@
 // ############
 // ## Colors ##
 // ############
+
 $blizzard-background-color: #0A020F
 $blizzard-background-color-transparent: #0A020FCC
-$blizzard-font-color: #fff
+$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 */
   background: linear-gradient(to right,  #0d39a0 0%,#2f099b 100%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+
+
+// #################
+// ## Breakpoints ##
+// #################
+
+$xs: 0px
+$sm: 576px
+$md: 768px
+$lg: 992px
+$xl: 1200px
+
+/// A shortcut for media queries
+@mixin breakpoint($point)
+  @media (min-width: $point)
+    @content