working on server list

src/App.vue

@@ -9,6 +9,7 @@
       <div class="spacer"></div>
       <!-- <router-link to="/" class="navbar-element">Home</router-link>
       <router-link to="/about" class="navbar-element">About</router-link> -->
+      <router-link to="/servers" class="navbar-element">Servers</router-link>
       <router-link to="/" class="navbar-element">Players</router-link>
     </nav>
   </header>

src/components/List/VirtualList.vue

@@ -23,7 +23,7 @@ export default defineComponent({
   data () {
     return {
       toLoad: 10,
-      vlistHeight: 0,
+      vlistHeight: 10,
       vIndex: 0
     }
   },
@@ -33,7 +33,14 @@ export default defineComponent({
     highlighted: String
   },
   emits: ['highlightPlayer'],
-
+  mounted () {
+    if (this.$props.list) {
+      this.vlistHeight = (this.$refs.vlist as HTMLElement)?.getBoundingClientRect().height || 0
+      if (this.$props.highlighted) {
+        setTimeout(() => (this.$refs.vlist as HTMLElement)?.scrollBy({ top: ((this.list.findIndex(e => e.id === this.$props.highlighted)) * this.rowHeight) - ((this.$refs.vlist as HTMLElement))?.scrollTop - (this.vlistHeight / 2 - this.$props.rowHeight), behavior: 'smooth' }), 1)
+      }
+    }
+  },
   computed: {
     visibleList () {
       return this.list.slice(Math.max(this.vIndex, 0), Math.min(this.vIndex + this.visibleCount * 3, this.list.length))

src/components/PlayerChart.vue

@@ -62,7 +62,7 @@ export default defineComponent({
       // eslint-disable-next-line no-unused-expressions
       this.refreshColors
       const colors = {} as { [key: string]: string }
-      if (this.$refs.container) {
+      if (this.$refs?.container) {
         const style = getComputedStyle(this.$refs.container as Element)
         colors.fg = style.getPropertyValue('--foreground')
         colors.bg = style.getPropertyValue('--bg-color')

src/components/PlayerList.vue

@@ -94,7 +94,6 @@ export default defineComponent({
           return aVal[argument] - bVal[argument]
         })
       }
-      console.log('Sorting the player object took + ' + ((new Date()).getTime() - date.getTime()) + 'ms')
       if (this.sortingData.direction < 0) {
         players.reverse()
       }

src/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import ServerView from '../views/ServerView.vue'
 import PlayerView from '../views/PlayerView.vue'
 
 const routes: Array<RouteRecordRaw> = [
@@ -7,6 +7,11 @@ const routes: Array<RouteRecordRaw> = [
     path: '/',
     name: 'home',
     component: PlayerView
+  },
+  {
+    path: '/servers',
+    name: 'servers',
+    component: ServerView
   }
   // {
   //   path: '/players',

src/stores/kill.ts

@@ -55,6 +55,17 @@ export interface Server extends Kill {
   host: number;
 }
 
+export interface NSServer {
+  name:string;
+  region:string;
+  description:string;
+  playerCount:number;
+  maxPlayers:number;
+  map:string;
+  playlist:string;
+  hasPassword:boolean;
+  modInfo:{Mods:[]}
+}
 // define your typings for the store state
 export interface State {
   servers: Ref<KillData<Server>>[];
@@ -63,6 +74,7 @@ export interface State {
   maps: Ref<KillData<Kill>>[];
   gamemodes: Ref<KillData<Kill>>[];
   hosts: { [key: number]: string };
+  nsServers: NSServer[] | undefined
 }
 
 export const useKillStore = defineStore('kill', {
@@ -72,7 +84,8 @@ export const useKillStore = defineStore('kill', {
     weapons: [],
     maps: [],
     gamemodes: [],
-    hosts: {}
+    hosts: {},
+    nsServers: undefined
   }),
   getters: {
     getPlayerList: (state) => (filters: Filters) => {
@@ -81,7 +94,8 @@ export const useKillStore = defineStore('kill', {
     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))
+      state.servers.find((e) => objectEqual(unref(e).filter, filters)),
+    getNSServers: (state) => state.nsServers
   },
   actions: {
     fetchPlayers (filter: Filters) {
@@ -138,6 +152,13 @@ export const useKillStore = defineStore('kill', {
         triggerRef(entry!)
       })
       return entry
+    },
+    fetchNSServers () {
+      fetch(
+        'https://northstar.tf/client/servers').then(async response => {
+        this.nsServers = await response.json()
+      })
+      return this.nsServers || []
     }
   }
 })

src/views/HomeView.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
-  </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
-import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
-
-@Options({
-  components: {
-    HelloWorld
-  }
-})
-export default class HomeView extends Vue {}
-</script>

src/views/PlayerView.vue

@@ -96,9 +96,8 @@ export default defineComponent({
       weaponLocale: weapons as { [key: string]: string }
     }
   },
-  created () {
+  beforeCreate () {
     let server
-    this.applyRouteFilters()
     if (this.$route.query.server) server = this.$route.query.server?.toString()
     this.model = {
       server,
@@ -197,8 +196,11 @@ export default defineComponent({
       const { player: _, ...withoutPlayer } = this.$route.query
       router.push({ query: { player: newValue?.id, ...withoutPlayer } })// .then(e => { console.log(e) })
     },
-    '$route' () {
+    $route: {
-      this.applyRouteFilters()
+      handler: function () {
+        this.applyRouteFilters()
+      },
+      immediate: true
     }
   },
   methods: {

src/views/ServerView.vue

@@ -0,0 +1,54 @@
+<template>
+    <div id="filters">
+    </div>
+    <div>
+        <div v-for="(server, servername) in servers" v-bind:key="servername" :class="(!nsServersByName[servername] ? 'offline ' : ' ') + (nsServersByName[servername]?.playerCount ? 'active' : '')">
+            {{ servername }} {{ server.value.kills }} {{ nsServersByName[servername]?.playerCount +'/'+nsServersByName[servername]?.maxPlayers }}
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { NSServer, Server, useKillStore } from '@/stores/kill'
+
+import { Ref, defineComponent, unref } from 'vue'
+
+export default defineComponent({
+  name: 'ServerView',
+  components: {
+
+  },
+
+  data () {
+    return {
+      store: useKillStore()
+    }
+  },
+  computed: {
+    servers (): { [key: string]: Ref<Server> } {
+      const data = this.store.getServerList({})?.value.data
+      if (!data) return unref(this.store.fetchServers({})).data
+      return data
+    },
+    nsServers ():NSServer[] {
+      const data = this.store.getNSServers
+      if (!data) return this.store.fetchNSServers()
+      console.log(data)
+      return data
+    },
+    nsServersByName ():{[key:string]:NSServer} {
+      return Object.fromEntries(this.nsServers.map(e => [e.name, e]))
+    }
+  }
+
+})
+</script>
+
+<style scoped>
+.offline{
+    background:darkgray
+}
+.active{
+    background:greenyellow
+}
+</style>