ToneAPI/ToneAPI_webclient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix Infinity KD and user number starting at 0

Browse Source
This commit is contained in:
legonzaur
2023-04-15 12:22:39 +02:00
parent cc59510929
commit 33be21df9b
1 changed files with 37 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PlayerList.vue
+37 -28
View File
@@ -2,20 +2,24 @@
<div class="playerTable" v-on:keydown="selectNextPlayer" tabindex="0"> <div class="playerTable" v-on:keydown="selectNextPlayer" tabindex="0">
<div class="playerHeaders"> <div class="playerHeaders">
<span></span> <span></span>
<span v-on:click="sortPlayerList('username')" :class="sortingData.argument == 'username' ? 'selected' : ''">Username</span> <span v-on:click="sortPlayerList('username')"
:class="sortingData.argument == 'username' ? 'selected' : ''">Username</span>
<span v-on:click="sortPlayerList('kills')" :class="sortingData.argument == 'kills' ? 'selected' : ''">K</span> <span v-on:click="sortPlayerList('kills')" :class="sortingData.argument == 'kills' ? 'selected' : ''">K</span>
<span v-on:click="sortPlayerList('deaths')" :class="sortingData.argument == 'deaths' ? 'selected' : ''">D</span> <span v-on:click="sortPlayerList('deaths')" :class="sortingData.argument == 'deaths' ? 'selected' : ''">D</span>
<span v-on:click="sortPlayerList('k/d')" :class="sortingData.argument == 'k/d' ? 'selected' : ''">K/D</span> <span v-on:click="sortPlayerList('k/d')" :class="sortingData.argument == 'k/d' ? 'selected' : ''">K/D</span>
<span v-on:click="sortPlayerList('max_kill_distance')" :class="sortingData.argument == 'max_kill_distance' ? 'selected' : ''">max distance</span> <span v-on:click="sortPlayerList('max_kill_distance')"
<span v-on:click="sortPlayerList('avg_kill_distance')" :class="sortingData.argument == 'avg_kill_distance' ? 'selected' : ''">average distance</span> :class="sortingData.argument == 'max_kill_distance' ? 'selected' : ''">max distance</span>
<span v-on:click="sortPlayerList('avg_kill_distance')"
:class="sortingData.argument == 'avg_kill_distance' ? 'selected' : ''">average distance</span>
</div> </div>
<div :class="'playerRow ' + (playerId === $props.playerHighlighted ? 'selected' : '')" v-for="(playerId, index) in playerIdList" v-bind:key="playerId" <div :class="'playerRow ' + (playerId === $props.playerHighlighted ? 'selected' : '')"
v-on:click="$emit('highlightPlayer', playerId)" :ref="`player:` + playerId"> v-for="(playerId, index) in playerIdList" v-bind:key="playerId" v-on:click="$emit('highlightPlayer', playerId)"
<div><span>{{ index }}</span></div> :ref="`player:` + playerId">
<div><span>{{ index+1 }}</span></div>
<div><span>{{ players[playerId].username }}</span></div> <div><span>{{ players[playerId].username }}</span></div>
<div><span>{{ players[playerId].kills }}</span></div> <div><span>{{ players[playerId].kills }}</span></div>
<div><span>{{ players[playerId].deaths }}</span></div> <div><span>{{ players[playerId].deaths }}</span></div>
<div><span>{{ Math.round(players[playerId].kills / players[playerId].deaths * 100) / 100 }}</span></div> <div><span>{{ Math.round(players[playerId].kills / Math.max(1, players[playerId].deaths) * 100) / 100 }}</span></div>
<div><span>{{ players[playerId].max_kill_distance }}</span></div> <div><span>{{ players[playerId].max_kill_distance }}</span></div>
<div><span>{{ Math.round(players[playerId].avg_kill_distance * 100) / 100 }}</span></div> <div><span>{{ Math.round(players[playerId].avg_kill_distance * 100) / 100 }}</span></div>
</div> </div>
@@ -81,8 +85,8 @@ export default defineComponent({
} }
let varA, varB let varA, varB
if (arg === 'k/d') { if (arg === 'k/d') {
varA = this.players[a].kills / this.players[a].deaths varA = this.players[a].kills / Math.max(1, this.players[a].deaths)
varB = this.players[b].kills / this.players[b].deaths varB = this.players[b].kills / Math.max(1, this.players[b].deaths)
} else { } else {
varA = this.players[a][arg] varA = this.players[a][arg]
varB = this.players[b][arg] varB = this.players[b][arg]
@@ -145,20 +149,22 @@ export default defineComponent({
margin: 0; margin: 0;
/* border: 2px solid transparent; */ /* border: 2px solid transparent; */
transition: border .25s; transition: border .25s;
height:2em; height: 2em;
}
.playerHeaders{
position:sticky;
top:0;
height:3em;
} }
.playerHeaders>span{ .playerHeaders {
padding:.5em .8em 0 .25em; position: sticky;
top: 0;
height: 3em;
} }
.playerHeaders>span {
padding: .5em .8em 0 .25em;
}
.playerRow>div { .playerRow>div {
padding:.5em .8em 0 .25em; padding: .5em .8em 0 .25em;
overflow:hidden; overflow: hidden;
} }
.playerHeaders, .playerHeaders,
@@ -181,17 +187,22 @@ export default defineComponent({
} }
.playerHeaders>span:last-child { .playerHeaders>span:last-child {
width:100%; width: 100%;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.playerRow>div:nth-child(6), .playerHeaders>span:nth-child(6),.playerRow>div:nth-child(7), .playerHeaders>span:nth-child(7) {
display: none; .playerRow>div:nth-child(6),
.playerHeaders>span:nth-child(6),
.playerRow>div:nth-child(7),
.playerHeaders>span:nth-child(7) {
display: none;
} }
.playerRow, .playerRow,
.playerHeaders{ .playerHeaders {
grid-template-columns: 4ch 20ch 6ch 6ch 1fr; grid-template-columns: 4ch 20ch 6ch 6ch 1fr;
} }
} }
.player span { .player span {
@@ -200,6 +211,4 @@ export default defineComponent({
.selected { .selected {
background: var(--comment) !important; background: var(--comment) !important;
} }</style>
</style>