csgowtf/src/components/ScoreTeamPlayer.vue

<template>
  <td class="player__vac">
    <div v-if="!props.vac && !props.game_ban" class="vac-placeholder"></div>
    <img v-if="props.vac && FormatVacDate(props.vac_date, store.state.matchDetails.date) !== ''"
         :title="'Vac-banned: ' + FormatVacDate(props.vac_date, store.state.matchDetails.date)"
         alt="VAC-Ban"
         src="/images/icons/vac_banned.svg">
    <img v-if="!props.vac && props.game_ban && FormatVacDate(props.game_ban_date, store.state.matchDetails.date) !== ''"
         :title="'Game-banned: ' + FormatVacDate(props.game_ban_date, store.state.matchDetails.date)"
         alt="Game-Ban"
         src="/images/icons/game_banned.svg">
  </td>
  <td>
    <img :class="'team-color-' + props.color" :src="constructAvatarUrl(props.avatar)" alt="Player avatar"
         class="player__avatar">
  </td>
  <td class="player__name" @click="GoToPlayer(props.steamid64)">
    <i v-if="props.tracked" class="fa fa-dot-circle-o text-success tracked" title="Tracked user"></i>
    {{ props.name }}
    <i class="fa fa-external-link"></i>
  </td>
  <td v-if="props.parsed" class="player__rank">
    <img :alt="DisplayRank(props.rank_old)[1]"
         :class="props.rank_new > props.rank_old ? 'uprank' : props.rank_new < props.rank_old ? 'downrank' : ''"
         :src="DisplayRank(props.rank_old)[0]"
         :title="props.rank_new > props.rank_old ? 'Uprank to ' + DisplayRank(props.rank_new)[1] : props.rank_new < props.rank_old ? 'Downrank to ' + DisplayRank(props.rank_new)[1] : DisplayRank(props.rank_old)[1]">
  </td>
  <td v-if="!props.parsed" class="rank-placeholder"></td>
  <td class="player__kills">
    {{ props.kills }}
  </td>
  <td class="player__assist">
    {{ props.assists }}
  </td>
  <td class="player__deaths">
    {{ props.deaths }}
  </td>
  <td :class="props.kdiff >= 0 ? 'text-success' : 'text-danger'" class="player__kdiff">
    {{ props.kdiff }}
  </td>
  <td class="player__kd">
    {{
      (props.kills > 0 && props.deaths > 0) ? (props.kills / props.deaths).toFixed(2) : (props.kills > 0 && props.deaths === 0) ? props.kills : 0.00
    }}
  </td>
  <td v-if="props.parsed" class="player__adr">
    {{ (props.dmg / props.rounds_played).toFixed(2) }}
  </td>
  <td class="player__hs">
    {{ (props.hs > 0 && props.kills > 0) ? (props.hs * 100 / props.kills).toFixed(0) + "%" : "0%" }}
  </td>
  <td class="player__rating">
    {{
      GetHLTV_1(props.kills, props.rounds_played, props.deaths, props.mk_duo, props.mk_triple, props.mk_quad, props.mk_pent)
    }}
  </td>
  <td class="player__mvp">
    {{ props.mvp }}
  </td>
  <td class="player__score">
    {{ props.player_score }}
  </td>
</template>

<script>
import {constructAvatarUrl, DisplayRank, FormatVacDate, GetHLTV_1, GoToPlayer} from "@/utils";
import {useStore} from "vuex";

export default {
  name: 'ScoreTeamPlayer',
  props: {
    steamid64: {
      type: String,
      required: true,
      default: ''
    },
    avatar: {
      type: String,
      required: true,
      default: 'Avatar'
    },
    name: {
      type: String,
      required: true,
      default: 'Name'
    },
    rank_old: {
      type: Number,
      required: true,
      default: 0
    },
    rank_new: {
      type: Number,
      required: true,
      default: 0
    },
    kills: {
      type: Number,
      required: true,
      default: 0
    },
    assists: {
      type: Number,
      required: true,
      default: 0
    },
    deaths: {
      type: Number,
      required: true,
      default: 0
    },
    kdiff: {
      type: Number,
      required: true,
      default: 0
    },
    hs: {
      type: Number,
      required: true,
      default: 0
    },
    rounds_played: {
      type: Number,
      required: true,
      default: 0
    },
    mk_duo: {
      type: Number,
      required: true,
      default: 0
    },
    mk_triple: {
      type: Number,
      required: true,
      default: 0
    },
    mk_quad: {
      type: Number,
      required: true,
      default: 0
    },
    mk_pent: {
      type: Number,
      required: true,
      default: 0
    },
    dmg: {
      type: Number,
      required: true,
      default: 0
    },
    mvp: {
      type: Number,
      required: true,
      default: 0
    },
    player_score: {
      type: Number,
      required: true,
      default: 0
    },
    color: {
      type: String,
      required: true,
      default: ''
    },
    tracked: {
      type: Boolean,
      required: true,
      default: false
    },
    parsed: {
      type: Boolean,
      required: true,
      default: false
    },
    vac: {
      type: Boolean,
      required: true,
      default: false
    },
    vac_date: {
      type: Number,
      required: false,
      default: 0
    },
    game_ban: {
      type: Boolean,
      required: true,
      default: false
    },
    game_ban_date: {
      type: Number,
      required: false,
      default: 0
    }
  },
  setup(props) {
    const store = useStore()
    return {props, GetHLTV_1, GoToPlayer, DisplayRank, constructAvatarUrl, FormatVacDate, store}
  }
}
</script>

<style lang="scss" scoped>
.player__vac,
.vac-placeholder {
  width: 20px;
}

.player__vac {
  img {
    width: 20px;
    height: 20px;
  }
}

.player__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

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

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

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

.player__rank,
.rank-placeholder {
  width: 100px;

  img {
    width: 60px;
    height: auto;
  }
}

.player__kills, .player__assist, .player__deaths, .player__kdiff, .player__mvp {
  width: 40px;
}

.player__kd, .player__hs, .player__rating, .player__score {
  width: 75px;
}

.player__adr {
  width: 85px;
}

.player__rating {
  border-radius: 25% 25%;
}
</style>