fixed #10

2021-10-22 23:10:23 +02:00
parent ec2617b9d6
commit cdecdf41fa
8 changed files with 296 additions and 38 deletions
--- a/src/assets/images/icons/game_banned.svg
+++ b/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>
--- a/src/assets/images/icons/vac_banned.svg
+++ b/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>
--- a/src/components/ScoreTeam.vue
+++ b/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) {
--- a/src/components/ScoreTeamPlayer.vue
+++ b/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]"
-         :alt="DisplayRank(props.rank)[1]"
+    <img :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">
@@ -48,7 +62,8 @@
 </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;
--- a/src/utils/DateTime.js
+++ b/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 ''
+  }
+}
--- a/src/utils/index.js
+++ b/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,
--- a/src/views/Match.vue
+++ b/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>
-          <a :href="data.matchDetails.replay_url" class="text-white">Demo</a>
+          <i v-if="data.matchDetails.replay_url" class="fas fa-grip-lines-vertical"></i>
+          <a v-if="data.matchDetails.replay_url" :href="data.matchDetails.replay_url" class="text-white">Demo</a>
        </p>
      </div>
    </div>
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -45,16 +45,15 @@
                  </td>
                </tr>
              </table>
-              <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 class="badges">
+                <img v-if="store.state.playerDetails.vac"
+                     :title="'VAC-Ban: ' + FormatVacDate(store.state.playerDetails.vac_date, store.state.matchDetails.date)"
+                     alt="Vac banned"
+                     src="../assets/images/icons/vac_banned.svg">
+                <img v-if="store.state.playerDetails.game_ban"
+                     :title="'Game-Ban: ' + FormatVacDate(store.state.playerDetails.game_ban_date, store.state.matchDetails.date)"
+                     alt="Game banned"
+                     src="../assets/images/icons/game_banned.svg">
              </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;