added win/loss/tie stats

src/views/Player.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="container">
-    <div class="card mb-3 bg-transparent border-0" style="max-width: 540px;">
+    <div class="card mb-3 bg-transparent border-0">
       <div class="row g-0">
-        <div class="img-container col-md-4 pt-3">
+        <div class="img-container col-md-2 pt-3">
           <img
               :src="data.playerDetails.avatar" alt="Player avatar" class="img-fluid avatar">
         </div>
@@ -23,16 +23,26 @@
                     d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
               </svg>
             </a></h3>
-            <table class="table table-borderless">
+            <table class="table table-borderless text-center">
               <tr>
-                <th class="text-uppercase text-muted">Wins</th>
+                <th class="wlt-win text-uppercase text-muted">Wins</th>
-                <th class="text-uppercase text-muted">Losses</th>
+                <th class="wlt-loss text-uppercase text-muted">Losses</th>
-                <th class="text-uppercase text-muted">WinRate</th>
+                <th class="wlt-tie text-uppercase text-muted">Ties</th>
+                <th class="wlt-win-rate text-uppercase text-muted">Win-Rate</th>
+                <th class="wlt-tie-rate text-uppercase text-muted">Tie-Rate</th>
               </tr>
               <tr>
-                <td>{{ wl.win }}</td>
+                <td class="wlt-win">{{ data.match_stats.win }}</td>
-                <td>{{ wl.loss }}</td>
+                <td class="wlt-loss">{{ data.match_stats.loss }}</td>
-                <td>{{ (wl.win / (wl.win + wl.loss) * 100).toFixed(2) }}%</td>
+                <td class="wlt-tie">{{ data.match_stats.tie }}</td>
+                <td class="wlt-win-rate">{{
+                    (data.match_stats.win / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(2)
+                  }}%
+                </td>
+                <td class="wlt-tie-rate">{{
+                    (data.match_stats.tie / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(2)
+                  }}%
+                </td>
               </tr>
             </table>
             <small v-if="data.playerDetails.tracked" class="card-text text-muted">
@@ -113,8 +123,8 @@
           </td>
           <td class="td-rank text-center">
             <img
-                :src="DisplayRank(match.stats[0].extended?.rank?.new)[0]"
                 :alt="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
+                :src="DisplayRank(match.stats[0].extended?.rank?.new)[0]"
                 :title="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
                 class="rank-icon">
           </td>
@@ -167,7 +177,8 @@
 
           </td>
           <td :title="FormatFullDate(match.date)" class="td-date">
-            <svg v-if="match.rounds === 16" class="bi bi-circle-half" fill="currentColor" height="16" viewBox="0 0 16 16" width="16"
+            <svg v-if="match.rounds === 16" class="bi bi-circle-half" fill="currentColor" height="16"
+                 viewBox="0 0 16 16" width="16"
                  xmlns="http://www.w3.org/2000/svg">
               <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
             </svg>
@@ -186,14 +197,14 @@ import {onBeforeMount, reactive, watch} from "vue";
 import axios from "axios";
 import {useStore} from "vuex";
 import {
+  DisplayRank,
   FormatDate,
   FormatDuration,
   FormatFullDate,
   FormatFullDuration,
   GetHLTV_1,
   GoToMatch,
-  SaveLastVisitedToLocalStorage,
+  SaveLastVisitedToLocalStorage
-  DisplayRank
 } from "../utils";
 
 export default {
@@ -202,11 +213,6 @@ export default {
   setup(props) {
     const store = useStore()
 
-    const wl = reactive({
-      win: 132,
-      loss: 102
-    })
-
     const data = reactive({
       userData: {
         authcode: '',
@@ -214,7 +220,12 @@ export default {
       },
       playerDetails: {},
       matches: [],
-      statusError: ''
+      statusError: '',
+      match_stats: {
+        loss: 0,
+        win: 0,
+        tie: 0,
+      }
     })
 
     // Functions
@@ -247,6 +258,9 @@ export default {
           .then((response) => {
             data.playerDetails = response.data
             data.matches = response.data.matches
+            data.match_stats.loss = response.data.match_stats.loss ? response.data.match_stats.loss : 0
+            data.match_stats.win = response.data.match_stats.win ? response.data.match_stats.win : 0
+            data.match_stats.tie = response.data.match_stats.tie ? response.data.match_stats.tie : 0
             store.state.id64 = response.data.steamid64
 
             console.log(response.data)
@@ -284,7 +298,6 @@ export default {
     return {
       data,
       store,
-      wl,
       props,
       GetUser,
       TrackMe,
@@ -311,6 +324,22 @@ export default {
     width: 150px;
     box-shadow: 0 0 10px black;
   }
+
+  table {
+    max-width: 500px;
+
+    .wlt-win, .wlt-loss, .wlt-tie {
+      text-align: start;
+      max-width: 70px;
+      margin: 0;
+      padding: 0;
+    }
+
+    .wlt-tie-rate, .wlt-win-rate {
+      text-align: end;
+      max-width: 90px;
+    }
+  }
 }
 
 .win {