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

optimize data structure and refs

Browse Source
This commit is contained in:
legonzaur
2023-05-04 11:48:40 +02:00
parent 20b0e09cca
commit 3e263211eb
6 changed files with 178 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PlayerChart.vue
+3 -3
View File
@@ -22,7 +22,7 @@ import dataLabel from 'chartjs-plugin-datalabels'
import { useKillStore, Player, Filters } from '@/stores/kill'
import { Scatter } from 'vue-chartjs'
import { defineComponent, PropType } from 'vue'
import { defineComponent, PropType, toRaw, unref } from 'vue'
import { ChartEvent } from 'chart.js/dist/core/core.plugins'
import { _DeepPartialObject } from 'chart.js/dist/types/utils'
@@ -51,8 +51,8 @@ export default defineComponent({
computed: {
playerList (): (Player & {id:string})[] {
const data = this.store.getPlayerList(this.filters || {})?.value.data
if (!data) return Object.entries(this.store.fetchPlayers(this.filters || {}).value.data).map(e => ({ id: e[0], ...e[1] }))
const cut = Object.entries(data).map(e => ({ id: e[0], ...e[1] }))
if (!data) return Object.entries(this.store.fetchPlayers(this.filters || {}).value.data).map(e => ({ id: e[0], ...toRaw(e[1].value) }))
const cut = Object.entries(data).map(e => ({ id: e[0], ...toRaw(e[1].value) }))
cut.sort((a, b) => {
return b.kills - a.kills
})
src/components/PlayerList.vue
+36 -26
View File
@@ -16,18 +16,18 @@
v-for="(player, index) in playerList" v-bind:key="player.id" v-on:click="$emit('highlightPlayer', player.id)"
:ref="`player:` + player.id">
<div><span>{{ index+1 }}</span></div>
<div><span>{{ player.username }}</span></div>
<div><span>{{ player.kills }}</span></div>
<div><span>{{ player.deaths }}</span></div>
<div><span>{{ Math.round(player.kills / Math.max(1, player.deaths) * 100) / 100 }}</span></div>
<div><span>{{ player.max_distance }}</span></div>
<div><span>{{ Math.round(((player.total_distance / player.kills) || 0) * 100) / 100 }}</span></div>
<div><span>{{ player.value.username }}</span></div>
<div><span>{{ player.value.kills }}</span></div>
<div><span>{{ player.value.deaths }}</span></div>
<div><span>{{ Math.round(player.value.kills / Math.max(1, player.value.deaths) * 100) / 100 }}</span></div>
<div><span>{{ player.value.max_distance }}</span></div>
<div><span>{{ Math.round(((player.value.total_distance / player.value.kills) || 0) * 100) / 100 }}</span></div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { defineComponent, PropType, Ref, toRaw, unref } from 'vue'
import { useKillStore, Player, Filters } from '@/stores/kill'
export default defineComponent({
@@ -43,33 +43,38 @@ export default defineComponent({
}
},
computed: {
players (): { [key: string]: Player } {
players (): { [key: string]: Ref<Player> } {
const { player: _, ...withoutPlayer } = this.filters
const data = this.store.getPlayerList(withoutPlayer)?.value.data
if (!data) return this.store.fetchPlayers(withoutPlayer).value.data
return data
},
playerList ():(Player & {id:string})[] {
playerList ():(Ref<Player> & {id:string})[] {
if (!this.players) return []
let players = Object.entries(this.players).map(e => ({ id: e[0], ...e[1] }))
let players = Object.entries(this.players).map(e => {
const target = {} as ProxyHandler<Ref<Player>>
const player = new Proxy(e[1], target) as Ref<Player> & {id:string}
player.id = e[0]
return player
}) as (Ref<Player> & {id:string})[]
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)
players.sort((a: Ref<Player>, b: Ref<Player>) => {
return collator.compare(toRaw(a.value).username, toRaw(b.value).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)
players.sort((a: Ref<Player>, b: Ref<Player>) => {
return toRaw(a.value).kills / Math.max(1, toRaw(a.value).deaths) - toRaw(b.value).kills / Math.max(1, toRaw(b.value).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)
players.sort((a: Ref<Player>, b: Ref<Player>) => {
return ((toRaw(a.value).total_distance / toRaw(a.value).kills) || 0) - ((toRaw(b.value).total_distance / toRaw(b.value).kills) || 0)
})
} else {
const argument = this.sortingData.argument
players.sort((a: Player, b: Player) => {
return a[argument] - b[argument]
players.sort((a: Ref<Player>, b: Ref<Player>) => {
return toRaw(a.value)[argument] - toRaw(b.value)[argument]
})
}
@@ -83,18 +88,16 @@ export default defineComponent({
},
watch: {
playerHighlighted (newval) {
console.log('newVal')
const newElement = this.$refs['player:' + newval] as HTMLElement[]
// Some hack because of some inconsistency
setTimeout(function () {
if (newElement && newElement[0]) { newElement[0].scrollIntoView({ behavior: 'smooth', block: 'center' }) }
}, 0)
this.scrollToPlayer(newval)
},
playerList () {
if (this.playerHighlighted) this.scrollToPlayer(this.playerHighlighted)
}
},
updated () {
const element = this.$refs['player:' + this.$props.playerHighlighted] as HTMLElement[]
/* const element = this.$refs['player:' + this.$props.playerHighlighted] as HTMLElement[]
if (!element || !element[0]) return
element[0].scrollIntoView({ behavior: 'smooth', block: 'center' })
element[0].scrollIntoView({ behavior: 'smooth', block: 'center' }) */
},
methods: {
selectNextPlayer (e: KeyboardEvent) {
@@ -124,6 +127,13 @@ export default defineComponent({
this.sortingData.direction = -1
}
this.sortingData.argument = argument as typeof this.sortingData.argument
},
scrollToPlayer (playerid:string) {
const newElement = this.$refs['player:' + playerid] as HTMLElement[]
// Some hack because of some inconsistency
setTimeout(function () {
if (newElement && newElement[0]) { newElement[0].scrollIntoView({ behavior: 'smooth', block: 'center' }) }
}, 10)
}
}
src/components/WeaponChart.vue
+6 -6
View File
@@ -9,7 +9,7 @@ import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import dataLabel from 'chartjs-plugin-datalabels'
import { Weapon, Filters, useKillStore } from '@/stores/kill'
import { Doughnut } from 'vue-chartjs'
import { defineComponent, PropType } from 'vue'
import { defineComponent, PropType, Ref, unref } from 'vue'
import weapons from '../stores/weapons.json'
ChartJS.register(ArcElement, Tooltip, Legend, dataLabel)
@@ -87,7 +87,7 @@ export default defineComponent({
if (!this.weapons) {
return 0
}
return this.weapons[e].kills
return this.weapons[e].value.kills
})
return chartData
},
@@ -129,7 +129,7 @@ export default defineComponent({
} else {
label = this.sortedWeaponList[ctx.dataIndex]
}
label += ' (' + this.weapons[label].kills + ' kills)'
label += ' (' + this.weapons[label].value.kills + ' kills)'
return label
}
}
@@ -138,7 +138,7 @@ export default defineComponent({
}
return options
},
weapons (): { [key: string]: Weapon } {
weapons (): { [key: string]: Ref<Weapon> } {
const { weapon: _, ...withoutWeapon } = this.filters || {}
const data = this.store.getWeaponList(withoutWeapon)?.value.data
if (!data) return this.store.fetchWeapons(withoutWeapon).value.data
@@ -148,10 +148,10 @@ export default defineComponent({
if (!this.weapons) return []
const weapons = Object.keys(this.weapons)
weapons.sort((a, b) => {
if (Number(this.weapons[a].kills) < Number(this.weapons[b].kills)) {
if (Number(this.weapons[a].value.kills) < Number(this.weapons[b].value.kills)) {
return -1
}
if (Number(this.weapons[a].kills) > Number(this.weapons[b].kills)) {
if (Number(this.weapons[a].value.kills) > Number(this.weapons[b].value.kills)) {
return 1
}
return 0
src/main.ts
+102 -1
View File
@@ -1,8 +1,109 @@
import { createApp } from 'vue'
import { createApp, ref, unref } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import { useKillStore } from './stores/kill'
const pinia = createPinia()
createApp(App).use(pinia).use(router).mount('#app')
const websocketData = {
attacker_id: '1010035351172',
attacker_name: 'Iverral',
cause_of_death: 'mp_weapon_car',
victim_id: '1008553404453',
victim_name: 'GURENTITANIUM',
attacker_current_weapon: 'mp_weapon_car',
victim_current_weapon: 'mp_weapon_sniper',
distance: 300,
game_mode: 'ps',
servername: "fvnkhead's 3v3",
map: 'lf_meadow',
host: 1
}
const store = useKillStore()
setInterval(() => {
const allPlayerArrays = store.$state.players.filter((e) => {
return (
(!e.value.filter.server ||
e.value.filter.server === websocketData.servername) &&
(!e.value.filter.weapon ||
e.value.filter.weapon === websocketData.cause_of_death)
// Handle other types of filters once those are implemented
)
})
allPlayerArrays.forEach(e => {
if (!e.value.data[websocketData.attacker_id]) {
e.value.data[websocketData.attacker_id] = ref({
deaths: 0,
kills: 500,
max_distance: 0,
total_distance: 0,
username: websocketData.attacker_name
})
}
if (!e.value.data[websocketData.victim_id]) {
e.value.data[websocketData.victim_id] = ref({
deaths: 0,
kills: 0,
max_distance: 0,
total_distance: 0,
username: websocketData.victim_name
})
}
// handle deaths with equipped, eventually
/*
if(e.value.filter.weapon){
!e.value.data[websocketData.victim_id] = e.value.data[websocketData.victim_id] = {
deaths: 0,
kills: 0,
max_distance: 0,
total_distance: 0,
username: websocketData.victim_name,
}
} */
unref(e.value.data[websocketData.victim_id]).deaths++
unref(e.value.data[websocketData.victim_id]).username = websocketData.victim_name
unref(e.value.data[websocketData.attacker_id]).username = websocketData.attacker_name
unref(e.value.data[websocketData.attacker_id]).kills++
unref(e.value.data[websocketData.attacker_id]).total_distance += websocketData.distance
unref(e.value.data[websocketData.attacker_id]).max_distance = Math.max(websocketData.distance, unref(e.value.data[websocketData.attacker_id]).max_distance)
})
const allWeaponsArrays = store.$state.weapons.filter((e) => {
return (
(!e.value.filter.player || e.value.filter.player === websocketData.attacker_id)
// Handle other types of filters once those are implemented
)
})
allWeaponsArrays.forEach(e => {
if (!e.value.data[websocketData.cause_of_death]) {
e.value.data[websocketData.cause_of_death] = ref({
deaths: 0,
kills: 500,
max_distance: 0,
total_distance: 0,
deaths_while_equipped: 0
})
}
// handle deaths with equipped, eventually
/*
if(e.value.filter.weapon){
!e.value.data[websocketData.victim_id] = e.value.data[websocketData.victim_id] = {
deaths: 0,
kills: 0,
max_distance: 0,
total_distance: 0,
username: websocketData.victim_name,
}
} */
// unref(e.value.data[websocketData.cause_of_death]).deaths++
unref(e.value.data[websocketData.cause_of_death]).total_distance += websocketData.distance
unref(e.value.data[websocketData.cause_of_death]).kills++
unref(e.value.data[websocketData.cause_of_death]).max_distance = Math.max(websocketData.distance, unref(e.value.data[websocketData.cause_of_death]).max_distance)
})
}, 100)
src/stores/kill.ts
+20 -14
View File
@@ -1,6 +1,6 @@
import { defineStore } from 'pinia'
import * as assert from 'assert'
import { Ref, ref } from 'vue'
import { Ref, reactive, ref, shallowRef, triggerRef, unref } from 'vue'
export interface Filters {
server?: string;
@@ -37,7 +37,7 @@ export interface Kill {
}
export interface KillData<T extends Kill> {
filter: Filters;
data: { [key: string]: T };
data: { [key: string]: Ref<T> };
}
export interface Player extends Kill {
@@ -76,19 +76,19 @@ export const useKillStore = defineStore('kill', {
}),
getters: {
getPlayerList: (state) => (filters: Filters) => {
return state.players.find((e) => objectEqual(e.value.filter, filters))
return state.players.find((e) => objectEqual(unref(e).filter, filters))
},
getWeaponList: (state) => (filters: Filters) =>
state.weapons.find((e) => objectEqual(e.value.filter, filters)),
state.weapons.find((e) => objectEqual(unref(e).filter, filters)),
getServerList: (state) => (filters: Filters) =>
state.servers.find((e) => objectEqual(e.value.filter, filters))
state.servers.find((e) => objectEqual(unref(e).filter, filters))
},
actions: {
fetchPlayers (filter: Filters) {
filter = removeNullEntries(filter)
let entry = this.players.find((e) => objectEqual(e.value.filter, filter))
let entry = this.players.find((e) => objectEqual(unref(e).filter, filter))
if (entry === undefined) {
entry = ref({ filter, data: {} })
entry = shallowRef({ filter, data: {} })
this.players.push(entry)
}
fetch(
@@ -96,15 +96,17 @@ export const useKillStore = defineStore('kill', {
new URLSearchParams(filter as Record<keyof Filters, string>)
).then(async response => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
entry!.value.data = await response.json()
unref(entry)!.data = Object.fromEntries(Object.entries(await response.json()).map(e => [e[0], ref(e[1] as Player)]))
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
triggerRef(entry!)
})
return entry
},
fetchWeapons (filter: Filters) {
filter = removeNullEntries(filter)
let entry = this.weapons.find((e) => objectEqual(e.value.filter, filter))
let entry = this.weapons.find((e) => objectEqual(unref(e).filter, filter))
if (!entry) {
entry = ref({ filter, data: {} })
entry = shallowRef({ filter, data: {} })
this.weapons.push(entry)
}
@@ -113,15 +115,17 @@ export const useKillStore = defineStore('kill', {
new URLSearchParams(filter as Record<keyof Filters, string>)
).then(async response => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
entry!.value.data = await response.json()
unref(entry)!.data = Object.fromEntries(Object.entries(await response.json()).map(e => [e[0], ref(e[1] as Weapon)]))
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
triggerRef(entry!)
})
return entry
},
fetchServers (filter: Filters) {
filter = removeNullEntries(filter)
let entry = this.servers.find((e) => objectEqual(e.value.filter, filter))
let entry = this.servers.find((e) => objectEqual(unref(e).filter, filter))
if (!entry) {
entry = ref({ filter, data: {} })
entry = shallowRef({ filter, data: {} })
this.servers.push(entry)
}
fetch(
@@ -129,7 +133,9 @@ export const useKillStore = defineStore('kill', {
new URLSearchParams(filter as Record<keyof Filters, string>)
).then(async response => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
entry!.value.data = await response.json()
unref(entry)!.data = Object.fromEntries(Object.entries(await response.json()).map(e => [e[0], ref(e[1] as Server)]))
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
triggerRef(entry!)
})
return entry
}
src/views/PlayerView.vue
+11 -10
View File
@@ -86,7 +86,7 @@ import { Player, Weapon, Server, useKillStore, Filters } from '@/stores/kill'
import PlayerList from '@/components/PlayerList.vue'
import PlayerChart from '@/components/PlayerChart.vue'
import WeaponChart from '@/components/WeaponChart.vue'
import { defineComponent } from 'vue'
import { Ref, defineComponent, toRaw, unref } from 'vue'
import VueMultiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.css'
import weapons from '../stores/weapons.json'
@@ -122,11 +122,11 @@ export default defineComponent({
}
},
computed: {
servers (): { [key: string]: Server } {
servers (): { [key: string]: Ref<Server> } {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { server: _, player: _1, ...withoutServer } = this.filters
const data = this.store.getServerList(withoutServer)?.value.data
if (!data) return this.store.fetchServers(withoutServer).value.data
if (!data) return unref(this.store.fetchServers(withoutServer)).data
return data
},
groupedServers () {
@@ -135,21 +135,22 @@ export default defineComponent({
servers: (Server & { name?: string })[];
}[]
Object.entries(this.servers).forEach((e) => {
if (!hosts.find((host) => host.id === e[1].host + 'sfdsdfsd')) { hosts.push({ id: e[1].host + 'sfdsdfsd', servers: [] as Server[] }) }
const server = unref(e[1])
if (!hosts.find((host) => host.id === server.host + 'sfdsdfsd')) { hosts.push({ id: server.host + 'sfdsdfsd', servers: [] as Server[] }) }
hosts
.find((host) => host.id === e[1].host + 'sfdsdfsd')
?.servers.push({ name: e[0], ...e[1] })
.find((host) => host.id === server.host + 'sfdsdfsd')
?.servers.push({ name: e[0], ...server })
})
return hosts
},
weapons (): { [key: string]: Weapon } {
weapons (): { [key: string]: Ref<Weapon> } {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { weapon: _, player: _1, ...withoutWeapons } = this.filters
const data = this.store.getWeaponList(withoutWeapons)?.value.data
if (!data) return this.store.fetchWeapons(withoutWeapons).value.data
return data
},
players (): { [key: string]: Player } {
players (): { [key: string]: Ref<Player> } {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { player: _, ...withoutPlayers } = this.filters
const data = this.store.getPlayerList(withoutPlayers)?.value.data
@@ -170,7 +171,7 @@ export default defineComponent({
if (!this.players) return []
const players = Object.entries(this.players).map((e) => ({
id: e[0],
...e[1]
...toRaw(e[1].value)
}))
return players.sort((a: Player, b: Player) => {
if (a.username < b.username) {
@@ -231,7 +232,7 @@ export default defineComponent({
highlight_player (playerid: string) {
const player = this.players[playerid]
if (player) {
this.playerHighlighted = { id: playerid, ...player }
this.playerHighlighted = { id: playerid, ...unref(player) }
return
}
this.playerHighlighted = undefined