studio/shotgun
2
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

add loading indicator on queue start

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

17
site/src/App.vue
View File

@@ -1,13 +1,18 @@
<template> <template>
<v-app :theme="theme"> <v-app :theme="theme">
<v-app-bar :elevation="2"> <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> <template #append>
<v-btn :icon="themeIcon" @click="toggleDark()"></v-btn> <v-btn :icon="themeIcon" @click="toggleDark()"></v-btn>
</template> </template>
</v-app-bar> </v-app-bar>
<v-main> <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" /> <Game v-else :game="testGame" :dealer="true" />
</v-main> </v-main>
</v-app> </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 themeIcon = computed(() => dark.value ? 'mdi-moon-waxing-crescent' : 'mdi-white-balance-sunny');
const playing = ref(false); 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>({ const testGame = ref<Game>({
players: [ players: [