ToneAPI/ToneAPI_webclient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cache into map

Browse Source
This commit is contained in:
legonzaur
2023-06-20 20:46:14 +02:00
parent a6e75006e6
commit 7d38564107
10 changed files with 216 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HelloWorld.vue
-65
View File
@@ -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/PlayerChart.vue
+9 -7
View File
@@ -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
src/components/PlayerList.vue
+22 -32
View File
@@ -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
src/components/WeaponChart.vue
+15 -12
View File
@@ -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
src/main.ts
+9 -10
View File
@@ -3,7 +3,7 @@ import { createApp, ref, unref } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import { Kill, KillData, objectEqual, useKillStore } from './stores/kill'
import { Filter, Kill, KillData, useKillStore } from './stores/kill'
const pinia = createPinia()
@@ -48,22 +48,21 @@ 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) {
const { player: _, ...filterWithoutPlayer } = store.$state.currentFilter
const list = unref(store.$state.players.find((e) => {
return objectEqual(filterWithoutPlayer, e.value.filter)
}))
const filter = new Filter(filterWithoutPlayer)
const list = unref(store.getList('players', filter))
if (!list) return
if (!(!list.filter.server || list.filter.server.includes(data.servername))) return
if (!(!filter.server || filter.server.includes(data.servername))) return
const WeaponFilter = (!list.filter.weapon || list.filter.weapon.includes(data.cause_of_death))
const CurrentWeaponFilter = list.filter.weapon?.includes(data.attacker_current_weapon)
const WeaponFilter = (!filter.weapon || filter.weapon.includes(data.cause_of_death))
const CurrentWeaponFilter = filter.weapon?.includes(data.attacker_current_weapon)
if (!(WeaponFilter || CurrentWeaponFilter)) return
if (!(!list.filter.gamemode || list.filter.gamemode.includes(data.game_mode))) return
if (!(!filter.gamemode || filter.gamemode.includes(data.game_mode))) return
if (!list.data[data.victim_id]) {
list.data[data.victim_id] = ref({
@@ -99,7 +98,7 @@ function registerWebSocketKill (data : websocketData) {
unref(list.data[data.victim_id]).username = data.victim_name
unref(list.data[data.attacker_id]).username = data.attacker_name
const serverlist = store.getServerList({})
const serverlist = store.getList('servers')
if (serverlist) {
const server = unref(unref(serverlist).data[data.servername])
if (server) {
src/stores/kill.ts
+135 -187
View File
@@ -1,110 +1,105 @@
import { defineStore } from 'pinia'
import * as assert from 'assert'
import { Ref, ref, shallowRef, triggerRef, unref } from 'vue'
import { Ref, ref, shallowRef, triggerRef, unref, isRef } from 'vue'
export class Filter {
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
}
export interface Filters {
server?: string[];
player?: string;
weapon?: string[];
host?: string[];
map?: string[];
gamemode?: string[];
}
export function removeNullEntries (a: Filters) {
return Object.fromEntries(
Object.entries(a).filter((e) => e[1] !== undefined && e[1] !== null)
)
}
export function objectEqual (a: Filters, b: Filters) {
try {
a = removeNullEntries(a)
b = removeNullEntries(b)
assert.deepStrictEqual(a, b)
return true
} catch {
return false
toURLSearchParams (): URLSearchParams {
return new URLSearchParams(
Object.entries(this).filter(e => e[1] !== undefined)
.map<string[][]>((e) => [e[1]].flat().map((v) => [e[0], v]))
.flat(1)
)
}
}
function fetchWithLoading (url: string, progress: (percentage: number) => void) {
return fetch(url).then(response => {
if (!response.ok) {
throw Error(response.status + ' ' + response.statusText)
}
return fetch(url)
.then((response) => {
if (!response.ok) {
throw Error(response.status + ' ' + response.statusText)
}
if (!response.body) {
throw Error('ReadableStream not yet supported in this browser.')
}
if (!response.body) {
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"
// server must send custom x-file-size header if gzip or other content-encoding is used
const contentEncoding = response.headers.get('Content-Encoding')
const contentLength = response.headers.get(contentEncoding ? 'X-File-Size' : 'content-length')
if (contentLength === null) {
throw Error('Response size header unavailable')
}
// 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
const contentEncoding = response.headers.get('Content-Encoding')
const contentLength = response.headers.get(
contentEncoding ? 'X-File-Size' : 'content-length'
)
if (contentLength === null) {
throw Error('Response size header unavailable')
}
const total = parseInt(contentLength, 10)
let loaded = 0
const total = parseInt(contentLength, 10)
let loaded = 0
return new Response(
new ReadableStream({
start (controller) {
const reader = response.body!.getReader()
return new Response(
new ReadableStream({
start (controller) {
const reader = response.body!.getReader()
read()
function read () {
reader.read().then(({ done, value }) => {
if (done) {
controller.close()
progress(1)
return
}
if (value) {
loaded += value.byteLength
progress(loaded / total)
controller.enqueue(value)
}
read()
}).catch(error => {
console.error(error)
controller.error(error)
})
read()
function read () {
reader
.read()
.then(({ done, value }) => {
if (done) {
controller.close()
progress(1)
return
}
if (value) {
loaded += value.byteLength
progress(loaded / total)
controller.enqueue(value)
}
read()
})
.catch((error) => {
console.error(error)
controller.error(error)
})
}
}
}
})
)
})
.catch(error => {
})
)
})
.catch((error) => {
console.error(error)
})
}
export interface Kill {
deaths: number;
// eslint-disable-next-line camelcase
deaths_while_equipped: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;
}
@@ -112,6 +107,11 @@ export interface Server extends Kill {
host: number;
}
export interface KillData<T extends Kill> {
data: { [key: string]: Ref<T> };
progress?: number;
}
export interface NSServer {
name: string;
region: string;
@@ -121,160 +121,108 @@ 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>>[];
players: Ref<KillData<Player>>[];
weapons: Ref<KillData<Weapon>>[];
maps: Ref<KillData<Kill>>[];
gamemodes: Ref<KillData<Kill>>[];
killData:{
servers: Ref<Map<string, Ref<KillData<Server>>>>;
players: Ref<Map<string, Ref<KillData<Player>>>>;
weapons: Ref<Map<string, Ref<KillData<Weapon>>>>;
maps: Ref<Map<string, Ref<KillData<Kill>>>>;
gamemodes: Ref<Map<string, Ref<KillData<Kill>>>>;
},
hosts: { [key: number]: string };
nsServers: NSServer[] | undefined;
currentFilter:Filters;
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: [],
players: [],
weapons: [],
maps: [],
gamemodes: [],
killData: {
servers: shallowRef(new Map()),
players: shallowRef(new Map()),
weapons: shallowRef(new Map()),
maps: shallowRef(new Map()),
gamemodes: shallowRef(new Map())
},
hosts: {},
nsServers: undefined,
currentFilter: {}
currentFilter: new Filter()
}),
getters: {
getPlayerList: (state) => (filters: Filters) => {
return state.players.find((e) => objectEqual(unref(e).filter, filters))
},
getWeaponList: (state) => (filters: Filters) =>
state.weapons.find((e) => objectEqual(unref(e).filter, filters)),
getServerList: (state) => (filters: Filters) =>
state.servers.find((e) => objectEqual(unref(e).filter, filters)),
getGamemodeList: (state) => (filters: Filters) =>
state.gamemodes.find((e) => objectEqual(unref(e).filter, filters)),
getList:
(state) =>
<T extends StateProperty>(type: T, filters?: Filter): Ref<KillData<StateType<T>>> | undefined => {
return unref(state.killData[type as keyof typeof state.killData]).get(filters?.toURLSearchParams().toString() ?? '') as Ref<KillData<StateType<T>>>
},
getNSServers: (state) => state.nsServers
},
actions: {
fetchPlayers (filter: Filters) {
filter = removeNullEntries(filter)
let entry = this.players.find((e) => objectEqual(unref(e).filter, filter))
fetch <T extends StateProperty> (type:T, filter?:Filter): Ref<KillData<StateType<T>>> {
let entry = this.getList(type, filter)
if (entry === undefined) {
entry = shallowRef({ filter, data: {} })
this.players.push(entry)
entry = shallowRef<KillData<StateType<T>>>({ data: {} })
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?' +
new URLSearchParams(Object.entries(filter).map<string[][]>(e => [e[1]].flat().map(v => [e[0], v])).flat(1)),
`https://tone.sleepycat.date/v2/client/${type}?` +
filter?.toURLSearchParams() ?? '',
(progress) => {
if (entry && unref(entry).progress !== 1) {
if (entry && progress !== 1) {
unref(entry).progress = progress
if (progress !== 1) triggerRef(entry)
triggerRef(entry)
}
}
).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)]))
triggerRef(entry)
}
})
return entry
},
fetchWeapons (filter: Filters) {
filter = removeNullEntries(filter)
let entry = this.weapons.find((e) => objectEqual(unref(e).filter, filter))
if (!entry) {
entry = shallowRef({ filter, data: {} })
this.weapons.push(entry)
}
entry.value.data = Object.fromEntries(
Object.entries(await response?.json()).map<[string, Ref<StateType<T>>]>((e) => [
e[0],
ref(e[1]) as Ref<StateType<T>>
])
)
unref(entry).progress = 1
fetchWithLoading(
'https://tone.sleepycat.date/v2/client/weapons?' +
new URLSearchParams(Object.entries(filter).map<string[][]>(e => [e[1]].flat().map(v => [e[0], v])).flat(1)),
(progress) => {
if (entry && unref(entry).progress !== 1) {
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(Object.entries(filter).map<string[][]>(e => [e[1]].flat().map(v => [e[0], v])).flat(1)),
(progress) => {
if (entry && unref(entry).progress !== 1) {
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
},
fetchGamemodes (filter: Filters) {
filter = removeNullEntries(filter)
let entry = this.gamemodes.find((e) => objectEqual(unref(e).filter, filter))
if (!entry) {
entry = shallowRef({ filter, data: {} })
this.gamemodes.push(entry)
}
fetchWithLoading(
'https://tone.sleepycat.date/v2/client/gamemodes?' +
new URLSearchParams(Object.entries(filter).map<string[][]>(e => [e[1]].flat().map(v => [e[0], v])).flat(1)),
(progress) => {
if (entry && unref(entry).progress !== 1) {
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 Kill)]))
triggerRef(entry)
}
})
return entry
},
fetchNSServers () {
fetch(
'https://northstar.tf/client/servers').then(async response => {
fetch('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:Filters) {
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 { player: _player, ...withoutPlayers } = filter
if (this.currentFilter.player === _player) { this.fetchPlayers(withoutPlayers) }
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { weapon: _weapon, ...withoutWeapon } = filter
if (this.currentFilter.weapon === _weapon) { this.fetchWeapons(withoutWeapon) }
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { server: _server, ...withoutServer } = filter
// const { server: _server, ...withoutServer } = filter
// if (this.currentFilter.server === _server) { this.fetchServers(withoutServer) }
this.currentFilter = filter
}
src/views/AboutView.vue
-5
View File
@@ -1,5 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/PlayerView.vue
+22 -22
View File
@@ -61,14 +61,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"
@@ -83,7 +83,7 @@
</template>
<script lang="ts">
import { Player, Weapon, Server, Kill, 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'
@@ -109,7 +109,7 @@ export default defineComponent({
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 }
@@ -128,10 +128,10 @@ export default defineComponent({
},
computed: {
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 unref(this.store.fetchServers(withoutServer)).data
const filter = new Filter(this.filters)
delete filter.server
const data = this.store.getList('servers', filter)?.value.data
if (!data) return unref(this.store.fetch('servers', filter)).data
return data
},
groupedServers () {
@@ -149,24 +149,26 @@ export default defineComponent({
return hosts
},
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
const filter = new Filter(this.filters)
delete filter.weapon
delete filter.player
const data = this.store.getList('weapons', filter)?.value.data
if (!data) return this.store.fetch('weapons', filter).value.data
return data
},
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
if (!data) return this.store.fetchPlayers(withoutPlayers).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
return data
},
gamemodes (): { [key: string]: Ref<Kill> } {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { gamemode: _, player: _1, ...withoutGamemode } = this.filters
const data = this.store.getGamemodeList(withoutGamemode)?.value.data
if (!data) return this.store.fetchGamemodes(withoutGamemode).value.data
const filter = new Filter(this.filters)
delete filter.gamemode
delete filter.player
const data = this.store.getList('gamemodes', filter)?.value.data
if (!data) return this.store.fetch('gamemodes', filter).value.data
return data
},
sortedWeaponList (): string[] {
@@ -263,8 +265,6 @@ export default defineComponent({
if (this.$route.query.gamemode) this.model.gamemode = [this.$route.query.gamemode].flat().filter(e => e ?? false).map(e => e!.toString())
else this.model.gamemode = undefined
}
console.log(this.model, this.$route.query)
}
}
})
src/views/ServerView.vue
+2 -2
View File
@@ -52,8 +52,8 @@ export default defineComponent({
},
computed: {
servers (): { [key: string]: Ref<Server> } {
const data = this.store.getServerList({})?.value.data
if (!data) return unref(this.store.fetchServers({})).data
const data = this.store.getList('servers')?.value.data
if (!data) return unref(this.store.fetch('servers')).data
return data
},
serverList (): (Ref<Server> & { name: string })[] {