add loading indicator on queue start

This commit is contained in:
Branden J Brown 2024-01-31 06:42:35 -06:00
parent 3f0b57f87d
commit 7a612a6465
1 changed files with 15 additions and 2 deletions

View File

@ -1,13 +1,18 @@
<template>
<v-app :theme="theme">
<v-app-bar :elevation="2">
<v-app-bar-title>Shotgun</v-app-bar-title>
<v-app-bar-title>SHOTGUN</v-app-bar-title>
<template #append>
<v-btn :icon="themeIcon" @click="toggleDark()"></v-btn>
</template>
</v-app-bar>
<v-main>
<TheLanding v-if="!playing" @play="playing = !playing" />
<TheLanding v-if="!playing && !loading" @play="clickPlay" />
<v-container v-else-if="loading" class="fill-height">
<v-row class="d-flex justify-center">
<v-progress-circular class="pa-8" indeterminate size="128"></v-progress-circular>
</v-row>
</v-container>
<Game v-else :game="testGame" :dealer="true" />
</v-main>
</v-app>
@ -24,6 +29,14 @@ const theme = computed(() => dark.value ? 'dark' : 'light');
const themeIcon = computed(() => dark.value ? 'mdi-moon-waxing-crescent' : 'mdi-white-balance-sunny');
const playing = ref(false);
const loading = ref(false);
function clickPlay() {
loading.value = true;
setTimeout(() => {
playing.value = true;
loading.value = false;
}, 1000);
}
const testGame = ref<Game>({
players: [