diff --git a/src/utils/Utils.js b/src/utils/Utils.js index bd78491..565b6a9 100644 --- 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 +} diff --git a/src/utils/index.js b/src/utils/index.js index 842d0ae..22a4707 100644 --- 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 } diff --git a/src/views/Player.vue b/src/views/Player.vue index 5c0d1d9..c3f8c71 100644 --- a/src/views/Player.vue +++ b/src/views/Player.vue @@ -214,58 +214,81 @@
No matches on record
-
-
-
Best Mate
-
-
- -
Most played with
-
+
+
+
Best Mate (by winrate)
+
+
+
-
Preferred Weapons
+
Weapons (by dmg)
-
-
+
-
Best Map
+
Best Map (by winrate)
-
    -
  • Map 1
    • -
  • Map 2
    • -
  • Map 3
    • -
  • Map 4
    • +
      +
    • + + Player avatar + {{ FixMapName(map[0]) }} + + + {{ (map[1] * 100).toFixed(0) }} % + +
- +
@@ -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; } } }