optimize data structure and refs

src/components/PlayerChart.vue

@@ -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] }))
+      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], ...e[1] }))
+      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

@@ -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.value.username }}</span></div>
-      <div><span>{{ player.kills }}</span></div>
+      <div><span>{{ player.value.kills }}</span></div>
-      <div><span>{{ player.deaths }}</span></div>
+      <div><span>{{ player.value.deaths }}</span></div>
-      <div><span>{{ Math.round(player.kills / Math.max(1, player.deaths) * 100) / 100 }}</span></div>
+      <div><span>{{ Math.round(player.value.kills / Math.max(1, player.value.deaths) * 100) / 100 }}</span></div>
-      <div><span>{{ player.max_distance }}</span></div>
+      <div><span>{{ player.value.max_distance }}</span></div>
-      <div><span>{{ Math.round(((player.total_distance / player.kills) || 0) * 100) / 100 }}</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) => {
+        players.sort((a: Ref<Player>, b: Ref<Player>) => {
-          return collator.compare(a.username, b.username)
+          return collator.compare(toRaw(a.value).username, toRaw(b.value).username)
         })
       } else if (this.sortingData.argument === 'k/d') {
-        players.sort((a: Player, b: Player) => {
+        players.sort((a: Ref<Player>, b: Ref<Player>) => {
-          return a.kills / Math.max(1, a.deaths) - b.kills / Math.max(1, b.deaths)
+          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) => {
+        players.sort((a: Ref<Player>, b: Ref<Player>) => {
-          return ((a.total_distance / a.kills) || 0) - ((b.total_distance / b.kills) || 0)
+          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) => {
+        players.sort((a: Ref<Player>, b: Ref<Player>) => {
-          return a[argument] - b[argument]
+          return toRaw(a.value)[argument] - toRaw(b.value)[argument]
         })
       }
 
@@ -83,18 +88,16 @@ export default defineComponent({
   },
   watch: {
     playerHighlighted (newval) {
-      console.log('newVal')
+      this.scrollToPlayer(newval)
-      const newElement = this.$refs['player:' + newval] as HTMLElement[]
+    },
-      // Some hack because of some inconsistency
+    playerList () {
-      setTimeout(function () {
+      if (this.playerHighlighted) this.scrollToPlayer(this.playerHighlighted)
-        if (newElement && newElement[0]) { newElement[0].scrollIntoView({ behavior: 'smooth', block: 'center' }) }
-      }, 0)
     }
   },
   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

@@ -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

@@ -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

@@ -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

@@ -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')
+          .find((host) => host.id === server.host + 'sfdsdfsd')
-          ?.servers.push({ name: e[0], ...e[1] })
+          ?.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