feat: show lobby with logged in players

This commit is contained in:
Settel 2022-08-08 19:24:18 +02:00
parent 600d359a23
commit e5b4c9262e
6 changed files with 122 additions and 10 deletions

View File

@ -15,6 +15,10 @@ $box-primary-background-color: $background-primary-color;
$box-primary-text-color: $text-primary-color; $box-primary-text-color: $text-primary-color;
$box-primary-border: 1px solid #e0e0e0; $box-primary-border: 1px solid #e0e0e0;
$box-primary-disabled-background-color: $box-primary-background-color;
$box-primary-disabled-text-color: darken($box-primary-text-color, 60%);
$box-primary-disabled-border: $box-primary-border;
// Button // Button
$button-background-color: #00a0e0; $button-background-color: #00a0e0;

View File

@ -1,10 +1,10 @@
<template> <template>
<div class="lobby__container"> <div class="lobby__container">
Lobby <div class="lobby__message">
waiting for gamemaster to start the game ...
</div>
<div class="lobby__players-list"> <div class="lobby__players-list">
<div v-for="player in players" :key="player.id" class="lobby__player"> <PlayerList :players="players" :hide-scores="true" />
* {{ player.name }}
</div>
</div> </div>
</div> </div>
</template> </template>
@ -19,7 +19,22 @@ const players = usePlayersStore().players
.lobby { .lobby {
&__container { &__container {
font-family: $font-primary; display: flex;
width: 100%;
height: 100%;
}
&__message {
flex-grow: 1;
margin: 60px 0 0 200px;
font-family: $font-secondary;
font-size: 24px;
text-align: center;
}
&__players-list {
width: 200px;
margin: 16px 16px 0 0;
} }
} }
</style> </style>

View File

@ -0,0 +1,65 @@
<template>
<div :class="['player__row', { 'player__row__idle': player.isIdle }]">
<div class="player__status">
<span v-if="isPhaseSelectQuote">{{ hasSelected ? '' : '' }}</span>
</div>
<div class="player__name">
{{ player.name }}
</div>
<div v-if="!hideScore" class="player__score">
{{ player.score || 0 }}
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { Player } from '@/stores/PlayersStore';
import { useGameinfoStore } from "@/stores/GameinfoStore"
defineProps<{
player: Player,
hideScore?: boolean,
}>()
const game = useGameinfoStore()
const isPhaseSelectQuote = computed(() => game.state === 'play' && game.phase === 'select-quote')
const hasSelected = computed(() => false) // return this.$store.state.round.selections[this.player.id]
</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>

View File

@ -0,0 +1,27 @@
<template>
<div class="player-list">
<div v-for="player in players" :key="player.id">
<Player :player="player" :hide-score="hideScores" />
</div>
</div>
</template>
<script setup lang="ts">
import type { Players } from '@/stores/PlayersStore'
defineProps<{
players: Players,
hideScores?: boolean,
}>()
</script>
<style lang="scss">
@import '~/assets/css/components';
.player-list {
padding: 8px;
border: $box-primary-border;
border-radius: 10px;
background-color: $box-primary-background-color;
}
</style>

View File

@ -7,7 +7,7 @@
</AlertBox> </AlertBox>
<div class="page-play__playfield-container"> <div class="page-play__playfield-container">
<div class="page-play__playfield-content"> <div class="page-play__playfield-content">
<Lobby v-if="true"/> <Lobby v-if="game.state === 'idle'"/>
</div> </div>
<EngineDebug v-if="showEngineDebug" class="page-play__playfield-debug" /> <EngineDebug v-if="showEngineDebug" class="page-play__playfield-debug" />
</div> </div>
@ -16,10 +16,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { navigateTo, useRoute } from '#app' import { navigateTo, useRoute } from '#app'
import { computed } from 'vue' import { computed, onMounted, onBeforeUnmount } from 'vue';
import useAuth from '@/composables/useAuth'; import useAuth from '@/composables/useAuth';
import useEngine from '@/composables/useEngine'; import useEngine from '@/composables/useEngine';
import { onMounted, onBeforeUnmount } from 'vue'; import { useGameinfoStore } from "@/stores/GameinfoStore"
// ensure user is authenticated // ensure user is authenticated
const { authenticateAndLoadUserInfo } = useAuth() const { authenticateAndLoadUserInfo } = useAuth()
@ -35,6 +35,7 @@ onBeforeUnmount(() => stopEngine())
// debugging // debugging
const showEngineDebug = computed(() => useRoute().hash.indexOf('debug') > -1) const showEngineDebug = computed(() => useRoute().hash.indexOf('debug') > -1)
const game = useGameinfoStore()
</script> </script>
<style lang="scss"> <style lang="scss">

View File

@ -12,12 +12,12 @@ export type Players = Array<Player>
export const usePlayersStore = defineStore('PlayersStore', { export const usePlayersStore = defineStore('PlayersStore', {
state: () => { state: () => {
return { return {
players: [], players: [] as Players,
} }
}, },
actions: { actions: {
setPlayers(players: Players): void { setPlayers(players: Players): void {
this.players = players this.players.splice(0, this.players.length, ...players)
}, },
}, },
}) })