Janis
ecb38510de
Reviewed-on: #13 Reviewed-by: lq64 <lq@blackhole.local> Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>
39 lines
1.1 KiB
Vue
39 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import type {PlayerQueue} from "@/types/GameSubTypes.ts";
|
|
|
|
const props = defineProps<{
|
|
queue: PlayerQueue
|
|
}>()
|
|
|
|
const safeNextPlayers = computed(() => props.queue.players ?? [])
|
|
</script>
|
|
|
|
<template>
|
|
<q-card flat class="turn-tracker-container q-pa-md">
|
|
<q-card-section>
|
|
<div class="text-subtitle2 q-mb-xs">Current Player</div>
|
|
<div id="current-player-name" class="text-h6 text-weight-bold text-positive">{{
|
|
props.queue.currentPlayer?.name
|
|
}}</div>
|
|
|
|
<div v-if="safeNextPlayers.length > 0" class="q-mt-md">
|
|
<div id="next-players-text" class="text-subtitle2 q-mb-xs">Next Players</div>
|
|
<q-list id="next-players-container" dense>
|
|
<q-item v-for="player in safeNextPlayers" :key="player.id">
|
|
<q-item-section>
|
|
<div class="text-body1 text-primary">{{ player.name }}</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.turn-tracker-container {
|
|
max-width: 320px;
|
|
}
|
|
</style>
|