fix colors for chart and list

src/App.vue

@@ -75,6 +75,10 @@ nav a.router-link-exact-active {
   padding: 24px 32px;
 }
 
+.navbar-element:hover{
+  background: var(--current-line)
+}
+
 .spacer {
   width: 100%;
 }

src/components/PlayerChart.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="playerChart">
+    <div class="playerChart" ref="container">
         <Scatter :data="chart" :options="chartOptions" />
     </div>
 </template>
@@ -33,15 +33,32 @@ export default defineComponent({
   components: {
     Scatter
   },
+  mounted () {
+    this.refreshColors++
+  },
   computed: {
+    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.orange = style.getPropertyValue('--orange')
+        colors.currentLine = style.getPropertyValue('--current-line')
+      } else {
+        colors.fg = '#ffffff'
+      }
+      return colors
+    },
     chart () {
       const chartData = {
         datasets: [
           {
             label: 'Players',
             labels: [] as string[],
-            borderColor: ['#f87979'],
+            borderColor: [this.colors.fg],
-            backgroundColor: '#f87979',
+            backgroundColor: [this.colors.fg],
             pointRadius: [1],
             pointStyle: ['dot'],
             hoverRadius: [4],
@@ -61,13 +78,16 @@ export default defineComponent({
       })
       chartData.datasets[0].pointRadius = Array(chartData.datasets[0].labels.length).fill(1)
       chartData.datasets[0].pointStyle = Array(chartData.datasets[0].labels.length).fill('dot')
-      chartData.datasets[0].borderColor = Array(chartData.datasets[0].labels.length).fill('darkblue')
+      chartData.datasets[0].borderColor = Array(chartData.datasets[0].labels.length).fill(this.colors.fg)
+      chartData.datasets[0].backgroundColor = chartData.datasets[0].borderColor
       chartData.datasets[0].hoverRadius = Array(chartData.datasets[0].labels.length).fill(4)
       if (this.$props.playerHighlighted) {
         const index = this.playerIdList.indexOf(this.$props.playerHighlighted)
         chartData.datasets[0].pointRadius[index] = 20
         chartData.datasets[0].pointStyle[index] = 'crossRot'
-        chartData.datasets[0].borderColor[index] = 'red'
+        chartData.datasets[0].borderColor[index] = this.colors.orange
+        // No need to do that since arrays are already the same (reference)
+        // chartData.datasets[0].backgroundColor[index] = chartData.datasets[0].borderColor[index]
         chartData.datasets[0].hoverRadius[index] = 30
       }
       return chartData
@@ -77,6 +97,21 @@ export default defineComponent({
         responsive: true,
         maintainAspectRatio: true,
         animation: { duration: 500 },
+        layout: { autoPadding: false },
+        scales: {
+          y: {
+            title: {
+              text: 'Kills',
+              display: true
+            }
+          },
+          x: {
+            title: {
+              text: 'Deaths',
+              display: true
+            }
+          }
+        },
         plugins: {
           tooltip: {
             callbacks: {
@@ -98,7 +133,7 @@ export default defineComponent({
               return this.players[this.playerIdList[context.dataIndex]].username
             },
             backgroundColor: Array(this.playerIdList.length).fill(null),
-            borderColor: 'black',
+            borderColor: this.colors.fg,
             borderWidth: Array(this.playerIdList.length).fill(0),
             borderRadius: 5,
             display: Array(this.playerIdList.length).fill('auto'),
@@ -137,7 +172,7 @@ export default defineComponent({
             yMax: endY,
             xMax: endX,
             borderWidth: 2,
-            borderColor: 'black',
+            borderColor: this.colors.orange,
             borderDash: [1, 5]
           }
         }
@@ -146,7 +181,7 @@ export default defineComponent({
       if (this.$props.playerHighlighted) {
         const index = this.playerIdList.indexOf(this.$props.playerHighlighted)
         options.plugins.datalabels.display[index] = true
-        options.plugins.datalabels.backgroundColor[index] = 'red'
+        options.plugins.datalabels.backgroundColor[index] = this.colors.orange
         options.plugins.datalabels.borderWidth[index] = 1
       }
       return options
@@ -157,13 +192,15 @@ export default defineComponent({
   },
   data () {
     return {
-      store: useStore()
+      store: useStore(),
+      refreshColors: 0
     }
   }
 })
 </script>
 
 <style scoped>
-.playerChart {
+canvas {
+  background: var(--accent);
 }
 </style>

src/components/PlayerList.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="playerTable" v-on:keydown="selectNextPlayer" tabindex="0">
     <div class="playerHeaders">
-      <span>Index</span>
+      <span></span>
-      <span v-on:click="sortPlayerList('username')">username</span>
+      <span v-on:click="sortPlayerList('username')" :class="sortingData.argument == 'username' ? 'selected' : ''">username</span>
-      <span v-on:click="sortPlayerList('kills')">kills</span>
+      <span v-on:click="sortPlayerList('kills')" :class="sortingData.argument == 'kills' ? 'selected' : ''">kills</span>
-      <span v-on:click="sortPlayerList('deaths')">deaths</span>
+      <span v-on:click="sortPlayerList('deaths')" :class="sortingData.argument == 'deaths' ? 'selected' : ''">deaths</span>
-      <span v-on:click="sortPlayerList('k/d')">k/d</span>
+      <span v-on:click="sortPlayerList('k/d')" :class="sortingData.argument == 'k/d' ? 'selected' : ''">k/d</span>
-      <span v-on:click="sortPlayerList('max_kill_distance')">max kill distance</span>
+      <span v-on:click="sortPlayerList('max_kill_distance')" :class="sortingData.argument == 'max_kill_distance' ? 'selected' : ''">max kill distance</span>
-      <span v-on:click="sortPlayerList('avg_kill_distance')">average kill distance</span>
+      <span v-on:click="sortPlayerList('avg_kill_distance')" :class="sortingData.argument == 'avg_kill_distance' ? 'selected' : ''">average kill distance</span>
     </div>
     <div class="playerRow" v-for="(playerId, index) in playerIdList" v-bind:key="playerId"
       v-on:click="$emit('highlightPlayer', playerId)" :ref="`player:` + playerId">
@@ -36,7 +36,7 @@ export default defineComponent({
   emits: ['highlightPlayer'],
   data () {
     return {
-      sortingData: { direction: -1, argument: '' as keyof Player | 'k/d' },
+      sortingData: { direction: -1, argument: 'kills' as keyof Player | 'k/d' },
       playerIdList: [] as string[],
       store: useStore(),
       selected: undefined as string | undefined
@@ -142,6 +142,7 @@ export default defineComponent({
 }
 
 .playerTable {
+  margin-right: 1rem;
   overflow: auto;
   height: 100%;
 }
@@ -154,7 +155,7 @@ export default defineComponent({
 .playerRow,
 .playerHeaders {
   display: grid;
-  grid-template-columns: 50px 20ch 6ch 6ch 6ch 10ch 10ch;
+  grid-template-columns: 4ch 2fr 6ch 6ch 6ch 10ch 1fr;
   background: var(--bg-color);
   text-align: left;
   cursor: pointer;
@@ -182,6 +183,10 @@ export default defineComponent({
   border-right: solid var(--bg-color) 2px;
 }
 
+.playerHeaders>span:last-child {
+  width:100%;
+}
+
 span {
   text-overflow: ellipsis;
   overflow: hidden;

src/views/PlayerView.vue

@@ -9,7 +9,7 @@
     </select>
     <select v-on:change="changeFilter({ weapon: ($event.target as HTMLInputElement).value })">
       <option></option>
-      <option v-for="(weaponData, weaponId) in weapons" v-bind:key="weaponId" :value="weaponId">{{ weaponId }}</option>
+      <option v-for="weaponId in sortedWeaponList" v-bind:key="weaponId" :value="weaponId">{{ weaponId }}</option>
     </select>
   </div>
 
@@ -43,7 +43,11 @@ export default defineComponent({
   },
   computed: {
     servers (): Server[] { return this.store.state.servers },
-    weapons (): { [key: string]: Weapon } { return this.store.getters.getWeaponList(this.filters) }
+    weapons (): { [key: string]: Weapon } { return this.store.getters.getWeaponList(this.filters) },
+    sortedWeaponList (): string[] {
+      const weapons = Object.keys(this.weapons)
+      return weapons.sort()
+    }
   },
   methods: {
     async changeFilter ({ weapon, server }: { weapon?: string, server?: string }) {