2024-01-27 21:36:41 -06:00
|
|
|
<template>
|
2024-01-28 10:42:05 -06:00
|
|
|
<v-app :theme="theme">
|
2024-01-29 07:09:59 -06:00
|
|
|
<v-app-bar :elevation="2">
|
2024-01-31 06:42:35 -06:00
|
|
|
<v-app-bar-title>SHOTGUN</v-app-bar-title>
|
2024-01-29 07:09:59 -06:00
|
|
|
<template #append>
|
|
|
|
<v-btn :icon="themeIcon" @click="toggleDark()"></v-btn>
|
|
|
|
</template>
|
|
|
|
</v-app-bar>
|
2024-01-28 10:42:05 -06:00
|
|
|
<v-main>
|
2024-01-31 06:42:35 -06:00
|
|
|
<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>
|
2024-01-30 21:14:11 -06:00
|
|
|
<Game v-else :game="testGame" :dealer="true" />
|
2024-01-28 10:42:05 -06:00
|
|
|
</v-main>
|
|
|
|
</v-app>
|
2024-01-27 21:36:41 -06:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2024-01-30 21:14:11 -06:00
|
|
|
import { useDark, useToggle } from '@vueuse/core';
|
2024-01-29 07:19:25 -06:00
|
|
|
import { computed, ref } from 'vue';
|
2024-01-30 21:14:11 -06:00
|
|
|
import type { Game } from '@/lib/game';
|
2024-01-28 10:42:05 -06:00
|
|
|
|
|
|
|
const dark = useDark();
|
|
|
|
const toggleDark = useToggle(dark);
|
2024-01-29 07:19:25 -06:00
|
|
|
const theme = computed(() => dark.value ? 'dark' : 'light');
|
|
|
|
const themeIcon = computed(() => dark.value ? 'mdi-moon-waxing-crescent' : 'mdi-white-balance-sunny');
|
2024-01-28 10:42:05 -06:00
|
|
|
|
2024-01-29 07:19:25 -06:00
|
|
|
const playing = ref(false);
|
2024-01-31 06:42:35 -06:00
|
|
|
const loading = ref(false);
|
|
|
|
function clickPlay() {
|
|
|
|
loading.value = true;
|
|
|
|
setTimeout(() => {
|
|
|
|
playing.value = true;
|
|
|
|
loading.value = false;
|
|
|
|
}, 1000);
|
|
|
|
}
|
2024-01-30 21:14:11 -06:00
|
|
|
|
2024-01-30 22:39:24 -06:00
|
|
|
const testGame = ref<Game>({
|
2024-01-30 21:14:11 -06:00
|
|
|
players: [
|
2024-01-30 22:39:24 -06:00
|
|
|
{ hp: 4, items: ['🔍', '🔪', '', '', '', '', '', ''] },
|
|
|
|
{ hp: 3, items: ['👮', '🚬', '', '', '', '', '', ''] },
|
2024-01-30 21:14:11 -06:00
|
|
|
],
|
|
|
|
round: 1,
|
|
|
|
dealer: true,
|
|
|
|
damage: 1,
|
2024-01-30 22:39:24 -06:00
|
|
|
previous: null,
|
|
|
|
live: 3,
|
|
|
|
blank: 4,
|
|
|
|
});
|
2024-01-27 21:36:41 -06:00
|
|
|
</script>
|