centered load-more button for mobile

src/utils/ApiRequests.js

@@ -82,7 +82,7 @@ export const getMatchDetails = async (match_id) => {
 
 export const loadMoreMatches = async (player_id, date) => {
   try {
-    const res = await axios.get(`${API_URL}/player/${player_id}/next/${date}`)
+    const res = await axios.get(`${API_URL}/player/${player_id}/after/${date}`)
 
     if (res.status === 200) {
       return res.data

src/views/Match.vue

@@ -113,7 +113,6 @@
 
 <script>
 import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
-import axios from 'axios'
 import {
   closeNav,
   DisplayRank,
@@ -148,9 +147,8 @@ export default {
 
     // Functions
     const GetMatch = async () => {
-      let res = {}
       if (matchIdPattern.test(props.match_id)) {
-        res = await getMatchDetails(props.match_id)
+        const res = await getMatchDetails(props.match_id)
 
         if (res.map)
           document.title = `${FixMapName(res.map)} | csgoWTF`

src/views/Player.vue

@@ -36,11 +36,11 @@
                   <td class="wlt-loss">{{ data.match_stats.loss }}</td>
                   <td class="wlt-tie">{{ data.match_stats.tie }}</td>
                   <td class="wlt-win-rate">{{
-                      data.match_stats.win > 0 ? (data.match_stats.win / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(0) : 0
+                      data.match_stats.win > 0 ? (data.match_stats.win / data.match_stats.total * 100).toFixed(0) : 0
                     }}%
                   </td>
                   <td class="wlt-tie-rate">{{
-                      data.match_stats.tie > 0 ? (data.match_stats.tie / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(0) : 0
+                      data.match_stats.tie > 0 ? (data.match_stats.tie / data.match_stats.total * 100).toFixed(0) : 0
                     }}%
                   </td>
                 </tr>
@@ -114,7 +114,7 @@
           </div>
         </div>
       </div>
-      <div class="match-container">
+      <div class="match-container d-flex">
         <div class="matches">
           <table v-if="store.state.playerDetails.matches" class="table table-borderless">
             <thead class="border-bottom">
@@ -122,7 +122,7 @@
               <th class="text-center map" scope="col">Map</th>
               <th class="text-center rank" scope="col">Rank</th>
               <th class="text-center length" scope="col" title="Match Length">
-                <img class="match-len" src="../assets/images/icons/timer_both.svg" alt="Match length">
+                <img alt="Match length" class="match-len" src="../assets/images/icons/timer_both.svg">
               </th>
               <th class="text-center score" scope="col">Score</th>
               <th class="text-center kills" scope="col">K</th>
@@ -157,8 +157,10 @@
                     class="rank-icon">
               </td>
               <td class="td-length text-center">
-                <img class="match-len" v-if="match.max_rounds === 30 || !match.max_rounds" src="../assets/images/icons/timer_long.svg" alt="Match long">
+                <img v-if="match.max_rounds === 30 || !match.max_rounds" alt="Match long"
-                <img class="match-len" v-if="match.max_rounds === 16" src="../assets/images/icons/timer_short.svg" alt="Match short">
+                     class="match-len" src="../assets/images/icons/timer_long.svg">
+                <img v-if="match.max_rounds === 16" alt="Match short" class="match-len"
+                     src="../assets/images/icons/timer_short.svg">
               </td>
               <td :class="match.stats.team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger'"
                   class="td-score text-center fw-bold">
@@ -262,9 +264,8 @@
           </div>
         </div>
       </div>
-
+      <div class="load-more col-lg-9 col-md-12 text-center">
-      <div class="load-more col-9 text-center">
+        <button v-if="data.match_stats.total !== data.matches.length" class="btn border-2 btn-outline-info" @click="setMoreMatches">Load More</button>
-        <button class="btn border-2 btn-outline-info" @click="setMoreMatches">Load More</button>
       </div>
     </div>
   </div>
@@ -280,17 +281,17 @@ import {
   FormatDuration,
   FormatFullDate,
   FormatFullDuration,
+  FormatVacDate,
   GetHLTV_1,
   GetUser,
   GetWinLoss,
   GoToLink,
   GoToMatch,
   LoadImage,
+  loadMoreMatches,
   SaveLastVisitedToLocalStorage,
   setTitle,
-  TrackMe,
+  TrackMe
-  FormatVacDate,
-  loadMoreMatches
 } from "../utils";
 
 export default {
@@ -313,7 +314,9 @@ export default {
         loss: 0,
         win: 0,
         tie: 0,
-      }
+        total: 0
+      },
+      playerMeta: {}
     })
 
     onBeforeMount(() => {
@@ -334,6 +337,7 @@ export default {
         data.match_stats.loss = store.state.playerDetails.match_stats.loss || 0
         data.match_stats.win = store.state.playerDetails.match_stats.win || 0
         data.match_stats.tie = store.state.playerDetails.match_stats.tie || 0
+        data.match_stats.total = data.match_stats.loss + data.match_stats.win + data.match_stats.tie
       }
 
       store.commit({
@@ -382,6 +386,14 @@ export default {
       }
     }
 
+    const getPlayerMeta = async () => {
+      if (props.id) {
+        const res = await getPlayerMeta(props.id)
+
+        data.playerMeta = res
+      }
+    }
+
     const setMoreMatches = async () => {
       const res = await loadMoreMatches(store.state.playerDetails.steamid64, data.matches[data.matches.length - 1].date)
 
@@ -418,7 +430,10 @@ export default {
       }
     }
 
-    watch(() => props.id, GetPlayer)
+    watch(() => props.id, () => {
+      GetPlayer()
+      getPlayerMeta()
+    })
 
     onBeforeUnmount(() => {
       store.commit('resetPlayerDetails')