forked from CSGOWTF/csgowtf
393 lines
10 KiB
Vue
393 lines
10 KiB
Vue
<template>
|
|
<div class="scoreboard">
|
|
<table>
|
|
<caption>
|
|
<div v-if="store.state.matchDetails.max_rounds === 16" id="short-match">
|
|
<div class="team-1">
|
|
<div class="score-text">
|
|
<span
|
|
v-if="store.state.matchDetails.score[0] < 10"
|
|
:style="
|
|
store.state.matchDetails.score[0] < 10
|
|
? 'margin-left: -10px;'
|
|
: ''
|
|
"
|
|
class="hidden"
|
|
>0</span
|
|
><span
|
|
:class="
|
|
store.state.matchDetails.score[0] === 9
|
|
? 'text-success'
|
|
: store.state.matchDetails.score[0] === 8
|
|
? 'text-warning'
|
|
: 'text-danger'
|
|
"
|
|
>{{ store.state.matchDetails.score[0] }}</span
|
|
>
|
|
</div>
|
|
<img alt="CT logo" src="/images/icons/ct_logo.svg" />
|
|
<img alt="T logo" src="/images/icons/t_logo.svg" />
|
|
</div>
|
|
<div class="team-2">
|
|
<div class="score-text">
|
|
<span
|
|
v-if="store.state.matchDetails.score[1] < 10"
|
|
:style="
|
|
store.state.matchDetails.score[1] < 10
|
|
? 'margin-left: -10px;'
|
|
: ''
|
|
"
|
|
class="hidden"
|
|
>0</span
|
|
><span
|
|
:class="
|
|
store.state.matchDetails.score[1] === 9
|
|
? 'text-success'
|
|
: store.state.matchDetails.score[1] === 8
|
|
? 'text-warning'
|
|
: 'text-danger'
|
|
"
|
|
>{{ store.state.matchDetails.score[1] }}</span
|
|
>
|
|
</div>
|
|
<img alt="T logo" src="/images/icons/t_logo.svg" />
|
|
<img alt="CT logo" src="/images/icons/ct_logo.svg" />
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="
|
|
store.state.matchDetails.max_rounds === 30 ||
|
|
!store.state.matchDetails.max_rounds
|
|
"
|
|
id="long-match"
|
|
>
|
|
<div class="team-1">
|
|
<div class="score-text">
|
|
<span
|
|
v-if="store.state.matchDetails.score[0] < 10"
|
|
:style="
|
|
store.state.matchDetails.score[0] < 10
|
|
? 'margin-left: -10px;'
|
|
: ''
|
|
"
|
|
class="hidden"
|
|
>0</span
|
|
><span
|
|
:class="
|
|
store.state.matchDetails.match_result === 1
|
|
? 'text-success'
|
|
: store.state.matchDetails.match_result === 0
|
|
? 'text-warning'
|
|
: 'text-danger'
|
|
"
|
|
>{{ store.state.matchDetails.score[0] }}</span
|
|
>
|
|
</div>
|
|
<img alt="CT logo" src="/images/icons/ct_logo.svg" />
|
|
<img alt="T logo" src="/images/icons/t_logo.svg" />
|
|
</div>
|
|
<div class="team-2">
|
|
<div class="score-text">
|
|
<span
|
|
v-if="store.state.matchDetails.score[1] < 10"
|
|
:style="
|
|
store.state.matchDetails.score[1] < 10
|
|
? 'margin-left: -10px;'
|
|
: ''
|
|
"
|
|
class="hidden"
|
|
>0</span
|
|
><span
|
|
:class="
|
|
store.state.matchDetails.match_result === 2
|
|
? 'text-success'
|
|
: store.state.matchDetails.match_result === 0
|
|
? 'text-warning'
|
|
: 'text-danger'
|
|
"
|
|
>{{ store.state.matchDetails.score[1] }}</span
|
|
>
|
|
</div>
|
|
<img alt="T logo" src="/images/icons/t_logo.svg" />
|
|
<img alt="CT logo" src="/images/icons/ct_logo.svg" />
|
|
</div>
|
|
</div>
|
|
</caption>
|
|
|
|
<thead>
|
|
<tr>
|
|
<th class="player__vac"></th>
|
|
<th class="player__avatar"></th>
|
|
<th class="player__name"></th>
|
|
<th class="player__rank"></th>
|
|
<th class="player__kills">K</th>
|
|
<th class="player__assist">A</th>
|
|
<th class="player__deaths">D</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 helptext"
|
|
title="Average damage per round"
|
|
>
|
|
ADR
|
|
</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>
|
|
|
|
<tbody>
|
|
<tr
|
|
v-for="player in teamStats(1)"
|
|
:key="player.player.steamid64"
|
|
class="team-1"
|
|
>
|
|
<ScoreTeamPlayer
|
|
:assists="player.assists"
|
|
:avatar="player.player.avatar"
|
|
:color="player.color"
|
|
:deaths="player.deaths"
|
|
:dmg="player.dmg?.enemy"
|
|
:game_ban="player.player.game_ban"
|
|
:game_ban_date="player.player.game_ban_date"
|
|
:hs="player.headshot"
|
|
:kdiff="player.kills - player.deaths"
|
|
:kills="player.kills"
|
|
:mk_duo="player.multi_kills?.duo"
|
|
:mk_pent="player.multi_kills?.pent"
|
|
:mk_quad="player.multi_kills?.quad"
|
|
:mk_triple="player.multi_kills?.triple"
|
|
:mvp="player.mvp"
|
|
:name="player.player.name"
|
|
:parsed="store.state.matchDetails.parsed"
|
|
:player_score="player.score"
|
|
:rank_new="player.rank?.new"
|
|
:rank_old="player.rank?.old"
|
|
:rounds_played="
|
|
store.state.matchDetails.score.reduce((a, b) => a + b)
|
|
"
|
|
:steamid64="player.player.steamid64"
|
|
:tracked="player.player.tracked"
|
|
:vac="player.player.vac"
|
|
:vac_date="player.player.vac_date"
|
|
/>
|
|
</tr>
|
|
|
|
<tr class="hr_outer">
|
|
<td colspan="14"></td>
|
|
</tr>
|
|
<tr class="hr">
|
|
<td colspan="14"></td>
|
|
</tr>
|
|
<tr class="hr_outer">
|
|
<td colspan="14"></td>
|
|
</tr>
|
|
|
|
<tr
|
|
v-for="player in teamStats(2)"
|
|
:key="player.player.steamid64"
|
|
class="team-2"
|
|
>
|
|
<ScoreTeamPlayer
|
|
:assists="player.assists"
|
|
:avatar="player.player.avatar"
|
|
:color="player.color"
|
|
:deaths="player.deaths"
|
|
:dmg="player.dmg?.enemy"
|
|
:game_ban="player.player.game_ban"
|
|
:game_ban_date="player.player.game_ban_date"
|
|
:hs="player.headshot"
|
|
:kdiff="player.kills - player.deaths"
|
|
:kills="player.kills"
|
|
:mk_duo="player.multi_kills?.duo"
|
|
:mk_pent="player.multi_kills?.pent"
|
|
:mk_quad="player.multi_kills?.quad"
|
|
:mk_triple="player.multi_kills?.triple"
|
|
:mvp="player.mvp"
|
|
:name="player.player.name"
|
|
:parsed="store.state.matchDetails.parsed"
|
|
:player_score="player.score"
|
|
:rank_new="player.rank?.new"
|
|
:rank_old="player.rank?.old"
|
|
:rounds_played="
|
|
store.state.matchDetails.score.reduce((a, b) => a + b)
|
|
"
|
|
:steamid64="player.player.steamid64"
|
|
:tracked="player.player.tracked"
|
|
:vac="player.player.vac"
|
|
:vac_date="player.player.vac_date"
|
|
/>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ScoreTeamPlayer from "/src/components/ScoreTeamPlayer.vue";
|
|
import { useStore } from "vuex";
|
|
|
|
export default {
|
|
name: "ScoreTeam",
|
|
components: { ScoreTeamPlayer },
|
|
setup() {
|
|
const store = useStore();
|
|
|
|
const teamStats = (team) => {
|
|
let arr = [];
|
|
|
|
if (team === 1) {
|
|
arr = [];
|
|
for (let i = 0; i < 5; i++) {
|
|
arr.push(store.state.matchDetails.stats[i]);
|
|
}
|
|
} else if (team === 2) {
|
|
arr = [];
|
|
for (let i = 5; i < store.state.matchDetails.stats.length; i++) {
|
|
arr.push(store.state.matchDetails.stats[i]);
|
|
}
|
|
}
|
|
|
|
return arr;
|
|
};
|
|
|
|
return { store, teamStats };
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.scoreboard {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
hr {
|
|
width: 900px;
|
|
}
|
|
|
|
table {
|
|
width: 900px;
|
|
text-align: center;
|
|
|
|
caption {
|
|
position: relative;
|
|
color: white;
|
|
caption-side: top;
|
|
padding: 0;
|
|
|
|
z-index: 0;
|
|
|
|
.hidden {
|
|
color: transparent;
|
|
user-select: none;
|
|
}
|
|
|
|
.score-text {
|
|
position: relative;
|
|
}
|
|
|
|
.team-1,
|
|
.team-2 {
|
|
position: absolute;
|
|
font-size: 3rem;
|
|
opacity: 0.8;
|
|
|
|
margin-left: -100px;
|
|
|
|
img {
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-top: 22px;
|
|
margin-left: 10px;
|
|
|
|
&:first-child {
|
|
z-index: 1;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-left: 30px;
|
|
z-index: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.team-1 {
|
|
top: 85px;
|
|
|
|
.score-text {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.team-2 {
|
|
top: 180px;
|
|
|
|
.score-text {
|
|
top: 150px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
tr.team-1,
|
|
tr.team-2 {
|
|
height: 40px;
|
|
}
|
|
|
|
td {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.hr {
|
|
td {
|
|
height: 1px;
|
|
padding: 0;
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
.hr_outer {
|
|
height: 15px;
|
|
}
|
|
|
|
.player__vac {
|
|
width: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.scoreboard {
|
|
margin-left: 65px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.scoreboard {
|
|
margin-left: 2px;
|
|
|
|
caption {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|