feat(ui): FRO-34 Lobby (#21)
Started with Lobby Component Co-authored-by: LQ63 <lkhermann@web.de> Co-authored-by: Janis <janis-e@gmx.de> Reviewed-on: #21 Reviewed-by: Janis <janis-e@gmx.de> Co-authored-by: lq64 <lq@blackhole.local> Co-committed-by: lq64 <lq@blackhole.local>
This commit is contained in:
@@ -1,26 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
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 props = defineProps<{
|
||||
queue: PlayerQueue
|
||||
}>()
|
||||
|
||||
const safeNextPlayers = computed(() => props.queue.players ?? [])
|
||||
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">
|
||||
<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">{{
|
||||
props.queue.currentPlayer?.name
|
||||
currentPlayer?.name
|
||||
}}</div>
|
||||
|
||||
<div v-if="safeNextPlayers.length > 0" class="q-mt-md">
|
||||
<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 safeNextPlayers" :key="player.id">
|
||||
<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>
|
||||
@@ -35,4 +35,7 @@ const safeNextPlayers = computed(() => props.queue.players ?? [])
|
||||
.turn-tracker-container {
|
||||
max-width: 320px;
|
||||
}
|
||||
.no-background {
|
||||
background: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user