cache into map

2023-06-20 20:46:14 +02:00
parent a6e75006e6
commit 7d38564107
10 changed files with 216 additions and 344 deletions
@@ -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>
@@ -19,7 +19,7 @@ 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'
@@ -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
-        return this.store.getPlayerList(withoutPlayer)?.value.progress
+        const filter = new Filter(this.filters)
+        delete filter.player
+        return this.store.getList('players', filter)?.value.progress
      }
      return 0
    },
    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], ...toRaw(e[1].value) }))
+      const filter = new Filter(this.filters)
+      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
@@ -28,15 +28,16 @@
 </template>

 <script lang="ts">
-import { defineComponent, PropType, Ref } from 'vue'
-import { useKillStore, Player, Filters } from '@/stores/kill'
+import { defineComponent, PropType, Ref, isRef } from 'vue'
+import { useKillStore, Player, Filter } from '@/stores/kill'
 import VirtualList from './List/VirtualList.vue'
 import LoadingBar from './LoadingBar.vue'
+import { cloneProxy } from 'vue-chartjs/dist/utils'

 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 +49,26 @@ export default defineComponent({
  },
  computed: {
    progress () {
-      const { player: _, ...withoutPlayer } = this.filters
-      return this.store.getPlayerList(withoutPlayer)?.value.progress
+      const filter = new Filter(this.filters)
+      delete filter.player
+      return this.store.getList('players', filter)?.value.progress
    },
    players (): { [key: string]: Ref<Player> } {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { player: _, ...withoutPlayer } = this.filters
-      const data = this.store.getPlayerList(withoutPlayer)?.value.data
-      if (!data) return this.store.fetchPlayers(withoutPlayer).value.data
+      const filter = new Filter(this.filters)
+      delete filter.player
+      const data = this.store.getList('players', filter)?.value.data
+      if (!data) return this.store.fetch('players', filter).value.data
+      console.log(isRef(data), isRef(Object.values(data)[0]))
      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 +77,10 @@ export default defineComponent({
        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, 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)
-        })
+      if (this.sortingData.argument in sortingFunctions) {
+        players.sort(sortingFunctions[this.sortingData.argument])
      } 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
@@ -8,9 +8,9 @@
 <script lang="ts">
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } 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,9 +38,10 @@ export default defineComponent({
  },
  computed: {
    progress () {
-      const { weapon: _, ...withoutWeapon } = this.filters || {}
-      const data = this.store.getWeaponList(withoutWeapon)?.value
-      if (!data) return this.store.fetchWeapons(withoutWeapon).value.progress
+      const filter = new Filter(this.filters)
+      delete filter.weapon
+      const data = this.store.getList('weapons', filter)?.value
+      if (!data) return this.store.fetch('weapons', filter).value.progress
      return data.progress
    },
    colors () {
@@ -148,19 +149,21 @@ export default defineComponent({
      return options
    },
    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
+      const filter = new Filter({ ...this.filters, player: this.playerHighlighted })
+      delete filter.weapon
+      const data = this.store.getList('weapons', filter)?.value.data
+      if (!data) return this.store.fetch('weapons', filter).value.data
+      console.log(filter.toURLSearchParams().toString(), filter)
      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