63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
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>
|