optimize data structure and refs
This commit is contained in:
@@ -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
|
||||
})
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
+102
-1
@@ -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)
|
||||
|
||||
+20
-14
@@ -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
|
||||
}
|
||||
|
||||
+11
-10
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user