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> <template>
<h3 class="text-center col-12 mt-3">Flash-Duration <small class="text-muted">(in s)</small></h3> <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"> <div class="team-1 mx-5">
<h4 class="text-center mt-3 mb-3">Team 1</h4> <h4 class="text-center mt-3 mb-3">Team 1</h4>
<div id="flash-chart-1"></div> <div id="flash-chart-1"></div>
@@ -120,4 +120,57 @@ export default {
color: cornflowerblue; 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> </style>

76
src/components/MultiKillsChart.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<h3 class="text-center col-12 mt-3">Multi-Kills</h3> <h3 class="text-center col-12 mt-3">Multi-Kills</h3>
<div class="player-dmg d-xxl-flex"> <div class="player-dmg col-12">
<div class="team-1 mx-5"> <div class="team-1">
<h4 class="text-center mt-3 mb-3">Team 1</h4> <h4 class="text-center mt-3 mb-3">Team 1</h4>
<div id="multi-kills-chart-1"></div> <div id="multi-kills-chart-1"></div>
</div> </div>
<div class="team-2 mx-5"> <div class="team-2">
<h4 class="text-center mt-3 mb-3">Team 2</h4> <h4 class="text-center mt-3 mb-3">Team 2</h4>
<div id="multi-kills-chart-2"></div> <div id="multi-kills-chart-2"></div>
</div> </div>
@@ -143,13 +143,71 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.multi-kills-chart { h3 {
flex-direction: column; margin: 0 0 0 -60px;
align-items: center; }
h4 { .player-dmg {
margin-top: 7px; display: flex;
color: cornflowerblue; 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> </style>

50
src/components/Nav.vue
View File

@@ -73,28 +73,52 @@ export default {
const id64Pattern = /^\d{17}$/ const id64Pattern = /^\d{17}$/
const vanityPattern = /^[A-Za-z0-9-_]{3,32}$/ const vanityPattern = /^[A-Za-z0-9-_]{3,32}$/
store.state.id64 = '' store.commit({
store.state.vanityUrl = '' type: 'changeVanityUrl',
id: ''
})
store.commit({
type: 'changeId64',
id: ''
})
if (data.searchInput !== '') { if (data.searchInput !== '') {
if (id64Pattern.test(input)) { if (id64Pattern.test(input)) {
store.state.id64 = input store.commit({
type: 'changeId64',
id: input
})
} else if (input.match(customUrlPattern)) { } 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)) { } else if (input.match(profileUrlPattern)) {
const tmp = input.split('/')[4].split('?')[0] const tmp = input.split('/')[4].split('?')[0]
if (id64Pattern.test(tmp)) { if (id64Pattern.test(tmp)) {
store.state.id64 = tmp store.commit({
type: 'changeId64',
id: tmp
})
} }
} else { } else {
store.state.vanityUrl = input store.commit({
type: 'changeVanityUrl',
id: input
})
} }
if (vanityPattern.test(store.state.vanityUrl)) { if (vanityPattern.test(store.state.vanityUrl)) {
store.state.vanityUrl = input store.commit({
type: 'changeVanityUrl',
id: input
})
} else { } else {
data.error = 'Only alphanumeric symbols, "_", and "-", between 3-32 characters' 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 !== '') { if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
@@ -104,6 +128,11 @@ export default {
data.searchInput = '' data.searchInput = ''
document.activeElement.blur() document.activeElement.blur()
store.commit({
type: 'changePlayerDetails',
data: resData
})
if (store.state.vanityUrl) { if (store.state.vanityUrl) {
closeNav() closeNav()
GoToPlayer(store.state.vanityUrl) GoToPlayer(store.state.vanityUrl)
@@ -115,8 +144,13 @@ export default {
} else if (res === 404) { } else if (res === 404) {
data.searchInput = '' data.searchInput = ''
data.error = `${resData} - Try again` data.error = `${resData} - Try again`
// TODO: needs 404
} else if (res === 502) {
data.searchInput = ''
data.error = 'Server not available'
} else { } else {
console.log(res, resData) 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'"> :class="score === 9 ? 'text-success' : score === 8 ? 'text-warning' : 'text-danger'">
{{ score }} {{ score }}
</caption> </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'"> :class="score === 16 ? 'text-success' : score === 15 ? 'text-warning' : 'text-danger'">
{{ score }} {{ score }}
</caption> </caption>
@@ -96,7 +96,7 @@ table {
caption-side: top; caption-side: top;
padding: 0; padding: 0;
margin-left: -70px; margin-left: -70px;
margin-bottom: -178px; margin-bottom: -158px;
} }
tr { tr {

6
src/components/ScoreTeamPlayer.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<td> <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>
<td class="player__name" @click="GoToPlayer(props.steamid64)"> <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> <i class="far fa-dot-circle text-success tracked" v-if="props.tracked" title="Tracked user"></i>
@@ -48,7 +48,7 @@
</template> </template>
<script> <script>
import {DisplayRank, GetHLTV_1, GoToPlayer} from "../utils"; import {DisplayRank, GetHLTV_1, GoToPlayer, constructAvatarUrl} from "../utils";
export default { export default {
name: 'ScoreTeamPlayer', name: 'ScoreTeamPlayer',
@@ -155,7 +155,7 @@ export default {
} }
}, },
setup(props) { setup(props) {
return {props, GetHLTV_1, GoToPlayer, DisplayRank} return {props, GetHLTV_1, GoToPlayer, DisplayRank, constructAvatarUrl}
} }
} }
</script> </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) if (res.status === 200)
return [res.status, res.data] return [res.status, res.data]
} catch (err) { } catch (err) {
if (err.response.status === 404) if (err.response)
return [err.response.status, err.response.statusText] return [err.response.status, err.response.statusText]
} }
} }
@@ -35,7 +35,7 @@ export const TrackMe = async (id64, authcode, sharecode) => {
try { try {
const res = await axios 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) { if (res.status === 202) {
status = res.status 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) => { export const constructAvatarUrl = (hash, size) => {
const base = 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars' const base = 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars'
const imgSize = size ? `_${size}` : '' const imgSize = size ? `_${size}` : ''
if (hash) {
const hashDir = hash.substring(0, 2) const hashDir = hash.substring(0, 2)
return `${base}/${hashDir}/${hash}${imgSize}.jpg` return `${base}/${hashDir}/${hash}${imgSize}.jpg`
}
} }
export const GetAvgRank = (stats) => { export const GetAvgRank = (stats) => {

39
src/views/Match.vue
View File

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

37
src/views/Player.vue
View File

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