only update the current view

.eslintrc.js

@@ -13,6 +13,9 @@ module.exports = {
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    indent: 'off',
+    '@typescript-eslint/indent': ['error', 2]
   }
+
 }

src/main.ts

@@ -3,7 +3,7 @@ import { createApp, ref, unref } from 'vue'
 import App from './App.vue'
 import router from './router'
 import { createPinia } from 'pinia'
-import { useKillStore } from './stores/kill'
+import { objectEqual, useKillStore } from './stores/kill'
 
 const pinia = createPinia()
 
@@ -24,7 +24,7 @@ const dummyData = {
   host: 1
 }
 
-// setInterval(() => registerWebSocketKill(dummyData), 100)
+setInterval(() => registerWebSocketKill(dummyData), 100)
 
 type websocketData = {
   attacker_id: string,
@@ -52,113 +52,49 @@ socket.onmessage = function (e) {
 }
 
 function registerWebSocketKill (data : websocketData) {
-  store.$state.players.filter((e) => {
+  const { player: _, ...filterWithoutPlayer } = store.$state.currentFilter
-    return (
+  const list = unref(store.$state.players.find((e) => {
-      (!e.value.filter.server ||
+    return objectEqual(filterWithoutPlayer, e.value.filter)
-                e.value.filter.server === data.servername) &&
+  }))
-              (!e.value.filter.weapon ||
+  if (!list) return
-                e.value.filter.weapon === data.cause_of_death)
+  if (!(!list.filter.server || list.filter.server === data.servername)) return
-    // Handle other types of filters once those are implemented
-    )
-  }).forEach(e => {
-    if (!e.value.data[data.attacker_id]) {
-      e.value.data[data.attacker_id] = ref({
-        deaths: 0,
-        kills: 0,
-        max_distance: 0,
-        total_distance: 0,
-        username: data.attacker_name
-      })
-    }
-    if (!e.value.data[data.victim_id]) {
-      e.value.data[data.victim_id] = ref({
-        deaths: 0,
-        kills: 0,
-        max_distance: 0,
-        total_distance: 0,
-        username: data.victim_name
-      })
-    }
-    // handle deaths with equipped, eventually
-    /*
-    if(e.value.filter.weapon){
-        !e.value.data[data.victim_id] = e.value.data[data.victim_id] = {
-            deaths: 0,
-            kills: 0,
-            max_distance: 0,
-            total_distance: 0,
-            username: data.victim_name,
-          }
-    } */
 
-    unref(e.value.data[data.victim_id]).deaths++
+  const WeaponFilter = (!list.filter.weapon || list.filter.weapon === data.cause_of_death)
-    unref(e.value.data[data.victim_id]).username = data.victim_name
+  const CurrentWeaponFilter = list.filter.weapon === data.attacker_current_weapon
-    unref(e.value.data[data.attacker_id]).username = data.attacker_name
+  if (!(WeaponFilter || CurrentWeaponFilter)) return
-    if (data.attacker_id !== data.victim_id) {
-      unref(e.value.data[data.attacker_id]).kills++
-      unref(e.value.data[data.attacker_id]).total_distance += data.distance
-      unref(e.value.data[data.attacker_id]).max_distance = Math.max(data.distance, unref(e.value.data[data.attacker_id]).max_distance)
-    }
-  })
-  store.$state.weapons.filter((e) => {
-    return (
-      (!e.value.filter.server ||
-        e.value.filter.server === data.servername) &&
-      (!e.value.filter.player || e.value.filter.player === data.attacker_id)
-    // Handle other types of filters once those are implemented
-    )
-  }).forEach(e => {
-    if (!e.value.data[data.cause_of_death]) {
-      e.value.data[data.cause_of_death] = ref({
-        deaths: 0,
-        kills: 0,
-        max_distance: 0,
-        total_distance: 0,
-        deaths_while_equipped: 0
-      })
-    }
-    // handle deaths with equipped, eventually
-    /*
-    if(e.value.filter.weapon){
-        !e.value.data[data.victim_id] = e.value.data[data.victim_id] = {
-            deaths: 0,
-            kills: 0,
-            max_distance: 0,
-            total_distance: 0,
-            username: data.victim_name,
-          }
-    } */
 
-    if (data.attacker_id !== data.victim_id) {
+  if (!list.data[data.victim_id]) {
-      unref(e.value.data[data.cause_of_death]).kills++
+    list.data[data.victim_id] = ref({
-      unref(e.value.data[data.cause_of_death]).total_distance += data.distance
+      deaths: 0,
-      unref(e.value.data[data.cause_of_death]).max_distance = Math.max(data.distance, unref(e.value.data[data.cause_of_death]).max_distance)
+      deaths_while_equipped: 0,
-    }
+      kills: 0,
-    unref(e.value.data[data.cause_of_death]).deaths++
+      max_distance: 0,
-  })
+      total_distance: 0,
-  store.$state.servers.filter((e) => {
+      username: data.victim_name
-    return (
+    })
-      (!e.value.filter.server ||
+  }
-                e.value.filter.server === data.servername)
+  if (WeaponFilter) {
-    // Handle other types of filters once those are implemented
+    unref(list.data[data.victim_id]).deaths++
-    )
+  } else if (CurrentWeaponFilter) {
-  }).forEach((e) => {
+    unref(list.data[data.victim_id]).deaths_while_equipped++
-    if (!e.value.data[data.servername]) {
+  }
-      e.value.data[data.servername] = ref({
-        deaths: 0,
-        kills: 0,
-        max_distance: 0,
-        total_distance: 0,
-        deaths_while_equipped: 0,
-        host: data.host
-      })
-    }
 
-    if (data.attacker_id !== data.victim_id) {
+  if (!list.data[data.attacker_id]) {
-      unref(e.value.data[data.servername]).kills++
+    list.data[data.attacker_id] = ref({
-      unref(e.value.data[data.servername]).total_distance += data.distance
+      deaths: 0,
-      unref(e.value.data[data.servername]).max_distance = Math.max(data.distance, unref(e.value.data[data.servername]).max_distance)
+      deaths_while_equipped: 0,
-    }
+      kills: 0,
-    unref(e.value.data[data.servername]).deaths++
+      max_distance: 0,
-  })
+      total_distance: 0,
+      username: data.attacker_name
+    })
+  }
+  if (data.attacker_id !== data.victim_id) {
+    unref(list.data[data.attacker_id]).kills++
+    unref(list.data[data.attacker_id]).total_distance += data.distance
+    unref(list.data[data.attacker_id]).max_distance = Math.max(data.distance, unref(list.data[data.attacker_id]).max_distance)
+  }
+
+  unref(list.data[data.victim_id]).username = data.victim_name
+  unref(list.data[data.attacker_id]).username = data.attacker_name
 }

src/stores/kill.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import * as assert from 'assert'
-import { Ref, reactive, ref, shallowRef, triggerRef, unref } from 'vue'
+import { Ref, ref, shallowRef, triggerRef, unref } from 'vue'
 
 export interface Filters {
   server?: string;
@@ -11,12 +11,12 @@ export interface Filters {
   gamemode?: string;
 }
 
-function removeNullEntries (a: Filters) {
+export function removeNullEntries (a: Filters) {
   return Object.fromEntries(
     Object.entries(a).filter((e) => e[1] !== undefined && e[1] !== null)
   )
 }
-function objectEqual (a: Filters, b: Filters) {
+export function objectEqual (a: Filters, b: Filters) {
   try {
     a = removeNullEntries(a)
     b = removeNullEntries(b)
@@ -83,6 +83,8 @@ function fetchWithLoading (url: string, progress: (percentage: number) => void)
 
 export interface Kill {
   deaths: number;
+  // eslint-disable-next-line camelcase
+  deaths_while_equipped:number
   kills: number;
   // eslint-disable-next-line camelcase
   max_distance: number;
@@ -129,7 +131,8 @@ export interface State {
   maps: Ref<KillData<Kill>>[];
   gamemodes: Ref<KillData<Kill>>[];
   hosts: { [key: number]: string };
-  nsServers: NSServer[] | undefined
+  nsServers: NSServer[] | undefined;
+  currentFilter:Filters;
 }
 
 let serverInterval: number
@@ -141,7 +144,8 @@ export const useKillStore = defineStore('kill', {
     maps: [],
     gamemodes: [],
     hosts: {},
-    nsServers: undefined
+    nsServers: undefined,
+    currentFilter: {}
   }),
   getters: {
     getPlayerList: (state) => (filters: Filters) => {
@@ -165,7 +169,7 @@ export const useKillStore = defineStore('kill', {
         'https://tone.sleepycat.date/v2/client/players?' +
         new URLSearchParams(filter as Record<keyof Filters, string>),
         (progress) => {
-          if (entry) {
+          if (entry && unref(entry).progress !== 1) {
             unref(entry).progress = progress
             if (progress !== 1) triggerRef(entry)
           }
@@ -190,7 +194,7 @@ export const useKillStore = defineStore('kill', {
         'https://tone.sleepycat.date/v2/client/weapons?' +
         new URLSearchParams(filter as Record<keyof Filters, string>),
         (progress) => {
-          if (entry) {
+          if (entry && unref(entry).progress !== 1) {
             unref(entry).progress = progress
             if (progress !== 1) triggerRef(entry)
           }
@@ -214,7 +218,7 @@ export const useKillStore = defineStore('kill', {
         'https://tone.sleepycat.date/v2/client/servers?' +
         new URLSearchParams(filter as Record<keyof Filters, string>),
         (progress) => {
-          if (entry) {
+          if (entry && unref(entry).progress !== 1) {
             unref(entry).progress = progress
             if (progress !== 1) triggerRef(entry)
           }
@@ -235,6 +239,18 @@ export const useKillStore = defineStore('kill', {
       clearInterval(serverInterval)
       serverInterval = setInterval(() => this.fetchNSServers(), 60000)
       return this.nsServers || []
+    },
+    setFilter (filter:Filters) {
+      this.currentFilter = filter
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { player: _player, ...withoutPlayers } = this.currentFilter
+      this.fetchPlayers(withoutPlayers)
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { weapon: _weapon, ...withoutWeapon } = this.currentFilter
+      this.fetchWeapons(withoutWeapon)
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { server: _server, ...withoutServer } = this.currentFilter
+      this.fetchWeapons(withoutServer)
     }
   }
 })

src/views/PlayerView.vue

@@ -186,6 +186,7 @@ export default defineComponent({
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { server: _, weapon: _2, ...withoutFilters } = this.$route.query
         router.push({ query: { ...newValue, ...withoutFilters } })// .then(e => { console.log(e) })
+        this.store.setFilter({ player: this.store.currentFilter.player, ...newValue })
       },
       deep: true
     },
@@ -194,6 +195,7 @@ export default defineComponent({
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { player: _, ...withoutPlayer } = this.$route.query
       router.push({ query: { player: newValue?.id, ...withoutPlayer } })// .then(e => { console.log(e) })
+      this.store.setFilter({ player: newValue?.id, ...this.store.currentFilter })
     },
     $route: {
       handler: function () {