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

mobile support for home and player

Browse Source
This commit is contained in:
cnachtigall1991
2021-10-06 19:25:00 +02:00
parent 886f182ff2
commit 08ffe9e550
11 changed files with 602 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/ScoreTeam.vue
View File

@@ -1,45 +1,49 @@
<template>
<table>
<thead>
<tr>
<th class="player__avatar"></th>
<th class="player__name"></th>
<th class="player__rank"></th>
<th class="player__kills cursor__help" title="Kills">K</th>
<th class="player__assist cursor__help" title="Assists">A</th>
<th class="player__deaths cursor__help" title="Deaths">D</th>
<th class="player__diff cursor__help" title="Kill death difference">+/-</th>
<th class="player__kd cursor__help" title="Kill death ratio">K/D</th>
<th class="player__adr cursor__help" 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__kast cursor__help" title="Percentage of rounds with a Kill, Assist, Survived or Death Traded">
KAST
</th>
<th class="player__rating cursor__help" title="Estimated HLTV Rating 1.0">Rating</th>
</tr>
</thead>
<tbody v-for="player in props.stats" :key="player.player.steamid64">
<tr v-if="player.team_id === props.team_id" class="player">
<ScoreTeamPlayer
:assists="player.assists"
:avatar="player.player.avatar"
:deaths="player.deaths"
:dmg="player.extended?.dmg?.enemy"
:hs="player.headshot"
:kast="player.extended?.kast"
:kdiff="player.kills - player.deaths"
:kills="player.kills"
:mk_duo="player.extended?.multi_kills?.duo"
:mk_pent="player.extended?.multi_kills?.pent"
:mk_quad="player.extended?.multi_kills?.quad"
:mk_triple="player.extended?.multi_kills?.triple"
:name="player.player.name"
:rounds_played="props.rounds_played"
:rank="player.extended?.rank?.old"
/>
</tr>
</tbody>
</table>
<div class="scoreboard" :class="'team-' + props.team_id">
<table>
<caption :class="props.score === 16 ? 'text-success' : 'text-danger'">{{props.score}}</caption>
<thead>
<tr>
<th class="player__avatar"></th>
<th class="player__name"></th>
<th class="player__rank"></th>
<th class="player__kills cursor__help" title="Kills">K</th>
<th class="player__assist cursor__help" title="Assists">A</th>
<th class="player__deaths cursor__help" title="Deaths">D</th>
<th class="player__diff cursor__help" title="Kill death difference">+/-</th>
<th class="player__kd cursor__help" title="Kill death ratio">K/D</th>
<th class="player__adr cursor__help" 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__score">Score</th>
</tr>
</thead>
<tbody v-for="player in props.stats" :key="player.player.steamid64">
<tr v-if="player.team_id === props.team_id" class="player">
<ScoreTeamPlayer
:assists="player.assists"
:avatar="player.player.avatar"
:deaths="player.deaths"
:dmg="player.extended?.dmg?.enemy"
:hs="player.headshot"
:kdiff="player.kills - player.deaths"
:kills="player.kills"
:mk_duo="player.extended?.multi_kills?.duo"
:mk_pent="player.extended?.multi_kills?.pent"
:mk_quad="player.extended?.multi_kills?.quad"
:mk_triple="player.extended?.multi_kills?.triple"
:mvp="player.mvp"
:name="player.player.name"
:player_score="player.score"
:rank="player.extended?.rank?.old"
:rounds_played="props.rounds_played"
/>
</tr>
</tbody>
</table>
</div>
<hr v-if="props.team_id === 1">
</template>
<script>
@@ -62,10 +66,49 @@ export default {
type: Number,
required: true,
default: 1
},
score: {
type: Number,
required: true,
default: 0
}
},
setup(props) {
return {props}
}
}
</script>
</script>
<style lang="scss" scoped>
.scoreboard {
margin-bottom: 20px;
}
table {
width: 900px;
text-align: center;
margin-top: 120px;
margin-bottom: -100px;
caption {
color: white;
font-size: 3rem;
caption-side: top;
padding: 0;
margin-left: -70px;
margin-bottom: -178px;
}
tr {
height: 40px;
}
td {
padding: 5px 10px;
}
.cursor__help {
cursor: help;
}
}
</style>