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

#15 added placeholder to matches

Browse Source
This commit is contained in:
vikingowl
2021-11-20 10:24:32 +01:00
parent 158ece4ac9
commit 4154b988fe
5 changed files with 49 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/HitgroupPuppet.vue
View File

@@ -133,7 +133,7 @@ export default {
})
}
const unique = arr.filter((a, b) => arr.indexOf(a) === b && a < 500)
const unique = arr.filter((a, b) => arr.indexOf(a) === b && a < 400)
let arr2 = []

50
src/components/MatchesTable.vue
View File

@@ -1,5 +1,10 @@
<template>
<div v-if="data.matches" id="matches">
<div v-if="props.matches.length === 0" id="matches-placeholder">
<span v-for="i in 20" :key="i" :class="i % 2 === 1 ? 'placeholder-wave' : 'placeholder-wave-alt'"
class="placeholder col-12"></span>
</div>
<div v-else id="matches">
<table class="table table-borderless">
<thead class="border-bottom">
<tr>
@@ -19,7 +24,7 @@
</tr>
</thead>
<tbody>
<tr v-for="match in data.matches"
<tr v-for="match in props.matches"
:key="match.match_id"
:class="(match.stats ? GetWinLoss(match.match_result, match.stats.team_id) : '') + (match.vac || match.game_ban ? ' ban' : '')"
:title="match.vac ? 'VAC-banned player in this game' : match.game_ban ? 'Game-banned player in this game' : ''"
@@ -40,14 +45,14 @@
</td>
<td class="td-rank text-center">
<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">
: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">
: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">
</td>
<td class="td-length text-center">
<img v-if="match.max_rounds === 30 || !match.max_rounds" alt="Match long"
@@ -69,7 +74,8 @@
{{ match.stats.deaths ? match.stats.deaths : "0" }}
</td>
<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">
: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)
}}
@@ -82,7 +88,8 @@
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">
match.stats.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
class="td-hltv text-center fw-bold">
{{
GetHLTV_1(
match.stats.kills,
@@ -120,7 +127,6 @@ import {
GoToMatch,
MatchNotParsedTime
} from "@/utils";
import {onMounted, reactive, watch} from "vue";
export default {
name: "MatchesTable",
@@ -136,21 +142,8 @@ export default {
}
},
setup(props) {
const data = reactive({
matches: []
})
onMounted(() => {
data.matches = props.matches
})
watch(() => props.matches, () => {
data.matches = props.matches
})
return {
props,
data,
FormatDate,
FormatFullDate,
FormatDuration,
@@ -168,6 +161,13 @@ export default {
<style lang="scss" scoped>
#matches-placeholder {
.placeholder {
height: 78px;
margin: 1px 0;
}
}
table {
margin-bottom: 0;