80 lines
2.0 KiB
Vue
80 lines
2.0 KiB
Vue
<template>
|
|
<AdminTile title="Players" icon-bottom="add" @icon-click="addPlayer">
|
|
<table class="players-tile__table">
|
|
<tr>
|
|
<th class="players-tile__table-head">{{ $t('name') }}:</th>
|
|
<th class="players-tile__table-head">{{ $t('num-quotes') }}</th>
|
|
<th class="players-tile__table-head">{{ $t('score') }}</th>
|
|
<th class="players-tile__table-head">{{ $t('last-logged-in') }}</th>
|
|
</tr>
|
|
<tr v-for="player in players" class="players-tile__row" :key="player.id">
|
|
<td>
|
|
{{ player.name }}
|
|
<div v-if="player.role === 'gamemaster'" class="players-tile__is-gamemaster"><Icon name="crown" /></div>
|
|
</td>
|
|
<td>{{ player.numQuotes }}</td>
|
|
<td>{{ player.score }}</td>
|
|
<td>{{ player.lastLoggedIn === 0 ? '-' : datetime(player.lastLoggedIn) }}</td>
|
|
</tr>
|
|
</table>
|
|
</AdminTile>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import useI18n from '@/composables/useI18n'
|
|
import useDateFormatter from '@/composables/useDateFormatter';
|
|
import type { GameInfo } from '@/composables/engine.d'
|
|
|
|
const props = defineProps<{
|
|
gameinfo: GameInfo
|
|
}>()
|
|
// const emit = defineEmits(['update'])
|
|
|
|
const { $t } = useI18n({
|
|
name: { en: 'Name', de: 'Name' },
|
|
'num-quotes': { en: '# quotes', de: '# Quotes' },
|
|
'score': { en: 'Score', de: 'Score' },
|
|
'last-logged-in': { en: 'last logged in', de: 'zuletzt eingeloggt' },
|
|
})
|
|
const { datetime } = useDateFormatter()
|
|
|
|
const players = computed(() => {
|
|
return props.gameinfo.players.sort((a, b) => a.name.localeCompare(b.name))
|
|
})
|
|
|
|
const addPlayer = () => {
|
|
alert('not yet implemented')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.players-tile {
|
|
&__container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&__table {
|
|
margin: 0 0 16px -12px;
|
|
border-collapse: separate;
|
|
border-spacing: 12px 0;
|
|
}
|
|
|
|
&__table-head {
|
|
text-align: left;
|
|
margin: 8px;
|
|
}
|
|
|
|
&__row {
|
|
height: 24px;
|
|
}
|
|
|
|
&__is-gamemaster {
|
|
display: inline-block;
|
|
margin-left: 4px;
|
|
width: 16px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
</style> |