From b78072d3859cf427a5f9dba60c0db5b66a2797e9 Mon Sep 17 00:00:00 2001 From: legonzaur Date: Mon, 1 May 2023 15:23:25 +0200 Subject: [PATCH] speedup player List sorting --- src/components/PlayerList.vue | 108 ++++++++++++++++----------------- src/components/WeaponChart.vue | 2 +- src/stores/kill.ts | 2 +- src/views/PlayerView.vue | 33 +++++----- 4 files changed, 74 insertions(+), 71 deletions(-) diff --git a/src/components/PlayerList.vue b/src/components/PlayerList.vue index 721812f..ba16aee 100644 --- a/src/components/PlayerList.vue +++ b/src/components/PlayerList.vue @@ -2,26 +2,26 @@
- Username - K - D - K/D - K + D + K/D + max distance - average distance
-
+
{{ index+1 }}
-
{{ players[playerId].username }}
-
{{ players[playerId].kills }}
-
{{ players[playerId].deaths }}
-
{{ Math.round(players[playerId].kills / Math.max(1, players[playerId].deaths) * 100) / 100 }}
-
{{ players[playerId].max_distance }}
-
{{ Math.round(((players[playerId].total_distance / players[playerId].kills) || 0) * 100) / 100 }}
+
{{ player.username }}
+
{{ player.kills }}
+
{{ player.deaths }}
+
{{ Math.round(player.kills / Math.max(1, player.deaths) * 100) / 100 }}
+
{{ player.max_distance }}
+
{{ Math.round(((player.total_distance / player.kills) || 0) * 100) / 100 }}
@@ -49,17 +49,44 @@ export default defineComponent({ const data = this.store.getPlayerList(withoutPlayer)?.value.data if (!data) return this.store.fetchPlayers(withoutPlayer).value.data return data + }, + playerList ():(Player & {id:string})[] { + if (!this.players) return [] + let players = Object.entries(this.players).map(e => ({ id: e[0], ...e[1] })) + + if (this.sortingData.argument === 'username') { + const collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' }) + players.sort((a: Player, b: Player) => { + return collator.compare(a.username, b.username) + }) + } else if (this.sortingData.argument === 'k/d') { + players.sort((a: Player, b: Player) => { + return a.kills / Math.max(1, a.deaths) - b.kills / Math.max(1, b.deaths) + }) + } else if (this.sortingData.argument === 'avg_distance') { + players.sort((a: Player, b: Player) => { + return ((a.total_distance / a.kills) || 0) - ((b.total_distance / b.kills) || 0) + }) + } else { + const argument = this.sortingData.argument + players.sort((a: Player, b: Player) => { + return a[argument] - b[argument] + }) + } + + if (this.sortingData.direction < 0) { + players.reverse() + } + + players = players.slice(0, 500) + return players } }, watch: { players: { handler (newval: { [key: string]: Player }): void { if (!newval) return - this.playerIdList = [] this.sortingData.direction *= -1 - this.playerIdList = Object.keys(newval) - this.sortPlayerList(this.sortingData.argument) - this.playerIdList = this.playerIdList.slice(0, 500) }, immediate: true }, @@ -74,41 +101,6 @@ export default defineComponent({ element[0].scrollIntoView({ behavior: 'smooth', block: 'center' }) }, methods: { - sortPlayerList (arg: ((keyof Player) | 'k/d' | 'avg_distance')) { - if (arg === this.sortingData.argument) { - this.sortingData.direction *= -1 - } else { - if (arg === 'username') { - this.sortingData.direction = 1 - } - } - this.sortingData.argument = arg - - this.playerIdList.sort((a: string, b: string) => { - if (!this.players) { - return 0 - } - let varA, varB - if (arg === 'k/d') { - varA = this.players[a].kills / Math.max(1, this.players[a].deaths) - varB = this.players[b].kills / Math.max(1, this.players[b].deaths) - } else if (arg === 'avg_distance') { - varA = (this.players[a].total_distance / this.players[a].kills) || 0 - varB = (this.players[b].total_distance / this.players[b].kills) || 0 - } else { - varA = this.players[a][arg] - varB = this.players[b][arg] - } - if (varA === undefined || varB === undefined) return 0 - if (varA < varB) { - return -1 * this.sortingData.direction - } - if (varA > varB) { - return 1 * this.sortingData.direction - } - return 0 - }) - }, selectNextPlayer (e: KeyboardEvent) { const values = { Home: -Infinity, @@ -128,6 +120,14 @@ export default defineComponent({ if (nextIndex >= this.playerIdList.length) nextIndex = this.playerIdList.length - 1 if (nextIndex < 0) nextIndex = 0 this.$emit('highlightPlayer', this.playerIdList[nextIndex]) + }, + updateSort (argument:string) { + if (this.sortingData.argument === argument) { + this.sortingData.direction *= -1 + } else { + this.sortingData.direction = -1 + } + this.sortingData.argument = argument as typeof this.sortingData.argument } } diff --git a/src/components/WeaponChart.vue b/src/components/WeaponChart.vue index de89df3..46da9cd 100644 --- a/src/components/WeaponChart.vue +++ b/src/components/WeaponChart.vue @@ -103,7 +103,7 @@ export default defineComponent({ datalabels: { formatter: (value: any, context: any) => { const weaponId = this.sortedWeaponList[context.dataIndex] - if (!(weapons as {[key:string]:string})[weaponId]) console.log(weaponId) + // if (!(weapons as {[key:string]:string})[weaponId]) console.log(weaponId) return (weapons as {[key:string]:string})[weaponId] || weaponId }, backgroundColor: (context: any) => { diff --git a/src/stores/kill.ts b/src/stores/kill.ts index 0c0243b..af04a22 100644 --- a/src/stores/kill.ts +++ b/src/stores/kill.ts @@ -43,7 +43,7 @@ export interface KillData { export interface Player extends Kill { username: string; // eslint-disable-next-line camelcase - deaths_while_equipped?: number; + // deaths_while_equipped?: number; } export interface Weapon extends Kill { diff --git a/src/views/PlayerView.vue b/src/views/PlayerView.vue index 343b9d3..cc265c2 100644 --- a/src/views/PlayerView.vue +++ b/src/views/PlayerView.vue @@ -21,15 +21,15 @@ > + :options="sortedPlayerList" :allow-empty="true" :custom-label="((e:Player) => e?.username)">
- - - + + +
@@ -54,7 +54,7 @@ export default defineComponent({ model: { server: undefined, weapon: undefined } as unknown as {weapon:Weapon | Weapon[], server: (Server& {name?:string}) | (Server& {name?:string})[]}, filters: {} as Filters, store: useKillStore(), - playerHighlighted: undefined, + playerHighlighted: undefined as (Player & {id:string}) | undefined, weaponLocale: weapons as {[key:string]:string} } }, @@ -98,17 +98,14 @@ export default defineComponent({ const servers = Object.keys(this.servers) return servers.sort() }, - sortedPlayerList (): string[] { + sortedPlayerList (): Player[] { if (!this.players) return [] - const players = Object.keys(this.players) - return players.sort((a: string, b: string) => { - if (!this.players) { - return 0 - } - if (this.players[a].username < this.players[b].username) { + const players = Object.entries(this.players).map(e => ({ id: e[0], ...e[1] })) + return players.sort((a: Player, b: Player) => { + if (a.username < b.username) { return -1 } - if (this.players[a].username > this.players[b].username) { + if (a.username > b.username) { return 1 } return 0 @@ -123,6 +120,12 @@ export default defineComponent({ }, deep: true } + }, + methods: { + highlight_player (playerid:string) { + const player = this.players[playerid] + if (player) this.playerHighlighted = { id: playerid, ...player } + } } })