added player metadata

src/utils/Utils.js

@@ -80,3 +80,22 @@ export const GetAvgRank = (stats) => {
 
   return count === 0 ? 0 : Math.floor(fullRank / count)
 }
+
+export const sortObjectValue = (obj, direction = 'asc') => {
+  const sortable = []
+  for (let key in obj) {
+    sortable.push([key, obj[key]])}
+
+  if (direction === 'asc') {
+    sortable.sort((a, b) => {
+      return a[1] - b[1]
+    })
+  }
+  if (direction === 'desc') {
+    sortable.sort((a, b) => {
+      return b[1] - a[1]
+    })
+  }
+
+  return sortable
+}

src/utils/index.js

@@ -3,15 +3,47 @@ import {GoToLink, GoToMatch, GoToPlayer} from "./GoTo";
 import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
 import {GetHLTV_1} from "./HLTV";
 import {DisplayRank, LoadImage} from "./Display";
-import {GetUser, TrackMe, getPlayerValue, loadMoreMatches, getPlayerMeta, getMatchDetails} from "./ApiRequests";
+import {getMatchDetails, getPlayerMeta, getPlayerValue, GetUser, loadMoreMatches, TrackMe} from "./ApiRequests";
-import {setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank, FixMapName, closeNav} from "./Utils";
+import {
+  checkStatEmpty,
+  closeNav,
+  constructAvatarUrl,
+  FixMapName,
+  GetAvgRank,
+  getPlayerArr,
+  GetWinLoss,
+  setTitle,
+  truncate,
+  sortObjectValue
+} from "./Utils";
 
 export {
-  FormatDate, FormatFullDuration, FormatFullDate, FormatDuration, FormatVacDate,
+  FormatDate,
-  GoToMatch, GoToPlayer, GoToLink,
+  FormatFullDuration,
+  FormatFullDate,
+  FormatDuration,
+  FormatVacDate,
+  GoToMatch,
+  GoToPlayer,
+  GoToLink,
   SaveLastVisitedToLocalStorage,
   GetHLTV_1,
-  DisplayRank, LoadImage,
+  DisplayRank,
-  GetUser, TrackMe, getPlayerValue, loadMoreMatches, getPlayerMeta, getMatchDetails,
+  LoadImage,
-  setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank, FixMapName, closeNav
+  GetUser,
+  TrackMe,
+  getPlayerValue,
+  loadMoreMatches,
+  getPlayerMeta,
+  getMatchDetails,
+  setTitle,
+  GetWinLoss,
+  truncate,
+  checkStatEmpty,
+  getPlayerArr,
+  constructAvatarUrl,
+  GetAvgRank,
+  FixMapName,
+  closeNav,
+  sortObjectValue
 }

src/views/Player.vue

@@ -214,58 +214,81 @@
           <h5 v-else>No matches on record</h5>
         </div>
         <div v-if="store.state.playerDetails.matches" class="side-info">
-          <div class="side-info-box best-mate">
-            <div class="heading">
-              <h5>Best Mate</h5>
-            </div>
-            <hr>
-            <ul class="list-unstyled">
-              <li>Mate 1</li>
-              <li>Mate 2</li>
-              <li>Mate 3</li>
-              <li>Mate 4</li>
-            </ul>
-          </div>
           <div class="side-info-box most-played-with">
             <div class="heading">
               <h5>Most played with</h5>
             </div>
             <hr>
-            <ul class="list-unstyled">
+            <ul v-for="mate in data.playerMeta.most_mates" :key="mate.player.steamid64" class="list-unstyled">
-              <li>Player 1</li>
+              <li @click="GoToPlayer(mate.player.vanity_url || mate.player.steamid64)">
-              <li>Player 2</li>
+                <span class="start">
-              <li>Player 3</li>
+                  <img :src="constructAvatarUrl(mate.player.avatar)" alt="Player avatar">
-              <li>Player 4</li>
+                  <i v-if="mate.player.tracked" class="far fa-dot-circle text-success tracked" title="Tracked user"></i>
+                  <span class="text">{{ mate.player.name }}</span>
+                </span>
+                <span class="end">
+                  {{ mate.total }}
+                </span>
+              </li>
+            </ul>
+          </div>
+          <div class="side-info-box best-mate">
+            <div class="heading">
+              <h5>Best Mate <span class="text-muted">(by winrate)</span></h5>
+            </div>
+            <hr>
+            <ul v-for="mate in data.playerMeta.best_mates" :key="mate.player.steamid64" class="list-unstyled">
+              <li @click="GoToPlayer(mate.player.vanity_url || mate.player.steamid64)">
+                <span class="start">
+                  <img :src="constructAvatarUrl(mate.player.avatar)" alt="Player avatar">
+                  <i v-if="mate.player.tracked" class="far fa-dot-circle text-success tracked" title="Tracked user"></i>
+                  <span class="text">{{ mate.player.name }}</span>
+                </span>
+                <span class="end">
+                  {{ (mate.win_rate * 100).toFixed(0) }} %
+                </span>
+              </li>
             </ul>
           </div>
           <div class="side-info-box preferred-weapons">
             <div class="heading">
-              <h5>Preferred Weapons</h5>
+              <h5>Weapons <span class="text-muted">(by dmg)</span></h5>
             </div>
             <hr>
-            <ul class="list-unstyled">
+            <ul v-for="id in data.best_weapons" :key="id[0]" class="list-unstyled">
-              <li>Weapon 1</li>
+              <li>
-              <li>Weapon 2</li>
+                <span class="start">
-              <li>Weapon 3</li>
+                  <span class="text">{{ id[0] }}</span>
-              <li>Weapon 4</li>
+                </span>
+                <span class="end">
+                  {{ id[1] }}
+                </span>
+              </li>
             </ul>
           </div>
-          <div class="side-info-box best-map">
+          <div v-if="data.playerMeta.win_maps" class="side-info-box best-map">
             <div class="heading">
-              <h5>Best Map</h5>
+              <h5>Best Map <span class="text-muted">(by winrate)</span></h5>
             </div>
             <hr>
-            <ul class="list-unstyled">
+            <ul v-for="map in data.best_maps" :key="map[0]" class="list-unstyled">
-              <li>Map 1</li>
+              <li>
-              <li>Map 2</li>
+                <span class="start">
-              <li>Map 3</li>
+                  <img :src="require('../assets/images/map_icons/map_icon_' + map[0] + '.svg')" alt="Player avatar">
-              <li>Map 4</li>
+                  <span class="text">{{ FixMapName(map[0]) }}</span>
+                </span>
+                <span class="end">
+                  {{ (map[1] * 100).toFixed(0) }} %
+                </span>
+              </li>
             </ul>
           </div>
         </div>
       </div>
       <div class="load-more col-lg-9 col-md-12 text-center">
-        <button v-if="data.match_stats.total !== data.matches.length" class="btn border-2 btn-outline-info" @click="setMoreMatches">Load More</button>
+        <button v-if="data.match_stats.total !== data.matches.length" class="btn border-2 btn-outline-info"
+                @click="setMoreMatches">Load More
+        </button>
       </div>
     </div>
   </div>
@@ -277,21 +300,25 @@ import {useStore} from "vuex";
 import {
   constructAvatarUrl,
   DisplayRank,
+  FixMapName,
   FormatDate,
   FormatDuration,
   FormatFullDate,
   FormatFullDuration,
   FormatVacDate,
   GetHLTV_1,
+  getPlayerMeta,
   GetUser,
   GetWinLoss,
   GoToLink,
   GoToMatch,
+  GoToPlayer,
   LoadImage,
   loadMoreMatches,
   SaveLastVisitedToLocalStorage,
   setTitle,
-  TrackMe
+  sortObjectValue,
+  TrackMe,
 } from "../utils";
 
 export default {
@@ -316,7 +343,10 @@ export default {
         tie: 0,
         total: 0
       },
-      playerMeta: {}
+      playerMeta: {},
+      best_maps: [],
+      best_weapons_tmp: [],
+      best_weapons: []
     })
 
     onBeforeMount(() => {
@@ -366,6 +396,7 @@ export default {
     const GetPlayer = async () => {
       if (props.id) {
         const [res, resData] = await GetUser(props.id)
+        data.playerMeta = await getPlayerMeta(props.id)
 
         if (res === 200 && resData) {
           store.commit({
@@ -376,6 +407,7 @@ export default {
           SetPlayerData()
 
           console.log(store.state.playerDetails)
+          console.log(data.playerMeta)
         } else {
           GoToLink('/')
           // TODO: needs 404
@@ -386,14 +418,6 @@ export default {
       }
     }
 
-    const getPlayerMeta = async () => {
-      if (props.id) {
-        const res = await getPlayerMeta(props.id)
-
-        data.playerMeta = res
-      }
-    }
-
     const setMoreMatches = async () => {
       const res = await loadMoreMatches(store.state.playerDetails.steamid64, data.matches[data.matches.length - 1].date)
 
@@ -430,9 +454,38 @@ 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']])
+              }
+            }
+          })
+        }
+      })
+
+      data.best_weapons_tmp.sort((a, b) => {
+        return b[1] - a[1]
+      })
+
+      data.best_weapons = data.best_weapons_tmp
+      data.best_weapons_tmp = []
+    }
+
     watch(() => props.id, () => {
       GetPlayer()
-      getPlayerMeta()
+    })
+
+    watch(() => data.playerMeta, () => {
+      data.best_maps = sortObjectValue(data.playerMeta.win_maps, 'desc')
+
+      if (data.best_maps.length > 4)
+        data.best_maps.splice(4, data.best_maps.length - 4)
+
+      mapWeaponDamage()
     })
 
     onBeforeUnmount(() => {
@@ -456,7 +509,9 @@ export default {
       DisplayRank,
       constructAvatarUrl,
       FormatVacDate,
-      setMoreMatches
+      FixMapName,
+      GoToPlayer,
+      setMoreMatches,
     }
   }
 }
@@ -628,21 +683,57 @@ export default {
         align-items: center;
         justify-content: center;
 
-        height: 40px;
+        height: 30px;
 
         h5 {
+          font-size: 1rem;
           margin: 0;
           padding: 0;
         }
       }
 
       hr {
-        margin: 0;
+        margin: 0 0 5px 0;
         border-color: rgba(white, .3);
       }
 
-      ul {
+      ul li {
-        padding: 10px;
+        line-height: 25px;
+        font-size: .9rem;
+        padding: 0 10px;
+        margin: 5px 0;
+        cursor: pointer;
+
+        .start {
+          .text {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          .tracked {
+            font-size: .8rem;
+            margin-right: 5px;
+          }
+
+          img {
+            width: 25px;
+            height: 25px;
+            border-radius: 50%;
+            margin-right: 5px;
+          }
+        }
+
+        .end {
+          float: right;
+        }
+      }
+    }
+
+    .preferred-weapons,
+    .best-map {
+      ul li {
+        cursor: default;
       }
     }
   }