added load-more button to player match-list

src/views/Player.vue

@@ -254,6 +254,9 @@
         </div>
       </div>
 
+      <div class="load-more col-9 text-center">
+        <button class="btn border-2 btn-outline-info" @click="setMoreMatches">Load More</button>
+      </div>
     </div>
   </div>
 </template>
@@ -277,7 +280,8 @@ import {
   SaveLastVisitedToLocalStorage,
   setTitle,
   TrackMe,
-  FormatVacDate
+  FormatVacDate,
+  loadMoreMatches
 } from "../utils";
 
 export default {
@@ -369,6 +373,14 @@ export default {
       }
     }
 
+    const setMoreMatches = async () => {
+      const res = await loadMoreMatches(store.state.playerDetails.steamid64, data.matches[data.matches.length - 1].date)
+
+      res.matches.forEach(e => data.matches.push(e))
+
+      console.log(store.state.playerDetails)
+    }
+
     const RefreshData = async () => {
       const refreshButton = document.querySelector('.refresh-btn .fas')
       refreshButton.classList.add('animate')
@@ -419,7 +431,8 @@ export default {
       GetHLTV_1,
       DisplayRank,
       constructAvatarUrl,
-      FormatVacDate
+      FormatVacDate,
+      setMoreMatches
     }
   }
 }
@@ -437,11 +450,14 @@ export default {
 }
 
 .wrapper {
-  padding-bottom: 1rem;
   background: rgba(0, 0, 0, .7);
   min-width: 100%;
   min-height: 100%;
 
+  .load-more {
+    padding: 1rem 0;
+  }
+
   .trackme-btn,
   .refresh-btn {
     position: absolute;
@@ -486,7 +502,6 @@ export default {
   padding-top: 10px;
 
   .badges {
-    width: 70%;
     height: 30px;
 
     img {