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

fix funky player highlight behaviour on PlayerList

Browse Source
This commit is contained in:
legonzaur
2023-03-29 21:51:21 +02:00
parent cc835b98e4
commit 7cd2ce56d7
1 changed files with 5 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PlayerList.vue
+5 -18
View File
@@ -9,7 +9,7 @@
<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')" :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> <span v-on:click="sortPlayerList('avg_kill_distance')" :class="sortingData.argument == 'avg_kill_distance' ? 'selected' : ''">average distance</span>
</div> </div>
<div class="playerRow" v-for="(playerId, index) in playerIdList" v-bind:key="playerId" <div :class="'playerRow ' + (playerId === $props.playerHighlighted ? 'selected' : '')" v-for="(playerId, index) in playerIdList" v-bind:key="playerId"
v-on:click="$emit('highlightPlayer', playerId)" :ref="`player:` + playerId"> v-on:click="$emit('highlightPlayer', playerId)" :ref="`player:` + playerId">
<div><span>{{ index }}</span></div> <div><span>{{ index }}</span></div>
<div><span>{{ players[playerId].username }}</span></div> <div><span>{{ players[playerId].username }}</span></div>
@@ -37,8 +37,7 @@ export default defineComponent({
return { return {
sortingData: { direction: -1, argument: 'kills' as keyof Player | 'k/d' }, sortingData: { direction: -1, argument: 'kills' as keyof Player | 'k/d' },
playerIdList: [] as string[], playerIdList: [] as string[],
store: useStore(), store: useStore()
selected: undefined as string | undefined
} }
}, },
computed: { computed: {
@@ -52,24 +51,12 @@ export default defineComponent({
this.sortingData.direction *= -1 this.sortingData.direction *= -1
this.playerIdList = Object.keys(newval) this.playerIdList = Object.keys(newval)
this.sortPlayerList(this.sortingData.argument) this.sortPlayerList(this.sortingData.argument)
this.$nextTick(() => {
const element = (this.$refs['player:' + this.selected] as HTMLElement[])
if (element && element.length > 0) element[0].classList.add('selected')
})
}, },
immediate: true immediate: true
}, },
playerHighlighted (newval, oldval) { playerHighlighted (newval) {
const oldElement = this.$refs['player:' + oldval] as HTMLElement[]
if (oldElement) {
oldElement[0].classList.remove('selected')
delete this.selected
}
const newElement = this.$refs['player:' + newval] as HTMLElement[] const newElement = this.$refs['player:' + newval] as HTMLElement[]
if (!newElement) return
newElement[0].classList.add('selected')
newElement[0].scrollIntoView({ behavior: 'smooth', block: 'center' }) newElement[0].scrollIntoView({ behavior: 'smooth', block: 'center' })
this.selected = newval
} }
}, },
updated () { updated () {
@@ -121,10 +108,10 @@ export default defineComponent({
ArrowRight: 10, ArrowRight: 10,
ArrowLeft: -10 ArrowLeft: -10
} as { [key: string]: number } } as { [key: string]: number }
if (!this.selected) return if (!this.$props.playerHighlighted) return
if (!Object.keys(values).includes(e.key)) return if (!Object.keys(values).includes(e.key)) return
e.preventDefault() e.preventDefault()
const index = this.playerIdList.indexOf(this.selected) const index = this.playerIdList.indexOf(this.$props.playerHighlighted)
let nextIndex = (index + values[e.key]) let nextIndex = (index + values[e.key])
if (nextIndex >= this.playerIdList.length) nextIndex = this.playerIdList.length - 1 if (nextIndex >= this.playerIdList.length) nextIndex = this.playerIdList.length - 1
if (nextIndex < 0) nextIndex = 0 if (nextIndex < 0) nextIndex = 0