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

minor changes and bugfixes

Browse Source
This commit is contained in:
vikingowl
2021-11-20 05:48:43 +01:00
parent bd8cf4a3c3
commit 189d3e21d3
8 changed files with 102 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "csgowtf",
"version": "0.1.0",
"version": "0.28.36",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",

99
src/components/MatchesTable.vue
View File

@@ -6,14 +6,14 @@
<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">
<img alt="Match length" class="match-len" src="../assets/images/icons/timer_both.svg">
<img alt="Match length" class="match-len helpicon" src="../assets/images/icons/timer_both.svg">
</th>
<th class="text-center score" scope="col">Score</th>
<th class="text-center kills" scope="col" v-if="!props.explore">K</th>
<th class="text-center assists" scope="col" v-if="!props.explore">A</th>
<th class="text-center deaths" scope="col" v-if="!props.explore">D</th>
<th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio" v-if="!props.explore">+/-</th>
<th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating" v-if="!props.explore">Rating</th>
<th v-if="!props.explore" class="text-center kills" scope="col">K</th>
<th v-if="!props.explore" class="text-center assists" scope="col">A</th>
<th v-if="!props.explore" class="text-center deaths" scope="col">D</th>
<th v-if="!props.explore" class="text-center kdiff helptext" scope="col" title="Kill-to-death ratio">+/-</th>
<th v-if="!props.explore" class="text-center hltv helptext" scope="col" title="HLTV 1.0 Rating">Rating</th>
<th class="text-center duration" scope="col">Duration</th>
<th class="date" scope="col">Date</th>
</tr>
@@ -27,30 +27,27 @@
@click="GoToMatch(match.match_id)"
>
<td class="td-map text-center">
<i v-if="match.parsed" class="fa fa-bar-chart parsed" style="cursor: help"
<i v-if="match.parsed" class="fa fa-bar-chart parsed helpicon"
title="Demo has been parsed for additional data"></i>
<i v-if="!match.parsed && MatchNotParsedTime(match.date)" class="fa fa-hourglass-half not-yet-parsed"
style="cursor: help"
<i v-if="!match.parsed && MatchNotParsedTime(match.date)" class="fa fa-hourglass-half not-yet-parsed helpicon"
title="Match has not been parsed yet"></i>
<img v-if="match.map"
:alt="match.map ? match.map : 'Map not found'"
:src="match.map !== '' ? require('../assets/images/map_icons/map_icon_' + match.map + '.svg') : require('../assets/images/map_icons/map_icon_lobby_mapveto.svg')"
:title="match.map"
<img v-if="match.map !== ''"
:alt="match.map"
:src="require('../assets/images/map_icons/map_icon_' + match.map + '.svg')"
:title="FixMapName(match.map)"
class="map-icon">
<i v-else class="fa fa-question-circle-o map-not-found" title="Match not parsed"></i>
</td>
<td class="td-rank text-center">
<img
<img v-if="props.explore"
:alt="DisplayRank(Math.floor(match.avg_rank || 0))[1]"
:src="DisplayRank(Math.floor(match.avg_rank || 0))[0]"
:title="DisplayRank(Math.floor(match.avg_rank || 0))[1]" class="rank-icon">
<img v-else
:alt="DisplayRank(match.stats.rank?.new)[1]"
:class="match.stats.rank?.new > match.stats.rank?.old ? 'uprank' : match.stats.rank?.new < match.stats.rank?.old ? 'downrank' : ''"
:src="DisplayRank(match.stats.rank?.new)[0]"
:title="DisplayRank(match.stats.rank?.new)[1]"
class="rank-icon" v-if="!props.explore">
<img
:alt="DisplayRank(Math.floor(match.avg_rank || 0))[1]"
:src="DisplayRank(Math.floor(match.avg_rank || 0))[0]"
:title="DisplayRank(Math.floor(match.avg_rank || 0))[1]"
class="rank-icon" v-if="props.explore">
:title="DisplayRank(match.stats.rank?.new)[1]" class="rank-icon">
</td>
<td class="td-length text-center">
<img v-if="match.max_rounds === 30 || !match.max_rounds" alt="Match long"
@@ -62,30 +59,30 @@
class="td-score text-center fw-bold">
{{ match.score[0] }} - {{ match.score[1] }}
</td>
<td class="td-kills text-center" v-if="match.stats">
<td v-if="match.stats" class="td-kills text-center">
{{ match.stats.kills ? match.stats.kills : "0" }}
</td>
<td class="td-assists text-center" v-if="match.stats">
<td v-if="match.stats" class="td-assists text-center">
{{ match.stats.assists ? match.stats.assists : "0" }}
</td>
<td class="td-deaths text-center" v-if="match.stats">
<td v-if="match.stats" 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" v-if="match.stats">
<td v-if="match.stats"
: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(
<td v-if="match.stats"
:class="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) >= 1 ? 'text-success' : 'text-warning'"
class="td-hltv text-center fw-bold" v-if="match.stats">
match.stats.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'" class="td-hltv text-center fw-bold">
{{
GetHLTV_1(
match.stats.kills,
@@ -111,7 +108,18 @@
</template>
<script>
import {FormatDate, FormatDuration, FormatFullDate, FormatFullDuration, GetHLTV_1, GetWinLoss, GoToMatch, MatchNotParsedTime, DisplayRank} from "@/utils";
import {
DisplayRank,
FixMapName,
FormatDate,
FormatDuration,
FormatFullDate,
FormatFullDuration,
GetHLTV_1,
GetWinLoss,
GoToMatch,
MatchNotParsedTime
} from "@/utils";
import {onMounted, reactive, watch} from "vue";
export default {
@@ -140,7 +148,20 @@ export default {
data.matches = props.matches
})
return {props, data, FormatDate, FormatFullDate, FormatDuration, FormatFullDuration, GetHLTV_1, GetWinLoss, GoToMatch, MatchNotParsedTime, DisplayRank}
return {
props,
data,
FormatDate,
FormatFullDate,
FormatDuration,
FormatFullDuration,
GetHLTV_1,
GetWinLoss,
GoToMatch,
MatchNotParsedTime,
DisplayRank,
FixMapName
}
}
}
</script>
@@ -165,10 +186,6 @@ table {
width: 150px;
}
th[title] {
text-decoration: underline dotted grey;
}
td {
vertical-align: middle;
}
@@ -219,18 +236,6 @@ table {
}
.td-rank {
.uprank {
box-shadow: 0 0 20px greenyellow;
border: 1px solid greenyellow;
border-radius: 5px;
}
.downrank {
box-shadow: 0 0 20px #ff2f2f;
border: 1px solid #ff2f2f;
border-radius: 5px;
}
img {
width: 70px;
height: auto;

17
src/components/ScoreTeam.vue
View File

@@ -35,14 +35,14 @@
<th class="player__kills">K</th>
<th class="player__assist">A</th>
<th class="player__deaths">D</th>
<th class="player__diff cursor__help" title="Kill death difference">+/-</th>
<th class="player__diff helptext" title="Kill death difference">+/-</th>
<th class="player__kd">K/D</th>
<th v-if="store.state.matchDetails.parsed" class="player__adr cursor__help" title="Average damage per round">
<th v-if="store.state.matchDetails.parsed" class="player__adr helptext" title="Average damage per round">
ADR
</th>
<th class="player__hs cursor__help" title="Percentage of kills with a headshot">HS%</th>
<th class="player__rating cursor__help" title="Estimated HLTV Rating 1.0">Rating</th>
<th class="player__mvp cursor__help" title="Most valuable player">MVP</th>
<th class="player__hs helptext" title="Percentage of kills with a headshot">HS%</th>
<th class="player__rating helptext" title="Estimated HLTV Rating 1.0">Rating</th>
<th class="player__mvp helptext" title="Most valuable player">MVP</th>
<th class="player__score">Score</th>
</tr>
</thead>
@@ -69,7 +69,8 @@
:name="player.player.name"
:parsed="store.state.matchDetails.parsed"
:player_score="player.score"
:rank="player.rank?.old"
:rank_old="player.rank?.old"
:rank_new="player.rank?.new"
:rounds_played="store.state.matchDetails.score.reduce((a, b) => a + b)"
:steamid64="player.player.steamid64"
:tracked="player.player.tracked"
@@ -174,10 +175,6 @@ table {
padding: 5px 10px;
}
.cursor__help {
cursor: help;
}
.hr {
height: 20px;;
border-bottom: 1px solid white;

14
src/components/ScoreTeamPlayer.vue
View File

@@ -20,9 +20,10 @@
<i class="fa fa-external-link"></i>
</td>
<td v-if="props.parsed" class="player__rank">
<img :alt="DisplayRank(props.rank)[1]"
:src="DisplayRank(props.rank)[0]"
:title="DisplayRank(props.rank)[1]">
<img :alt="DisplayRank(props.rank_old)[1]"
:class="props.rank_new > props.rank_old ? 'uprank' : props.rank_new < props.rank_old ? 'downrank' : ''"
:src="DisplayRank(props.rank_old)[0]"
:title="props.rank_new > props.rank_old ? 'Uprank to ' + DisplayRank(props.rank_new)[1] : props.rank_new < props.rank_old ? 'Downrank to ' + DisplayRank(props.rank_new)[1] : DisplayRank(props.rank_old)[1]">
</td>
<td v-if="!props.parsed" class="rank-placeholder"></td>
<td class="player__kills">
@@ -83,7 +84,12 @@ export default {
required: true,
default: 'Name'
},
rank: {
rank_old: {
type: Number,
required: true,
default: 0
},
rank_new: {
type: Number,
required: true,
default: 0

19
src/scss/classes.scss Normal file
View File

@@ -0,0 +1,19 @@
.helptext {
cursor: help;
text-decoration: underline dotted grey;
}
.helpicon {
cursor: help;
}
.uprank {
box-shadow: 0 0 20px greenyellow;
border: 1px solid greenyellow;
border-radius: 5px;
}
.downrank {
box-shadow: 0 0 20px #ff2f2f;
border: 1px solid #ff2f2f;
border-radius: 5px;
}

2
src/scss/custom.scss
View File

@@ -66,3 +66,5 @@ $success: #609926;
--csgo-green: #04B462;
--csgo-grey: #5a5a5a;
}
@import "classes";

17
src/views/Match.vue
View File

@@ -39,11 +39,11 @@
<span class="text-white">{{ FormatFullDate(data.matchDetails.date) }}</span>
</p>
<div class="text-center fs-6">
<img v-if="data.matchDetails.max_rounds === 16" alt="Match length" class="match-len"
src="../assets/images/icons/timer_short.svg" title="Short-Match">
<img v-if="data.matchDetails.max_rounds === 16" alt="Match length" class="match-len helpicon"
src="../assets/images/icons/timer_short.svg" title="Short Match">
<img v-if="data.matchDetails.max_rounds === 30 || !data.matchDetails.max_rounds" alt="Match length"
class="match-len"
src="../assets/images/icons/timer_long.svg" title="Long-Match">
class="match-len helpicon"
src="../assets/images/icons/timer_long.svg" title="Long Match">
<span v-if="data.matchDetails.parsed" class="text-muted px-2">—</span>
@@ -51,20 +51,21 @@
:alt="DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[1]"
:src="DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[0]"
:title="'Average Rank: ' + DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[1]"
class="rank-icon"/>
class="rank-icon helpicon"/>
<span v-if="data.matchDetails.parsed && data.matchDetails.replay_url" class="text-muted px-2">—</span>
<div v-if="data.matchDetails.parsed && data.matchDetails.replay_url" class="btn-group">
<i id="downloadMenuBtn" aria-hidden="true" class="fa fa-ellipsis-h mx-2"
@click.prevent="handleDownloadMenu"></i>
@click.prevent="handleDownloadMenu" title="Click for more"></i>
<div id="downloadGroup" class="group">
<a v-if="data.matchDetails.replay_url" :href="data.matchDetails.replay_url" title="Download Demo">
<a v-if="data.matchDetails.replay_url" :href="data.matchDetails.replay_url" target="_blank"
title="Download Demo">
<i id="downloadDemo" aria-hidden="true" class="fa fa-download mx-2"></i>
</a>
<a v-if="data.matchDetails.share_code"
:href="'steam://rungame/730/76561202255233023/+csgo_download_match ' + data.matchDetails.share_code"
title="Watch Demo">
target="_blank" title="Watch Demo">
<i id="replayDemo" aria-hidden="true" class="fa fa-television mx-2"></i>
</a>
</div>

4
src/views/Player.vue
View File

@@ -178,7 +178,7 @@
</span>
</li>
</ul>
{{ setDmgGraphWidth() }}
<span>{{setDmgGraphWidth()}}</span>
</div>
<div v-if="data.playerMeta.win_maps" class="side-info-box best-map">
<div class="heading">
@@ -421,7 +421,7 @@ export default {
const dmg = ref(0)
for (let i = 0; i <= 4; i++) {
weaponsContainer = document.querySelector('.dmplayerMetag-chart-' + i)
weaponsContainer = document.querySelector('.dmg-chart-' + i)
if (weaponsContainer !== null) {
if (i === 0) {
dmg100.value = weaponsContainer.innerHTML * 1