added player metadata

2021-10-24 15:54:05 +02:00
parent 2d1afc637f
commit c105289971
3 changed files with 196 additions and 54 deletions
--- a/src/utils/Utils.js
+++ b/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
+}
--- a/src/utils/index.js
+++ b/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 {setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank, FixMapName, closeNav} from "./Utils";
+import {getMatchDetails, getPlayerMeta, getPlayerValue, GetUser, loadMoreMatches, TrackMe} from "./ApiRequests";
+import {
+  checkStatEmpty,
+  closeNav,
+  constructAvatarUrl,
+  FixMapName,
+  GetAvgRank,
+  getPlayerArr,
+  GetWinLoss,
+  setTitle,
+  truncate,
+  sortObjectValue
+} from "./Utils";

 export {
-  FormatDate, FormatFullDuration, FormatFullDate, FormatDuration, FormatVacDate,
-  GoToMatch, GoToPlayer, GoToLink,
+  FormatDate,
+  FormatFullDuration,
+  FormatFullDate,
+  FormatDuration,
+  FormatVacDate,
+  GoToMatch,
+  GoToPlayer,
+  GoToLink,
  SaveLastVisitedToLocalStorage,
  GetHLTV_1,
-  DisplayRank, LoadImage,
-  GetUser, TrackMe, getPlayerValue, loadMoreMatches, getPlayerMeta, getMatchDetails,
-  setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank, FixMapName, closeNav
+  DisplayRank,
+  LoadImage,
+  GetUser,
+  TrackMe,
+  getPlayerValue,
+  loadMoreMatches,
+  getPlayerMeta,
+  getMatchDetails,
+  setTitle,
+  GetWinLoss,
+  truncate,
+  checkStatEmpty,
+  getPlayerArr,
+  constructAvatarUrl,
+  GetAvgRank,
+  FixMapName,
+  closeNav,
+  sortObjectValue
 }
--- a/src/views/Player.vue
+++ b/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">
-              <li>Player 1</li>
-              <li>Player 2</li>
-              <li>Player 3</li>
-              <li>Player 4</li>
+            <ul v-for="mate in data.playerMeta.most_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.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">
-              <li>Weapon 1</li>
-              <li>Weapon 2</li>
-              <li>Weapon 3</li>
-              <li>Weapon 4</li>
+            <ul v-for="id in data.best_weapons" :key="id[0]" class="list-unstyled">
+              <li>
+                <span class="start">
+                  <span class="text">{{ id[0] }}</span>
+                </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">
-              <li>Map 1</li>
-              <li>Map 2</li>
-              <li>Map 3</li>
-              <li>Map 4</li>
+            <ul v-for="map in data.best_maps" :key="map[0]" class="list-unstyled">
+              <li>
+                <span class="start">
+                  <img :src="require('../assets/images/map_icons/map_icon_' + map[0] + '.svg')" alt="Player avatar">
+                  <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 {
-        padding: 10px;
+      ul li {
+        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;
      }
    }
  }