knowyt/client/src/components/Player.vue

<template>
  <div :class="['player__row', { 'player__row__idle': player.isIdle }]">
    <div class="player__status">
      <span v-if="showCheckbox">{{ checked ? '☑' : '☐' }}</span>
    </div>
    <div class="player__name">
      {{ player.name }}
    </div>
    <div v-if="showScore" class="player__score">
      {{ player.score || 0 }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { Player } from '@/composables/engine.d';

defineProps<{
  player: Player,
  showScore?: boolean,
  showCheckbox?: boolean,
  checked?: boolean,
}>()

</script>

<style lang="scss">
@import '~/assets/css/components';

.player {
  &__row {
    display: flex;
    background-color: $box-primary-background-color;
    color: $box-primary-text-color;
    font-family: $font-secondary;
    font-size: 18px;

    &__idle {
      background-color: $box-primary-disabled-background-color;
      color: $box-primary-disabled-text-color;
    }
  }

  &__name {
    display: inline;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__status {
    width: 20px;
  }

  &__score {
    width: 32px;
    margin-left: 16px;
    text-align: right;
  }
}
</style>