From 95a3fb085a275d85601bd5f1f6bea8fef0214e9a Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Sun, 24 Oct 2021 16:41:21 +0200
Subject: [PATCH] made background-gradient of matches variable + fixed
 background image on player not scaling properly on mobile devices

---
 src/components/Footer.vue | 27 +++++++++++--------
 src/constants/index.js    |  3 +++
 src/views/Match.vue       | 49 +++++++++++++++++++--------------
 src/views/Player.vue      | 57 +++++++++++++++++++++------------------
 4 files changed, 79 insertions(+), 57 deletions(-)

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 8d4a1ed..7433557 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="bg-secondary text-center pt-5 pb-4">
+  <div class="footer bg-secondary text-center pt-5 pb-4">
     <div class="icons pb-4">
-      <a class="text-white" href="https://git.harting.dev/CSGOWTF" target="_blank" aria-label="Git Link">
-<!--        <i class="bi bi-github"></i>-->
-        <img src="../assets/images/icons/gitea.svg" alt="Gitea Icon">
+      <a aria-label="Git Link" class="text-white" href="https://git.harting.dev/CSGOWTF" target="_blank">
+        <!--        <i class="bi bi-github"></i>-->
+        <img alt="Gitea Icon" src="../assets/images/icons/gitea.svg">
       </a>
     </div>
     <div class="text">
@@ -22,12 +22,17 @@ export default {
 }
 </script>
 
-<style scoped>
-img {
-  width: 35px;
-  height: 35px;
-}
-p {
-  font-size: .85rem;
+<style lang="scss" scoped>
+.footer {
+  height: 200px;
+
+  img {
+    width: 35px;
+    height: 35px;
+  }
+
+  p {
+    font-size: .85rem;
+  }
 }
 </style>
diff --git a/src/constants/index.js b/src/constants/index.js
index ebacbee..46d9807 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -18,3 +18,6 @@ export const GRENADES = {
   505: 'EqSmoke', // eqElementToName[EqSmoke] = "Smoke Grenade"
   506: 'EqHE', // eqElementToName[EqHE] = "HE Grenade"
 }
+
+export const NAV_HEIGHT = 70
+export const FOOTER_HEIGHT = 200
diff --git a/src/views/Match.vue b/src/views/Match.vue
index 45d56b4..a73a3d4 100644
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -1,7 +1,7 @@
 <template>
   <img alt="" class="bg-img" src="">
 
-  <div class="">
+  <div class="match-wrapper">
     <div class="head row m-auto text-center">
       <div class="map-score">
         <div v-if="route.fullPath.split('/')[3] !== 'overview'" class="score-team-1">
@@ -37,16 +37,17 @@
           <span class="text-white">{{ FormatFullDate(data.matchDetails.date) }}</span>
         </p>
         <p class="text-center fs-6">
-            <img v-if="data.matchDetails.max_rounds === 16" alt="Match length" class="match-len"
-                 src="../assets/images/icons/timer_short.svg" title="Short-Match">
-            <img v-if="data.matchDetails.max_rounds === 30 || !data.matchDetails.max_rounds" alt="Match length" class="match-len"
-                 src="../assets/images/icons/timer_long.svg" title="Long-Match">
+          <img v-if="data.matchDetails.max_rounds === 16" alt="Match length" class="match-len"
+               src="../assets/images/icons/timer_short.svg" title="Short-Match">
+          <img v-if="data.matchDetails.max_rounds === 30 || !data.matchDetails.max_rounds" alt="Match length"
+               class="match-len"
+               src="../assets/images/icons/timer_long.svg" title="Long-Match">
           <span v-if="data.matchDetails.parsed" class="text-muted px-2">—</span>
           <img v-if="data.matchDetails.parsed"
-            :alt="DisplayRank(data.avgRank)[1]"
-            :src="DisplayRank(data.avgRank)[0]"
-            :title="DisplayRank(data.avgRank)[1]"
-            class="rank-icon"/>
+               :alt="DisplayRank(data.avgRank)[1]"
+               :src="DisplayRank(data.avgRank)[0]"
+               :title="DisplayRank(data.avgRank)[1]"
+               class="rank-icon"/>
           <span v-if="data.matchDetails.replay_url" class="text-muted px-2">—</span>
           <a v-if="data.matchDetails.replay_url" :href="data.matchDetails.replay_url" class="text-white">
             <i class="fas fa-download"></i>
@@ -106,8 +107,8 @@
       </ul>
     </div>
   </div>
-  <div v-if="data.score.length === 2 && data.stats" id="scoreWrapper" class="scoreboard">
-    <router-view name="score"/>
+  <div id="scoreWrapper" class="scoreboard">
+    <router-view v-if="data.score.length === 2 && data.stats" name="score"/>
   </div>
 </template>
 
@@ -120,12 +121,13 @@ import {
   FormatDuration,
   FormatFullDate,
   GetAvgRank,
+  getMatchDetails,
   GoToLink,
-  LoadImage,
-  getMatchDetails
+  LoadImage
 } from "../utils";
 import {useStore} from "vuex";
 import {useRoute} from 'vue-router'
+import {FOOTER_HEIGHT, NAV_HEIGHT} from "@/constants";
 
 export default {
   name: 'Match',
@@ -221,14 +223,21 @@ export default {
       GetMatch()
     })
 
-    onMounted(() => {
-      checkRoute()
-    })
-
     onBeforeUnmount(() => {
       store.commit('resetMatchDetails')
     })
 
+    onMounted(() => {
+      checkRoute()
+
+      const headHeight = 230
+      const navHeight = 42
+
+      const height = window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT - headHeight - navHeight
+      const scoreWrapper = document.getElementById('scoreWrapper')
+      scoreWrapper.style.minHeight = height + 'px'
+    })
+
     document.addEventListener('click', () => {
       closeNav('matchNav')
     })
@@ -251,6 +260,7 @@ export default {
 }
 
 .head {
+  height: 230px;
   background: linear-gradient(90deg,
       rgba(0, 0, 0, 0.7) 0%,
       rgba(0, 0, 0, 0.95) 30%,
@@ -340,6 +350,7 @@ export default {
 
 .nav {
   max-width: 100vw;
+  height: 42px;
   background: rgba(0, 0, 0, 0.9);
   background: linear-gradient(90deg,
       rgba(0, 0, 0, 0.7) 0%,
@@ -379,9 +390,7 @@ export default {
   justify-content: center;
   flex-wrap: wrap;
 
-  //padding-left: 70px;
   z-index: 1;
-  height: 100%;
   width: 100%;
   max-width: 100vw;
   background: linear-gradient(90deg,
@@ -392,7 +401,7 @@ export default {
   );
 }
 
-@media screen and (max-width: 991px) {
+@media (max-width: 991px) {
   .score-team-1,
   .score-team-2 {
     top: 2rem !important;
diff --git a/src/views/Player.vue b/src/views/Player.vue
index c3f8c71..20c1f45 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -214,7 +214,7 @@
           <h5 v-else>No matches on record</h5>
         </div>
         <div v-if="store.state.playerDetails.matches" class="side-info">
-          <div class="side-info-box most-played-with">
+          <div v-if="data.playerMeta.most_mates" class="side-info-box most-played-with">
             <div class="heading">
               <h5>Most played with</h5>
             </div>
@@ -232,7 +232,7 @@
               </li>
             </ul>
           </div>
-          <div class="side-info-box best-mate">
+          <div v-if="data.playerMeta.best_mates" class="side-info-box best-mate">
             <div class="heading">
               <h5>Best Mate <span class="text-muted">(by winrate)</span></h5>
             </div>
@@ -250,7 +250,7 @@
               </li>
             </ul>
           </div>
-          <div class="side-info-box preferred-weapons">
+          <div v-if="data.playerMeta.eq_map && data.playerMeta.weapon_dmg" class="side-info-box preferred-weapons">
             <div class="heading">
               <h5>Weapons <span class="text-muted">(by dmg)</span></h5>
             </div>
@@ -295,7 +295,7 @@
 </template>
 
 <script>
-import {onBeforeMount, onBeforeUnmount, reactive, watch} from "vue";
+import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import {useStore} from "vuex";
 import {
   constructAvatarUrl,
@@ -320,6 +320,7 @@ import {
   sortObjectValue,
   TrackMe,
 } from "../utils";
+import {FOOTER_HEIGHT, NAV_HEIGHT} from "@/constants";
 
 export default {
   name: 'Player',
@@ -407,7 +408,6 @@ export default {
           SetPlayerData()
 
           console.log(store.state.playerDetails)
-          console.log(data.playerMeta)
         } else {
           GoToLink('/')
           // TODO: needs 404
@@ -455,24 +455,26 @@ export default {
     }
 
     const mapWeaponDamage = () => {
-      Object.keys(data.playerMeta.eq_map).forEach((key) => {
-        for (const id in data.playerMeta.weapon_dmg) {
-          Object.keys(data.playerMeta.weapon_dmg[id]).forEach((k) => {
-            if (k === 'eq') {
-              if (data.playerMeta.weapon_dmg[id][k] === key * 1) {
-                data.best_weapons_tmp.push([data.playerMeta.eq_map[key], data.playerMeta.weapon_dmg[id]['dmg']])
+      if (data.playerMeta.eq_map && data.playerMeta.weapon_dmg) {
+        Object.keys(data.playerMeta.eq_map).forEach((key) => {
+          for (const id in data.playerMeta.weapon_dmg) {
+            Object.keys(data.playerMeta.weapon_dmg[id]).forEach((k) => {
+              if (k === 'eq') {
+                if (data.playerMeta.weapon_dmg[id][k] === key * 1) {
+                  data.best_weapons_tmp.push([data.playerMeta.eq_map[key], data.playerMeta.weapon_dmg[id]['dmg']])
+                }
               }
-            }
-          })
-        }
-      })
+            })
+          }
+        })
 
-      data.best_weapons_tmp.sort((a, b) => {
-        return b[1] - a[1]
-      })
+        data.best_weapons_tmp.sort((a, b) => {
+          return b[1] - a[1]
+        })
 
-      data.best_weapons = data.best_weapons_tmp
-      data.best_weapons_tmp = []
+        data.best_weapons = data.best_weapons_tmp
+        data.best_weapons_tmp = []
+      }
     }
 
     watch(() => props.id, () => {
@@ -492,6 +494,12 @@ export default {
       store.commit('resetPlayerDetails')
     })
 
+    onMounted(() => {
+      const height = window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT
+      const wrapper = document.querySelector('.wrapper')
+      wrapper.style.minHeight = height + 'px'
+    })
+
     return {
       data,
       store,
@@ -521,17 +529,14 @@ export default {
 .bg-img {
   z-index: -1;
   position: fixed;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
   width: 100%;
-  left: 0;
+  height: 100%;
+  object-fit: cover;
+  overflow: hidden;
 }
 
 .wrapper {
   background: rgba(0, 0, 0, .7);
-  min-width: 100%;
-  min-height: 100%;
 
   .load-more {
     padding: 1rem 0;