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>
            <img :class="'team-color-' + m.color"
                 :src="constructAvatarUrl(m.avatar)"
                 alt="Player avatar"
                 class="avatar">
          </td>
          <td class="name"
              @click="GoToPlayer(m.steamid64)"
              :class="m.startSide === 1 ? 'text-info' : 'text-warning'">
            <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>
          </td>
          <td>
            
          </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} 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: p.player.name,
              steamid64: p.player.steamid64,
              avatar: p.player.avatar,
              color: p.color,
              startSide: p.team_id,
              tracked: p.player.tracked,
              tick: o.tick,
              all_chat: o.all_chat,
              message: o.message
            })
            arr.push(obj)
          }
        }
      }
      return arr
    }

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

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

<style lang="scss" scoped>
table td {
  padding: .5rem;
}
.avatar {
  width: 75%;
  height: 75%;
  border-radius: 50%;
}
.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;
  }
}
.message {
  width: 40ch;
  max-width: 40ch;
}
</style>