<template>
  <td>
    <img :src="props.avatar" alt="Player avatar" class="player__avatar">
  </td>
  <td class="player__name">
    {{ props.name }}
  </td>
  <td>
    <img :src="props.rank ? require('@/images/rank_icons/skillgroup' + props.rank + '.svg') : require('@/images/rank_icons/skillgroup0.svg')"
         alt="Player rank"
         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} from "../utils";

export default {
  name: 'ScoreTeamPlayer',
  props: {
    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}
  }
}
</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;
}

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