add loading indicator on queue start
This commit is contained in:
parent
3f0b57f87d
commit
7a612a6465
@ -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: [
|
||||
|
Loading…
Reference in New Issue
Block a user