fixed #10

src/assets/images/icons/game_banned.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="177.75388mm"
+   height="205.2525mm"
+   viewBox="0 0 177.75388 205.2525"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="game_banned.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.5"
+     inkscape:cx="-25"
+     inkscape:cy="389"
+     inkscape:window-width="1920"
+     inkscape:window-height="1021"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <rect
+       x="141.36865"
+       y="426.65552"
+       width="529.30859"
+       height="270.22998"
+       id="rect11240" />
+    <linearGradient
+       id="linearGradient1328"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop1326" />
+    </linearGradient>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-16.123061,-45.873752)">
+    <path
+       sodipodi:type="star"
+       style="fill:#5b0000;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:22.6772;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path411"
+       inkscape:flatsided="true"
+       sodipodi:sides="6"
+       sodipodi:cx="240.26172"
+       sodipodi:cy="341.72095"
+       sodipodi:r1="374.78607"
+       sodipodi:r2="324.57425"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="M 564.83598,529.11398 240.26172,716.50702 -84.312541,529.11398 -84.31254,154.32791 240.26172,-33.065125 564.83598,154.32791 Z"
+       transform="matrix(0.26458333,0,0,0.26458333,41.430754,58.086334)"
+       inkscape:transform-center-y="-1.1390698e-06" />
+    <text
+       xml:space="preserve"
+       transform="matrix(0.32563879,0,0,0.33957976,-21.103325,-41.320428)"
+       id="text11238"
+       style="font-style:normal;font-weight:normal;font-size:240px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect11240);fill:#000000;fill-opacity:1;stroke:none"><tspan
+         x="141.36914"
+         y="645.02629"
+         id="tspan66668"><tspan
+           style="fill:#ffffff"
+           id="tspan66666">BAN</tspan></tspan></text>
+  </g>
+</svg>

src/assets/images/icons/vac_banned.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="177.75388mm"
+   height="205.2525mm"
+   viewBox="0 0 177.75388 205.2525"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="vac_banned.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.5"
+     inkscape:cx="337"
+     inkscape:cy="389"
+     inkscape:window-width="1920"
+     inkscape:window-height="1021"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <rect
+       x="141.36865"
+       y="426.65552"
+       width="529.30859"
+       height="270.22998"
+       id="rect11240" />
+    <linearGradient
+       id="linearGradient1328"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop1326" />
+    </linearGradient>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-16.123061,-45.873752)">
+    <path
+       sodipodi:type="star"
+       style="fill:#5b0000;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:22.6772;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path411"
+       inkscape:flatsided="true"
+       sodipodi:sides="6"
+       sodipodi:cx="240.26172"
+       sodipodi:cy="341.72095"
+       sodipodi:r1="374.78607"
+       sodipodi:r2="324.57425"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="M 564.83598,529.11398 240.26172,716.50702 -84.312541,529.11398 -84.31254,154.32791 240.26172,-33.065125 564.83598,154.32791 Z"
+       transform="matrix(0.26458333,0,0,0.26458333,41.430754,58.086334)"
+       inkscape:transform-center-y="-1.1390698e-06" />
+    <text
+       xml:space="preserve"
+       transform="matrix(0.34578181,0,0,0.33957976,-17.741749,-41.44268)"
+       id="text11238"
+       style="font-style:normal;font-weight:normal;font-size:240px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect11240);fill:#000000;fill-opacity:1;stroke:none"><tspan
+         x="141.36914"
+         y="645.02629"
+         id="tspan33105"><tspan
+           style="fill:#ffffff"
+           id="tspan33103">VAC</tspan></tspan></text>
+  </g>
+</svg>

src/components/ScoreTeam.vue

@@ -12,6 +12,7 @@
       </caption>
       <thead v-if="team_id === 0">
       <tr>
+        <th class="player__vac"></th>
         <th class="player__avatar"></th>
         <th class="player__name"></th>
         <th class="player__rank"></th>
@@ -53,6 +54,10 @@
                          :rounds_played="store.state.matchDetails.score.reduce((a, b) => a + b)"
                          :steamid64="player.player.steamid64"
                          :tracked="player.player.tracked"
+                         :vac="player.player.vac"
+                         :vac_date="player.player.vac_date"
+                         :game_ban="player.player.game_ban"
+                         :game_ban_date="player.player.game_ban_date"
         />
       </tr>
       <tr v-if="team_id === 0" class="hr"></tr>
@@ -120,6 +125,10 @@ table {
     height: 20px;;
     border-bottom: 1px solid white;
   }
+
+  .player__vac {
+    width: 20px;
+  }
 }
 
 @media (max-width: 1200px) {

src/components/ScoreTeamPlayer.vue

@@ -1,15 +1,27 @@
 <template>
+  <td class="player__vac">
+    <div v-if="!props.vac && !props.game_ban" class="vac-placeholder"></div>
+    <img v-if="!props.game_ban && props.vac && FormatVacDate(props.vac_date, store.state.matchDetails.date) !== ''"
+         :title="'Vac-banned: ' + FormatVacDate(props.vac_date, store.state.matchDetails.date)"
+         alt="VAC-Ban"
+         src="../assets/images/icons/vac_banned.svg">
+    <img v-if="!props.vac && props.game_ban && FormatVacDate(props.game_ban_date, store.state.matchDetails.date) !== ''"
+         :title="'Game-banned: ' + FormatVacDate(props.game_ban_date, store.state.matchDetails.date)"
+         alt="Game-Ban"
+         src="../assets/images/icons/game_banned.svg">
+  </td>
   <td>
-    <img :src="constructAvatarUrl(props.avatar)" alt="Player avatar" class="player__avatar" :class="'team-color-' + props.color">
+    <img :class="'team-color-' + props.color" :src="constructAvatarUrl(props.avatar)" alt="Player avatar"
+         class="player__avatar">
   </td>
   <td class="player__name" @click="GoToPlayer(props.steamid64)">
-    <i class="far fa-dot-circle text-success tracked" v-if="props.tracked" title="Tracked user"></i>
+    <i v-if="props.tracked" class="far fa-dot-circle text-success tracked" title="Tracked user"></i>
     {{ props.name }}
     <i class="fas fa-link"></i>
   </td>
   <td>
-    <img :src="DisplayRank(props.rank)[0]"
+    <img :alt="DisplayRank(props.rank)[1]"
-         :alt="DisplayRank(props.rank)[1]"
+         :src="DisplayRank(props.rank)[0]"
          :title="DisplayRank(props.rank)[1]"
          class="player__rank">
   </td>
@@ -26,9 +38,11 @@
     {{ props.kdiff }}
   </td>
   <td class="player__kd">
-    {{ (props.kills > 0 && props.deaths > 0) ? (props.kills / props.deaths).toFixed(2) : (props.kills > 0 && props.deaths === 0) ? props.kills : 0.00 }}
+    {{
+      (props.kills > 0 && props.deaths > 0) ? (props.kills / props.deaths).toFixed(2) : (props.kills > 0 && props.deaths === 0) ? props.kills : 0.00
+    }}
   </td>
-  <td class="player__adr" v-if="props.parsed">
+  <td v-if="props.parsed" class="player__adr">
     {{ (props.dmg / props.rounds_played).toFixed(2) }}
   </td>
   <td class="player__hs">
@@ -40,15 +54,16 @@
     }}
   </td>
   <td class="player__mvp">
-    {{props.mvp}}
+    {{ props.mvp }}
   </td>
   <td class="player__score">
-    {{props.player_score}}
+    {{ props.player_score }}
   </td>
 </template>
 
 <script>
-import {DisplayRank, GetHLTV_1, GoToPlayer, constructAvatarUrl} from "../utils";
+import {constructAvatarUrl, DisplayRank, FormatVacDate, GetHLTV_1, GoToPlayer} from "../utils";
+import {useStore} from "vuex";
 
 export default {
   name: 'ScoreTeamPlayer',
@@ -152,15 +167,36 @@ export default {
       type: Boolean,
       required: true,
       default: false
+    },
+    vac: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
+    vac_date: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    game_ban: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
+    game_ban_date: {
+      type: Number,
+      required: false,
+      default: 0
     }
   },
   setup(props) {
-    return {props, GetHLTV_1, GoToPlayer, DisplayRank, constructAvatarUrl}
+    const store = useStore()
+    return {props, GetHLTV_1, GoToPlayer, DisplayRank, constructAvatarUrl, FormatVacDate, store}
   }
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .team-color-blue,
 .team-color-orange,
 .team-color-green,
@@ -168,25 +204,43 @@ export default {
 .team-color-yellow {
   outline: 3px solid;
 }
+
 .team-color-orange {
   outline-color: var(--csgo-orange);
 }
+
 .team-color-blue {
   outline-color: var(--csgo-blue);
 }
+
 .team-color-yellow {
   outline-color: var(--csgo-yellow);
 }
+
 .team-color-purple {
   outline-color: var(--csgo-purple);
 }
+
 .team-color-green {
   outline-color: var(--csgo-green);
 }
+
 .team-color-grey {
   outline: none;
 }
 
+.player__vac,
+.vac-placeholder {
+  width: 20px;
+}
+
+.player__vac {
+  img {
+    width: 20px;
+    height: 20px;
+  }
+}
+
 .player__avatar {
   width: 30px;
   height: 30px;

src/utils/DateTime.js

@@ -22,19 +22,10 @@ export const FormatDate = (date) => {
   const matchDate = DateTime.fromSeconds(date || 0)
   const diff = DateTime.now().diff(matchDate)
 
-  if (diff.as('days') > 10)
+  if (diff.as('days') > 8)
     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'
-    else if (Math.floor(diff.as('hours')) === 1)
-      return Math.floor(diff.as('hours')) + ' hour ago'
-    else
-      return Math.floor(diff.as('hours')) + ' hours ago'
-  else if (Math.floor(diff.as('days')) === 1)
-    return Math.floor(diff.as('days')) + ' day ago'
   else
-    return Math.floor(diff.as('days')) + ' days ago'
+    return matchDate.toRelative()
 }
 
 export const FormatFullDate = (date) => {
@@ -50,3 +41,14 @@ export const FormatFullDate = (date) => {
     second: '2-digit'
   })
 }
+
+export const FormatVacDate = (date, match) => {
+  const vacDate = DateTime.fromSeconds(date || 0)
+  const matchDate = DateTime.fromSeconds(match || 0)
+
+  if (vacDate.diff(matchDate).as('days') >= -30) {
+    return vacDate.toRelative()
+  } else {
+    return ''
+  }
+}

src/utils/index.js

@@ -1,4 +1,4 @@
-import {FormatDate, FormatDuration, FormatFullDate, FormatFullDuration} from "./DateTime";
+import {FormatDate, FormatDuration, FormatFullDate, FormatFullDuration, FormatVacDate} from "./DateTime";
 import {GoToLink, GoToMatch, GoToPlayer} from "./GoTo";
 import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
 import {GetHLTV_1} from "./HLTV";
@@ -7,7 +7,7 @@ import {GetUser, TrackMe, getPlayerValue} from "./ApiRequests";
 import {setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank, FixMapName, closeNav} from "./Utils";
 
 export {
-  FormatDate, FormatFullDuration, FormatFullDate, FormatDuration,
+  FormatDate, FormatFullDuration, FormatFullDate, FormatDuration, FormatVacDate,
   GoToMatch, GoToPlayer, GoToLink,
   SaveLastVisitedToLocalStorage,
   GetHLTV_1,

src/views/Match.vue

@@ -37,8 +37,8 @@
             :src="DisplayRank(data.avgRank)[0]"
             :title="DisplayRank(data.avgRank)[1]"
             class="rank-icon"/>
-          <i class="fas fa-grip-lines-vertical"></i>
+          <i v-if="data.matchDetails.replay_url" class="fas fa-grip-lines-vertical"></i>
-          <a :href="data.matchDetails.replay_url" class="text-white">Demo</a>
+          <a v-if="data.matchDetails.replay_url" :href="data.matchDetails.replay_url" class="text-white">Demo</a>
         </p>
       </div>
     </div>

src/views/Player.vue

@@ -45,16 +45,15 @@
                   </td>
                 </tr>
               </table>
-              <div v-if="data.statusErrorCode === 202" class="alert alert-success" role="alert">
+              <div class="badges">
-                {{ data.statusError }}
+                <img v-if="store.state.playerDetails.vac"
-              </div>
+                     :title="'VAC-Ban: ' + FormatVacDate(store.state.playerDetails.vac_date, store.state.matchDetails.date)"
-              <div v-if="data.statusErrorCode === 418" class="alert alert-warning" role="alert">
+                     alt="Vac banned"
-                {{ data.statusError }}
+                     src="../assets/images/icons/vac_banned.svg">
-              </div>
+                <img v-if="store.state.playerDetails.game_ban"
-              <div v-if="data.statusErrorCode !== 0 && data.statusErrorCode !== 202 && data.statusErrorCode !== 418"
+                     :title="'Game-Ban: ' + FormatVacDate(store.state.playerDetails.game_ban_date, store.state.matchDetails.date)"
-                   class="alert alert-danger"
+                     alt="Game banned"
-                   role="alert">
+                     src="../assets/images/icons/game_banned.svg">
-                {{ data.statusError }}
               </div>
             </div>
             <div v-if="!data.tracked" class="dropdown trackme-btn">
@@ -67,6 +66,17 @@
               >
                 Track Me!
               </button>
+              <div v-if="data.statusErrorCode === 202" class="alert alert-success" role="alert">
+                {{ data.statusError }}
+              </div>
+              <div v-if="data.statusErrorCode === 418" class="alert alert-warning" role="alert">
+                {{ data.statusError }}
+              </div>
+              <div v-if="data.statusErrorCode !== 0 && data.statusErrorCode !== 202 && data.statusErrorCode !== 418"
+                   class="alert alert-danger"
+                   role="alert">
+                {{ data.statusError }}
+              </div>
               <div aria-labelledby="login-dropdown" class="dropdown-menu mt-2 border-2 border-primary bg-body"
                    style="width: 320px">
                 <form class="px-4 py-3">
@@ -267,7 +277,8 @@ import {
   LoadImage,
   SaveLastVisitedToLocalStorage,
   setTitle,
-  TrackMe
+  TrackMe,
+  FormatVacDate
 } from "../utils";
 
 export default {
@@ -408,7 +419,8 @@ export default {
       GoToMatch,
       GetHLTV_1,
       DisplayRank,
-      constructAvatarUrl
+      constructAvatarUrl,
+      FormatVacDate
     }
   }
 }
@@ -474,6 +486,17 @@ export default {
 .card {
   padding-top: 10px;
 
+  .badges {
+    width: 70%;
+    height: 30px;
+
+    img {
+      width: auto;
+      height: 100%;
+      margin-right: 5px;
+    }
+  }
+
   .avatar {
     border-radius: 50%;
     height: 150px;