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

do the wob seckot

This commit is contained in:
Branden J Brown 2024-02-02 18:19:25 -06:00
parent 8343dc60c7
commit 8e87ece54f
1 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
site/src/App.vue
View File

@ -7,7 +7,13 @@
</template>
</v-app-bar>
<v-main>
<v-container v-if="!playing && !loading">
<Game v-if="playing" :game="data" :dealer="true" @action="action" />
<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>
<v-container v-else>
<TheLanding />
<v-row v-if="!loadingMe && !me" class="d-flex justify-center">
<TheLogin />
@ -17,34 +23,44 @@
<v-btn class="mx-4">Log Out</v-btn>
</v-row>
</v-container>
<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" @action="(evt: Action) => action(evt)" />
</v-main>
</v-app>
</template>
<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core';
import { computed, onMounted, ref } from 'vue';
import type { Action, Game } from '@/lib/game';
import { useDark, useToggle, useWebSocket } from '@vueuse/core';
import { computed, onMounted, ref, watchEffect } from 'vue';
import type { Action, Game, GameStart } from '@/lib/game';
const dark = useDark();
const toggleDark = useToggle(dark);
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);
const { status, data, send, open } = useWebSocket<Game | GameStart>(`wss://${window.location.host}/queue`, { immediate: false });
const game = ref<Game | null>(null);
const dealer = ref<boolean | null>(null);
watchEffect(() => {
if (data.value == null) {
game.value = null;
dealer.value = null;
return;
}
if ('id' in data.value) {
// Game start.
dealer.value = data.value.dealer;
history.replaceState(null, '', `${window.origin}/game/${data.value.id}`);
return;
}
// Game state update.
game.value = data.value as Game;
});
const playing = computed(() => game.value != null);
const loading = computed(() => status.value === 'CONNECTING' || status.value === 'OPEN' && !playing.value);
function clickPlay() {
loading.value = true;
setTimeout(() => {
playing.value = true;
loading.value = false;
}, 1000);
open();
}
const testGame = ref<Game>({
@ -61,7 +77,8 @@ const testGame = ref<Game>({
});
function action(evt: Action) {
console.log(evt);
console.log('send action', evt);
send(JSON.stringify(action));
}
const loadingMe = ref(true);
@ -84,6 +101,5 @@ onMounted(async () => {
} catch {
me.value = null;
}
me.value = 'a';
});
</script>