csgowtf/src/components/MatchChatHistory.vue

<template>
  <div class="chat-history mt-2 d-flex justify-content-center align-items-center">
    <table v-if="data.chat.length > 0" class="table table-borderless">
      <tbody>
      <tr v-for="(m, id) in data.chat" :key="id">
        <td>
          {{ ConvertTickToTime(m.tick, m.tick_rate) }}
        </td>
        <td class="td-avatar">
          <img :class="'team-color-' + m.color"
               :src="constructAvatarUrl(m.avatar)"
               alt="Player avatar"
               class="avatar">
        </td>
        <td :class="m.startSide === 1 ? 'text-info' : 'text-warning'"
            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"/>
            <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"/>
          <span v-if="!m.all_chat" class="ms-1">
            (team)
          </span>
        </td>
        <td class="message">
          {{ m.message }}
        </td>
      </tr>
      </tbody>
    </table>
    <div v-else>
      <h3>No chat available</h3>
    </div>
  </div>
</template>

<script>
import {useStore} from "vuex";
import {onMounted, reactive} from "vue";
import {GetChatHistory, constructAvatarUrl, GoToPlayer, ConvertTickToTime, FormatVacDate, truncate} from "@/utils";

export default {
  name: "MatchChatHistory",
  setup() {
    const store = useStore()

    const data = reactive({
      chat: [],
    })

    const getChatHistory = async () => {
      const resData = await GetChatHistory(store, store.state.matchDetails.match_id)
      if (resData !== null)
        data.chat = await setPlayer(sortChatHistory(resData))
    }

    const sortChatHistory = (res = {}) => {
      let arr = []
      if (res !== {}) {
        Object.keys(res).forEach(i => {
          res[i].forEach(o => {
            let obj = Object.assign({
              player: i,
              tick: o.tick,
              all_chat: o.all_chat,
              message: o.message
            })
            arr.push(obj)
          })
        })
      }
      arr.sort((a, b) => a.tick - b.tick)
      return arr
    }

    const setPlayer = async (chat) => {
      let arr = []
      for (const o of chat) {
        for (const p of store.state.matchDetails.stats) {
          if (o.player === p.player.steamid64) {
            const obj = Object.assign({
              player: truncate(p.player.name, 20),
              steamid64: p.player.steamid64,
              avatar: p.player.avatar,
              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,
              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
            })
            arr.push(obj)
          }
        }
      }
      return arr
    }

    onMounted(() => {
      getChatHistory()
    })

    return {data, store, constructAvatarUrl, GoToPlayer, ConvertTickToTime, FormatVacDate}
  }
}
</script>

<style lang="scss" scoped>
table td {
  padding: .5rem;
}

.avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.name {
  cursor: pointer;
  text-align: left;
  width: 20ch;
  max-width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  .tracked {
    font-size: .8rem;
    margin-right: .2rem;
  }

  .ban-shadow {
    color: red;
    text-shadow: 0 0 1rem orangered;
  }
}

.fa-caret-right {
  font-size: 1rem;
}

.message {
  width: 40ch;
  max-width: 40ch;
}

@media screen and (max-width: 576px) {
  .td-avatar {
    display: none;
  }
  .name {
    width: 120px;
    max-width: 120px;
  }
}
</style>