csgowtf/src/components/ScoreTeamPlayer.vue

<template>
  <td>
    <img :src="props.avatar" alt="Player avatar" class="player__avatar" :class="'team-color-' + props.color">
  </td>
  <td class="player__name" @click="GoToPlayer(props.steamid64)">
    <i class="far fa-dot-circle text-success tracked" v-if="props.tracked" title="Tracked user"></i>
    {{ props.name }}
    <i class="fas fa-link"></i>
  </td>
  <td>
    <img :src="DisplayRank(props.rank)[0]"
         :alt="DisplayRank(props.rank)[1]"
         :title="DisplayRank(props.rank)[1]"
         class="player__rank">
  </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 class="player__adr" v-if="props.parsed">
    {{ (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 {DisplayRank, GetHLTV_1, GoToPlayer} from "../utils";

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: {
      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
    }
  },
  setup(props) {
    return {props, GetHLTV_1, GoToPlayer, DisplayRank}
  }
}
</script>

<style scoped lang="scss">
.team-color-blue,
.team-color-orange,
.team-color-green,
.team-color-purple,
.team-color-yellow {
  outline: 3px solid;
}
.team-color-orange {
  outline-color: var(--csgo-orange);
}
.team-color-blue {
  outline-color: var(--csgo-blue);
}
.team-color-yellow {
  outline-color: var(--csgo-yellow);
}
.team-color-purple {
  outline-color: var(--csgo-purple);
}
.team-color-green {
  outline-color: var(--csgo-green);
}
.team-color-grey {
  outline: none;
}

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

  .fas {
    font-size: .5rem;
    vertical-align: top;
  }
}

.player__rank {
  width: 60px;
}

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