some more refactoring
This commit is contained in:
cnachtigall1991
@@ -6,10 +6,16 @@
|
||||
<div class="row g-0">
|
||||
<div class="img-container col-md-2 pt-3">
|
||||
<img
|
||||
:class="data.tracked ? 'tracked' : ''" :src="data.playerDetails.avatar"
|
||||
:class="data.tracked ? 'tracked' : ''" :src="store.state.playerDetails.avatar"
|
||||
:title="data.tracked ? 'Tracked' : ''"
|
||||
alt="Player avatar"
|
||||
class="img-fluid avatar">
|
||||
<!-- <img-->
|
||||
<!-- :class="data.tracked ? 'tracked' : ''"-->
|
||||
<!-- :src="constructAvatarUrl(store.state.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">
|
||||
@@ -18,7 +24,7 @@
|
||||
class="text-decoration-none text-white"
|
||||
target="_blank"
|
||||
title="Open steam profile">{{
|
||||
data.playerDetails.name
|
||||
store.state.playerDetails.name
|
||||
}}
|
||||
<i class="fas fa-link"></i>
|
||||
</a></h3>
|
||||
@@ -100,71 +106,72 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="matches m-auto">
|
||||
<table v-if="data.matches" class="table table-borderless">
|
||||
<thead class="border-bottom">
|
||||
<tr>
|
||||
<th class="text-center map" scope="col">Map</th>
|
||||
<th class="text-center rank" scope="col">Rank</th>
|
||||
<th class="text-center length" scope="col" title="Match Length">
|
||||
<i class="far fa-clock"></i>
|
||||
</th>
|
||||
<th class="text-center score" scope="col">Score</th>
|
||||
<th class="text-center kills" scope="col">K</th>
|
||||
<th class="text-center assists" scope="col">A</th>
|
||||
<th class="text-center deaths" scope="col">D</th>
|
||||
<th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio">+/-</th>
|
||||
<th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating">Rating</th>
|
||||
<th class="text-center duration" scope="col">Duration</th>
|
||||
<th class="date" scope="col">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="match in data.matches"
|
||||
:key="match.match_id"
|
||||
:class="GetWinLoss(match.match_result, match.stats.team_id)"
|
||||
class="match"
|
||||
@click="GoToMatch(match.match_id)">
|
||||
<td class="td-map text-center">
|
||||
<i v-if="match.parsed" class="far fa-chart-bar parsed" style="cursor: help"
|
||||
title="Demo has been parsed for additional data"></i>
|
||||
<img :alt="match.map ? match.map : 'Map not found'"
|
||||
:src="match.map !== '' ? require('@/images/map_icons/map_icon_' + match.map + '.svg') : require('../images/map_icons/map_icon_lobby_mapveto.svg')"
|
||||
:title="match.map"
|
||||
class="map-icon">
|
||||
</td>
|
||||
<td class="td-rank text-center">
|
||||
<img
|
||||
:alt="DisplayRank(match.stats.rank?.new)[1]"
|
||||
:src="DisplayRank(match.stats.rank?.new)[0]"
|
||||
:title="DisplayRank(match.stats.rank?.new)[1]"
|
||||
class="rank-icon">
|
||||
</td>
|
||||
<td class="td-length text-center">
|
||||
<i v-if="match.max_rounds === 30 || !match.max_rounds" class="fas fa-circle text-muted"
|
||||
title="Long match"></i>
|
||||
<i v-if="match.max_rounds === 16" class="far fa-circle text-muted" title="Short match"></i>
|
||||
</td>
|
||||
<td :class="match.stats.team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger'"
|
||||
class="td-score text-center fw-bold">
|
||||
{{ match.score[0] }} - {{ match.score[1] }}
|
||||
</td>
|
||||
<td class="td-kills text-center">
|
||||
{{ match.stats.kills ? match.stats.kills : "0" }}
|
||||
</td>
|
||||
<td class="td-assists text-center">
|
||||
{{ match.stats.assists ? match.stats.assists : "0" }}
|
||||
</td>
|
||||
<td class="td-deaths text-center">
|
||||
{{ match.stats.deaths ? match.stats.deaths : "0" }}
|
||||
</td>
|
||||
<td :class="(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
|
||||
class="td-plus text-center">
|
||||
{{
|
||||
(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0)
|
||||
}}
|
||||
</td>
|
||||
<td :class="GetHLTV_1(
|
||||
<div class="match-container">
|
||||
<div class="matches">
|
||||
<table v-if="data.matches" class="table table-borderless">
|
||||
<thead class="border-bottom">
|
||||
<tr>
|
||||
<th class="text-center map" scope="col">Map</th>
|
||||
<th class="text-center rank" scope="col">Rank</th>
|
||||
<th class="text-center length" scope="col" title="Match Length">
|
||||
<i class="far fa-clock"></i>
|
||||
</th>
|
||||
<th class="text-center score" scope="col">Score</th>
|
||||
<th class="text-center kills" scope="col">K</th>
|
||||
<th class="text-center assists" scope="col">A</th>
|
||||
<th class="text-center deaths" scope="col">D</th>
|
||||
<th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio">+/-</th>
|
||||
<th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating">Rating</th>
|
||||
<th class="text-center duration" scope="col">Duration</th>
|
||||
<th class="date" scope="col">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="match in data.matches"
|
||||
:key="match.match_id"
|
||||
:class="GetWinLoss(match.match_result, match.stats.team_id)"
|
||||
class="match"
|
||||
@click="GoToMatch(match.match_id)">
|
||||
<td class="td-map text-center">
|
||||
<i v-if="match.parsed" class="far fa-chart-bar parsed" style="cursor: help"
|
||||
title="Demo has been parsed for additional data"></i>
|
||||
<img :alt="match.map ? match.map : 'Map not found'"
|
||||
:src="match.map !== '' ? require('@/images/map_icons/map_icon_' + match.map + '.svg') : require('../images/map_icons/map_icon_lobby_mapveto.svg')"
|
||||
:title="match.map"
|
||||
class="map-icon">
|
||||
</td>
|
||||
<td class="td-rank text-center">
|
||||
<img
|
||||
:alt="DisplayRank(match.stats.rank?.new)[1]"
|
||||
:src="DisplayRank(match.stats.rank?.new)[0]"
|
||||
:title="DisplayRank(match.stats.rank?.new)[1]"
|
||||
class="rank-icon">
|
||||
</td>
|
||||
<td class="td-length text-center">
|
||||
<i v-if="match.max_rounds === 30 || !match.max_rounds" class="fas fa-circle text-muted"
|
||||
title="Long match"></i>
|
||||
<i v-if="match.max_rounds === 16" class="far fa-circle text-muted" title="Short match"></i>
|
||||
</td>
|
||||
<td :class="match.stats.team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger'"
|
||||
class="td-score text-center fw-bold">
|
||||
{{ match.score[0] }} - {{ match.score[1] }}
|
||||
</td>
|
||||
<td class="td-kills text-center">
|
||||
{{ match.stats.kills ? match.stats.kills : "0" }}
|
||||
</td>
|
||||
<td class="td-assists text-center">
|
||||
{{ match.stats.assists ? match.stats.assists : "0" }}
|
||||
</td>
|
||||
<td class="td-deaths text-center">
|
||||
{{ match.stats.deaths ? match.stats.deaths : "0" }}
|
||||
</td>
|
||||
<td :class="(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
|
||||
class="td-plus text-center">
|
||||
{{
|
||||
(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0)
|
||||
}}
|
||||
</td>
|
||||
<td :class="GetHLTV_1(
|
||||
match.stats.kills,
|
||||
match.score[0] + match.score[1],
|
||||
match.stats.deaths,
|
||||
@@ -172,36 +179,79 @@
|
||||
match.stats.multi_kills?.triple,
|
||||
match.stats.multi_kills?.quad,
|
||||
match.stats.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
|
||||
class="td-hltv text-center fw-bold">
|
||||
{{
|
||||
GetHLTV_1(
|
||||
match.stats.kills,
|
||||
match.score[0] + match.score[1],
|
||||
match.stats.deaths,
|
||||
match.stats.multi_kills?.duo,
|
||||
match.stats.multi_kills?.triple,
|
||||
match.stats.multi_kills?.quad,
|
||||
match.stats.multi_kills?.pent)
|
||||
}}
|
||||
</td>
|
||||
<td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
|
||||
{{ FormatDuration(match.duration) }}
|
||||
class="td-hltv text-center fw-bold">
|
||||
{{
|
||||
GetHLTV_1(
|
||||
match.stats.kills,
|
||||
match.score[0] + match.score[1],
|
||||
match.stats.deaths,
|
||||
match.stats.multi_kills?.duo,
|
||||
match.stats.multi_kills?.triple,
|
||||
match.stats.multi_kills?.quad,
|
||||
match.stats.multi_kills?.pent)
|
||||
}}
|
||||
</td>
|
||||
<td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
|
||||
{{ FormatDuration(match.duration) }}
|
||||
|
||||
</td>
|
||||
<td :title="FormatFullDate(match.date)" class="td-date">
|
||||
{{ FormatDate(match.date) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h5 v-else>No matches on record</h5>
|
||||
</td>
|
||||
<td :title="FormatFullDate(match.date)" class="td-date">
|
||||
{{ FormatDate(match.date) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h5 v-else>No matches on record</h5>
|
||||
</div>
|
||||
<div 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>
|
||||
<li>Mate 5</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="side-info-box best-mate">
|
||||
<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>
|
||||
<li>Player 5</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="side-info-box best-mate">
|
||||
<div class="heading">
|
||||
<h5>Preferred Weapons</h5>
|
||||
</div>
|
||||
<hr>
|
||||
<ul class="list-unstyled">
|
||||
<li>Weapon 1</li>
|
||||
<li>Weapon 2</li>
|
||||
<li>Weapon 3</li>
|
||||
<li>Weapon 4</li>
|
||||
<li>Weapon 5</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {onMounted, reactive, watch} from "vue";
|
||||
import {onBeforeUnmount, onMounted, reactive, watch} from "vue";
|
||||
import {useStore} from "vuex";
|
||||
import {
|
||||
DisplayRank,
|
||||
@@ -215,7 +265,8 @@ import {
|
||||
GoToLink,
|
||||
GoToMatch,
|
||||
LoadImage,
|
||||
SaveLastVisitedToLocalStorage, setTitle,
|
||||
SaveLastVisitedToLocalStorage,
|
||||
setTitle,
|
||||
TrackMe
|
||||
} from "../utils";
|
||||
|
||||
@@ -231,7 +282,6 @@ export default {
|
||||
authcode: '',
|
||||
sharecode: ''
|
||||
},
|
||||
playerDetails: {},
|
||||
tracked: false,
|
||||
matches: [],
|
||||
statusError: '',
|
||||
@@ -243,43 +293,63 @@ export default {
|
||||
}
|
||||
})
|
||||
|
||||
const SetPlayerData = () => {
|
||||
data.tracked = store.state.playerDetails.tracked
|
||||
data.matches = store.state.playerDetails.matches
|
||||
data.match_stats.loss = store.state.playerDetails.match_stats.loss || 0
|
||||
data.match_stats.win = store.state.playerDetails.match_stats.win || 0
|
||||
data.match_stats.tie = store.state.playerDetails.match_stats.tie || 0
|
||||
|
||||
store.commit({
|
||||
type: 'changeId64',
|
||||
id: store.state.playerDetails.steamid64
|
||||
})
|
||||
store.commit({
|
||||
type: 'changeVanityUrl',
|
||||
id: store.state.playerDetails.vanity_url || ''
|
||||
})
|
||||
|
||||
if (data.matches)
|
||||
LoadImage(data.matches[0].map ? data.matches[0].map : 'random')
|
||||
|
||||
let player = {
|
||||
'steamid64': store.state.playerDetails.steamid64,
|
||||
'vanity_url': store.state.playerDetails.vanity_url || '',
|
||||
'name': store.state.playerDetails.name,
|
||||
'avatar': store.state.playerDetails.avatar
|
||||
// 'avatar': constructAvatarUrl(store.state.playerDetails.avatar, 'medium')
|
||||
}
|
||||
SaveLastVisitedToLocalStorage(player)
|
||||
|
||||
setTitle(store.state.playerDetails.name)
|
||||
}
|
||||
|
||||
const GetPlayer = async () => {
|
||||
if (props.id) {
|
||||
const [res, resData] = await GetUser(props.id)
|
||||
|
||||
if (res === 200 && resData) {
|
||||
data.playerDetails = resData
|
||||
data.tracked = resData.tracked
|
||||
data.matches = data.playerDetails.matches
|
||||
data.match_stats.loss = data.playerDetails.match_stats.loss || 0
|
||||
data.match_stats.win = data.playerDetails.match_stats.win || 0
|
||||
data.match_stats.tie = data.playerDetails.match_stats.tie || 0
|
||||
store.commit({
|
||||
type: 'changePlayerDetails',
|
||||
data: resData
|
||||
})
|
||||
|
||||
if (data.matches)
|
||||
LoadImage(data.matches[0].map ? data.matches[0].map : 'random')
|
||||
SetPlayerData()
|
||||
|
||||
let player = {
|
||||
'steamid64': data.playerDetails.steamid64,
|
||||
'vanity_url': data.playerDetails.vanity_url || '',
|
||||
'name': data.playerDetails.name,
|
||||
'avatar': data.playerDetails.avatar
|
||||
}
|
||||
SaveLastVisitedToLocalStorage(player)
|
||||
|
||||
setTitle(data.playerDetails.name)
|
||||
|
||||
console.log(data.playerDetails)
|
||||
console.log(store.state.playerDetails)
|
||||
} else {
|
||||
GoToLink('/')
|
||||
// TODO: needs 404
|
||||
}
|
||||
} else {
|
||||
GoToLink('/')
|
||||
// TODO: needs 404
|
||||
}
|
||||
}
|
||||
|
||||
const TrackPlayer = async () => {
|
||||
if (data.userData.authcode !== '') {
|
||||
[data.statusErrorCode, data.statusError] = await TrackMe(data.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
|
||||
[data.statusErrorCode, data.statusError] = await TrackMe(store.state.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
|
||||
|
||||
if (data.statusErrorCode === 202) {
|
||||
data.statusErrorCode = 0
|
||||
@@ -298,11 +368,22 @@ export default {
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
GetPlayer()
|
||||
if (Object.entries(store.state.playerDetails).length === 0) {
|
||||
GetPlayer()
|
||||
} else {
|
||||
SetPlayerData()
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
store.commit({
|
||||
type: 'changePlayerDetails',
|
||||
data: {}
|
||||
})
|
||||
})
|
||||
|
||||
return {
|
||||
data,
|
||||
store,
|
||||
@@ -406,6 +487,59 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.match-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
|
||||
.matches {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.side-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
width: 25%;
|
||||
height: auto;
|
||||
margin-top: 30px;
|
||||
|
||||
.side-info-box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: rgba(20, 20, 20, .8);
|
||||
border: 1px solid rgba(white, .3);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.best-mate {
|
||||
.heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
height: 40px;
|
||||
|
||||
h5 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
border-color: rgba(white, .3);
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
margin-bottom: 0;
|
||||
|
||||
@@ -490,21 +624,10 @@ table {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.win {
|
||||
background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
|
||||
}
|
||||
|
||||
.loss {
|
||||
background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
|
||||
}
|
||||
|
||||
.draw {
|
||||
background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
|
||||
}
|
||||
.card {
|
||||
.avatar {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
height: 75px !important;
|
||||
width: 75px !important;
|
||||
}
|
||||
}
|
||||
.trackme-btn {
|
||||
@@ -550,4 +673,26 @@ table {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.matches {
|
||||
width: 100% !important;
|
||||
}
|
||||
.side-info {
|
||||
display: none !important;
|
||||
}
|
||||
.avatar {
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
.trackme-btn {
|
||||
top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1199px) {
|
||||
.td-plus, .kdiff {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user