updated cheater-display on chat

src/components/MatchChatHistory.vue

@@ -16,33 +16,27 @@
             class="name d-flex"
             @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"/>
+            <i v-if="m.tracked" class="fa fa-dot-circle-o text-success tracked" title="Tracked user"/>
+            <span :class="(m.vac && FormatVacDate(m.vac_date, store.state.matchDetails.date) !== '')
+                            || (!m.vac && m.game_ban && FormatVacDate(m.game_ban_date, store.state.matchDetails.date) !== '')
+                            ? 'ban-shadow'
+                            : ''"
+                  :title="!m.vac && m.game_ban ? 'Game-banned: ' + FormatVacDate(m.game_ban_date, store.state.matchDetails.date) : 'Vac-banned: ' + FormatVacDate(m.vac_date, store.state.matchDetails.date)">
+              {{ m.player }}
             </span>
+          </span>
         </td>
         <td>
           <i class="fa fa-caret-right"/>
         </td>
-        <td class="player__vac">
-          <div v-if="!m.vac && !m.game_ban" class="vac-placeholder"/>
-          <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 v-else>
-      <h3 class="text-center">No chat available</h3>
+    <div v-else class="d-flex align-items-center justify-content-center">
+      <h3>No chat available</h3>
     </div>
   </div>
 </template>
@@ -50,7 +44,7 @@
 <script>
 import {useStore} from "vuex";
 import {onMounted, reactive} from "vue";
-import {GetChatHistory, constructAvatarUrl, GoToPlayer, ConvertTickToTime, FormatVacDate} from "@/utils";
+import {GetChatHistory, constructAvatarUrl, GoToPlayer, ConvertTickToTime, FormatVacDate, truncate} from "@/utils";
 
 export default {
   name: "MatchChatHistory",
@@ -92,7 +86,7 @@ export default {
         for (const p of store.state.matchDetails.stats) {
           if (o.player === p.player.steamid64) {
             const obj = Object.assign({
-              player: p.player.name,
+              player: truncate(p.player.name, 20),
               steamid64: p.player.steamid64,
               avatar: p.player.avatar,
               color: p.color,
@@ -103,7 +97,7 @@ export default {
               game_ban: p.player.game_ban,
               game_ban_date: p.player.game_ban_date,
               tick: o.tick,
-              tick_rate: store.state.matchDetails.tick_rate !== -1 ? store.state.matchDetails.tick_rate : 64,
+              tick_rate: store.state.matchDetails.tick_rate && store.state.matchDetails.tick_rate !== -1 ? store.state.matchDetails.tick_rate : 64,
               all_chat: o.all_chat,
               message: o.message
             })
@@ -134,21 +128,11 @@ table td {
   border-radius: 50%;
 }
 
-.player__vac {
-  .vac-placeholder {
-    width: 0;
-  }
-  img {
-    width: 20px;
-    height: 20px;
-  }
-}
-
 .name {
   cursor: pointer;
   text-align: left;
-  width: 200px;
-  max-width: 200px;
+  width: 20ch;
+  max-width: 20ch;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -157,10 +141,9 @@ table td {
     font-size: .8rem;
   }
 
-  .fa-external-link {
-    color: white;
-    font-size: .8rem;
-    vertical-align: top;
+  .ban-shadow {
+    color: red;
+    text-shadow: 0 0 1rem orangered;
   }
 }