CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

fixed broken elements due to api changes

Browse Source
This commit is contained in:
cnachtigall1991
2021-10-17 19:52:12 +02:00
parent 123f78cb21
commit 6310295795
10 changed files with 228 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/FlashChart.vue
View File

@@ -1,6 +1,6 @@
<template>
<h3 class="text-center col-12 mt-3">Flash-Duration <small class="text-muted">(in s)</small></h3>
<div class="player-dmg d-xxl-flex">
<div class="player-flash">
<div class="team-1 mx-5">
<h4 class="text-center mt-3 mb-3">Team 1</h4>
<div id="flash-chart-1"></div>
@@ -120,4 +120,57 @@ export default {
color: cornflowerblue;
}
}
@media screen and (max-width: 768px) {
.player-dmg {
flex-direction: column;
justify-content: center;
align-items: center;
transform: scale(.7);
margin-top: -100px;
.team-1 {
margin-top: -50px;
}
.team-2 {
margin-bottom: -100px;
margin-left: -60px;
}
}
}
@media screen and (max-width: 991px) and (min-width: 678px) {
.player-dmg {
flex-wrap: nowrap;
transform: scale(.8);
margin-top: -50px;
margin-left: -60px;
.team-1 {
margin-left: 0;
}
.team-2 {
margin-bottom: -100px;
}
}
}
@media screen and (max-width: 1261px) and (min-width: 991px) {
.player-dmg {
flex-wrap: nowrap;
transform: scale(.9);
margin-top: -30px;
margin-left: -60px;
.team-1 {
margin-left: 0;
}
.team-2 {
margin-bottom: -100px;
}
}
}
</style>

76
src/components/MultiKillsChart.vue
View File

@@ -1,11 +1,11 @@
<template>
<h3 class="text-center col-12 mt-3">Multi-Kills</h3>
<div class="player-dmg d-xxl-flex">
<div class="team-1 mx-5">
<div class="player-dmg col-12">
<div class="team-1">
<h4 class="text-center mt-3 mb-3">Team 1</h4>
<div id="multi-kills-chart-1"></div>
</div>
<div class="team-2 mx-5">
<div class="team-2">
<h4 class="text-center mt-3 mb-3">Team 2</h4>
<div id="multi-kills-chart-2"></div>
</div>
@@ -143,13 +143,71 @@ export default {
</script>
<style lang="scss" scoped>
.multi-kills-chart {
flex-direction: column;
align-items: center;
h3 {
margin: 0 0 0 -60px;
}
h4 {
margin-top: 7px;
color: cornflowerblue;
.player-dmg {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
.team-1 {
margin-left: -60px;
}
}
@media screen and (max-width: 768px) {
.player-dmg {
flex-direction: column;
justify-content: center;
align-items: center;
transform: scale(.7);
margin-top: -100px;
.team-1 {
margin-top: -50px;
}
.team-2 {
margin-bottom: -100px;
margin-left: -60px;
}
}
}
@media screen and (max-width: 991px) and (min-width: 678px) {
.player-dmg {
flex-wrap: nowrap;
transform: scale(.8);
margin-top: -50px;
margin-left: -60px;
.team-1 {
margin-left: 0;
}
.team-2 {
margin-bottom: -100px;
}
}
}
@media screen and (max-width: 1261px) and (min-width: 991px) {
.player-dmg {
flex-wrap: nowrap;
transform: scale(.9);
margin-top: -30px;
margin-left: -60px;
.team-1 {
margin-left: 0;
}
.team-2 {
margin-bottom: -100px;
}
}
}
</style>

50
src/components/Nav.vue
View File

@@ -73,28 +73,52 @@ export default {
const id64Pattern = /^\d{17}$/
const vanityPattern = /^[A-Za-z0-9-_]{3,32}$/
store.state.id64 = ''
store.state.vanityUrl = ''
store.commit({
type: 'changeVanityUrl',
id: ''
})
store.commit({
type: 'changeId64',
id: ''
})
if (data.searchInput !== '') {
if (id64Pattern.test(input)) {
store.state.id64 = input
store.commit({
type: 'changeId64',
id: input
})
} else if (input.match(customUrlPattern)) {
store.state.vanityUrl = input.split('/')[4].split('?')[0]
store.commit({
type: 'changeVanityUrl',
id: input.split('/')[4].split('?')[0]
})
} else if (input.match(profileUrlPattern)) {
const tmp = input.split('/')[4].split('?')[0]
if (id64Pattern.test(tmp)) {
store.state.id64 = tmp
store.commit({
type: 'changeId64',
id: tmp
})
}
} else {
store.state.vanityUrl = input
store.commit({
type: 'changeVanityUrl',
id: input
})
}
if (vanityPattern.test(store.state.vanityUrl)) {
store.state.vanityUrl = input
store.commit({
type: 'changeVanityUrl',
id: input
})
} else {
data.error = 'Only alphanumeric symbols, "_", and "-", between 3-32 characters'
store.state.vanityUrl = ''
store.commit({
type: 'changeVanityUrl',
id: ''
})
}
if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
@@ -104,6 +128,11 @@ export default {
data.searchInput = ''
document.activeElement.blur()
store.commit({
type: 'changePlayerDetails',
data: resData
})
if (store.state.vanityUrl) {
closeNav()
GoToPlayer(store.state.vanityUrl)
@@ -115,8 +144,13 @@ export default {
} else if (res === 404) {
data.searchInput = ''
data.error = `${resData} - Try again`
// TODO: needs 404
} else if (res === 502) {
data.searchInput = ''
data.error = 'Server not available'
} else {
console.log(res, resData)
// TODO: needs 404
}
}

4
src/components/ScoreTeam.vue
View File

@@ -6,7 +6,7 @@
:class="score === 9 ? 'text-success' : score === 8 ? 'text-warning' : 'text-danger'">
{{ score }}
</caption>
<caption v-if="store.state.matchDetails.max_rounds === 30"
<caption v-if="store.state.matchDetails.max_rounds === 30 || !store.state.matchDetails.max_rounds"
:class="score === 16 ? 'text-success' : score === 15 ? 'text-warning' : 'text-danger'">
{{ score }}
</caption>
@@ -96,7 +96,7 @@ table {
caption-side: top;
padding: 0;
margin-left: -70px;
margin-bottom: -178px;
margin-bottom: -158px;
}
tr {

6
src/components/ScoreTeamPlayer.vue
View File

@@ -1,6 +1,6 @@
<template>
<td>
<img :src="props.avatar" alt="Player avatar" class="player__avatar" :class="'team-color-' + props.color">
<img :src="constructAvatarUrl(props.avatar)" alt="Player avatar" class="player__avatar" :class="'team-color-' + props.color">
</td>
<td class="player__name" @click="GoToPlayer(props.steamid64)">
<i class="far fa-dot-circle text-success tracked" v-if="props.tracked" title="Tracked user"></i>
@@ -48,7 +48,7 @@
</template>
<script>
import {DisplayRank, GetHLTV_1, GoToPlayer} from "../utils";
import {DisplayRank, GetHLTV_1, GoToPlayer, constructAvatarUrl} from "../utils";
export default {
name: 'ScoreTeamPlayer',
@@ -155,7 +155,7 @@ export default {
}
},
setup(props) {
return {props, GetHLTV_1, GoToPlayer, DisplayRank}
return {props, GetHLTV_1, GoToPlayer, DisplayRank, constructAvatarUrl}
}
}
</script>

11
src/constants/index.js Normal file
View File

@@ -0,0 +1,11 @@
export const HITGROUPS = {
0: 'HitGroupGeneric',
1: 'HitGroupHead',
2: 'HitGroupChest',
3: 'HitGroupStomach',
4: 'HitGroupLeftArm',
5: 'HitGroupRightArm',
6: 'HitGroupLeftLeg',
7: 'HitGroupRightLeg',
10: 'HitGroupGear'
}

4
src/utils/ApiRequests.js
View File

@@ -10,7 +10,7 @@ export const GetUser = async (id) => {
if (res.status === 200)
return [res.status, res.data]
} catch (err) {
if (err.response.status === 404)
if (err.response)
return [err.response.status, err.response.statusText]
}
}
@@ -35,7 +35,7 @@ export const TrackMe = async (id64, authcode, sharecode) => {
try {
const res = await axios
.post(`${API_URL}/player/trackme`, `id=${id64}&authcode=${authcode}&sharecode=${sharecode}`)
.post(`${API_URL}/player/${id64}/track`, `authcode=${authcode}&sharecode=${sharecode}`)
if (res.status === 202) {
status = res.status

3
src/utils/Utils.js
View File

@@ -48,9 +48,12 @@ export const getPlayerArr = (stats, team, color) => {
export const constructAvatarUrl = (hash, size) => {
const base = 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars'
const imgSize = size ? `_${size}` : ''
if (hash) {
const hashDir = hash.substring(0, 2)
return `${base}/${hashDir}/${hash}${imgSize}.jpg`
}
}
export const GetAvgRank = (stats) => {

39
src/views/Match.vue
View File

@@ -35,39 +35,38 @@
</button>
<div id="matchNav" class="collapse navbar-collapse">
<ul class="list-unstyled d-flex m-auto">
<li :class="!data.matchDetails.parsed ? 'disabled' : ''"
:title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
<li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item">
<router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/overview'" replace
class="nav-link">Scoreboard
<router-link :to="'/match/' + data.matchDetails.match_id + '/overview'" class="nav-link"
replace>Scoreboard
</router-link>
</li>
<li :class="!data.matchDetails.parsed ? 'disabled' : ''"
:title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
<li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item">
<router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/details'" replace
class="nav-link">Details
<router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed"
:to="'/match/' + data.matchDetails.match_id + '/details'" class="nav-link"
replace>Details
</router-link>
</li>
<li :class="!data.matchDetails.parsed ? 'disabled' : ''"
:title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
<li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item">
<router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/flashes'" replace
class="nav-link">Flashes
<router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed"
:to="'/match/' + data.matchDetails.match_id + '/flashes'" class="nav-link"
replace>Flashes
</router-link>
</li>
<!-- <li :class="!data.matchDetails.parsed ? 'disabled' : ''"-->
<!-- :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"-->
<!-- class="list-item nav-item">-->
<!-- <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/utility'" replace-->
<!-- <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/utility'" replace :class="!data.matchDetails.parsed ? 'disabled' : ''"-->
<!-- class="nav-link">Utility-->
<!-- </router-link>-->
<!-- </li>-->
<li :class="!data.matchDetails.parsed ? 'disabled' : ''"
:title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
<li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item">
<router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/damage'" replace
class="nav-link">Damage
<router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed"
:to="'/match/' + data.matchDetails.match_id + '/damage'" class="nav-link"
replace>Damage
</router-link>
</li>
</ul>
@@ -121,7 +120,7 @@ export default {
LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
GetAvgRank(data.stats)
data.avgRank = GetAvgRank(data.stats)
console.log(data.matchDetails)
})
@@ -239,7 +238,7 @@ export default {
color: #585858;
&:hover {
background: transparent;
background: lime;
cursor: default;
}
}
@@ -251,7 +250,6 @@ export default {
flex-wrap: wrap;
padding-left: 70px;
z-index: 1;
height: 100%;
width: 100%;
@@ -266,6 +264,7 @@ export default {
@media screen and (max-width: 991px) {
#scoreWrapper {
justify-content: flex-start;
overflow-x: scroll;
overflow-y: hidden;
}

37
src/views/Player.vue
View File

@@ -6,16 +6,11 @@
<div class="row g-0">
<div class="img-container col-md-2 pt-3">
<img
:class="data.tracked ? 'tracked' : ''" :src="store.state.playerDetails.avatar"
:class="data.tracked ? 'tracked' : ''"
:src="constructAvatarUrl(store.state.playerDetails.avatar, 'full')"
: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">
@@ -41,11 +36,11 @@
<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 / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(0)
data.match_stats.win && data.match_stats.loss && data.match_stats.tie ? (data.match_stats.win / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(0) : 0
}}%
</td>
<td class="wlt-tie-rate">{{
(data.match_stats.tie / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(0)
data.match_stats.win && data.match_stats.loss && data.match_stats.tie ? (data.match_stats.tie / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(0) : 0
}}%
</td>
</tr>
@@ -108,7 +103,7 @@
</div>
<div class="match-container">
<div class="matches">
<table v-if="data.matches" class="table table-borderless">
<table v-if="store.state.playerDetails.matches" class="table table-borderless">
<thead class="border-bottom">
<tr>
<th class="text-center map" scope="col">Map</th>
@@ -203,7 +198,7 @@
</table>
<h5 v-else>No matches on record</h5>
</div>
<div class="side-info">
<div v-if="store.state.playerDetails.matches" class="side-info">
<div class="side-info-box best-mate">
<div class="heading">
<h5>Best Mate</h5>
@@ -254,6 +249,7 @@
import {onBeforeUnmount, onMounted, reactive, watch} from "vue";
import {useStore} from "vuex";
import {
constructAvatarUrl,
DisplayRank,
FormatDate,
FormatDuration,
@@ -295,10 +291,13 @@ export default {
const SetPlayerData = () => {
data.tracked = store.state.playerDetails.tracked
if (store.state.playerDetails.matches)
data.matches = store.state.playerDetails.matches
if (store.state.playerDetails.match_stats) {
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',
@@ -309,15 +308,14 @@ export default {
id: store.state.playerDetails.vanity_url || ''
})
if (data.matches)
if (store.state.playerDetails.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')
'avatar': constructAvatarUrl(store.state.playerDetails.avatar, 'medium')
}
SaveLastVisitedToLocalStorage(player)
@@ -371,6 +369,7 @@ export default {
if (Object.entries(store.state.playerDetails).length === 0) {
GetPlayer()
} else {
console.log(store.state.playerDetails)
SetPlayerData()
}
}, 200)
@@ -397,7 +396,8 @@ export default {
FormatFullDuration,
GoToMatch,
GetHLTV_1,
DisplayRank
DisplayRank,
constructAvatarUrl
}
}
}
@@ -604,9 +604,10 @@ table {
width: 120px;
}
.td-date svg {
margin-left: -5px;
margin-right: 5px;
.td-date, .date {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}