csgowtf/src/components/ScoreTeamPlayer.vue

<template>
  <td>
    <img :src="props.avatar" alt="Player avatar" class="player__avatar">
  </td>
  <td class="player__name" @click="GoToPlayer(props.steamid64)">
    {{ props.name }}
    <svg class="bi bi-link-45deg" fill="currentColor" height="12" viewBox="0 0 16 16"
         width="12" xmlns="http://www.w3.org/2000/svg">
      <path
          d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
      <path
          d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
    </svg>
  </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">
    {{ (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 {GetHLTV_1, GoToPlayer, DisplayRank} 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
    }
  },
  setup(props) {
    return {props, GetHLTV_1, GoToPlayer, DisplayRank}
  }
}
</script>

<style scoped lang="scss">
.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;
}

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