remove duplicate eslint rule

This reverts commit a6e75006e6.

.editorconfig

@@ -3,3 +3,9 @@ indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -1,18 +1,24 @@
 module.exports = {
   root: true,
+
   env: {
     node: true
   },
+
   extends: [
     'plugin:vue/vue3-essential',
     '@vue/standard',
     '@vue/typescript/recommended'
   ],
+
   parserOptions: {
     ecmaVersion: 2020
   },
+
   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',
+    '@typescript-eslint/indent': ['error', 2],
+    camelcase: 0
   }
 }

.github/workflows/node.js.yml

@@ -0,0 +1,39 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  build:
+  
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      pages: write
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci --force
+    - run: npm run build --if-present
+    - name: Upload GitHub Pages artifact
+      uses: actions/upload-pages-artifact@v1.0.8
+      with:
+        path: dist
+        
+    - name: Deploy GitHub Pages site
+      uses: actions/deploy-pages@v2.0.1

package.json

@@ -26,9 +26,9 @@
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.8",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-standard": "^6.1.0",
@@ -40,4 +40,4 @@
     "eslint-plugin-vue": "^8.0.3",
     "typescript": "~4.5.5"
   }
-}
+}

publish.cmd

@@ -1,4 +1,6 @@
 call npm run build
 call git add dist -f
 call git commit -m 'publish'
-call git subtree push --prefix dist origin gh-pages
+call git subtree push --prefix dist origin gh-pages
+call git reset HEAD~1
+call git rm dist -r

src/components/GamemodeChart.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="gamemodeChart" ref="container">
+    <LoadingBar v-if="progress !== 1" :value="progress"></LoadingBar>
+    <Doughnut :data="chart" :options="chartOptions" v-if="progress === 1" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, ChartData, ChartOptions } from 'chart.js'
+import dataLabel from 'chartjs-plugin-datalabels'
+import { Weapon, Filter, useKillStore } from '@/stores/kill'
+import { Doughnut } from 'vue-chartjs'
+import { defineComponent, PropType, Ref, unref } from 'vue'
+import gamemodes from '../stores/gamemodes.json'
+
+import LoadingBar from './LoadingBar.vue'
+
+ChartJS.register(ArcElement, Tooltip, Legend, dataLabel)
+
+export default defineComponent({
+  name: 'GamemodeChart',
+  props: {
+    filters: Object as PropType<Filter>,
+    playerHighlighted: String
+  },
+  emits: ['highlightPlayer'],
+  components: {
+    Doughnut, LoadingBar
+  },
+  mounted () {
+    this.refreshColors++
+  },
+  data: () => {
+    return {
+      store: useKillStore(),
+      refreshColors: 0
+    }
+  },
+  computed: {
+    progress () {
+      const filter = new Filter(this.filters)
+      delete filter.gamemode
+      const data = this.store.getList('gamemodes', filter)?.value
+      if (!data) return this.store.fetch('gamemodes', filter).value.progress.value
+      return data.progress.value
+    },
+    colors () {
+      // eslint-disable-next-line no-unused-expressions
+      this.refreshColors
+      const colors = {} as { [key: string]: string }
+      if (this.$refs.container) {
+        const style = getComputedStyle(this.$refs.container as Element)
+        colors.fg = style.getPropertyValue('--foreground')
+        colors.bg = style.getPropertyValue('--bg-color')
+        colors.orange = style.getPropertyValue('--orange')
+        colors.cyan = style.getPropertyValue('--cyan')
+        colors.yellow = style.getPropertyValue('--yellow')
+        colors.green = style.getPropertyValue('--green')
+        colors.purple = style.getPropertyValue('--purple')
+        colors.red = style.getPropertyValue('--red')
+        colors.pink = style.getPropertyValue('--pink')
+        colors.currentLine = style.getPropertyValue('--current-line')
+      } else {
+        colors.fg = '#ffffff'
+      }
+      return colors
+    },
+    chart (): ChartData<'doughnut', number[]> {
+      const colors = [
+        'cyan',
+        'green',
+        'orange',
+        'pink',
+        'purple',
+        'red',
+        'yellow'
+      ]
+      const chartData: ChartData<'doughnut', number[]> = {
+        datasets: [
+          {
+            label: 'Weapons',
+            borderColor: () => this.colors.fg,
+            backgroundColor: (context) => {
+              return this.colors[
+                colors[(context.dataIndex * 3) % colors.length]
+              ]
+            },
+            data: [] as number[]
+          }
+        ]
+      }
+      if (!this.sortedList) {
+        return chartData
+      }
+      chartData.datasets[0].data = this.sortedList.map((e) => {
+        if (!this.values) {
+          return 0
+        }
+        return this.values[e].value.kills
+      })
+      return chartData
+    },
+    chartOptions (): ChartOptions<'doughnut'> {
+      // eslint-disable-next-line no-unused-expressions
+      this.$props.playerHighlighted
+      const options: ChartOptions<'doughnut'> = {
+        responsive: true,
+        maintainAspectRatio: true,
+        animation: { duration: 500 },
+        layout: { autoPadding: false },
+        plugins: {
+          datalabels: {
+            formatter: (value, context) => {
+              const weaponId = this.sortedList[context.dataIndex]
+              // if (!(weapons as {[key:string]:string})[weaponId]) console.log(weaponId)
+              return (gamemodes as { [key: string]: string })[weaponId] || weaponId
+            },
+            backgroundColor: (context) => {
+              return context.dataset.backgroundColor(context, options)
+            },
+            borderColor: this.colors.fg,
+            borderRadius: 25,
+            borderWidth: 2,
+            color: this.colors.bg,
+            display: (context) => {
+              return context.dataIndex === context.dataset.data.length - 1
+                ? true
+                : 'auto'
+            },
+            padding: 6
+          },
+          tooltip: {
+            callbacks: {
+              label: (ctx: any) => {
+                let label: string
+                if (!this.sortedList) {
+                  label = ctx.dataset.labels[ctx.dataIndex]
+                } else {
+                  label = this.sortedList[ctx.dataIndex]
+                }
+                label += ' (' + this.values[label].value.kills + ' kills)'
+                return label
+              }
+            }
+          }
+        }
+      }
+      return options
+    },
+    values (): { [key: string]: Ref<Weapon> } {
+      const filter = new Filter({ ...this.filters, player: this.playerHighlighted })
+      delete filter.gamemode
+      const data = this.store.getList('gamemodes', filter)?.value.data
+      if (!data) return this.store.fetch('gamemodes', filter).value.data
+      return data
+    },
+    sortedList (): string[] {
+      if (!this.values) return []
+      const weapons = Object.keys(this.values).filter(e => unref(this.values[e]).kills > 0)
+      weapons.sort((a, b) => {
+        if (Number(this.values[a].value.kills) < Number(unref(this.values[b]).kills)) {
+          return -1
+        }
+        if (Number(this.values[a].value.kills) > Number(unref(this.values[b]).kills)) {
+          return 1
+        }
+        return 0
+      })
+      return weapons
+    }
+  }
+})
+</script>
+
+<style scoped>
+.weaponChart {
+  width: calc(min(50vw, 50vh) - 3em);
+  height: calc(min(50vw, 50vh) - 3em);
+}
+
+@media only screen and (max-width: 922px) {
+  canvas {
+    display: none !important;
+  }
+}
+</style>

src/components/HelloWorld.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
-
-@Options({
-  props: {
-    msg: String
-  }
-})
-export default class HelloWorld extends Vue {
-  msg!: string
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/List/VirtualList.vue

@@ -66,11 +66,11 @@ export default defineComponent({
       } else if (mustScrollDown) {
         this.vIndex = Math.min(scrollIndex, this.list.length - this.toLoad)
       }
-      if (mustScrollDown || mustScrollUp) {
+      // if (mustScrollDown || mustScrollUp) {
-        const msg = (mustScrollDown ? 'down ' : '') + (mustScrollUp ? 'up ' : '')
+      // const msg = (mustScrollDown ? 'down ' : '') + (mustScrollUp ? 'up ' : '')
-        // console.log(this.toLoad)
+      // console.log(this.toLoad)
-        // console.log((this.list.length * this.$props.rowHeight) - (this.vIndex * this.$props.rowHeight) - (this.visibleCount * this.$props.rowHeight))
+      // console.log((this.list.length * this.$props.rowHeight) - (this.vIndex * this.$props.rowHeight) - (this.visibleCount * this.$props.rowHeight))
-      }
+      // }
     }
   }
 

src/components/PlayerChart.vue

@@ -19,10 +19,10 @@ import {
 } from 'chart.js'
 import annotationPlugin, { AnnotationPluginOptions } from 'chartjs-plugin-annotation'
 import dataLabel from 'chartjs-plugin-datalabels'
-import { useKillStore, Player, Filters } from '@/stores/kill'
+import { useKillStore, Player, Filter } from '@/stores/kill'
 
 import { Scatter } from 'vue-chartjs'
-import { defineComponent, PropType, Ref, toRaw, triggerRef, unref } 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'
 
@@ -33,7 +33,7 @@ ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend, annota
 export default defineComponent({
   name: 'PlayerChart',
   props: {
-    filters: Object as PropType<Filters>,
+    filters: Object as PropType<Filter>,
     playerHighlighted: String
   },
   data: () => {
@@ -53,14 +53,17 @@ export default defineComponent({
   computed: {
     progress () {
       if (this.filters) {
-        const { player: _, ...withoutPlayer } = this.filters
+        const filter = new Filter(this.filters)
-        return this.store.getPlayerList(withoutPlayer)?.value.progress
+        delete filter.player
+        return this.store.getList('players', filter)?.value.progress.value
       }
       return 0
     },
     playerList (): (Player & {id:string})[] {
-      const data = this.store.getPlayerList(this.filters || {})?.value.data
+      const filter = new Filter(this.filters)
-      if (!data) return Object.entries(this.store.fetchPlayers(this.filters || {}).value.data).map(e => ({ id: e[0], ...toRaw(e[1].value) }))
+      delete filter.player
+      const data = unref(this.store.getList('players', filter))?.data
+      if (!data) return Object.entries(this.store.fetch('players', filter).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
@@ -140,7 +143,6 @@ export default defineComponent({
         },
         onClick: (e: ChartEvent, element: any) => {
           this.$emit('highlightPlayer', element.length > 0 ? this.playerList[element[0].index].id : undefined)
-          if (this.store.getPlayerList(this.filters || {}) !== undefined) triggerRef(this.store.getPlayerList(this.filters || {}) as unknown as Ref)
         },
         onHover: (e: any, element: any) => {
           if (!e.native.target) return

src/components/PlayerList.vue

@@ -28,15 +28,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, Ref } from 'vue'
+import { defineComponent, PropType, Ref, isRef } from 'vue'
-import { useKillStore, Player, Filters } from '@/stores/kill'
+import { useKillStore, Player, Filter } from '@/stores/kill'
 import VirtualList from './List/VirtualList.vue'
 import LoadingBar from './LoadingBar.vue'
 
 export default defineComponent({
   components: { VirtualList, LoadingBar },
   props: {
-    filters: { type: Object as PropType<Filters>, default: () => ({}) },
+    filters: { type: Object as PropType<Filter>, default: () => ({}) },
     playerHighlighted: String
   },
   emits: ['highlightPlayer'],
@@ -48,17 +48,25 @@ export default defineComponent({
   },
   computed: {
     progress () {
-      const { player: _, ...withoutPlayer } = this.filters
+      const filter = new Filter(this.filters)
-      return this.store.getPlayerList(withoutPlayer)?.value.progress
+      delete filter.player
+      return this.store.getList('players', filter)?.value.progress.value
     },
     players (): { [key: string]: Ref<Player> } {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const filter = new Filter(this.filters)
-      const { player: _, ...withoutPlayer } = this.filters
+      delete filter.player
-      const data = this.store.getPlayerList(withoutPlayer)?.value.data
+      const data = this.store.getList('players', filter)?.value.data
-      if (!data) return this.store.fetchPlayers(withoutPlayer).value.data
+      if (!data) return this.store.fetch('players', filter).value.data
       return data
     },
     playerList (): (Ref<Player> & { id: string })[] {
+      const collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' })
+      const sortingFunctions = {
+        'k/d': ({ _rawValue: aVal }, { _rawValue: bVal }) => aVal.kills / Math.max(1, aVal.deaths) - bVal.kills / Math.max(1, bVal.deaths),
+        avg_distance: ({ _rawValue: aVal }, { _rawValue: bVal }) => ((aVal.total_distance / aVal.kills) || 0) - ((bVal.total_distance / bVal.kills) || 0),
+        username: ({ _rawValue: aVal }, { _rawValue: bVal }) => collator.compare(aVal.username, bVal.username)
+      } as {[k: string]: (a:Ref<Player>, b:Ref<Player>)=>number}
+
       if (!this.players) return []
       const players = Object.entries(this.players).map(e => {
         const target = {} as ProxyHandler<Ref<Player>>
@@ -67,30 +75,10 @@ export default defineComponent({
         return player
       }) as (Ref<Player> & { id: string })[]
 
-      if (this.sortingData.argument === 'username') {
+      if (this.sortingData.argument in sortingFunctions) {
-        const collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' })
+        players.sort(sortingFunctions[this.sortingData.argument])
-        players.sort((a, b) => {
-          // Hack because toRaw is slow as fuck
-          const aVal = a._rawValue
-          const bVal = b._rawValue
-          return collator.compare(aVal.username, bVal.username)
-        })
-      } else if (this.sortingData.argument === 'k/d') {
-        players.sort((a, b) => {
-          // Hack because toRaw is slow as fuck
-          const aVal = a._rawValue
-          const bVal = b._rawValue
-          return aVal.kills / Math.max(1, aVal.deaths) - bVal.kills / Math.max(1, bVal.deaths)
-        })
-      } else if (this.sortingData.argument === 'avg_distance') {
-        players.sort((a, b) => {
-          // Hack because toRaw is slow as fuck
-          const aVal = a._rawValue
-          const bVal = b._rawValue
-          return ((aVal.total_distance / aVal.kills) || 0) - ((bVal.total_distance / bVal.kills) || 0)
-        })
       } else {
-        const argument = this.sortingData.argument
+        const argument = this.sortingData.argument as Exclude<keyof Player, 'username' | 'avg_distance'>
         players.sort((a, b) => {
           // Hack because toRaw is slow as fuck
           const aVal = a._rawValue
@@ -159,7 +147,6 @@ export default defineComponent({
 }
 
 .playerTable {
-  grid-area: list;
   margin-right: 1rem;
   height: 100%;
   user-select: none;

src/components/WeaponChart.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="weaponChart" ref="container">
     <LoadingBar v-if="progress !== 1" :value="progress"></LoadingBar>
-    <Doughnut :data="chart" :options="chartOptions" v-if="progress === 1"/>
+    <Doughnut :data="chart" :options="chartOptions" v-if="progress === 1" />
   </div>
 </template>
 
 <script lang="ts">
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, ChartData, ChartOptions } from 'chart.js'
 import dataLabel from 'chartjs-plugin-datalabels'
-import { Weapon, Filters, useKillStore } from '@/stores/kill'
+import { Weapon, Filter, useKillStore } from '@/stores/kill'
 import { Doughnut } from 'vue-chartjs'
-import { defineComponent, PropType, Ref } from 'vue'
+import { defineComponent, PropType, Ref, unref } from 'vue'
 import weapons from '../stores/weapons.json'
 
 import LoadingBar from './LoadingBar.vue'
@@ -20,7 +20,7 @@ ChartJS.register(ArcElement, Tooltip, Legend, dataLabel)
 export default defineComponent({
   name: 'WeaponChart',
   props: {
-    filters: Object as PropType<Filters>,
+    filters: Object as PropType<Filter>,
     playerHighlighted: String
   },
   emits: ['highlightPlayer'],
@@ -38,10 +38,11 @@ export default defineComponent({
   },
   computed: {
     progress () {
-      const { weapon: _, ...withoutWeapon } = this.filters || {}
+      const filter = new Filter(this.filters)
-      const data = this.store.getWeaponList(withoutWeapon)?.value
+      delete filter.weapon
-      if (!data) return this.store.fetchWeapons(withoutWeapon).value.progress
+      const data = this.store.getList('weapons', filter)?.value
-      return data.progress
+      if (!data) return this.store.fetch('weapons', filter).value.progress.value
+      return data.progress.value
     },
     colors () {
       // eslint-disable-next-line no-unused-expressions
@@ -64,7 +65,7 @@ export default defineComponent({
       }
       return colors
     },
-    chart () {
+    chart (): ChartData<'doughnut', number[]> {
       const colors = [
         'cyan',
         'green',
@@ -74,13 +75,12 @@ export default defineComponent({
         'red',
         'yellow'
       ]
-      const chartData = {
+      const chartData: ChartData<'doughnut', number[]> = {
         datasets: [
           {
             label: 'Weapons',
-            labels: this.sortedWeaponList || ([] as string[]),
             borderColor: () => this.colors.fg,
-            backgroundColor: (context: any) => {
+            backgroundColor: (context) => {
               return this.colors[
                 colors[(context.dataIndex * 3) % colors.length]
               ]
@@ -100,30 +100,30 @@ export default defineComponent({
       })
       return chartData
     },
-    chartOptions () {
+    chartOptions (): ChartOptions<'doughnut'> {
       // eslint-disable-next-line no-unused-expressions
       this.$props.playerHighlighted
-      const options = {
+      const options: ChartOptions<'doughnut'> = {
         responsive: true,
         maintainAspectRatio: true,
         animation: { duration: 500 },
         layout: { autoPadding: false },
         plugins: {
           datalabels: {
-            formatter: (value: any, context: any) => {
+            formatter: (value, context) => {
               const weaponId = this.sortedWeaponList[context.dataIndex]
               // if (!(weapons as {[key:string]:string})[weaponId]) console.log(weaponId)
-              return (weapons as {[key:string]:string})[weaponId] || weaponId
+              return (weapons as { [key: string]: string })[weaponId] || weaponId
             },
-            backgroundColor: (context: any) => {
+            backgroundColor: (context) => {
-              return context.dataset.backgroundColor(context)
+              return context.dataset.backgroundColor(context, options)
             },
             borderColor: this.colors.fg,
             borderRadius: 25,
             borderWidth: 2,
             color: this.colors.bg,
-            display: (context: any) => {
+            display: (context) => {
-              return context.dataIndex === context.dataset.labels.length - 1
+              return context.dataIndex === context.dataset.data.length - 1
                 ? true
                 : 'auto'
             },
@@ -148,19 +148,20 @@ export default defineComponent({
       return options
     },
     weapons (): { [key: string]: Ref<Weapon> } {
-      const { weapon: _, ...withoutWeapon } = this.filters || {}
+      const filter = new Filter({ ...this.filters, player: this.playerHighlighted })
-      const data = this.store.getWeaponList(withoutWeapon)?.value.data
+      delete filter.weapon
-      if (!data) return this.store.fetchWeapons(withoutWeapon).value.data
+      const data = this.store.getList('weapons', filter)?.value.data
+      if (!data) return this.store.fetch('weapons', filter).value.data
       return data
     },
     sortedWeaponList (): string[] {
       if (!this.weapons) return []
-      const weapons = Object.keys(this.weapons).filter(e => this.weapons[e].value.kills > 0)
+      const weapons = Object.keys(this.weapons).filter(e => unref(this.weapons[e]).kills > 0)
       weapons.sort((a, b) => {
-        if (Number(this.weapons[a].value.kills) < Number(this.weapons[b].value.kills)) {
+        if (Number(this.weapons[a].value.kills) < Number(unref(this.weapons[b]).kills)) {
           return -1
         }
-        if (Number(this.weapons[a].value.kills) > Number(this.weapons[b].value.kills)) {
+        if (Number(this.weapons[a].value.kills) > Number(unref(this.weapons[b]).kills)) {
           return 1
         }
         return 0

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 { Filter, Kill, KillData, useKillStore } from './stores/kill'
 
 const pinia = createPinia()
 
@@ -48,117 +48,64 @@ const socket = new WebSocket('wss://tone.sleepycat.date/v2/client/websocket')
 socket.onmessage = function (e) {
   if (e.data === 'ping') return socket.send('pong')
   const data = JSON.parse(e.data)
-  registerWebSocketKill(data)
+//  registerWebSocketKill(data)
 }
 
 function registerWebSocketKill (data : websocketData) {
-  store.$state.players.filter((e) => {
+  const filter = new Filter(store.$state.currentFilter)
-    return (
+  delete filter.player
-      (!e.value.filter.server ||
+  const list = unref(store.getList('players', filter))
-                e.value.filter.server === data.servername) &&
+  if (!list) return
-              (!e.value.filter.weapon ||
+  if (!(!filter.server || filter.server.includes(data.servername))) return
-                e.value.filter.weapon === data.cause_of_death)
-    // 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 = (!filter.weapon || filter.weapon.includes(data.cause_of_death))
-    unref(e.value.data[data.victim_id]).username = data.victim_name
+  const CurrentWeaponFilter = filter.weapon?.includes(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 (!(!filter.gamemode || filter.gamemode.includes(data.game_mode))) return
-      unref(e.value.data[data.cause_of_death]).kills++
-      unref(e.value.data[data.cause_of_death]).total_distance += data.distance
-      unref(e.value.data[data.cause_of_death]).max_distance = Math.max(data.distance, unref(e.value.data[data.cause_of_death]).max_distance)
-    }
-    unref(e.value.data[data.cause_of_death]).deaths++
-  })
-  store.$state.servers.filter((e) => {
-    return (
-      (!e.value.filter.server ||
-                e.value.filter.server === data.servername)
-    // Handle other types of filters once those are implemented
-    )
-  }).forEach((e) => {
-    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.victim_id]) {
-      unref(e.value.data[data.servername]).kills++
+    list.data[data.victim_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,
+      max_distance: 0,
+      total_distance: 0,
+      username: data.victim_name
+    })
+  }
+  if (WeaponFilter) {
+    unref(list.data[data.victim_id]).deaths++
+  } else if (CurrentWeaponFilter) {
+    unref(list.data[data.victim_id]).deaths_while_equipped++
+  }
+
+  if (!list.data[data.attacker_id]) {
+    list.data[data.attacker_id] = ref({
+      deaths: 0,
+      deaths_while_equipped: 0,
+      kills: 0,
+      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
+  const serverlist = store.getList('servers')
+  if (serverlist) {
+    const server = unref(unref(serverlist).data[data.servername])
+    if (server) {
+      server.kills++
+      server.deaths++
+      server.total_distance += data.distance
+      server.max_distance = Math.max(data.distance, server.max_distance)
     }
-    unref(e.value.data[data.servername]).deaths++
+  }
-  })
 }

src/stores/gamemodes.json

@@ -0,0 +1,19 @@
+{
+  "private_match": "Private Match",
+  "aitdm": "Attrition",
+  "at": "Bounty Hunt",
+  "coliseum": "Coliseum",
+  "cp": "Amped Hardpoint",
+  "ctf": "Capture the Flag",
+  "fw": "Frontier War",
+  "lts": "Last Titan Standing",
+  "mfd": "Marked For Death",
+  "ps": "Pilots vs. Pilots",
+  "solo": "Campaign",
+  "tdm": "Skirmish",
+  "ttdm": "Titan Brawl",
+  "sns": "Stick and Stones",
+  "gg": "GunGame",
+  "fd": "Frontier Defense",
+  "ffa": "Free For All"
+}

src/stores/kill.ts

@@ -1,108 +1,108 @@
 import { defineStore } from 'pinia'
-import * as assert from 'assert'
+import { Ref, ref, shallowRef, triggerRef, unref } from 'vue'
-import { Ref, reactive, ref, shallowRef, triggerRef, unref } from 'vue'
 
-export interface Filters {
+export class Filter {
-  server?: string;
+  constructor (filt?:{server?:string[], player?: string, weapon?: string[], host?: string[], map?: string[], gamemode?: string[]}) {
+    if (filt?.server) this.server = filt.server
+    if (filt?.player) this.player = filt.player
+    if (filt?.weapon) this.weapon = filt.weapon
+    if (filt?.host) this.host = filt.host
+    if (filt?.map) this.map = filt.map
+    if (filt?.gamemode) this.gamemode = filt.gamemode
+  }
+
+  server?: string[];
   player?: string;
-  weapon?: string;
+  weapon?: string[];
-  host?: string;
+  host?: string[];
-  map?: string;
+  map?: string[];
-  gamemode?: string;
+  gamemode?: string[];
-}
+  toURLSearchParams (): URLSearchParams {
-
+    return new URLSearchParams(
-function removeNullEntries (a: Filters) {
+      Object.entries(this).filter(e => e[1] !== undefined)
-  return Object.fromEntries(
+        .map<string[][]>((e) => [e[1]].flat().map((v) => [e[0], v]))
-    Object.entries(a).filter((e) => e[1] !== undefined && e[1] !== null)
+        .flat(1)
-  )
+    )
-}
-function objectEqual (a: Filters, b: Filters) {
-  try {
-    a = removeNullEntries(a)
-    b = removeNullEntries(b)
-    assert.deepStrictEqual(a, b)
-    return true
-  } catch {
-    return false
   }
 }
 
 function fetchWithLoading (url: string, progress: (percentage: number) => void) {
-  return fetch(url).then(response => {
+  return fetch(url)
-    if (!response.ok) {
+    .then((response) => {
-      throw Error(response.status + ' ' + response.statusText)
+      if (!response.ok) {
-    }
+        throw Error(response.status + ' ' + response.statusText)
+      }
 
-    if (!response.body) {
+      if (!response.body) {
-      throw Error('ReadableStream not yet supported in this browser.')
+        throw Error('ReadableStream not yet supported in this browser.')
-    }
+      }
 
-    // to access headers, server must send CORS header "Access-Control-Expose-Headers: content-encoding, content-length x-file-size"
+      // to access headers, server must send CORS header "Access-Control-Expose-Headers: content-encoding, content-length x-file-size"
-    // server must send custom x-file-size header if gzip or other content-encoding is used
+      // server must send custom x-file-size header if gzip or other content-encoding is used
-    const contentEncoding = response.headers.get('Content-Encoding')
+      const contentEncoding = response.headers.get('Content-Encoding')
-    const contentLength = response.headers.get(contentEncoding ? 'X-File-Size' : 'content-length')
+      const contentLength = response.headers.get(
-    if (contentLength === null) {
+        contentEncoding ? 'X-File-Size' : 'content-length'
-      throw Error('Response size header unavailable')
+      )
-    }
+      if (contentLength === null) {
+        throw Error('Response size header unavailable')
+      }
 
-    const total = parseInt(contentLength, 10)
+      const total = parseInt(contentLength, 10)
-    let loaded = 0
+      let loaded = 0
 
-    return new Response(
+      return new Response(
-      new ReadableStream({
+        new ReadableStream({
-        start (controller) {
+          start (controller) {
-          const reader = response.body!.getReader()
+            if (response.body === null) {
+              throw new Error('response.body is null')
+            }
+            const reader = response.body.getReader()
 
-          read()
+            read()
-          function read () {
+            function read () {
-            reader.read().then(({ done, value }) => {
+              reader
-              if (done) {
+                .read()
-                controller.close()
+                .then(({ done, value }) => {
-                progress(1)
+                  if (done) {
-                return
+                    controller.close()
-              }
+                    progress(1)
-              if (value) {
+                    return
-                loaded += value.byteLength
+                  }
-                progress(loaded / total)
+                  if (value) {
-                controller.enqueue(value)
+                    loaded += value.byteLength
-              }
+                    progress(loaded / total)
-              read()
+                    controller.enqueue(value)
-            }).catch(error => {
+                  }
-              console.error(error)
+                  read()
-              controller.error(error)
+                })
-            })
+                .catch((error) => {
+                  console.error(error)
+                  controller.error(error)
+                })
+            }
           }
-        }
+        })
-      })
+      )
-    )
+    })
-  })
+    .catch((error) => {
-    .catch(error => {
       console.error(error)
     })
 }
 
 export interface Kill {
   deaths: number;
+  deaths_while_equipped: number;
   kills: number;
-  // eslint-disable-next-line camelcase
   max_distance: number;
-  // eslint-disable-next-line camelcase
   total_distance: number;
 }
-export interface KillData<T extends Kill> {
-  filter: Filters;
-  data: { [key: string]: Ref<T> };
-  progress?: number;
-}
 
 export interface Player extends Kill {
   username: string;
-  // eslint-disable-next-line camelcase
   // deaths_while_equipped?: number;
 }
 
 export interface Weapon extends Kill {
-  // eslint-disable-next-line camelcase
   deaths_while_equipped: number;
 }
 
@@ -110,6 +110,11 @@ export interface Server extends Kill {
   host: number;
 }
 
+export interface KillData<T extends Kill> {
+  data: { [key: string]: Ref<T> };
+  progress: Ref<number>;
+}
+
 export interface NSServer {
   name: string;
   region: string;
@@ -119,122 +124,110 @@ export interface NSServer {
   map: string;
   playlist: string;
   hasPassword: boolean;
-  modInfo: { Mods: [] }
+  modInfo: { Mods: [] };
 }
+
 // define your typings for the store state
 export interface State {
-  servers: Ref<KillData<Server>>[];
+  killData:{
-  players: Ref<KillData<Player>>[];
+    servers: Ref<Map<string, Ref<KillData<Server>>>>;
-  weapons: Ref<KillData<Weapon>>[];
+    players: Ref<Map<string, Ref<KillData<Player>>>>;
-  maps: Ref<KillData<Kill>>[];
+    weapons: Ref<Map<string, Ref<KillData<Weapon>>>>;
-  gamemodes: Ref<KillData<Kill>>[];
+    maps: Ref<Map<string, Ref<KillData<Kill>>>>;
+    gamemodes: Ref<Map<string, Ref<KillData<Kill>>>>;
+  },
+
   hosts: { [key: number]: string };
-  nsServers: NSServer[] | undefined
+  nsServers: NSServer[] | undefined;
+  currentFilter: Filter;
 }
 
+type StateProperty = keyof State['killData']
+type StateType<T extends StateProperty> =
+  T extends 'servers' ? Server :
+    T extends 'players' ? Player :
+      T extends 'weapons' ? Weapon :
+        Kill
+
 let serverInterval: number
 export const useKillStore = defineStore('kill', {
   state: (): State => ({
-    servers: [],
+    killData: {
-    players: [],
+      servers: shallowRef(new Map()),
-    weapons: [],
+      players: shallowRef(new Map()),
-    maps: [],
+      weapons: shallowRef(new Map()),
-    gamemodes: [],
+      maps: shallowRef(new Map()),
+      gamemodes: shallowRef(new Map())
+    },
+
     hosts: {},
-    nsServers: undefined
+    nsServers: undefined,
+    currentFilter: new Filter()
   }),
   getters: {
-    getPlayerList: (state) => (filters: Filters) => {
+    getList:
-      return state.players.find((e) => objectEqual(unref(e).filter, filters))
+      (state) =>
-    },
+        <T extends StateProperty>(type: T, filters?: Filter): Ref<KillData<StateType<T>>> | undefined => {
-    getWeaponList: (state) => (filters: Filters) =>
+          return unref(state.killData[type as keyof typeof state.killData]).get(filters?.toURLSearchParams().toString() ?? '') as Ref<KillData<StateType<T>>>
-      state.weapons.find((e) => objectEqual(unref(e).filter, filters)),
+        },
-    getServerList: (state) => (filters: Filters) =>
-      state.servers.find((e) => objectEqual(unref(e).filter, filters)),
     getNSServers: (state) => state.nsServers
   },
   actions: {
-    fetchPlayers (filter: Filters) {
+    fetch <T extends StateProperty> (type:T, filter?:Filter): Ref<KillData<StateType<T>>> {
-      filter = removeNullEntries(filter)
+      let entry = this.getList(type, filter)
-      let entry = this.players.find((e) => objectEqual(unref(e).filter, filter))
       if (entry === undefined) {
-        entry = shallowRef({ filter, data: {} })
+        entry = shallowRef<KillData<StateType<T>>>({ data: {}, progress: ref(0) })
-        this.players.push(entry)
+        unref(this.$state.killData[type as keyof typeof this.$state.killData] as Map<string, Ref<KillData<StateType<T>>>>).set(filter?.toURLSearchParams().toString() ?? '', entry)
+        // console.log(isRef(entry), this.$state.killData)
       }
       fetchWithLoading(
-        'https://tone.sleepycat.date/v2/client/players?' +
+        `https://tone.sleepycat.date/v2/client/${type}?` +
-        new URLSearchParams(filter as Record<keyof Filters, string>),
+            filter?.toURLSearchParams() ?? '',
         (progress) => {
-          if (entry) {
+          if (entry && progress !== 1 && unref(entry).progress.value !== 1) {
-            unref(entry).progress = progress
+            unref(entry).progress.value = progress
-            if (progress !== 1) triggerRef(entry)
+            triggerRef(unref(entry).progress)
           }
         }
-      ).then(async response => {
+      ).then(async (response) => {
         if (entry) {
-          unref(entry).data = Object.fromEntries(Object.entries(await response?.json()).map(e => [e[0], ref(e[1] as Player)]))
+          entry.value.data = Object.fromEntries(
-          triggerRef(entry)
+            Object.entries(await response?.json()).map<[string, Ref<StateType<T>>]>((e) => [
-        }
+              e[0],
-      })
+              ref(e[1]) as Ref<StateType<T>>
-      return entry
+            ])
-    },
+          )
-    fetchWeapons (filter: Filters) {
+          unref(entry).progress.value = 1
-      filter = removeNullEntries(filter)
-      let entry = this.weapons.find((e) => objectEqual(unref(e).filter, filter))
-      if (!entry) {
-        entry = shallowRef({ filter, data: {} })
-        this.weapons.push(entry)
-      }
 
-      fetchWithLoading(
-        'https://tone.sleepycat.date/v2/client/weapons?' +
-        new URLSearchParams(filter as Record<keyof Filters, string>),
-        (progress) => {
-          if (entry) {
-            unref(entry).progress = progress
-            if (progress !== 1) triggerRef(entry)
-          }
-        }
-      ).then(async response => {
-        if (entry) {
-          unref(entry).data = Object.fromEntries(Object.entries(await response?.json()).map(e => [e[0], ref(e[1] as Weapon)]))
-          triggerRef(entry)
-        }
-      })
-      return entry
-    },
-    fetchServers (filter: Filters) {
-      filter = removeNullEntries(filter)
-      let entry = this.servers.find((e) => objectEqual(unref(e).filter, filter))
-      if (!entry) {
-        entry = shallowRef({ filter, data: {} })
-        this.servers.push(entry)
-      }
-      fetchWithLoading(
-        'https://tone.sleepycat.date/v2/client/servers?' +
-        new URLSearchParams(filter as Record<keyof Filters, string>),
-        (progress) => {
-          if (entry) {
-            unref(entry).progress = progress
-            if (progress !== 1) triggerRef(entry)
-          }
-        }
-      ).then(async response => {
-        if (entry) {
-          unref(entry).data = Object.fromEntries(Object.entries(await response?.json()).map(e => [e[0], ref(e[1] as Server)]))
           triggerRef(entry)
         }
       })
       return entry
     },
     fetchNSServers () {
-      fetch(
+      fetch('https://northstar.tf/client/servers').then(async (response) => {
-        'https://northstar.tf/client/servers').then(async response => {
         this.nsServers = await response.json()
       })
       clearInterval(serverInterval)
       serverInterval = setInterval(() => this.fetchNSServers(), 60000)
       return this.nsServers || []
+    },
+    setFilter (filter: Filter) {
+      if (this.currentFilter.player === filter.player) {
+        const newfilter = new Filter(filter)
+        delete newfilter.player
+        this.fetch('players', newfilter)
+      }
+
+      if (this.currentFilter.weapon === filter.weapon) {
+        const newfilter = new Filter(filter)
+        delete newfilter.weapon
+        this.fetch('weapons', newfilter)
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      // const { server: _server, ...withoutServer } = filter
+      // if (this.currentFilter.server === _server) { this.fetchServers(withoutServer) }
+      this.currentFilter = filter
     }
   }
 })

src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/PlayerView.vue

@@ -1,6 +1,12 @@
 <template>
   <div id="filters">
     <span class="multiselect-wrapper">
+
+      <!-- group-values="servers"
+        group-label="id"
+        label="name"
+        :group-select="true"
+        :options="groupedServers" -->
       <VueMultiselect
         selectLabel=""
         deselectLabel="remove"
@@ -8,11 +14,29 @@
         v-model="model.server"
         :options="sortedServerList"
         :allow-empty="true"
+        :close-on-select="false"
+        :multiple="true"
       >
       </VueMultiselect>
       <button @click="model.server = undefined" :disabled="!model.server">X</button>
     </span>
 
+    <span class="multiselect-wrapper">
+      <VueMultiselect
+        selectLabel=""
+        deselectLabel="remove"
+        placeholder="Select gamemode"
+        v-model="model.gamemode"
+        :custom-label="((e: any) => gamemodeLocale[e] || e)"
+        :options="sortedGamemodeList"
+        :allow-empty="true"
+        :close-on-select="false"
+        :multiple="true"
+      >
+      </VueMultiselect>
+      <button @click="model.gamemode = undefined" :disabled="!model.gamemode">X</button>
+    </span>
+
     <span class="multiselect-wrapper">
       <VueMultiselect
         selectLabel=""
@@ -26,7 +50,7 @@
       </VueMultiselect>
       <button @click="model.weapon = undefined" :disabled="!model.weapon">X</button>
     </span>
-
+    <button @click="applyFilters" :disabled="filters.server == model.server && filters.gamemode == model.gamemode && filters.weapon == model.weapon">Apply Filters</button>
     <span class="multiselect-wrapper">
       <VueMultiselect
         :options-limit="20"
@@ -43,14 +67,14 @@
   </div>
 
   <div id="playerView">
-    <PlayerList
+     <PlayerList
       :filters="filters"
       v-on:highlightPlayer="highlight_player"
       :playerHighlighted="playerHighlighted?.id"
     >
     </PlayerList>
 
-    <PlayerChart
+     <PlayerChart
       :filters="filters"
       v-on:highlightPlayer="highlight_player"
       :playerHighlighted="playerHighlighted?.id"
@@ -61,55 +85,69 @@
       :playerHighlighted="playerHighlighted?.id"
     >
     </WeaponChart>
+    <GamemodeChart
+      :filters="{ player: playerHighlighted?.id, ...filters }"
+      :playerHighlighted="playerHighlighted?.id"
+    ></GamemodeChart>
   </div>
 </template>
 
 <script lang="ts">
-import { Player, Weapon, Server, useKillStore, Filters } from '@/stores/kill'
+import { Player, Weapon, Server, Kill, useKillStore, Filter } from '@/stores/kill'
 import PlayerList from '@/components/PlayerList.vue'
 import PlayerChart from '@/components/PlayerChart.vue'
 import WeaponChart from '@/components/WeaponChart.vue'
+import GamemodeChart from '@/components/GamemodeChart.vue'
 import { Ref, defineComponent, unref } from 'vue'
 import VueMultiselect from 'vue-multiselect'
 import 'vue-multiselect/dist/vue-multiselect.css'
 import weapons from '../stores/weapons.json'
+import gamemodes from '../stores/gamemodes.json'
 import router from '@/router'
 
+function filterOutNull<T> (value:T | null):value is T {
+  return value !== null
+}
+
 export default defineComponent({
   name: 'PlayerView',
   components: {
     VueMultiselect,
     PlayerList,
     PlayerChart,
-    WeaponChart
+    WeaponChart,
+    GamemodeChart
   },
 
   data () {
     return {
-      model: { server: undefined, weapon: undefined } as unknown as {
+      model: { } as unknown as {
-        weapon: string | undefined;
+        weapon: string[] | undefined;
-        server: string | undefined;
+        server: string[] | undefined;
+        gamemode: string[] | undefined;
       },
-      filters: {} as Filters,
+      filters: new Filter(),
       store: useKillStore(),
       playerHighlighted: undefined as (Player & { id: string }) | undefined,
-      weaponLocale: weapons as { [key: string]: string }
+      weaponLocale: weapons as { [key: string]: string },
+      gamemodeLocale: gamemodes as { [key: string]: string }
     }
   },
   beforeCreate () {
     let server
-    if (this.$route.query.server) server = this.$route.query.server?.toString()
+    if (this.$route.query.server) server = [this.$route.query.server?.toString()]
     this.model = {
       server,
-      weapon: this.$route.query.weapon?.toString()
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      weapon: [this.$route.query.weapon].flat().filter(e => e ?? false).map(e => e!.toString()),
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      gamemode: [this.$route.query.gamemode].flat().filter(e => e ?? false).map(e => e!.toString())
     }
   },
   computed: {
     servers (): { [key: string]: Ref<Server> } {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const data = this.store.getList('servers')?.value.data
-      const { server: _, player: _1, ...withoutServer } = this.filters
+      if (!data) return unref(this.store.fetch('servers')).data
-      const data = this.store.getServerList(withoutServer)?.value.data
-      if (!data) return unref(this.store.fetchServers(withoutServer)).data
       return data
     },
     groupedServers () {
@@ -127,17 +165,26 @@ export default defineComponent({
       return hosts
     },
     weapons (): { [key: string]: Ref<Weapon> } {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      // const filter = new Filter(this.filters)
-      const { weapon: _, player: _1, ...withoutWeapons } = this.filters
+      // delete filter.weapon
-      const data = this.store.getWeaponList(withoutWeapons)?.value.data
+      // delete filter.player
-      if (!data) return this.store.fetchWeapons(withoutWeapons).value.data
+      const data = this.store.getList('weapons')?.value.data
+      if (!data) return this.store.fetch('weapons').value.data
       return data
     },
     players (): { [key: string]: Ref<Player> } {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const filter = new Filter(this.filters)
-      const { player: _, ...withoutPlayers } = this.filters
+      delete filter.player
-      const data = this.store.getPlayerList(withoutPlayers)?.value.data
+      const data = this.store.getList('players', filter)?.value.data
-      if (!data) return this.store.fetchPlayers(withoutPlayers).value.data
+      if (!data) return this.store.fetch('players', filter).value.data
+      return data
+    },
+    gamemodes (): { [key: string]: Ref<Kill> } {
+      // const filter = new Filter(this.filters)
+      // delete filter.gamemode
+      // delete filter.player
+      const data = this.store.getList('gamemodes')?.value.data
+      if (!data) return this.store.fetch('gamemodes').value.data
       return data
     },
     sortedWeaponList (): string[] {
@@ -150,6 +197,11 @@ export default defineComponent({
       const servers = Object.keys(this.servers)
       return servers.sort()
     },
+    sortedGamemodeList (): string[] {
+      if (!this.gamemodes) return []
+      const gamemodes = Object.keys(this.gamemodes)
+      return gamemodes.sort()
+    },
     sortedPlayerList (): Player[] {
       if (!this.players) return []
       const players = Object.entries(this.players).map((e) => ({
@@ -168,24 +220,26 @@ export default defineComponent({
     }
   },
   watch: {
+    model: {
+      handler () {
+        if (this.model.gamemode?.length === 0) this.model.gamemode = undefined
+        if (this.model.server?.length === 0) this.model.server = undefined
+        if (this.model.weapon?.length === 0) this.model.weapon = undefined
+      },
+      deep: true
+    },
     players () {
       const player = this.$route.query.player?.toString()
       if (player && this.playerHighlighted?.id !== player) {
         this.highlight_player(player)
       }
     },
-    model: {
-      handler (newModel) {
-        this.filters.server = newModel.server
-        this.filters.weapon = newModel.weapon
-      },
-      deep: true
-    },
     filters: {
       handler (newValue) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { server: _, weapon: _2, ...withoutFilters } = this.$route.query
+        const { server: _, weapon: _2, gamemode: _3, ...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 +248,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({ ...this.store.currentFilter, player: newValue?.id })
     },
     $route: {
       handler: function () {
@@ -203,6 +258,11 @@ export default defineComponent({
     }
   },
   methods: {
+    applyFilters () {
+      this.filters.server = this.model.server
+      this.filters.weapon = this.model.weapon
+      this.filters.gamemode = this.model.gamemode
+    },
     highlight_player (playerid: string) {
       const player = this.players[playerid]
       if (player) {
@@ -219,18 +279,24 @@ export default defineComponent({
         }
       }
       if (this.filters.weapon !== this.$route.query.weapon) {
-        this.model.weapon = this.$route.query.weapon?.toString()
+        if (this.$route.query.weapon) this.model.weapon = [this.$route.query.weapon].flat().filter(filterOutNull).map(e => e.toString())
+        else this.model.weapon = undefined
       }
       if (this.filters.server !== this.$route.query.server) {
-        if (this.$route.query.server) this.model.server = this.$route.query.server?.toString()
+        if (this.$route.query.server) this.model.server = [this.$route.query.server].flat().filter(filterOutNull).map(e => e.toString())
         else this.model.server = undefined
       }
+      if (this.filters.gamemode !== this.$route.query.gamemode) {
+        if (this.$route.query.gamemode) this.model.gamemode = [this.$route.query.gamemode].flat().filter(filterOutNull).map(e => e.toString())
+        else this.model.gamemode = undefined
+      }
+      this.applyFilters()
     }
   }
 })
 </script>
 
-<style scoped>
+<style>
 .multiselect {
   margin: 0 0.5em 1em 0.5em;
 }
@@ -250,9 +316,9 @@ export default defineComponent({
   display: grid;
   overflow: auto;
   grid-template-areas:
-    "list chart"
+    "list chart chart"
-    "list info";
+    "list info1 info2";
-  grid-template-columns: 50% 50%;
+  grid-template-columns: 50% 25% 25%;
   grid-template-rows: 50% 50%;
 }
 
@@ -279,13 +345,36 @@ export default defineComponent({
 
   .playerChart {
     display: none;
+    grid-area: "chart";
   }
 
   .weaponChart {
     display: none;
+    grid-area: 'info1';
+  }
+  .gamemodeChart{
+    display:none;
+    grid-area: 'info2';
+  }
+  .playerTable{
+    grid-area: 'list';
   }
 }
 
+.playerChart {
+    grid-area: chart;
+  }
+
+  .weaponChart {
+    grid-area: info1;
+  }
+  .gamemodeChart{
+    grid-area: info2;
+  }
+  .playerTable{
+    grid-area: list;
+  }
+
 #filters {
   grid-area: filters;
 }

src/views/ServerView.vue

@@ -19,7 +19,7 @@
           <div><span>{{ slotProps.index + 1 }}</span></div>
           <img v-if="nsServersByName[slotProps.data.name]"
             :src="`${publicPath}maps/${nsServersByName[slotProps.data.name].map}_lobby.png`" />
-            <div v-if="!nsServersByName[slotProps.data.name]"></div>
+          <div v-if="!nsServersByName[slotProps.data.name]"></div>
           <div><span>{{ slotProps.data.name + (!nsServersByName[slotProps.data.name] ? ' (offline)' : '') }}</span></div>
           <div><span>{{ nsServersByName[slotProps.data.name] ? nsServersByName[slotProps.data.name]?.playerCount
             + '/' + nsServersByName[slotProps.data.name]?.maxPlayers : '' }}</span></div>
@@ -52,8 +52,8 @@ export default defineComponent({
   },
   computed: {
     servers (): { [key: string]: Ref<Server> } {
-      const data = this.store.getServerList({})?.value.data
+      const data = this.store.getList('servers')?.value.data
-      if (!data) return unref(this.store.fetchServers({})).data
+      if (!data) return unref(this.store.fetch('servers')).data
       return data
     },
     serverList (): (Ref<Server> & { name: string })[] {
@@ -88,10 +88,12 @@ export default defineComponent({
 .offline {
   color: var(--comment);
 }
-.serverView{
+
+.serverView {
   margin: 0 1rem 1rem 1rem;
-  overflow:auto;
+  overflow: auto;
 }
+
 .serverList {
   overflow-y: auto;
   height: 100%;
@@ -115,7 +117,8 @@ export default defineComponent({
   height: 3em;
   background: var(--current-line);
 }
-.serverHeaders > span {
+
+.serverHeaders>span {
   padding: .5em .8em 0 .25em;
 }
 
@@ -131,14 +134,16 @@ export default defineComponent({
   background: var(--current-line);
 }
 
-.serverRow>div{
+.serverRow>div {
   padding: .5em .8em 0 .25em;
 }
-.serverRow>div:not(:last-child){
+
+.serverRow>div:not(:last-child) {
   border-right: solid var(--bg-color) 2px;
 }
 
 img {
   object-fit: contain;
   height: 100%;
+  width: 100%;
 }</style>

tsconfig.json

@@ -5,6 +5,7 @@
     "module": "esnext",
     "strict": true,
     "jsx": "preserve",
+    "noImplicitAny": false,
     "moduleResolution": "node",
     "experimentalDecorators": true,
     "skipLibCheck": true,