mobile support for home and player

scss/custom.scss

@@ -17,5 +17,13 @@ $warning: #c3a235;
 $info: $blue;
 $success: #609926;
 
+// Custom classes
+.mt-n5 {
+  margin-top: -3rem !important;
+}
+.mt-n4 {
+  margin-top: -2rem !important;
+}
+
 // Bootstrap
 @import "../node_modules/bootstrap/scss/bootstrap";

src/components/Footer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bg-secondary text-center pt-5 pb-4">
     <div class="icons pb-4">
-      <a class="text-white" target="_blank" href="https://git.harting.dev/CSGOWTF/csgowtf">
+      <a class="text-white" target="_blank" href="https://git.harting.dev/CSGOWTF">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github"
              viewBox="0 0 16 16">
           <path
@@ -10,10 +10,8 @@
       </a>
     </div>
     <div class="text">
-      <p>This site is an open source project, originally created and maintained by <span class="text-warning">anonfunc</span> and <span
+      <p>This site is an open source project, originally created and maintained by the <span class="text-warning">CSGOWTF</span> team.</p>
-          class="text-warning">vikingowl</span>.</p>
+      <p class="text-muted">For feedback contact us on gitea.</p>
-      <p class="text-muted">For feedback contact us at <a class="text-muted text-decoration-none"
-                                                          href="mailto:#">EMAIL</a></p>
     </div>
   </div>
 </template>

src/components/Nav.vue

@@ -1,21 +1,21 @@
 <template>
   <nav class="navbar navbar-expand navbar-dark fixed-top">
-    <div class="container-fluid w-75">
+    <div class="container">
-      <div class="navbar-nav">
+      <div class="navbar-nav fs-5">
-        <router-link class="navbar-brand text-warning fw-bold fs-3" to="/">CSGO<span class="text-up text-white fw-bold">WTF</span>
+        <router-link class="navbar-brand text-warning fw-bold fs-3" to="/">
+          CSGO<span class="text-up text-white fw-bold">WTF</span>
         </router-link>
         <router-link class="nav-link" to="/explore">Explore</router-link>
       </div>
-      <form class="d-flex col-5 justify-content-end" @keydown.enter.prevent="parseSearch">
+      <form class="d-flex justify-content-end" @keydown.enter.prevent="parseSearch">
         <label for="search">
-          <svg class="bi bi-search" fill="currentColor" height="24" viewBox="0 0 16 16" width="24"
+          <svg class="bi bi-search" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-               xmlns="http://www.w3.org/2000/svg">
             <path
                 d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
           </svg>
         </label>
         <input id="search" v-model="data.searchInput" aria-label="Search"
-               class="form-control w-75 bg-transparent border-0"
+               class="form-control bg-transparent border-0"
                placeholder="SteamID64, Profile Link or Custom URL"
                type="search">
       </form>
@@ -68,6 +68,8 @@ export default {
           router.push(`/player/${store.state.vanityUrl}`)
         }
       }
+
+      document.activeElement.blur()
     }
 
     return {
@@ -79,6 +81,7 @@ export default {
 
 <style lang="scss" scoped>
 nav {
+  max-width: 100vw;
   height: 70px;
   width: 100vw;
   background: rgba(16, 18, 26, 0.5);
@@ -88,6 +91,12 @@ nav {
     vertical-align: top;
   }
 
+  svg {
+    width: 24px;
+    height: 24px;
+    fill: currentColor;
+  }
+
   label {
     padding-top: 6px;
   }
@@ -107,4 +116,16 @@ nav {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  nav input[type="search"] {
+    min-width: 0;
+    max-width: 0;
+
+    &:focus {
+      min-width: 100%;
+      max-width: 100%;
+    }
+  }
+}
 </style>

src/components/ScoreTeam.vue

@@ -1,45 +1,49 @@
 <template>
-  <table>
+  <div class="scoreboard" :class="'team-' + props.team_id">
-    <thead>
+    <table>
-    <tr>
+      <caption :class="props.score === 16 ? 'text-success' : 'text-danger'">{{props.score}}</caption>
-      <th class="player__avatar"></th>
+      <thead>
-      <th class="player__name"></th>
+      <tr>
-      <th class="player__rank"></th>
+        <th class="player__avatar"></th>
-      <th class="player__kills cursor__help" title="Kills">K</th>
+        <th class="player__name"></th>
-      <th class="player__assist cursor__help" title="Assists">A</th>
+        <th class="player__rank"></th>
-      <th class="player__deaths cursor__help" title="Deaths">D</th>
+        <th class="player__kills cursor__help" title="Kills">K</th>
-      <th class="player__diff cursor__help" title="Kill death difference">+/-</th>
+        <th class="player__assist cursor__help" title="Assists">A</th>
-      <th class="player__kd cursor__help" title="Kill death ratio">K/D</th>
+        <th class="player__deaths cursor__help" title="Deaths">D</th>
-      <th class="player__adr cursor__help" title="Average damage per round">ADR</th>
+        <th class="player__diff cursor__help" title="Kill death difference">+/-</th>
-      <th class="player__hs cursor__help" title="Percentage of kills with a headshot">HS%</th>
+        <th class="player__kd cursor__help" title="Kill death ratio">K/D</th>
-      <th class="player__kast cursor__help" title="Percentage of rounds with a Kill, Assist, Survived or Death Traded">
+        <th class="player__adr cursor__help" title="Average damage per round">ADR</th>
-        KAST
+        <th class="player__hs cursor__help" title="Percentage of kills with a headshot">HS%</th>
-      </th>
+        <th class="player__rating cursor__help" title="Estimated HLTV Rating 1.0">Rating</th>
-      <th class="player__rating cursor__help" title="Estimated HLTV Rating 1.0">Rating</th>
+        <th class="player__mvp cursor__help" title="Most valuable player">MVP</th>
-    </tr>
+        <th class="player__score">Score</th>
-    </thead>
+      </tr>
-    <tbody v-for="player in props.stats" :key="player.player.steamid64">
+      </thead>
-    <tr v-if="player.team_id === props.team_id" class="player">
+      <tbody v-for="player in props.stats" :key="player.player.steamid64">
-      <ScoreTeamPlayer
+      <tr v-if="player.team_id === props.team_id" class="player">
-          :assists="player.assists"
+        <ScoreTeamPlayer
-          :avatar="player.player.avatar"
+            :assists="player.assists"
-          :deaths="player.deaths"
+            :avatar="player.player.avatar"
-          :dmg="player.extended?.dmg?.enemy"
+            :deaths="player.deaths"
-          :hs="player.headshot"
+            :dmg="player.extended?.dmg?.enemy"
-          :kast="player.extended?.kast"
+            :hs="player.headshot"
-          :kdiff="player.kills - player.deaths"
+            :kdiff="player.kills - player.deaths"
-          :kills="player.kills"
+            :kills="player.kills"
-          :mk_duo="player.extended?.multi_kills?.duo"
+            :mk_duo="player.extended?.multi_kills?.duo"
-          :mk_pent="player.extended?.multi_kills?.pent"
+            :mk_pent="player.extended?.multi_kills?.pent"
-          :mk_quad="player.extended?.multi_kills?.quad"
+            :mk_quad="player.extended?.multi_kills?.quad"
-          :mk_triple="player.extended?.multi_kills?.triple"
+            :mk_triple="player.extended?.multi_kills?.triple"
-          :name="player.player.name"
+            :mvp="player.mvp"
-          :rounds_played="props.rounds_played"
+            :name="player.player.name"
-          :rank="player.extended?.rank?.old"
+            :player_score="player.score"
-      />
+            :rank="player.extended?.rank?.old"
-    </tr>
+            :rounds_played="props.rounds_played"
-    </tbody>
+        />
-  </table>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+  <hr v-if="props.team_id === 1">
 </template>
 
 <script>
@@ -62,10 +66,49 @@ export default {
       type: Number,
       required: true,
       default: 1
+    },
+    score: {
+      type: Number,
+      required: true,
+      default: 0
     }
   },
   setup(props) {
     return {props}
   }
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+.scoreboard {
+  margin-bottom: 20px;
+}
+
+table {
+  width: 900px;
+  text-align: center;
+  margin-top: 120px;
+  margin-bottom: -100px;
+
+  caption {
+    color: white;
+    font-size: 3rem;
+    caption-side: top;
+    padding: 0;
+    margin-left: -70px;
+    margin-bottom: -178px;
+  }
+
+  tr {
+    height: 40px;
+  }
+
+  td {
+    padding: 5px 10px;
+  }
+
+  .cursor__help {
+    cursor: help;
+  }
+}
+</style>

src/components/ScoreTeamPlayer.vue

@@ -19,7 +19,7 @@
   <td class="player__deaths">
     {{ props.deaths }}
   </td>
-  <td :class="props.kdiff >= 0 ? 'text-success' : 'text-danger'" class="player__diff">
+  <td :class="props.kdiff >= 0 ? 'text-success' : 'text-danger'" class="player__kdiff">
     {{ props.kdiff }}
   </td>
   <td class="player__kd">
@@ -31,14 +31,17 @@
   <td class="player__hs">
     {{ (props.hs > 0 && props.kills > 0) ? (props.hs * 100 / props.kills).toFixed(0) + "%" : "0%" }}
   </td>
-  <td class="player__kast">
-    {{ props.kast ? props.kast + "%" : "-" }}
-  </td>
   <td class="player__rating">
     {{
       GetHLTV_1(props.kills, props.rounds_played, props.deaths, props.mk_duo, props.mk_triple, props.mk_quad, props.mk_pent)
     }}
   </td>
+  <td class="player__mvp">
+    {{props.mvp}}
+  </td>
+  <td class="player__score">
+    {{props.player_score}}
+  </td>
 </template>
 
 <script>
@@ -112,19 +115,57 @@ export default {
       required: true,
       default: 0
     },
-    kast: {
-      type: Number,
-      required: true,
-      default: 0
-    },
     dmg: {
       type: Number,
       required: true,
       default: 0
     },
+    mvp: {
+      type: Number,
+      required: true,
+      default: 0
+    },
+    player_score: {
+      type: Number,
+      required: true,
+      default: 0
+    }
   },
   setup(props) {
     return {props, GetHLTV_1}
   }
 }
-</script>
+</script>
+
+<style scoped lang="scss">
+.player__avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+}
+
+.player__name {
+  text-align: left;
+  width: 150px;
+}
+
+.player__rank {
+  width: 60px;
+}
+
+.player__kills, .player__assist, .player__deaths, .player__kdiff, .player__mvp {
+  width: 40px;
+}
+
+.player__kd, .player__hs, .player__rating, .player__score {
+  width: 75px;
+}
+
+.player__adr {
+  width: 85px;
+}
+
+.player__rating {
+  border-radius: 25% 25%;
+}
+</style>

src/main.js

@@ -5,4 +5,4 @@ import store from './store'
 import 'bootstrap'
 import '../scss/custom.scss'
 
-createApp(App).use(store).use(router).mount('#app')
+createApp(App).use(store).use(router).mount('#app')

src/utils/index.js

@@ -1,16 +1,22 @@
-import {DateTime} from "luxon/build/es6/luxon";
+import {DateTime, Duration} from "luxon/build/es6/luxon";
-import router from '@/router'
+import router from '../router'
 
 export const FormatDuration = (d) => {
-    const hours = Math.floor(d / 3600)
+    const duration = Duration.fromObject({hours: 0, minutes: 0, seconds: d}).normalize().toObject()
-    const num = d % 3600
-    const minutes = Math.floor(num % 3600 / 60)
-    const seconds = Math.floor(num % 3600 % 60)
 
-    if (hours !== 0)
+    if (duration.hours > 1)
-        return `${hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`
+        return `${duration.hours} h ${duration.minutes} min`
-    else
+    else if (duration.hours < 1)
-        return `${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`
+        return `${duration.minutes} min`
+}
+
+export const FormatFullDuration = (d) => {
+    const duration = Duration.fromObject({hours: 0, minutes: 0, seconds: d}).normalize()
+
+    if (duration.hours > 1)
+        return duration.toFormat('hh:mm:ss')
+    else if (duration.hours < 1)
+        return duration.toFormat('mm:ss')
 }
 
 export const FormatDate = (date) => {
@@ -18,7 +24,7 @@ export const FormatDate = (date) => {
     const diff = DateTime.now().diff(matchDate)
 
     if (diff.as('days') > 10)
-        return matchDate.toLocaleString({weekday: 'short', day: 'numeric', month: 'numeric', year: 'numeric'})
+        return matchDate.toLocaleString({weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric'})
     else if (diff.as('days') < 1)
         if (diff.as('hours') < 1)
             return Math.floor(diff.as('minutes')) + ' minutes ago'
@@ -28,6 +34,20 @@ export const FormatDate = (date) => {
         return Math.floor(diff.as('days')) + ' days ago'
 }
 
+export const FormatFullDate = (date) => {
+    const matchDate = DateTime.fromISO(date)
+
+    return matchDate.toLocaleString({
+        weekday: 'short',
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    })
+}
+
 export const GoToMatch = (id) => {
     router.push(`/match/${id}`)
 }
@@ -47,4 +67,17 @@ export const GetHLTV_1 = (kills = 0, rounds, deaths = 0, k2 = 0, k3 = 0, k4 = 0,
     const RoundsWithMultipleKillsRating = (k1 + 4 * k2 + 9 * k3 + 16 * k4 + 25 * k5) / rounds / Weight_RMK
 
     return ((KillRating + 0.7 * SurvivalRating + RoundsWithMultipleKillsRating) / 2.7).toFixed(2)
+}
+
+export const SaveLastVisitedToLocalStorage = (data) => {
+    let a = JSON.parse(localStorage.getItem('recent-visited')) || [];
+    if (a.length === 0) {
+        a.push(data);
+    } else if (a.find(p => p.steamid64 === data.steamid64)) {
+        a.splice(a.findIndex(j => j.steamid64 === data.steamid64), 1)
+        a.push(data)
+    } else if (!a.find(p => p.steamid64 === data.steamid64)) {
+        a.push(data)
+    }
+    localStorage.setItem('recent-visited', JSON.stringify(a));
 }

src/views/Explore.vue

@@ -1,9 +1,21 @@
 <template>
-  Explore
+  <div class="container text-center">
+    <h1>This site will be available soon</h1>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'Explore'
+  name: 'Explore',
+  // TODO: Events / Lans etc. +
+  setup() {
+    document.title = "Explore | csgoWTF"
+  }
 }
-</script>
+</script>
+
+<style scoped>
+.container {
+  margin: 200px auto;
+}
+</style>

src/views/Home.vue

@@ -1,62 +1,77 @@
 <template>
   <div class="main-content content text-center">
-    <div class="head">
+    <div class="head pt-5 pb-5">
-      <h1 class="text-warning fw-bold">CSGO<span class="text-up text-white">WTF</span></h1>
+      <h1 class="text-warning fw-bold mt-lg-5">CSGO<span class="text-up text-white">WTF</span></h1>
-      <h3>Open source CSGO data platform</h3>
+      <h3 class="mb-lg-5">Open source CSGO data platform</h3>
     </div>
-    <div class="body row m-auto mt-5 mb-5">
+    <div class="mt-n4">
-      <div class="col-4">
+      <span class="text-muted">Image by <a class="text-decoration-none text-warning"
-        <svg class="mb-4" height="80" viewBox="0 0 24 24" width="80" xmlns="http://www.w3.org/2000/svg">
+                                           href="https://unsplash.com/photos/6ou8gWpS9ns"
-          <path d="M7,12 L14.5,12 C16.277025,12 17.7447372,10.6756742 17.970024,8.96013518 C16.2885152,8.7047201 15,7.25283448 15,5.5 C15,3.56700338 16.5670034,2 18.5,2 C20.4329966,2 22,3.56700338 22,5.5 C22,7.27155475 20.6838151,8.73569805 18.9759671,8.96790818 C18.7419236,11.2333126 16.8272778,13 14.5,13 L7,13 L7,15.0354444 C8.69614707,15.2780593 10,16.736764 10,18.5 C10,20.4329966 8.43299662,22 6.5,22 C4.56700338,22 3,20.4329966 3,18.5 C3,16.736764 4.30385293,15.2780593 6,15.0354444 L6,8.96455557 C4.30385293,8.72194074 3,7.26323595 3,5.5 C3,3.56700338 4.56700338,2 6.5,2 C8.43299662,2 10,3.56700338 10,5.5 C10,7.26323595 8.69614707,8.72194074 7,8.96455557 L7,12 Z M4,18.5 C4,19.8807119 5.11928813,21 6.5,21 C7.88071187,21 9,19.8807119 9,18.5 C9,17.1192881 7.88071187,16 6.5,16 C5.11928813,16 4,17.1192881 4,18.5 Z M4,5.5 C4,6.88071187 5.11928813,8 6.5,8 C7.88071187,8 9,6.88071187 9,5.5 C9,4.11928813 7.88071187,3 6.5,3 C5.11928813,3 4,4.11928813 4,5.5 Z M18.5,3 C17.1192881,3 16,4.11928813 16,5.5 C16,6.88071187 17.1192881,8 18.5,8 C19.8807119,8 21,6.88071187 21,5.5 C21,4.11928813 19.8807119,3 18.5,3 Z"
+                                           target="_blank">Fredrick Tendong</a></span>
-                fill="white"/>
+    </div>
+    <div v-if="recentVisited !== null" class="recent-search mt-5 mb-5 row gap-2 justify-content-center">
+      <h4 class="mb-3s">Recently visited players</h4>
+      <div v-for="player in recentVisited" :key="player.steamid64" class="player-card"
+           @click="GoToPlayer(player.steamid64)">
+        <div class="p-2">
+          <div class="col-md-4 m-auto">
+            <img :alt="player.name" :src="player.avatar">
+          </div>
+          <div class="col-md-8 m-auto">
+            <p>{{ player.name }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <hr v-if="recentVisited !== null" class="m-auto text-muted">
+    <div class="body container m-auto row mt-5 mb-5 justify-content-center">
+      <div class="col-sm-12 col-md-4 col-lg-3">
+        <svg class="mb-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path
+              d="M7,12 L14.5,12 C16.277025,12 17.7447372,10.6756742 17.970024,8.96013518 C16.2885152,8.7047201 15,7.25283448 15,5.5 C15,3.56700338 16.5670034,2 18.5,2 C20.4329966,2 22,3.56700338 22,5.5 C22,7.27155475 20.6838151,8.73569805 18.9759671,8.96790818 C18.7419236,11.2333126 16.8272778,13 14.5,13 L7,13 L7,15.0354444 C8.69614707,15.2780593 10,16.736764 10,18.5 C10,20.4329966 8.43299662,22 6.5,22 C4.56700338,22 3,20.4329966 3,18.5 C3,16.736764 4.30385293,15.2780593 6,15.0354444 L6,8.96455557 C4.30385293,8.72194074 3,7.26323595 3,5.5 C3,3.56700338 4.56700338,2 6.5,2 C8.43299662,2 10,3.56700338 10,5.5 C10,7.26323595 8.69614707,8.72194074 7,8.96455557 L7,12 Z M4,18.5 C4,19.8807119 5.11928813,21 6.5,21 C7.88071187,21 9,19.8807119 9,18.5 C9,17.1192881 7.88071187,16 6.5,16 C5.11928813,16 4,17.1192881 4,18.5 Z M4,5.5 C4,6.88071187 5.11928813,8 6.5,8 C7.88071187,8 9,6.88071187 9,5.5 C9,4.11928813 7.88071187,3 6.5,3 C5.11928813,3 4,4.11928813 4,5.5 Z M18.5,3 C17.1192881,3 16,4.11928813 16,5.5 C16,6.88071187 17.1192881,8 18.5,8 C19.8807119,8 21,6.88071187 21,5.5 C21,4.11928813 19.8807119,3 18.5,3 Z"
+              fill="white"/>
         </svg>
         <h4 class="fw-light">Open Source</h4>
-        <p class="w-75 m-auto fw-light">All project code is open source and available for contributors to improve and
+        <p class="fw-light">All project code is open source and available for contributors to improve and
           modify.</p>
       </div>
-      <div class="col-4">
+      <div class="col-sm-12 col-md-4 col-lg-3">
-        <svg class="bi bi-bar-chart-fill mb-4" fill="currentColor" height="80" viewBox="0 0 16 16"
+        <svg class="bi bi-bar-chart-fill mb-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-             width="80" xmlns="http://www.w3.org/2000/svg">
           <path
               d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z"/>
         </svg>
         <h4 class="fw-light">In-Depth Data</h4>
-        <p class="w-75 m-auto fw-light">Parsing replay files provides highly detailed match data.</p>
+        <p class="fw-light">Parsing replay files provides highly detailed match data.</p>
       </div>
-      <div class="col-4">
+      <div class="col-sm-12 col-md-4 col-lg-3">
-        <svg class="bi bi-stars mb-4" fill="currentColor" height="80" viewBox="0 0 16 16" width="80"
+        <svg class="bi bi-stars mb-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-             xmlns="http://www.w3.org/2000/svg">
           <path
               d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
         </svg>
         <h4 class="fw-light">Free of Charge</h4>
-        <p class="w-75 m-auto fw-light">This service is free of charge. If you want to support us, just contact us.</p>
+        <p class="fw-light">This service is free of charge. If you want to support us, just contact us.</p>
       </div>
     </div>
-    <hr class="m-auto text-muted">
-    <div class="foot">
-      MORE TEXT
-    </div>
-    <span class="image-by">Image by <a class="text-decoration-none text-info" href="https://unsplash.com/photos/6ou8gWpS9ns"
-                                       target="_blank">Fredrick Tendong</a></span>
   </div>
 </template>
 
 <script>
-import {onMounted} from "vue";
+import {GoToPlayer} from "../utils";
 
 export default {
   name: 'Home',
   setup() {
-    onMounted(() => {
+    document.title = 'Home | csgoWTF'
-      document.title = 'Home | CSGO-W.TV'
+
-    })
+    const recentVisited = JSON.parse(localStorage.getItem('recent-visited')).reverse()
+
+    return {recentVisited, GoToPlayer}
   }
 }
 </script>
 
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .main-content {
   .head {
     background-image: url("https://images.unsplash.com/photo-1560419015-7c427e8ae5ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80");
@@ -64,9 +79,6 @@ export default {
     background-size: cover;
     background-position: center;
 
-    padding-top: 10rem;
-    padding-bottom: 10rem;
-
     h1 {
       font-size: 5rem;
 
@@ -89,24 +101,55 @@ export default {
     }
   }
 
-  .body, hr {
+  .recent-search {
-    width: 65%;
+    max-width: 900px;
+    margin: 0 auto;
 
-    p {
+    .player-card {
-      font-size: .9rem;
+      width: 180px;
+      height: 75px;
+      background: var(--bs-primary);
+      border-radius: 5% 30%;
+
+      &:hover {
+        background: var(--bs-secondary);
+        cursor: pointer;
+      }
+
+      img {
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+      }
+
+      p {
+        font-size: .9rem;
+      }
     }
   }
 
-  .foot {
+  @media screen and (max-width: 768px) {
-    margin-top: 5rem;
+    .recent-search {
-    padding-bottom: 5rem;
+      .player-card {
+        height: 60px;
+        img {
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
   }
 
-  .image-by {
+  .body, hr {
-    position: absolute;
+    p {
-    bottom: -35px;
+      font-size: .9rem;
-    right: 2rem;
+    }
-    font-size: .8rem;
+
+    svg {
+      height: 80px;
+      width: 80px;
+      fill: currentColor;
+    }
   }
 }
 </style>

src/views/Match.vue

@@ -21,14 +21,9 @@
     </ul>
   </div>
   <div class="container row m-auto">
-    <div class="score col-3 flex-column">
+    <div v-if="data.score.length === 2 && data.stats" class="col-8 m-auto d-flex flex-column">
-      {{data.score[0]}}
+      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="1" :score="data.score[0]"/>
-      -
+      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="2" :score="data.score[1]"/>
-      {{data.score[1]}}
-    </div>
-    <div v-if="data.score.length === 2 && data.stats" class="col-9 d-flex flex-column">
-      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="1"/>
-      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="2"/>
     </div>
   </div>
 </template>
@@ -37,7 +32,6 @@
 import {defineAsyncComponent, onBeforeMount, reactive, watch} from "vue";
 import axios from 'axios'
 import {GetHLTV_1, GoToPlayer} from "../utils";
-import "../components/ScoreTeam"
 
 const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam'))
 
@@ -61,12 +55,13 @@ export default {
     // Functions
     const GetMatch = () => {
       axios
-          .get(`http://localhost:1337/http://localhost:8000/match/${props.match_id}`)
+          .get(`http://localhost:8000/match/${props.match_id}`)
           .then((response) => {
             document.title = `${response.data.map} | CSGO-W.TF`
             data.matchDetails = response.data
             data.stats = response.data.stats
             data.score = response.data.score
+            console.log(response.data)
           })
           .catch((e) => {
             console.log(e)
@@ -106,56 +101,10 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .rank-icon {
   max-width: 50px;
 }
-
-.map-icon {
-  max-width: 60px;
-}
-
-.score {
-  font-size: 3.5rem;
-}
-
-table {
-  width: 900px;
-  text-align: center;
-
-  tr {
-    height: 50px;
-  }
-
-  td {
-    padding: 5px 10px;
-  }
-
-  .cursor__help {
-    cursor: help;
-  }
-
-  .player__avatar {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-  }
-
-  .player__name {
-    text-align: left;
-    width: 150px;
-  }
-
-  .player__rank {
-    width: 60px;
-  }
-
-  .player__rating {
-    border-radius: 25% 25%;
-  }
-}
-
-
 .nav {
   width: 100vw;
   background: rgba(0, 0, 0, 0.6);

src/views/Player.vue

@@ -1,146 +1,146 @@
 <template>
-  <div class="wrapper">
+  <div class="container">
-    <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" style="max-width: 540px;">
+      <div class="row g-0">
-        <div class="row g-0">
+        <div class="img-container col-md-4 pt-3">
-          <div class="img-container col-md-4 pt-3">
+          <img
-            <img
+              :src="data.playerDetails.avatar" alt="Player avatar" class="img-fluid avatar">
-                :src="data.playerDetails.avatar" alt="Player avatar" class="img-fluid avatar">
+        </div>
-          </div>
+        <div class="col-md-8">
-          <div class="col-md-8">
+          <div class="card-body">
-            <div class="card-body">
+            <h3 class="card-title"><a
-              <h3 class="card-title"><a
+                :href="/^\d{17}$/.test(props.id) ? 'https://steamcommunity.com/profiles/' + props.id : 'https://steamcommunity.com/id/' + props.id"
-                  :href="/^\d{17}$/.test(props.id) ? 'https://steamcommunity.com/profiles/' + props.id : 'https://steamcommunity.com/id/' + props.id"
+                class="text-decoration-none text-white"
-                  class="text-decoration-none text-white"
+                target="_blank"
-                  target="_blank"
+                title="Open steam profile">{{
-                  title="Open steam profile">{{
+                data.playerDetails.name
-                  data.playerDetails.name
+              }}
-                }}
+              <svg class="bi bi-link-45deg" fill="currentColor" height="16" viewBox="0 0 16 16"
-                <svg class="bi bi-link-45deg" fill="currentColor" height="16" viewBox="0 0 16 16"
+                   width="16" xmlns="http://www.w3.org/2000/svg">
-                     width="16" xmlns="http://www.w3.org/2000/svg">
+                <path
-                  <path
+                    d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
-                      d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
+                <path
-                  <path
+                    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"/>
-                      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>
-                </svg>
+            </a></h3>
-              </a></h3>
+            <table class="table table-borderless">
-              <table class="table table-borderless">
+              <tr>
-                <tr>
+                <th class="text-uppercase text-muted">Wins</th>
-                  <th class="text-uppercase text-muted">Wins</th>
+                <th class="text-uppercase text-muted">Losses</th>
-                  <th class="text-uppercase text-muted">Losses</th>
+                <th class="text-uppercase text-muted">WinRate</th>
-                  <th class="text-uppercase text-muted">WinRate</th>
+              </tr>
-                </tr>
+              <tr>
-                <tr>
+                <td>{{ wl.win }}</td>
-                  <td>{{ wl.win }}</td>
+                <td>{{ wl.loss }}</td>
-                  <td>{{ wl.loss }}</td>
+                <td>{{ (wl.win / wl.loss * 100).toFixed(2) }}%</td>
-                  <td>{{ (wl.win / wl.loss * 100).toFixed(2) }}%</td>
+              </tr>
-                </tr>
+            </table>
-              </table>
+            <small v-if="data.playerDetails.tracked" class="card-text text-muted">
-              <small v-if="data.playerDetails.tracked" class="card-text text-muted">
+              Currently tracked
-                Currently tracked
+            </small>
-              </small>
+            <div v-else class="dropdown">
-              <div v-else class="dropdown">
+              <button
-                <button
+                  id="login-dropdown"
-                    id="login-dropdown"
+                  aria-expanded="false"
-                    aria-expanded="false"
+                  class="btn border-2 btn-outline-info"
-                    class="btn border-2 btn-outline-info"
+                  data-bs-toggle="dropdown"
-                    data-bs-toggle="dropdown"
+                  type="button"
-                    type="button"
+              >
-                >
+                Track Me!
-                  Track Me!
+              </button>
-                </button>
+              <div aria-labelledby="login-dropdown" class="dropdown-menu mt-2 border-2 border-primary bg-body"
-                <div aria-labelledby="login-dropdown" class="dropdown-menu mt-2 border-2 border-primary bg-body"
+                   style="width: 320px">
-                     style="width: 320px">
+                <form class="px-4 py-3">
-                  <form class="px-4 py-3">
+                  <!-- AuthCode input -->
-                    <!-- AuthCode input -->
+                  <div class="form-outline mb-4">
-                    <div class="form-outline mb-4">
+                    <input id="track-authcode" v-model="data.userData.authcode" class="form-control bg-secondary"
-                      <input id="track-authcode" v-model="data.userData.authcode" class="form-control bg-secondary"
+                           placeholder="AuthCode*"
-                             placeholder="AuthCode*"
+                           required type="text"/>
-                             required type="text"/>
+                  </div>
-                    </div>
 
-                    <!-- ShareCode input -->
+                  <!-- ShareCode input -->
-                    <div class="form-outline mb-2">
+                  <div class="form-outline mb-2">
-                      <input id="track-sharecode" v-model="data.userData.sharecode" class="form-control bg-secondary"
+                    <input id="track-sharecode" v-model="data.userData.sharecode" class="form-control bg-secondary"
-                             placeholder="ShareCode"
+                           placeholder="ShareCode"
-                             type="text"/>
+                           type="text"/>
-                    </div>
+                  </div>
 
-                    <div class="form-outline mb-4">
+                  <div class="form-outline mb-4">
-                      <small>You can find your AuthCode and ShareCode <a
+                    <small>You can find your AuthCode and ShareCode <a
-                          href="https://help.steampowered.com/en/wizard/HelpWithGameIssue/?appid=730&issueid=128" target="_blank">here</a>.</small>
+                        href="https://help.steampowered.com/en/wizard/HelpWithGameIssue/?appid=730&issueid=128"
-                    </div>
+                        target="_blank">here</a>.</small>
+                  </div>
 
-                    <!-- Submit button -->
+                  <!-- Submit button -->
-                    <button class="btn btn-outline-warning border-2" type="submit" @click.prevent="TrackMe">
+                  <button class="btn btn-outline-warning border-2" type="submit" @click.prevent="TrackMe">
-                      TrackMe
+                    TrackMe
-                    </button>
+                  </button>
-                  </form>
+                </form>
-                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="matches m-auto">
+    </div>
-        <table v-if="data.matches" class="table table-borderless">
+    <div class="matches m-auto">
-          <thead class="border-bottom">
+      <table v-if="data.matches" class="table table-borderless">
-          <tr>
+        <thead class="border-bottom">
-            <th class="text-center" scope="col">Map</th>
+        <tr>
-            <th class="text-center" scope="col">Rank</th>
+          <th class="text-center map" scope="col">Map</th>
-            <th class="text-center" scope="col">Score</th>
+          <th class="text-center rank" scope="col">Rank</th>
-            <th class="text-center" scope="col">K</th>
+          <th class="text-center score" scope="col">Score</th>
-            <th class="text-center" scope="col">A</th>
+          <th class="text-center kills" scope="col">K</th>
-            <th class="text-center" scope="col">D</th>
+          <th class="text-center assists" scope="col">A</th>
-            <th class="text-center" scope="col" style="cursor: help" title="Kill-to-death ratio">+/-</th>
+          <th class="text-center deaths" scope="col">D</th>
-            <th class="text-center" scope="col" style="cursor: help" title="Average damage per round">ADR</th>
+          <th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio">+/-</th>
-            <th class="text-center" scope="col" style="cursor: help" title="HLTV 1.0 Rating">Rating</th>
+          <th class="text-center adr" scope="col" style="cursor: help" title="Average damage per round">ADR</th>
-            <th class="text-center" scope="col">Duration</th>
+          <th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating">Rating</th>
-            <th scope="col">Date</th>
+          <th class="text-center duration" scope="col">Duration</th>
-          </tr>
+          <th class="date" scope="col">Date</th>
-          </thead>
+        </tr>
-          <tbody>
+        </thead>
-          <tr v-for="match in data.matches"
+        <tbody>
-              :key="match.match_id"
+        <tr v-for="match in data.matches"
-              class="match"
+            :key="match.match_id"
-              @click="GoToMatch(match.match_id)">
+            class="match"
-            <td class="td-map text-center">
+            @click="GoToMatch(match.match_id)">
-              <img :alt="match.map ? match.map : 'Map not found'"
+          <td class="td-map text-center">
-                   :src="mapImg.includes(match.map) ? require('@/images/maps/' + match.map + '.png') : require('@/images/maps/not_found.png')"
+            <img :alt="match.map ? match.map : 'Map not found'"
-                   :title="match.map"
+                 :src="mapImg.includes(match.map) ? require('@/images/maps/' + match.map + '.png') : require('@/images/maps/not_found.png')"
-                   class="map-icon">
+                 :title="match.map"
-            </td>
+                 class="map-icon">
-            <td class="td-rank text-center">
+          </td>
-              <img
+          <td class="td-rank text-center">
-                  :src="match.stats[0].extended?.rank?.new ? require('@/images/ranks/' + match.stats[0].extended?.rank?.new + '.png') : require('@/images/ranks/0.png')"
+            <img
-                  alt="Rank icon"
+                :src="match.stats[0].extended?.rank?.new ? require('@/images/ranks/' + match.stats[0].extended?.rank?.new + '.png') : require('@/images/ranks/0.png')"
-                  class="rank-icon">
+                alt="Rank icon"
-            </td>
+                class="rank-icon">
-            <td :class="match.stats[0].team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger'"
+          </td>
-                class="td-score text-center fw-bold">
+          <td :class="match.stats[0].team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger'"
-              {{ match.score[0] }} - {{ match.score[1] }}
+              class="td-score text-center fw-bold">
-            </td>
+            {{ match.score[0] }} - {{ match.score[1] }}
-            <td class="td-kills text-center">
+          </td>
-              {{ match.stats[0].kills ? match.stats[0].kills : "0" }}
+          <td class="td-kills text-center">
-            </td>
+            {{ match.stats[0].kills ? match.stats[0].kills : "0" }}
-            <td class="td-assists text-center">
+          </td>
-              {{ match.stats[0].assists ? match.stats[0].assists : "0" }}
+          <td class="td-assists text-center">
-            </td>
+            {{ match.stats[0].assists ? match.stats[0].assists : "0" }}
-            <td class="td-deaths text-center">
+          </td>
-              {{ match.stats[0].deaths ? match.stats[0].deaths : "0" }}
+          <td class="td-deaths text-center">
-            </td>
+            {{ match.stats[0].deaths ? match.stats[0].deaths : "0" }}
-            <td :class="(match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
+          </td>
-                class="td-plus text-center">
+          <td :class="(match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
-              {{
+              class="td-plus text-center">
-                (match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0)
+            {{
-              }}
+              (match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0)
-            </td>
+            }}
-            <td class="td-adr text-center">
+          </td>
-              {{
+          <td class="td-adr text-center">
-                Math.floor((match.stats[0].extended.dmg.total ? match.stats[0].extended.dmg.total : 0) / (match.score[0] + match.score[1]))
+            {{
-              }}
+              Math.floor((match.stats[0].extended.dmg.enemy ? match.stats[0].extended.dmg.enemy : 0) / (match.score[0] + match.score[1]))
-            </td>
+            }}
-            <td :class="GetHLTV_1(
+          </td>
+          <td :class="GetHLTV_1(
                       match.stats[0].kills,
                       match.score[0] + match.score[1],
                       match.stats[0].deaths,
@@ -148,29 +148,28 @@
                       match.stats[0].extended?.multi_kills?.triple,
                       match.stats[0].extended?.multi_kills?.quad,
                       match.stats[0].extended?.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
-                class="td-hltv text-center fw-bold">
+              class="td-hltv text-center fw-bold">
-              {{
+            {{
-                GetHLTV_1(
+              GetHLTV_1(
-                    match.stats[0].kills,
+                  match.stats[0].kills,
-                    match.score[0] + match.score[1],
+                  match.score[0] + match.score[1],
-                    match.stats[0].deaths,
+                  match.stats[0].deaths,
-                    match.stats[0].extended?.multi_kills?.duo,
+                  match.stats[0].extended?.multi_kills?.duo,
-                    match.stats[0].extended?.multi_kills?.triple,
+                  match.stats[0].extended?.multi_kills?.triple,
-                    match.stats[0].extended?.multi_kills?.quad,
+                  match.stats[0].extended?.multi_kills?.quad,
-                    match.stats[0].extended?.multi_kills?.pent)
+                  match.stats[0].extended?.multi_kills?.pent)
-              }}
+            }}
-            </td>
+          </td>
-            <td class="td-duration text-center">
+          <td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
-              {{ FormatDuration(match.duration) }}
+            {{ FormatDuration(match.duration) }}
-            </td>
+          </td>
-            <td class="td-date">
+          <td :title="FormatFullDate(match.date)" class="td-date">
-              {{ FormatDate(match.date) }}
+            {{ FormatDate(match.date) }}
-            </td>
+          </td>
-          </tr>
+        </tr>
-          </tbody>
+        </tbody>
-        </table>
+      </table>
-        <h5 v-else>No matches on record</h5>
+      <h5 v-else>No matches on record</h5>
-      </div>
     </div>
   </div>
 </template>
@@ -179,7 +178,15 @@
 import {onBeforeMount, reactive, watch} from "vue";
 import axios from "axios";
 import {useStore} from "vuex";
-import {FormatDate, FormatDuration, GetHLTV_1, GoToMatch} from "@/utils";
+import {
+  FormatDate,
+  FormatDuration,
+  FormatFullDate,
+  FormatFullDuration,
+  GetHLTV_1,
+  GoToMatch,
+  SaveLastVisitedToLocalStorage
+} from "../utils";
 
 export default {
   name: 'Player',
@@ -216,7 +223,7 @@ export default {
         data.statusError = 'Is not a valid authcode'
 
       const res = await axios
-          .post(`http://localhost:1337/http://localhost:8000/player/trackme`, `id=${store.state.id64}&authcode=${data.userData.authcode}&sharecode=${data.userData.sharecode}`)
+          .post(`http://localhost:8000/player/trackme`, `id=${store.state.id64}&authcode=${data.userData.authcode}&sharecode=${data.userData.sharecode}`)
 
       if (res.status === 401) {
         data.statusError = 'Data does not match player'
@@ -231,13 +238,19 @@ export default {
 
     const GetUser = () => {
       axios
-          .get(`http://localhost:1337/http://localhost:8000/player/${props.id}`)
+          .get(`http://localhost:8000/player/${props.id}`)
           .then((response) => {
             data.playerDetails = response.data
             data.matches = response.data.matches
             store.state.id64 = response.data.steamid64
 
-            console.log(response.data)
+            let player = {
+              'steamid64': response.data.steamid64,
+              'name': response.data.name,
+              'avatar': response.data.avatar
+            }
+            SaveLastVisitedToLocalStorage(player)
+
             document.title = `${response.data.name} | CSGO-W.TF`
           })
           .catch((e) => {
@@ -252,7 +265,19 @@ export default {
     })
 
     return {
-      data, store, mapImg, wl, props, GetUser, TrackMe, FormatDate, FormatDuration, GoToMatch, GetHLTV_1
+      data,
+      store,
+      mapImg,
+      wl,
+      props,
+      GetUser,
+      TrackMe,
+      FormatDate,
+      FormatFullDate,
+      FormatDuration,
+      FormatFullDuration,
+      GoToMatch,
+      GetHLTV_1
     }
   }
 }
@@ -261,57 +286,97 @@ export default {
 <style lang="scss" scoped>
 .card {
   padding-top: 10px;
+
+  .avatar {
+    border-radius: 50%;
+    height: 150px;
+    width: 150px;
+    box-shadow: 0 0 10px black;
+  }
 }
 
-td {
+table {
-  vertical-align: middle;
+  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;
+    }
+
+    .td-map img {
+      width: 60px;
+      height: auto;
+      max-height: 60px;
+
+      .map-icon {
+        height: 75px;
+      }
+    }
+
+    .td-rank img {
+      width: 70px;
+      height: auto;
+
+      .rank-icon {
+        height: 35px;
+      }
+    }
+
+    .td-score {
+      font-size: 1.2rem;
+      width: 120px;
+    }
+  }
+
+  .match {
+    border-bottom: 1px solid rgba(73, 73, 73, 0.73);
+
+    &:last-child {
+      border: none;
+    }
+
+    &:hover {
+      cursor: pointer;
+      background: rgba(0, 0, 0, 0.25);
+    }
+  }
 }
 
-th:last-child, td:last-child {
+@media screen and (max-width: 768px) {
-  text-align: right;
+  .card {
-  width: 150px;
+    .avatar {
-}
+      height: 75px;
-
+      width: 75px;
-.td-map {
+    }
-  width: 100px;
+  }
-  height: 100px;
+  .td-map img {
-}
+    width: 40px;
-
+    height: auto;
-.td-rank {
+    max-height: 40px;
-  width: 88px;
+  }
-  height: 35px;
+  .td-rank img {
-}
+    width: 50px;
-
+    height: auto;
-.td-score {
+  }
-  font-size: 1.2rem;
+  .kills, .deaths, .assists, .kdiff, .adr, .duration, .hltv,
-  width: 120px;
+  .td-kills, .td-deaths, .td-assists, .td-plus, .td-adr, .td-duration, .td-hltv {
-}
+    display: none;
-
+  }
-.avatar {
-  border-radius: 50%;
-  height: 150px;
-  width: 150px;
-  box-shadow: 0 0 10px black;
-}
-
-.map-icon {
-  height: 75px;
-}
-
-.rank-icon {
-  height: 35px;
-}
-
-.match {
-  border-bottom: 1px solid rgba(73, 73, 73, 0.73);
-}
-
-.match:last-child {
-  border: none;
-}
-
-.match:hover {
-  cursor: pointer;
-  background: rgba(0, 0, 0, 0.25);
 }
 </style>