add some info when highlighting player

src/components/PlayerInfo.vue

@@ -1,5 +1,15 @@
 <template>
-    <div id="playerInfo">{{playerWeapons}}</div>
+  <div id="playerInfo">
+    <div v-if="playerWeapons && sortedWeaponList">
+      <span>Most Used Weapons :</span><br/>
+      <div v-if="sortedWeaponList[0]">{{ `${sortedWeaponList[0]} : ${playerWeapons[sortedWeaponList[0]].kills} kills` }}</div>
+      <div v-if="sortedWeaponList[1]">{{ `${sortedWeaponList[1]} : ${playerWeapons[sortedWeaponList[1]].kills} kills` }}</div>
+      <div v-if="sortedWeaponList[2]">{{ `${sortedWeaponList[2]} : ${playerWeapons[sortedWeaponList[2]].kills} kills` }}</div>
+      <div v-if="sortedWeaponList[3]">{{ `${sortedWeaponList[3]} : ${playerWeapons[sortedWeaponList[3]].kills} kills` }}</div>
+      <div v-if="sortedWeaponList[4]">{{ `${sortedWeaponList[4]} : ${playerWeapons[sortedWeaponList[4]].kills} kills` }}</div>
+    </div>
+
+  </div>
 </template>
 
 <script lang="ts">
@@ -21,13 +31,28 @@ export default defineComponent({
   },
   computed: {
     players (): { [key: string]: Player } { return this.store.getters.getPlayerList(this.filters) },
-    player ():Player | undefined {
+    player (): Player | undefined {
       if (!this.playerHighlighted) return
       if (!this.players) return
       return this.players[this.playerHighlighted]
     },
     playerWeapons (): { [key: string]: Weapon } {
       return this.store.getters.getWeaponList({ player: this.playerHighlighted, ...this.filters })
+    },
+    sortedWeaponList (): string[] {
+      if (!this.playerWeapons) return []
+      const weapons = Object.keys(this.playerWeapons)
+      weapons.sort((a, b) => {
+        if (Number(this.playerWeapons[a].kills) < Number(this.playerWeapons[b].kills)) {
+          return 1
+        }
+        if (Number(this.playerWeapons[a].kills) > Number(this.playerWeapons[b].kills)) {
+          return -1
+        }
+        return 0
+      })
+      console.log(weapons)
+      return weapons
     }
   },
   watch: {
@@ -40,7 +65,13 @@ export default defineComponent({
 </script>
 
 <style scoped>
-#playerInfo{
+#playerInfo {
-    grid-area: info;
+  grid-area: info;
+}
+
+@media only screen and (max-width: 922px) {
+  #playerInfo {
+    display: none
+  }
 }
 </style>

src/components/PlayerList.vue

@@ -26,7 +26,6 @@
 import { defineComponent } from 'vue'
 import { Player } from '@/store/index'
 import { useStore } from 'vuex'
-import { Vue } from 'vue-class-component'
 
 export default defineComponent({
   props: {

src/store/index.ts

@@ -13,6 +13,7 @@ export interface Player {
 }
 
 export interface Weapon {
+  id?:string,
   // eslint-disable-next-line camelcase
   max_kill_distance: number;
   // eslint-disable-next-line camelcase