136 lines
3.5 KiB
Vue
136 lines
3.5 KiB
Vue
<template>
|
|
<v-app :theme="theme">
|
|
<v-app-bar :elevation="2">
|
|
<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>
|
|
<Game v-if="playing" :game="game" :dealer="dealer" @action="(evt: Action) => action(evt)" />
|
|
<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 />
|
|
</v-row>
|
|
<v-row v-else-if="!loadingMe" class="d-flex justify-center">
|
|
<v-btn @click="clickPlay" class="mx-4" color="primary">Play</v-btn>
|
|
<v-btn class="mx-4">Log Out</v-btn>
|
|
</v-row>
|
|
</v-container>
|
|
</v-main>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
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 local = window.location.hostname === 'localhost';
|
|
|
|
const { status, data, send, open, close } = useWebSocket<string>(`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;
|
|
if (window.location.pathname.includes('game/')) {
|
|
history.replaceState(null, '', window.origin);
|
|
}
|
|
return;
|
|
}
|
|
const m = JSON.parse(data.value) as Game | GameStart;
|
|
if ('id' in m) {
|
|
// Game start.
|
|
dealer.value = m.dealer;
|
|
history.replaceState(null, '', `${window.origin}/game/${m.id}`);
|
|
return;
|
|
}
|
|
// Game state update.
|
|
game.value = m as Game;
|
|
});
|
|
|
|
const playing = computed(() => game.value != null);
|
|
const loading = computed(() => status.value === 'CONNECTING' || status.value === 'OPEN' && !playing.value);
|
|
|
|
function clickPlay() {
|
|
if (local) {
|
|
game.value = {
|
|
action: "Start",
|
|
damage: 1,
|
|
dealer: false,
|
|
players: [
|
|
{hp: 4, items: ['', '', '', '', '', '', '', '']},
|
|
{hp: 4, items: ['', '', '', '', '', '', '', '']},
|
|
],
|
|
previous: null,
|
|
round: 1,
|
|
deadline: Date.now() + 15000,
|
|
blank: 3,
|
|
live: 2,
|
|
}
|
|
data.value = JSON.stringify(game.value);
|
|
dealer.value = false;
|
|
return;
|
|
}
|
|
open();
|
|
send('{"action":"ping"}');
|
|
}
|
|
|
|
function action(evt: Action) {
|
|
if (local && game.value != null) {
|
|
game.value.dealer = !game.value.dealer;
|
|
game.value.deadline = Date.now() + 15000;
|
|
return;
|
|
}
|
|
if (evt.action === 'quit') {
|
|
// Just close the connection. The server knows what to do.
|
|
data.value = null;
|
|
close(1000, 'I quit.');
|
|
return;
|
|
}
|
|
const s = JSON.stringify({action: evt.action});
|
|
console.log('send action', evt, s);
|
|
send(s);
|
|
}
|
|
|
|
const loadingMe = ref(true);
|
|
const me = ref<string | null>(null);
|
|
onMounted(async () => {
|
|
if (local) {
|
|
loadingMe.value = false;
|
|
me.value = 'a';
|
|
return;
|
|
}
|
|
loadingMe.value = true;
|
|
try {
|
|
const resp = await fetch('/user/me', {
|
|
method: 'GET',
|
|
mode: 'same-origin',
|
|
credentials: 'same-origin',
|
|
})
|
|
loadingMe.value = false;
|
|
if (!resp.ok) {
|
|
me.value = null;
|
|
return;
|
|
}
|
|
const { id } = await resp.json();
|
|
me.value = id as string;
|
|
} catch {
|
|
me.value = null;
|
|
}
|
|
});
|
|
</script>
|