added vac icon to chat + changed chat url

src/components/MatchChatHistory.vue

@@ -2,30 +2,43 @@
   <div class="chat-history mt-2">
     <table class="table table-borderless">
       <tbody>
-        <tr v-for="(m, id) in data.chat" :key="id">
+      <tr v-for="(m, id) in data.chat" :key="id">
-          <td>
+        <td>
-            {{ ConvertTickToTime(m.tick) }}
+          {{ ConvertTickToTime(m.tick) }}
-          </td>
+        </td>
-          <td>
+        <td class="td-avatar">
-            <img :class="'team-color-' + m.color"
+          <img :class="'team-color-' + m.color"
-                 :src="constructAvatarUrl(m.avatar)"
+               :src="constructAvatarUrl(m.avatar)"
-                 alt="Player avatar"
+               alt="Player avatar"
-                 class="avatar">
+               class="avatar">
-          </td>
+        </td>
-          <td class="name"
+        <td :class="m.startSide === 1 ? 'text-info' : 'text-warning'"
-              @click="GoToPlayer(m.steamid64)"
+            class="name d-flex"
-              :class="m.startSide === 1 ? 'text-info' : 'text-warning'">
+            @click="GoToPlayer(m.steamid64)">
+          <span>
             <i v-if="m.tracked" class="fa fa-dot-circle-o text-success tracked" title="Tracked user"></i>
             {{ m.player }}
             <i class="fa fa-external-link"/>
-          </td>
+            </span>
-          <td>
+        </td>
-            <i class="fa fa-caret-right"/>
+        <td>
-          </td>
+          <i class="fa fa-caret-right"/>
-          <td class="message">
+        </td>
-            {{ m.message }}
+        <td class="player__vac">
-          </td>
+          <div v-if="!m.vac && !m.game_ban" class="vac-placeholder"/>
-        </tr>
+          <img v-if="m.vac && FormatVacDate(m.vac_date, store.state.matchDetails.date) !== ''"
+               :title="'Vac-banned: ' + FormatVacDate(m.vac_date, store.state.matchDetails.date)"
+               alt="VAC-Ban"
+               src="/images/icons/vac_banned.svg">
+          <img v-if="!m.vac && m.game_ban && FormatVacDate(m.game_ban_date, store.state.matchDetails.date) !== ''"
+               :title="'Game-banned: ' + FormatVacDate(m.game_ban_date, store.state.matchDetails.date)"
+               alt="Game-Ban"
+               src="/images/icons/game_banned.svg">
+        </td>
+        <td class="message">
+          {{ m.message }}
+        </td>
+      </tr>
       </tbody>
     </table>
   </div>
@@ -34,7 +47,7 @@
 <script>
 import {useStore} from "vuex";
 import {onMounted, reactive} from "vue";
-import {GetChatHistory, constructAvatarUrl, GoToPlayer, ConvertTickToTime} from "@/utils";
+import {GetChatHistory, constructAvatarUrl, GoToPlayer, ConvertTickToTime, FormatVacDate} from "@/utils";
 
 export default {
   name: "MatchChatHistory",
@@ -72,6 +85,7 @@ export default {
     }
 
     const setPlayer = async (chat) => {
+      console.log(store.state.matchDetails)
       let arr = []
       for (const o of chat) {
         for (const p of store.state.matchDetails.stats) {
@@ -83,6 +97,10 @@ export default {
               color: p.color,
               startSide: p.team_id,
               tracked: p.player.tracked,
+              vac: p.player.vac,
+              vac_date: p.player.vac_date,
+              game_ban: p.player.game_ban,
+              game_ban_date: p.player.game_ban_date,
               tick: o.tick,
               all_chat: o.all_chat,
               message: o.message
@@ -98,7 +116,7 @@ export default {
       getChatHistory()
     })
 
-    return {data, constructAvatarUrl, GoToPlayer, ConvertTickToTime}
+    return {data, store, constructAvatarUrl, GoToPlayer, ConvertTickToTime, FormatVacDate}
   }
 }
 </script>
@@ -107,11 +125,23 @@ export default {
 table td {
   padding: .5rem;
 }
+
 .avatar {
   width: 20px;
   height: 20px;
   border-radius: 50%;
 }
+
+.player__vac {
+  .vac-placeholder {
+    width: 0;
+  }
+  img {
+    width: 20px;
+    height: 20px;
+  }
+}
+
 .name {
   cursor: pointer;
   text-align: left;
@@ -131,15 +161,20 @@ table td {
     vertical-align: top;
   }
 }
+
 .fa-caret-right {
   font-size: 1rem;
 }
+
 .message {
   width: 40ch;
   max-width: 40ch;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 576px) {
+  .td-avatar {
+    display: none;
+  }
   .name {
     width: 120px;
     max-width: 120px;

src/router/index.js

@@ -81,7 +81,7 @@ const routes = [
         }
       },
       {
-        path: 'chat-history',
+        path: 'chat',
         components: {
           score: lazyLoadComponent('MatchChatHistory')
         }

src/views/Match.vue

@@ -132,8 +132,8 @@
           <li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : data.matchDetails.date < 1643410799 ? 'This feature wasn\'t available for this match' : ''"
               class="list-item nav-item">
             <router-link :class="!data.matchDetails.parsed ? 'disabled' : data.matchDetails.date < 1643410799 ? 'disabled' : ''" :disabled="!data.matchDetails.parsed"
-                         :to="'/match/' + data.matchDetails.match_id + '/chat-history'" class="nav-link"
+                         :to="'/match/' + data.matchDetails.match_id + '/chat'" class="nav-link"
-                         replace>Chat-History
+                         replace>Chat
             </router-link>
           </li>
         </ul>
@@ -257,7 +257,7 @@ export default {
       if (route.fullPath.split('/')[3]) {
         const sub = route.fullPath.split('/')[3]
         if (matchIdPattern.test(props.match_id)) {
-          if (store.state.matchDetails.date <= 1643410799 && sub === 'chat-history') {
+          if (store.state.matchDetails.date <= 1643410799 && sub === 'chat') {
             GoToLink(`/match/${props.match_id}`)
           } else
             GoToLink(`/match/${props.match_id}/${sub}`)