proof of work of player filtering and listing

src/App.vue

@@ -1,7 +1,8 @@
 <template>
   <nav>
     <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
+    <router-link to="/about">About</router-link> |
+    <router-link to="/players">Players</router-link>
   </nav>
   <router-view/>
 </template>

src/components/PlayerList.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="playerList">
+    <select v-on:change="weaponFilter">
+        <option>global</option>
+        <option v-for="(weaponData, weaponId) in weapons" v-bind:key="weaponId">{{weaponId}}</option>
+    </select>
+    <div class="player">
+      <span>username</span>
+      <span>kills</span>
+      <span>deaths</span>
+      <span>k/d</span>
+      <span>max kill distance</span>
+      <span>average kill distance</span>
+    </div>
+    <div class="player" v-for="(playerData, playerId) in players" v-bind:key="playerId">
+      <span>{{ playerData.username }}</span>
+      <span>{{ playerData.kills }}</span>
+      <span>{{ playerData.deaths }}</span>
+      <span>{{ Math.round(playerData.kills/playerData.deaths*100)/100 }}</span>
+      <span>{{ playerData.max_kill_distance }}</span>
+      <span>{{ Math.round(playerData.avg_kill_distance * 100) / 100}}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+
+@Options({
+  props: {
+    msg: String
+  }
+})
+export default class HelloWorld extends Vue {
+  msg!: string;
+  players: any = {}
+  weapons: any = {}
+  created () {
+    this.fetchPlayers({})
+    this.fetchWeapons({})
+  }
+
+  async fetchPlayers ({ weapon, server }:{weapon?:string, server?:string}) {
+    const searchParams:Record<string, string> = {}
+    if (weapon) { searchParams.weapon = weapon }
+    if (server) { searchParams.server = server }
+
+    const response = await fetch(
+      'https://tone.sleepycat.date/v1/client/players?' + new URLSearchParams(searchParams)
+    )
+    const data = await response.json()
+    this.players = data
+  }
+
+  async fetchWeapons ({ server }:{server?:string}) {
+    const searchParams:Record<string, string> = {}
+    if (server) { searchParams.server = server }
+    const response = await fetch(
+      'https://tone.sleepycat.date/v1/client/weapons?' + new URLSearchParams(searchParams)
+    )
+    const data = await response.json()
+    this.weapons = data
+    console.log(data)
+  }
+
+  weaponFilter (e:Event) {
+    const weapon = (e.target as HTMLInputElement).value
+    if (weapon === 'global') {
+      return this.fetchPlayers({ })
+    }
+    this.fetchPlayers({ weapon })
+  }
+}
+</script>
+
+<style scoped>
+.player {
+  display: grid;
+  grid-template-columns: 200px 100px 100px 100px 100px 100px;
+  background: lightgray;
+  margin: 10px;
+  text-align: left;
+}
+.player span {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin: 10px;
+}
+</style>

src/router/index.ts

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

src/store/index.ts

@@ -1,14 +1,35 @@
-import { createStore } from 'vuex'
+// store.ts
+import { InjectionKey } from 'vue'
+import { createStore, Store } from 'vuex'
+
+interface Player {
+  deaths: number;
+  username: string;
+  maxKillDistance: number;
+  avgKillDistance: number;
+  kills: number;
+}
+// define your typings for the store state
+export interface State {
+  players: Player[];
+}
+
+// define injection key
+// eslint-disable-next-line symbol-description
+export const key: InjectionKey<Store<State>> = Symbol()
 
 export default createStore({
   state: {
+    servers: [],
+    players: {},
+    weapons: {}
   },
   getters: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
+    getPlayerList (weapon, server) {
+      console.log('e')
     }
+  },
+  mutations: {},
+  actions: {},
+  modules: {}
 })

src/views/PlayerView.vue

@@ -0,0 +1,23 @@
+<template>
+  <PlayerList></PlayerList>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+import PlayerList from '@/components/PlayerList.vue'
+
+@Options({
+  components: {
+    PlayerList
+  }
+})
+export default class PlayerView extends Vue {
+  mounted = function () {
+    console.log('q')
+  };
+
+  data () {
+    return { a: 1 }
+  }
+}
+</script>