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">
|
|
|
|
<v-app-bar-title>Shotgun</v-app-bar-title>
|
|
|
|
<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-29 22:11:56 -06:00
|
|
|
<TheLanding v-if="!playing" @play="playing = !playing" />
|
|
|
|
<Game v-else />
|
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-28 10:42:05 -06:00
|
|
|
import {
|
|
|
|
useDark,
|
|
|
|
useToggle,
|
|
|
|
} from '@vueuse/core';
|
2024-01-29 07:19:25 -06:00
|
|
|
import { computed, ref } from 'vue';
|
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-27 21:36:41 -06:00
|
|
|
</script>
|