forked from CSGOWTF/csgowtf
648 lines
17 KiB
Vue
648 lines
17 KiB
Vue
<template>
|
|
<div :style="{ minHeight: pHeight + 'px' }" class="wrapper">
|
|
<div class="container-lg">
|
|
<div v-if="playerDetailsStore.playerDetails.name">
|
|
<div class="card mb-3 bg-transparent border-0">
|
|
<div class="row g-0">
|
|
<div class="img-container col-md-2 pt-3">
|
|
<img
|
|
:class="data.tracked ? 'tracked' : ''"
|
|
:src="
|
|
constructAvatarUrl(
|
|
playerDetailsStore.playerDetails.avatar,
|
|
'full'
|
|
)
|
|
"
|
|
:title="data.tracked ? 'Tracked' : ''"
|
|
alt="Player avatar"
|
|
class="img-fluid avatar"
|
|
/>
|
|
</div>
|
|
<div class="col-md-8 d-flex">
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<a
|
|
:href="
|
|
/^\d{17}$/.test(props.id)
|
|
? 'https://steamcommunity.com/profiles/' + props.id
|
|
: 'https://steamcommunity.com/id/' + props.id
|
|
"
|
|
class="text-decoration-none text-white"
|
|
target="_blank"
|
|
title="Open steam profile"
|
|
>{{ playerDetailsStore.playerDetails.name }}
|
|
<i class="fa fa-steam"></i>
|
|
</a>
|
|
</h3>
|
|
<table class="table table-borderless text-center">
|
|
<tr>
|
|
<th class="wlt-win text-uppercase text-muted">Wins</th>
|
|
<th class="wlt-loss text-uppercase text-muted">Losses</th>
|
|
<th class="wlt-tie text-uppercase text-muted">Ties</th>
|
|
<th class="wlt-win-rate text-uppercase text-muted">
|
|
Win-Rate
|
|
</th>
|
|
<th class="wlt-tie-rate text-uppercase text-muted">
|
|
Tie-Rate
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<td class="wlt-win">{{ data.match_stats.win }}</td>
|
|
<td class="wlt-loss">{{ data.match_stats.loss }}</td>
|
|
<td class="wlt-tie">{{ data.match_stats.tie }}</td>
|
|
<td class="wlt-win-rate">
|
|
{{
|
|
data.match_stats.win > 0
|
|
? (
|
|
(data.match_stats.win / data.match_stats.total) *
|
|
100
|
|
).toFixed(0)
|
|
: 0
|
|
}}%
|
|
</td>
|
|
<td class="wlt-tie-rate">
|
|
{{
|
|
data.match_stats.tie > 0
|
|
? (
|
|
(data.match_stats.tie / data.match_stats.total) *
|
|
100
|
|
).toFixed(0)
|
|
: 0
|
|
}}%
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="badges">
|
|
<img
|
|
v-if="playerDetailsStore.playerDetails.vac"
|
|
:title="
|
|
'VAC-Ban: ' +
|
|
FormatVacDate(
|
|
playerDetailsStore.playerDetails.vacDate,
|
|
matchDetailsStore.matchDetails.date
|
|
)
|
|
"
|
|
alt="Vac banned"
|
|
src="/images/icons/vac_banned.svg"
|
|
/>
|
|
<img
|
|
v-if="playerDetailsStore.playerDetails.gameBan"
|
|
:title="
|
|
'Game-Ban: ' +
|
|
FormatVacDate(
|
|
playerDetailsStore.playerDetails.gameBanDate,
|
|
matchDetailsStore.matchDetails.date
|
|
)
|
|
"
|
|
alt="Game banned"
|
|
src="/images/icons/game_banned.svg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div v-if="!data.tracked" class="dropdown trackme-btn">
|
|
<button
|
|
id="login-dropdown"
|
|
aria-expanded="false"
|
|
class="btn border-2 btn-outline-info"
|
|
data-bs-toggle="dropdown"
|
|
type="button"
|
|
>
|
|
Track Me!
|
|
</button>
|
|
<div
|
|
aria-labelledby="login-dropdown"
|
|
class="dropdown-menu mt-2 border-2 border-primary bg-body"
|
|
style="width: 320px"
|
|
>
|
|
<form class="px-4 py-3">
|
|
<!-- AuthCode input -->
|
|
<div class="form-outline mb-4">
|
|
<input
|
|
id="track-authcode"
|
|
v-model="data.userData.authcode"
|
|
class="form-control bg-secondary"
|
|
placeholder="AuthCode (required)"
|
|
required
|
|
type="text"
|
|
/>
|
|
</div>
|
|
|
|
<!-- ShareCode input -->
|
|
<div class="form-outline mb-2">
|
|
<input
|
|
id="track-sharecode"
|
|
v-model="data.userData.sharecode"
|
|
:placeholder="
|
|
store.state.playerDetails.matches
|
|
? 'ShareCode (optional)'
|
|
: 'ShareCode (required)'
|
|
"
|
|
:required="!store.state.playerDetails.matches"
|
|
class="form-control bg-secondary"
|
|
type="text"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-outline mb-4">
|
|
<small>
|
|
<a
|
|
href="https://help.steampowered.com/en/wizard/HelpWithGameIssue/?appid=730&issueid=128"
|
|
target="_blank"
|
|
>
|
|
Here you can find your AuthCode and ShareCode
|
|
</a>
|
|
</small>
|
|
</div>
|
|
|
|
<!-- Submit button -->
|
|
<button
|
|
class="btn btn-outline-warning border-2"
|
|
type="submit"
|
|
@click.prevent="TrackPlayer"
|
|
>
|
|
TrackMe
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="data.tracked"
|
|
class="refresh-btn"
|
|
title="Refresh Match-List"
|
|
@click="RefreshData"
|
|
>
|
|
<i class="fa fa-refresh fa-2x"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="match-container d-flex">
|
|
<div class="matches">
|
|
<MatchesTable
|
|
v-if="playerDetailsStore.playerDetails.matches"
|
|
:matches="playerDetailsStore.playerDetails.matches"
|
|
color-front
|
|
/>
|
|
<h5 v-else>Track yourself to see your matches</h5>
|
|
</div>
|
|
|
|
<div
|
|
v-if="playerDetailsStore.playerDetails.matches"
|
|
class="side-info-container"
|
|
>
|
|
<PlayerSideInfo :player_meta="data.playerMeta" />
|
|
</div>
|
|
</div>
|
|
<div class="load-more col-lg-9 col-md-12 text-center">
|
|
<button
|
|
v-if="data.match_stats.total !== data.matches.length"
|
|
:key="scrollToPos(scrollStateStore.scrollState)"
|
|
class="btn border-2 btn-outline-info"
|
|
@click="setMoreMatches"
|
|
>
|
|
Load More
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="text-center pt-5">
|
|
<h3>Player-Page</h3>
|
|
<hr />
|
|
<h6>There seems to be a problem loading the player</h6>
|
|
<h6>Please try again later</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
onBeforeMount,
|
|
onBeforeUnmount,
|
|
onMounted,
|
|
reactive,
|
|
ref,
|
|
watch,
|
|
} from "vue";
|
|
import {
|
|
constructAvatarUrl,
|
|
FormatVacDate,
|
|
GetPlayerMeta,
|
|
GetUser,
|
|
LoadImage,
|
|
LoadMoreMatches,
|
|
MatchNotParsedTime,
|
|
ProcessName,
|
|
SaveLastVisitedToLocalStorage,
|
|
scrollToPos,
|
|
setAppDivBackground,
|
|
setBgImgDisplay,
|
|
setTitle,
|
|
TrackMe,
|
|
} from "@/utils";
|
|
import { FOOTER_HEIGHT, NAV_HEIGHT } from "@/constants";
|
|
import MatchesTable from "@/components/MatchesTable.vue";
|
|
import router from "@/router";
|
|
import PlayerSideInfo from "@/components/PlayerSideInfo.vue";
|
|
import { StatusCodes as STATUS } from "http-status-codes";
|
|
import { usePlayerDetailsStore } from "@/stores/playerDetails";
|
|
import type { LocalStoragePlayer, Match, PlayerMeta } from "@/types";
|
|
import { useSearchParamsStore } from "@/stores/searchParams";
|
|
import { useInfoStateStore } from "@/stores/infoState";
|
|
import { useScrollStateStore } from "@/stores/scrollState";
|
|
import { useMatchDetailsStore } from "@/stores/matchDetails";
|
|
|
|
// Variables
|
|
const pHeight = ref(0);
|
|
const displayCounter = 3;
|
|
|
|
const data = reactive({
|
|
userData: {
|
|
authcode: "",
|
|
sharecode: "",
|
|
},
|
|
tracked: false,
|
|
matches: [] as Match[],
|
|
match_stats: {
|
|
loss: 0,
|
|
win: 0,
|
|
tie: 0,
|
|
total: 0,
|
|
},
|
|
playerMeta: {} as PlayerMeta,
|
|
});
|
|
|
|
const props = defineProps<{
|
|
id: string;
|
|
}>();
|
|
|
|
const playerDetailsStore = usePlayerDetailsStore();
|
|
const matchDetailsStore = useMatchDetailsStore();
|
|
const searchParamsStore = useSearchParamsStore();
|
|
const scrollStateStore = useScrollStateStore();
|
|
const infoStateStore = useInfoStateStore();
|
|
|
|
const getWindowHeight = () => {
|
|
const navHeight = document.getElementsByTagName("nav")[0].clientHeight;
|
|
const footerHeight = document.getElementsByTagName("footer")[0].clientHeight;
|
|
|
|
// 70 = nav-height | 108.5 = footer-height
|
|
return window.innerHeight - navHeight - footerHeight;
|
|
};
|
|
|
|
pHeight.value = getWindowHeight();
|
|
|
|
onBeforeMount(() => {
|
|
if (Object.entries(playerDetailsStore.playerDetails).length === 0) {
|
|
GetPlayer();
|
|
} else {
|
|
// console.log(store.state.playerDetails)
|
|
SetPlayerData();
|
|
}
|
|
});
|
|
|
|
const SetPlayerData = async () => {
|
|
data.tracked = playerDetailsStore.playerDetails.tracked;
|
|
if (playerDetailsStore.playerDetails.matches)
|
|
data.matches = playerDetailsStore.playerDetails.matches;
|
|
if (playerDetailsStore.playerDetails.matchStats) {
|
|
data.match_stats.loss =
|
|
playerDetailsStore.playerDetails.matchStats.loss || 0;
|
|
data.match_stats.win = playerDetailsStore.playerDetails.matchStats.win || 0;
|
|
data.match_stats.tie = playerDetailsStore.playerDetails.matchStats.tie || 0;
|
|
data.match_stats.total =
|
|
data.match_stats.loss + data.match_stats.win + data.match_stats.tie;
|
|
}
|
|
|
|
searchParamsStore.id64 = playerDetailsStore.playerDetails.steamid64;
|
|
searchParamsStore.vanity_url =
|
|
playerDetailsStore.playerDetails.vanityUrl || "";
|
|
|
|
if (playerDetailsStore.playerDetails.matches) {
|
|
if (data.matches[0].map) {
|
|
await LoadImage(data.matches[0].map);
|
|
} else if (
|
|
!data.matches[0].map &&
|
|
MatchNotParsedTime(data.matches[0].date) &&
|
|
data.matches[1].map
|
|
) {
|
|
await LoadImage(data.matches[1].map);
|
|
} else {
|
|
await LoadImage("random");
|
|
}
|
|
} else {
|
|
await LoadImage("random");
|
|
}
|
|
|
|
setAppDivBackground("rgba(0, 0, 0, 0.7)", HTMLDivElement);
|
|
setBgImgDisplay("initial", HTMLImageElement);
|
|
|
|
const localPlayer = reactive<LocalStoragePlayer>({
|
|
steamId64: "",
|
|
vanityUrl: "",
|
|
name: "",
|
|
avatar: "",
|
|
});
|
|
|
|
localPlayer.steamId64 = playerDetailsStore.playerDetails.steamid64;
|
|
localPlayer.vanityUrl = playerDetailsStore.playerDetails.vanity_url || "";
|
|
localPlayer.name = playerDetailsStore.playerDetails.name || "";
|
|
localPlayer.avatar = constructAvatarUrl(
|
|
playerDetailsStore.playerDetails.avatar || "",
|
|
"medium"
|
|
);
|
|
SaveLastVisitedToLocalStorage(localPlayer);
|
|
|
|
setTitle(playerDetailsStore.playerDetails.name || "");
|
|
};
|
|
|
|
const GetPlayer = async (reset = false) => {
|
|
if (props.id) {
|
|
const [resData, info] = await GetUser(props.id);
|
|
|
|
if (info.message !== "") infoStateStore.addInfo(info);
|
|
|
|
if (resData !== null) {
|
|
if (
|
|
resData.steamid64 !== playerDetailsStore.playerDetails.steamid64 ||
|
|
reset
|
|
) {
|
|
resData.name = ProcessName(resData.name);
|
|
|
|
playerDetailsStore.$reset();
|
|
playerDetailsStore.playerDetails = resData;
|
|
}
|
|
|
|
await SetPlayerData();
|
|
}
|
|
}
|
|
};
|
|
|
|
const setMoreMatches = async () => {
|
|
const [res, info] = await LoadMoreMatches(
|
|
playerDetailsStore.playerDetails.steamid64,
|
|
data.matches[data.matches.length - 1].date
|
|
);
|
|
|
|
if (info.message !== "") infoStateStore.addInfo(info);
|
|
if (res !== null) await res.matches?.forEach((e) => data.matches.push(e));
|
|
|
|
scrollToPos(window.scrollY);
|
|
|
|
// console.log(store.state.playerDetails)
|
|
};
|
|
|
|
const RefreshData = async () => {
|
|
const refreshButton = document.querySelector(
|
|
".refresh-btn .fa"
|
|
) as HTMLElement;
|
|
refreshButton.classList.add("fa-spin");
|
|
refreshButton.classList.add("fa-fw");
|
|
refreshButton.classList.remove("fa-refresh");
|
|
refreshButton.classList.add("fa-spinner");
|
|
scrollToPos(0);
|
|
|
|
await GetPlayer(true).then(() => {
|
|
setTimeout(() => {
|
|
refreshButton.classList.remove("fa-spin");
|
|
refreshButton.classList.remove("fa-fw");
|
|
refreshButton.classList.add("fa-refresh");
|
|
refreshButton.classList.remove("fa-spinner");
|
|
}, 2000);
|
|
});
|
|
|
|
const [resData, info] = await GetPlayerMeta(props.id, displayCounter);
|
|
|
|
if (info.message !== "") infoStateStore.addInfo(info);
|
|
if (resData !== null) {
|
|
data.playerMeta = resData;
|
|
} else {
|
|
data.playerMeta = {} as PlayerMeta;
|
|
}
|
|
};
|
|
|
|
const TrackPlayer = async () => {
|
|
let message = "";
|
|
|
|
if (data.matches.length === 0) {
|
|
if (data.userData.sharecode === "") {
|
|
message = "Sharecode is missing";
|
|
}
|
|
if (data.userData.authcode === "") {
|
|
message = "Authcode is missing";
|
|
}
|
|
} else {
|
|
if (data.userData.authcode === "") {
|
|
message = "Authcode is missing";
|
|
}
|
|
}
|
|
|
|
if (message !== "") {
|
|
infoStateStore.addInfo({
|
|
statusCode: STATUS.IM_A_TEAPOT,
|
|
message: message,
|
|
type: "error",
|
|
});
|
|
} else {
|
|
const info = await TrackMe(
|
|
playerDetailsStore.playerDetails.steamid64,
|
|
data.userData.authcode,
|
|
data.userData.sharecode
|
|
);
|
|
|
|
if (info.message !== "") {
|
|
infoStateStore.addInfo(info);
|
|
} else if (info.statusCode === STATUS.ACCEPTED) {
|
|
location.reload();
|
|
}
|
|
}
|
|
};
|
|
|
|
watch(
|
|
() => props.id,
|
|
async () => {
|
|
await GetPlayer();
|
|
const [res, info] = await GetPlayerMeta(props.id, displayCounter);
|
|
|
|
if (info.message !== "") infoStateStore.addInfo(info);
|
|
if (res !== null) {
|
|
data.playerMeta = res;
|
|
} else {
|
|
data.playerMeta = {} as PlayerMeta;
|
|
}
|
|
}
|
|
);
|
|
|
|
onMounted(async () => {
|
|
const height = window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT;
|
|
const wrapper = document.querySelector(".wrapper") as HTMLDivElement;
|
|
wrapper.style.minHeight = height + "px";
|
|
|
|
await GetPlayer();
|
|
|
|
const [res, info] = await GetPlayerMeta(props.id, displayCounter);
|
|
if (info.message !== "") infoStateStore.addInfo(info);
|
|
if (res !== null) {
|
|
data.playerMeta = res;
|
|
} else {
|
|
data.playerMeta = {} as PlayerMeta;
|
|
}
|
|
|
|
scrollToPos(scrollStateStore.scrollState);
|
|
|
|
// console.log(store.state.playerDetails)
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
scrollStateStore.scrollState = window.scrollY;
|
|
|
|
router.beforeEach((to, from, next) => {
|
|
if (to.fullPath.match("/player/") && from.fullPath.match("/player/")) {
|
|
scrollStateStore.$reset();
|
|
}
|
|
next();
|
|
});
|
|
});
|
|
|
|
window.onresize = () => {
|
|
pHeight.value = getWindowHeight();
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrapper {
|
|
.load-more {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.trackme-btn,
|
|
.refresh-btn {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.refresh-btn {
|
|
cursor: pointer;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
.fa-refresh {
|
|
color: var(--bs-warning);
|
|
}
|
|
}
|
|
|
|
.fa {
|
|
font-size: 1.3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card {
|
|
padding-top: 10px;
|
|
|
|
.badges {
|
|
height: 30px;
|
|
|
|
img {
|
|
width: auto;
|
|
height: 100%;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
border-radius: 50%;
|
|
height: 150px;
|
|
width: 150px;
|
|
box-shadow: 0 0 10px black;
|
|
|
|
&.tracked {
|
|
box-shadow: 0 0 20px 5px var(--bs-success);
|
|
}
|
|
}
|
|
|
|
.fa {
|
|
font-size: 0.75rem;
|
|
vertical-align: top;
|
|
}
|
|
|
|
table {
|
|
max-width: 500px;
|
|
|
|
.wlt-win,
|
|
.wlt-loss,
|
|
.wlt-tie {
|
|
text-align: start;
|
|
max-width: 70px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.wlt-tie-rate,
|
|
.wlt-win-rate {
|
|
text-align: end;
|
|
max-width: 90px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.match-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
|
|
.matches {
|
|
width: 75%;
|
|
}
|
|
|
|
.side-info-container {
|
|
width: 25%;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.card {
|
|
.avatar {
|
|
height: 75px !important;
|
|
width: 75px !important;
|
|
}
|
|
}
|
|
.trackme-btn,
|
|
.refresh-btn {
|
|
top: 25px;
|
|
}
|
|
|
|
.refresh-btn {
|
|
&:hover,
|
|
&:focus {
|
|
.fa {
|
|
color: white !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 991px) {
|
|
.card .avatar {
|
|
height: 120px;
|
|
width: 120px;
|
|
}
|
|
.match-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
gap: 0;
|
|
|
|
.matches {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.side-info-container {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|