csgowtf/src/components/MatchChatHistory.vue

<template>
  <div class="chat-history mt-2">
    <table class="table table-borderless">
      <tbody>
      <tr v-for="(m, id) in data.chat" :key="id">
        <td>
          {{ ConvertTickToTime(m.tick) }}
        </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"></i>
            {{ m.player }}
            <i class="fa fa-external-link"/>
            </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>
</template>

<script>
import {useStore} from "vuex";
import {onMounted, reactive} from "vue";
import {GetChatHistory, constructAvatarUrl, GoToPlayer, ConvertTickToTime, FormatVacDate} 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) => {
      console.log(store.state.matchDetails)
      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: p.player.name,
              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,
              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%;
}

.player__vac {
  .vac-placeholder {
    width: 0;
  }
  img {
    width: 20px;
    height: 20px;
  }
}

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

  .tracked {
    font-size: .8rem;
  }

  .fa-external-link {
    color: white;
    font-size: .8rem;
    vertical-align: top;
  }
}

.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>