new feature "Explore Site"

src/components/MatchesTable.vue

@@ -0,0 +1,455 @@
+<template>
+  <div v-if="data.matches" id="matches">
+    <table class="table table-borderless">
+      <thead class="border-bottom">
+      <tr>
+        <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 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" v-if="!props.explore">K</th>
+        <th class="text-center assists" scope="col" v-if="!props.explore">A</th>
+        <th class="text-center deaths" scope="col" v-if="!props.explore">D</th>
+        <th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio" v-if="!props.explore">+/-</th>
+        <th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating" v-if="!props.explore">Rating</th>
+        <th class="text-center duration" scope="col">Duration</th>
+        <th class="date" scope="col">Date</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="match in data.matches"
+          :key="match.match_id"
+          :class="(match.stats ? GetWinLoss(match.match_result, match.stats.team_id) : '') + (match.vac || match.game_ban ? ' ban' : '')"
+          :title="match.vac ? 'VAC-banned player in this game' : match.game_ban ? 'Game-banned player in this game' : ''"
+          class="match default"
+          @click="GoToMatch(match.match_id)"
+      >
+        <td class="td-map text-center">
+          <i v-if="match.parsed" class="fa fa-bar-chart parsed" style="cursor: help"
+             title="Demo has been parsed for additional data"></i>
+          <i v-if="!match.parsed && MatchNotParsedTime(match.date)" class="fa fa-hourglass-half not-yet-parsed"
+             style="cursor: help"
+             title="Match has not been parsed yet"></i>
+          <img v-if="match.map"
+               :alt="match.map ? match.map : 'Map not found'"
+               :src="match.map !== '' ? require('../assets/images/map_icons/map_icon_' + match.map + '.svg') : require('../assets/images/map_icons/map_icon_lobby_mapveto.svg')"
+               :title="match.map"
+               class="map-icon">
+          <i v-else class="fa fa-question-circle-o map-not-found" title="Match not parsed"></i>
+        </td>
+        <td class="td-rank text-center">
+          <img
+              :alt="DisplayRank(match.stats.rank?.new)[1]"
+              :class="match.stats.rank?.new > match.stats.rank?.old ? 'uprank' : match.stats.rank?.new < match.stats.rank?.old ? 'downrank' : ''"
+              :src="DisplayRank(match.stats.rank?.new)[0]"
+              :title="DisplayRank(match.stats.rank?.new)[1]"
+              class="rank-icon" v-if="!props.explore">
+          <img
+              :alt="DisplayRank(Math.floor(match.avg_rank || 0))[1]"
+              :src="DisplayRank(Math.floor(match.avg_rank || 0))[0]"
+              :title="DisplayRank(Math.floor(match.avg_rank || 0))[1]"
+              class="rank-icon" v-if="props.explore">
+        </td>
+        <td class="td-length text-center">
+          <img v-if="match.max_rounds === 30 || !match.max_rounds" alt="Match long"
+               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 ? match.stats.team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger' : ''"
+            class="td-score text-center fw-bold">
+          {{ match.score[0] }} - {{ match.score[1] }}
+        </td>
+        <td class="td-kills text-center" v-if="match.stats">
+          {{ match.stats.kills ? match.stats.kills : "0" }}
+        </td>
+        <td class="td-assists text-center" v-if="match.stats">
+          {{ match.stats.assists ? match.stats.assists : "0" }}
+        </td>
+        <td class="td-deaths text-center" v-if="match.stats">
+          {{ match.stats.deaths ? match.stats.deaths : "0" }}
+        </td>
+        <td :class="(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
+            class="td-plus text-center" v-if="match.stats">
+          {{
+            (match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0)
+          }}
+        </td>
+        <td :class="GetHLTV_1(
+                      match.stats.kills,
+                      match.score[0] + match.score[1],
+                      match.stats.deaths,
+                      match.stats.multi_kills?.duo,
+                      match.stats.multi_kills?.triple,
+                      match.stats.multi_kills?.quad,
+                      match.stats.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
+            class="td-hltv text-center fw-bold" v-if="match.stats">
+          {{
+            GetHLTV_1(
+                match.stats.kills,
+                match.score[0] + match.score[1],
+                match.stats.deaths,
+                match.stats.multi_kills?.duo,
+                match.stats.multi_kills?.triple,
+                match.stats.multi_kills?.quad,
+                match.stats.multi_kills?.pent)
+          }}
+        </td>
+        <td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
+          {{ FormatDuration(match.duration) }}
+
+        </td>
+        <td :title="FormatFullDate(match.date)" class="td-date">
+          {{ FormatDate(match.date) }}
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import {FormatDate, FormatDuration, FormatFullDate, FormatFullDuration, GetHLTV_1, GetWinLoss, GoToMatch, MatchNotParsedTime, DisplayRank} from "@/utils";
+import {onMounted, reactive, watch} from "vue";
+
+export default {
+  name: "MatchesTable",
+  props: {
+    matches: {
+      type: Array,
+      required: false
+    },
+    explore: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props) {
+    const data = reactive({
+      matches: []
+    })
+
+    onMounted(() => {
+      data.matches = props.matches
+    })
+
+    watch(() => props.matches, () => {
+      data.matches = props.matches
+    })
+
+    return {props, data, FormatDate, FormatFullDate, FormatDuration, FormatFullDuration, GetHLTV_1, GetWinLoss, GoToMatch, MatchNotParsedTime, DisplayRank}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+table {
+  margin-bottom: 0;
+
+  tr {
+    th {
+      line-height: 1;
+    }
+
+    td {
+      line-height: 60px;
+      font-size: 1rem;
+    }
+
+    th:last-child, td:last-child {
+      text-align: right;
+      width: 150px;
+    }
+
+    th[title] {
+      text-decoration: underline dotted grey;
+    }
+
+    td {
+      vertical-align: middle;
+    }
+
+    .map {
+      padding-left: 3rem;
+    }
+
+    .match-len {
+      width: 18px;
+      height: 18px;
+    }
+
+    .td-map {
+      position: relative;
+      padding-left: 3rem;
+      text-align: left !important;
+      width: 50px;
+
+      .parsed {
+        position: absolute;
+        left: 7px;
+        bottom: 23px;
+        color: var(--bs-warning);
+        font-size: 1.7rem;
+      }
+
+      .not-yet-parsed {
+        position: absolute;
+        left: 10px;
+        bottom: 25px;
+        color: darkgrey;
+        font-size: 1.7rem;
+      }
+
+      .map-not-found {
+        position: absolute;
+        top: 4px;
+        left: 48px;
+        font-size: 4.35rem;
+        color: rgba(255, 193, 7, .86);
+      }
+
+      img {
+        width: 60px;
+        height: auto;
+      }
+    }
+
+    .td-rank {
+      .uprank {
+        box-shadow: 0 0 20px greenyellow;
+        border: 1px solid greenyellow;
+        border-radius: 5px;
+      }
+
+      .downrank {
+        box-shadow: 0 0 20px #ff2f2f;
+        border: 1px solid #ff2f2f;
+        border-radius: 5px;
+      }
+
+      img {
+        width: 70px;
+        height: auto;
+
+        .rank-icon {
+          height: 35px;
+        }
+      }
+    }
+
+    .td-score {
+      font-size: 1.2rem;
+      width: 120px;
+    }
+
+    .td-date, .date {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .match {
+    $first: rgb(0, 0, 0);
+    $last: rgb(0, 0, 0);
+    $win: false;
+    $loss: false;
+    $draw: false;
+    $ban: false;
+
+    &.default {
+      background: linear-gradient(to right,
+          rgba($first, 0.2) 0%,
+          rgba($first, 0.1) 15%,
+          rgba(0, 0, 0, 0.4) 30%,
+          rgba(0, 0, 0, 0.4) 70%,
+          rgba($last, 0.6) 80%,
+          rgba($last, 0.6) 100%
+      );
+
+      &:hover {
+        background: linear-gradient(to right,
+            rgba($first, 0.3) 0%,
+            rgba($first, 0.2) 15%,
+            rgba(0, 0, 0, 0.5) 30%,
+            rgba(0, 0, 0, 0.5) 70%,
+            rgba($last, 0.7) 80%,
+            rgba($last, 0.7) 100%
+        );
+      }
+    }
+
+    &.win {
+      $first: rgb(0, 255, 0);
+      background: linear-gradient(to right,
+          rgba($first, 0.2) 0%,
+          rgba($first, 0.1) 15%,
+          rgba(0, 0, 0, 0.4) 30%,
+          rgba(0, 0, 0, 0.4) 70%,
+          rgba($last, 0.6) 80%,
+          rgba($last, 0.6) 100%
+      );
+
+      &:hover {
+        background: linear-gradient(to right,
+            rgba($first, 0.3) 0%,
+            rgba($first, 0.2) 15%,
+            rgba(0, 0, 0, 0.5) 30%,
+            rgba(0, 0, 0, 0.5) 70%,
+            rgba($last, 0.7) 80%,
+            rgba($last, 0.7) 100%
+        );
+      }
+    }
+
+    &.draw {
+      $first: rgb(255, 255, 0);
+      background: linear-gradient(to right,
+          rgba($first, 0.2) 0%,
+          rgba($first, 0.1) 15%,
+          rgba(0, 0, 0, 0.4) 30%,
+          rgba(0, 0, 0, 0.4) 70%,
+          rgba($last, 0.6) 80%,
+          rgba($last, 0.6) 100%
+      );
+
+      &:hover {
+        background: linear-gradient(to right,
+            rgba($first, 0.3) 0%,
+            rgba($first, 0.2) 15%,
+            rgba(0, 0, 0, 0.5) 30%,
+            rgba(0, 0, 0, 0.5) 70%,
+            rgba($last, 0.7) 80%,
+            rgba($last, 0.7) 100%
+        );
+      }
+    }
+
+    &.loss {
+      $first: rgb(255, 0, 0);
+      background: linear-gradient(to right,
+          rgba($first, 0.2) 0%,
+          rgba($first, 0.1) 15%,
+          rgba(0, 0, 0, 0.4) 30%,
+          rgba(0, 0, 0, 0.4) 70%,
+          rgba($last, 0.6) 80%,
+          rgba($last, 0.6) 100%
+      );
+
+      &:hover {
+        background: linear-gradient(to right,
+            rgba($first, 0.3) 0%,
+            rgba($first, 0.2) 15%,
+            rgba(0, 0, 0, 0.5) 30%,
+            rgba(0, 0, 0, 0.5) 70%,
+            rgba($last, 0.7) 80%,
+            rgba($last, 0.7) 100%
+        );
+      }
+    }
+
+
+    &.ban {
+      $last: rgb(93, 3, 3);
+      background: linear-gradient(to right,
+          rgba($first, 0.2) 0%,
+          rgba($first, 0.1) 15%,
+          rgba(0, 0, 0, 0.4) 30%,
+          rgba(0, 0, 0, 0.4) 70%,
+          rgba($last, 0.6) 80%,
+          rgba($last, 0.6) 100%
+      );
+
+      &:hover {
+        background: linear-gradient(to right,
+            rgba($first, 0.3) 0%,
+            rgba($first, 0.2) 15%,
+            rgba(0, 0, 0, 0.5) 30%,
+            rgba(0, 0, 0, 0.5) 70%,
+            rgba($last, 0.7) 80%,
+            rgba($last, 0.7) 100%
+        );
+      }
+    }
+
+    border-bottom: 1px solid rgba(73, 73, 73, 0.73);
+
+    &:last-child {
+      border: none;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .map {
+    padding-left: 2.2rem !important;
+  }
+
+  .td-map {
+    position: relative;
+    padding-left: 2.2rem !important;
+    width: 35px !important;
+
+    .parsed {
+      position: absolute;
+      left: .3rem !important;
+    }
+
+    .not-yet-parsed {
+      position: absolute;
+      left: .3rem !important;
+    }
+
+    img {
+      width: 40px !important;
+      height: auto;
+    }
+  }
+  .td-rank img {
+    width: 50px !important;
+    height: auto;
+    max-width: 50px;
+  }
+
+  .td-score {
+    font-size: 1rem !important;
+    max-width: 90px;
+  }
+
+  .td-date {
+    font-size: 1rem !important;
+  }
+
+  .kills, .deaths, .assists, .kdiff, .duration, .hltv, .length,
+  .td-kills, .td-deaths, .td-assists, .td-plus, .td-duration, .td-hltv, .td-length {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 991px) {
+  .avatar {
+    width: 100px !important;
+    height: 100px !important;
+  }
+  .trackme-btn {
+    top: 25px;
+  }
+  .map, .td-map {
+    padding-left: 4rem !important;
+  }
+}
+
+@media screen and (max-width: 1199px) {
+  .td-plus, .kdiff {
+    display: none;
+  }
+}
+</style>

src/components/Nav.vue

@@ -14,8 +14,8 @@
             </router-link>
           </li>
           <li class="nav-item">
-            <router-link class="nav-link" to="/explore" @click="closeNav('mainNav')">
+            <router-link class="nav-link" to="/matches" @click="closeNav('mainNav')">
-              Explore
+              Matches
             </router-link>
           </li>
         </ul>

src/router/index.js

@@ -17,7 +17,7 @@ const routes = [
     }
   },
   {
-    path: '/explore',
+    path: '/matches',
     name: 'Explore',
     components: {
       main: lazyLoadView('Explore')

src/utils/ApiRequests.js

@@ -2,6 +2,17 @@ import axios from "axios";
 
 const API_URL = process.env.VUE_APP_API_URL
 
+export const GetMatches = async () => {
+  try {
+    const res = await axios.get(`${API_URL}/matches`)
+
+    if (res.status === 200)
+      return res.data
+  } catch (err) {
+    // TODO: Error handling
+    console.log(err.response.status, err.response.statusText)
+  }
+}
 
 export const GetUser = async (id) => {
   try {

src/utils/Utils.js

@@ -67,20 +67,6 @@ export const constructAvatarUrl = (hash, size) => {
   }
 }
 
-export const GetAvgRank = (stats) => {
-  let count = 0
-  let fullRank = 0
-
-  stats.map(player => {
-    if (player.rank?.old) {
-      fullRank += player.rank?.old
-      count += 1
-    }
-  })
-
-  return count === 0 ? 0 : Math.floor(fullRank / count)
-}
-
 export const sortObjectValue = (obj, direction = 'asc') => {
   const sortable = []
   for (let key in obj) {

src/utils/index.js

@@ -3,13 +3,12 @@ import {GoToLink, GoToMatch, GoToPlayer} from "./GoTo";
 import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
 import {GetHLTV_1} from "./HLTV";
 import {DisplayRank, LoadImage} from "./Display";
-import {GetMatchDetails, GetPlayerMeta, GetPlayerValue, GetUser, LoadMoreMatches, TrackMe, GetWeaponDmg} from "./ApiRequests";
+import {GetMatchDetails, GetPlayerMeta, GetPlayerValue, GetUser, LoadMoreMatches, TrackMe, GetWeaponDmg, GetMatches} from "./ApiRequests";
 import {
   checkStatEmpty,
   closeNav,
   constructAvatarUrl,
   FixMapName,
-  GetAvgRank,
   getPlayerArr,
   GetWinLoss,
   setTitle,
@@ -44,10 +43,10 @@ export {
   checkStatEmpty,
   getPlayerArr,
   constructAvatarUrl,
-  GetAvgRank,
   FixMapName,
   closeNav,
   sortObjectValue,
   GetWeaponDmg,
-  CreatePlayersArray
+  CreatePlayersArray,
+  GetMatches
 }

src/views/Explore.vue

@@ -1,21 +1,73 @@
 <template>
-  <div class="container text-center">
+  <img alt="" class="bg-img" src="">
-    <h1>This site will be available soon</h1>
+
+  <div class="wrapper">
+    <div class="container-lg text-center">
+      <h3>Recent matches</h3>
+      <MatchesTable v-if="data.matches" :key="data.matches" :explore="true" :matches="data.matches"/>
+    </div>
   </div>
 </template>
 
 <script>
+import {onMounted, reactive} from "vue";
+import {GetMatches, LoadImage, MatchNotParsedTime} from "@/utils";
+import MatchesTable from "@/components/MatchesTable";
+
 export default {
   name: 'Explore',
+  components: {MatchesTable},
   // TODO: Events / Lans etc. +
   setup() {
-    document.title = "Explore | csgoWTF"
+    document.title = "Matches | csgoWTF"
+    const data = reactive({
+      matches: []
+    })
+
+    onMounted(async () => {
+      data.matches = await GetMatches()
+
+      if (data.matches[0].map) {
+        await LoadImage(data.matches[0].map)
+      } else if (!data.matches[0].map && MatchNotParsedTime(data.matches[0].date) && data.matches[1].map) {
+        await LoadImage(data.matches[1].map)
+      } else {
+        await LoadImage('random')
+      }
+
+      console.log(data.matches)
+    })
+
+    return {data}
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-.container {
+.bg-img {
-  margin: 200px auto;
+  z-index: -1;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  overflow: hidden;
+}
+
+.wrapper {
+  background: rgba(0, 0, 0, .7);
+}
+
+.container-lg {
+  padding: 2rem;
+
+  h3 {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (max-width: 1200px) {
+  .container-lg {
+    padding: 2rem 1rem;
+  }
 }
 </style>

src/views/Match.vue

@@ -48,9 +48,9 @@
           <span v-if="data.matchDetails.parsed" class="text-muted px-2">—</span>
 
           <img v-if="data.matchDetails.parsed"
-               :alt="DisplayRank(data.avgRank)[1]"
+               :alt="DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[1]"
-               :src="DisplayRank(data.avgRank)[0]"
+               :src="DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[0]"
-               :title="'Average Rank: ' + DisplayRank(data.avgRank)[1]"
+               :title="'Average Rank: ' + DisplayRank(Math.floor(data.matchDetails.avg_rank || 0))[1]"
                class="rank-icon"/>
 
           <span v-if="data.matchDetails.parsed && data.matchDetails.replay_url" class="text-muted px-2">—</span>
@@ -63,7 +63,8 @@
                 <i id="downloadDemo" aria-hidden="true" class="fa fa-download mx-2"></i>
               </a>
               <a v-if="data.matchDetails.share_code"
-                 :href="'steam://rungame/730/76561202255233023/+csgo_download_match ' + data.matchDetails.share_code" title="Watch Demo">
+                 :href="'steam://rungame/730/76561202255233023/+csgo_download_match ' + data.matchDetails.share_code"
+                 title="Watch Demo">
                 <i id="replayDemo" aria-hidden="true" class="fa fa-television mx-2"></i>
               </a>
             </div>
@@ -130,7 +131,6 @@ import {
   FixMapName,
   FormatDuration,
   FormatFullDate,
-  GetAvgRank,
   GetMatchDetails,
   GoToLink,
   LoadImage
@@ -154,7 +154,6 @@ export default {
       matchDetails: {},
       stats: [],
       score: [0],
-      avgRank: 0,
     })
 
     // Functions
@@ -182,7 +181,6 @@ export default {
           type: 'changePlayesArr',
           data: CreatePlayersArray(data.stats)
         })
-        data.avgRank = GetAvgRank(data.stats)
 
         console.log(data.matchDetails)
       } else {

src/views/Player.vue

@@ -117,109 +117,12 @@
       </div>
       <div class="match-container d-flex">
         <div class="matches">
-          <table v-if="store.state.playerDetails.matches" class="table table-borderless">
-            <thead class="border-bottom">
-            <tr>
-              <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 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>
-              <th class="text-center assists" scope="col">A</th>
-              <th class="text-center deaths" scope="col">D</th>
-              <th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio">+/-</th>
-              <th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating">Rating</th>
-              <th class="text-center duration" scope="col">Duration</th>
-              <th class="date" scope="col">Date</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr v-for="match in data.matches"
-                :key="match.match_id"
-                :class="GetWinLoss(match.match_result, match.stats.team_id) + (match.vac || match.game_ban ? ' ban' : '')"
-                :title="match.vac ? 'VAC-banned player in this game' : match.game_ban ? 'Game-banned player in this game' : ''"
-                class="match"
-                @click="GoToMatch(match.match_id)"
-            >
-              <td class="td-map text-center">
-                <i v-if="match.parsed" class="fa fa-bar-chart parsed" style="cursor: help"
-                   title="Demo has been parsed for additional data"></i>
-                <i v-if="!match.parsed && MatchNotParsedTime(match.date)" class="fa fa-hourglass-half not-yet-parsed" style="cursor: help"
-                   title="Match has not been parsed yet"></i>
-                <img v-if="match.map"
-                     :alt="match.map ? match.map : 'Map not found'"
-                     :src="match.map !== '' ? require('../assets/images/map_icons/map_icon_' + match.map + '.svg') : require('../assets/images/map_icons/map_icon_lobby_mapveto.svg')"
-                     :title="match.map"
-                     class="map-icon">
-                <i v-else title="Match not parsed" class="fa fa-question-circle-o map-not-found"></i>
-              </td>
-              <td class="td-rank text-center">
-                <img
-                    :alt="DisplayRank(match.stats.rank?.new)[1]"
-                    :class="match.stats.rank?.new > match.stats.rank?.old ? 'uprank' : match.stats.rank?.new < match.stats.rank?.old ? 'downrank' : ''"
-                    :src="DisplayRank(match.stats.rank?.new)[0]"
-                    :title="DisplayRank(match.stats.rank?.new)[1]"
-                    class="rank-icon">
-              </td>
-              <td class="td-length text-center">
-                <img v-if="match.max_rounds === 30 || !match.max_rounds" alt="Match long"
-                     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">
-                {{ match.score[0] }} - {{ match.score[1] }}
-              </td>
-              <td class="td-kills text-center">
-                {{ match.stats.kills ? match.stats.kills : "0" }}
-              </td>
-              <td class="td-assists text-center">
-                {{ match.stats.assists ? match.stats.assists : "0" }}
-              </td>
-              <td class="td-deaths text-center">
-                {{ match.stats.deaths ? match.stats.deaths : "0" }}
-              </td>
-              <td :class="(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
-                  class="td-plus text-center">
-                {{
-                  (match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0)
-                }}
-              </td>
-              <td :class="GetHLTV_1(
-                      match.stats.kills,
-                      match.score[0] + match.score[1],
-                      match.stats.deaths,
-                      match.stats.multi_kills?.duo,
-                      match.stats.multi_kills?.triple,
-                      match.stats.multi_kills?.quad,
-                      match.stats.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
-                  class="td-hltv text-center fw-bold">
-                {{
-                  GetHLTV_1(
-                      match.stats.kills,
-                      match.score[0] + match.score[1],
-                      match.stats.deaths,
-                      match.stats.multi_kills?.duo,
-                      match.stats.multi_kills?.triple,
-                      match.stats.multi_kills?.quad,
-                      match.stats.multi_kills?.pent)
-                }}
-              </td>
-              <td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
-                {{ FormatDuration(match.duration) }}
 
-              </td>
+          <MatchesTable v-if="store.state.playerDetails.matches" :matches="store.state.playerDetails.matches"/>
-              <td :title="FormatFullDate(match.date)" class="td-date">
-                {{ FormatDate(match.date) }}
-              </td>
-            </tr>
-            </tbody>
-          </table>
           <h5 v-else>No matches on record</h5>
+
         </div>
+
         <div v-if="store.state.playerDetails.matches" class="side-info">
           <div v-if="data.playerMeta.most_mates" class="side-info-box most-played-with">
             <div class="heading">
@@ -314,30 +217,26 @@ import {
   constructAvatarUrl,
   DisplayRank,
   FixMapName,
-  FormatDate,
-  FormatDuration,
-  FormatFullDate,
-  FormatFullDuration,
   FormatVacDate,
-  GetHLTV_1,
   GetPlayerMeta,
   GetUser,
   GetWinLoss,
   GoToLink,
-  GoToMatch,
   GoToPlayer,
   LoadImage,
   LoadMoreMatches,
+  MatchNotParsedTime,
   SaveLastVisitedToLocalStorage,
   setTitle,
   sortObjectValue,
-  TrackMe,
+  TrackMe
-  MatchNotParsedTime
 } from "../utils";
 import {FOOTER_HEIGHT, NAV_HEIGHT} from "@/constants";
+import MatchesTable from "@/components/MatchesTable";
 
 export default {
   name: 'Player',
+  components: {MatchesTable},
   props: ['id'],
   setup(props) {
     // Variables
@@ -562,12 +461,6 @@ export default {
       RefreshData,
       TrackMe,
       GetWinLoss,
-      FormatDate,
-      FormatFullDate,
-      FormatDuration,
-      FormatFullDuration,
-      GoToMatch,
-      GetHLTV_1,
       DisplayRank,
       constructAvatarUrl,
       FormatVacDate,
@@ -806,225 +699,6 @@ export default {
   }
 }
 
-table {
-  margin-bottom: 0;
-
-  tr {
-    th {
-      line-height: 1;
-    }
-
-    td {
-      line-height: 60px;
-      font-size: 1rem;
-    }
-
-    th:last-child, td:last-child {
-      text-align: right;
-      width: 150px;
-    }
-
-    th[title] {
-      text-decoration: underline dotted grey;
-    }
-
-    td {
-      vertical-align: middle;
-    }
-
-    .map {
-      padding-left: 3rem;
-    }
-
-    .match-len {
-      width: 18px;
-      height: 18px;
-    }
-
-    .td-map {
-      position: relative;
-      padding-left: 3rem;
-      text-align: left !important;
-      width: 50px;
-
-      .parsed {
-        position: absolute;
-        left: 7px;
-        bottom: 23px;
-        color: var(--bs-warning);
-        font-size: 1.7rem;
-      }
-
-      .not-yet-parsed {
-        position: absolute;
-        left: 10px;
-        bottom: 25px;
-        color: darkgrey;
-        font-size: 1.7rem;
-      }
-
-      .map-not-found {
-        position: absolute;
-        top: 4px;
-        left: 48px;
-        font-size: 4.35rem;
-        color: rgba(255, 193, 7, .86);
-      }
-
-      img {
-        width: 60px;
-        height: auto;
-      }
-    }
-
-    .td-rank {
-      .uprank {
-        box-shadow: 0 0 20px greenyellow;
-        border: 1px solid greenyellow;
-        border-radius: 5px;
-      }
-
-      .downrank {
-        box-shadow: 0 0 20px #ff2f2f;
-        border: 1px solid #ff2f2f;
-        border-radius: 5px;
-      }
-
-      img {
-        width: 70px;
-        height: auto;
-
-        .rank-icon {
-          height: 35px;
-        }
-      }
-    }
-
-    .td-score {
-      font-size: 1.2rem;
-      width: 120px;
-    }
-
-    .td-date, .date {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .match {
-    $first: rgb(0, 0, 0);
-    $last: rgb(0, 0, 0);
-    $win: false;
-    $loss: false;
-    $draw: false;
-    $ban: false;
-
-    &.win {
-      $first: rgb(0, 255, 0);
-      background: linear-gradient(to right,
-          rgba($first, 0.2) 0%,
-          rgba($first, 0.1) 15%,
-          rgba(0, 0, 0, 0.4) 30%,
-          rgba(0, 0, 0, 0.4) 70%,
-          rgba($last, 0.6) 80%,
-          rgba($last, 0.6) 100%
-      );
-
-      &:hover {
-        background: linear-gradient(to right,
-            rgba($first, 0.3) 0%,
-            rgba($first, 0.2) 15%,
-            rgba(0, 0, 0, 0.5) 30%,
-            rgba(0, 0, 0, 0.5) 70%,
-            rgba($last, 0.7) 80%,
-            rgba($last, 0.7) 100%
-        );
-      }
-    }
-
-    &.draw {
-      $first: rgb(255, 255, 0);
-      background: linear-gradient(to right,
-          rgba($first, 0.2) 0%,
-          rgba($first, 0.1) 15%,
-          rgba(0, 0, 0, 0.4) 30%,
-          rgba(0, 0, 0, 0.4) 70%,
-          rgba($last, 0.6) 80%,
-          rgba($last, 0.6) 100%
-      );
-
-      &:hover {
-        background: linear-gradient(to right,
-            rgba($first, 0.3) 0%,
-            rgba($first, 0.2) 15%,
-            rgba(0, 0, 0, 0.5) 30%,
-            rgba(0, 0, 0, 0.5) 70%,
-            rgba($last, 0.7) 80%,
-            rgba($last, 0.7) 100%
-        );
-      }
-    }
-
-    &.loss {
-      $first: rgb(255, 0, 0);
-      background: linear-gradient(to right,
-          rgba($first, 0.2) 0%,
-          rgba($first, 0.1) 15%,
-          rgba(0, 0, 0, 0.4) 30%,
-          rgba(0, 0, 0, 0.4) 70%,
-          rgba($last, 0.6) 80%,
-          rgba($last, 0.6) 100%
-      );
-
-      &:hover {
-        background: linear-gradient(to right,
-            rgba($first, 0.3) 0%,
-            rgba($first, 0.2) 15%,
-            rgba(0, 0, 0, 0.5) 30%,
-            rgba(0, 0, 0, 0.5) 70%,
-            rgba($last, 0.7) 80%,
-            rgba($last, 0.7) 100%
-        );
-      }
-    }
-
-
-    &.ban {
-      $last: rgb(93, 3, 3);
-      background: linear-gradient(to right,
-          rgba($first, 0.2) 0%,
-          rgba($first, 0.1) 15%,
-          rgba(0, 0, 0, 0.4) 30%,
-          rgba(0, 0, 0, 0.4) 70%,
-          rgba($last, 0.6) 80%,
-          rgba($last, 0.6) 100%
-      );
-
-      &:hover {
-        background: linear-gradient(to right,
-            rgba($first, 0.3) 0%,
-            rgba($first, 0.2) 15%,
-            rgba(0, 0, 0, 0.5) 30%,
-            rgba(0, 0, 0, 0.5) 70%,
-            rgba($last, 0.7) 80%,
-            rgba($last, 0.7) 100%
-        );
-      }
-    }
-
-    border-bottom: 1px solid rgba(73, 73, 73, 0.73);
-
-    &:last-child {
-      border: none;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-
 @media screen and (max-width: 768px) {
   .card {
     .avatar {
@@ -1045,50 +719,6 @@ table {
       }
     }
   }
-
-  .map {
-    padding-left: 2.2rem !important;
-  }
-
-  .td-map {
-    position: relative;
-    padding-left: 2.2rem !important;
-    width: 35px !important;
-
-    .parsed {
-      position: absolute;
-      left: .3rem !important;
-    }
-
-    .not-yet-parsed {
-      position: absolute;
-      left: .3rem !important;
-    }
-
-    img {
-      width: 40px !important;
-      height: auto;
-    }
-  }
-  .td-rank img {
-    width: 50px !important;
-    height: auto;
-    max-width: 50px;
-  }
-
-  .td-score {
-    font-size: 1rem !important;
-    max-width: 90px;
-  }
-
-  .td-date {
-    font-size: 1rem !important;
-  }
-
-  .kills, .deaths, .assists, .kdiff, .duration, .hltv, .length,
-  .td-kills, .td-deaths, .td-assists, .td-plus, .td-duration, .td-hltv, .td-length {
-    display: none;
-  }
 }
 
 @media screen and (max-width: 991px) {
@@ -1098,18 +728,5 @@ table {
   .side-info {
     display: none !important;
   }
-  .avatar {
-    width: 100px !important;
-    height: 100px !important;
-  }
-  .trackme-btn {
-    top: 25px;
-  }
-}
-
-@media screen and (max-width: 1199px) {
-  .td-plus, .kdiff {
-    display: none;
-  }
 }
 </style>