42 lines
1.3 KiB
Vue
42 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import {computed, toRefs} from 'vue'
|
|
import type {PlayerQueue} from "@/types/GameSubTypes.ts";
|
|
import {useIngame} from "@/composables/useIngame.ts";
|
|
import type {GameInfo} from "@/types/GameTypes.ts";
|
|
|
|
const ig = useIngame()
|
|
const currentPlayer = computed(() => (<GameInfo>ig.data).playerQueue?.currentPlayer)
|
|
const queue = computed(() => { return (<GameInfo>ig.data).playerQueue.queue ?? []})
|
|
</script>
|
|
|
|
<template>
|
|
<q-card flat class="turn-tracker-container q-pa-md no-background">
|
|
<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">{{
|
|
currentPlayer?.name
|
|
}}</div>
|
|
|
|
<div v-if="queue.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 queue" :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;
|
|
}
|
|
.no-background {
|
|
background: none !important;
|
|
}
|
|
</style>
|