shotgun/site/src/App.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>
			<TheLanding v-if="!playing" @play="playing = !playing" />
			<Game v-else :game="testGame" :dealer="true" />
		</v-main>
	</v-app>
</template>

<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core';
import { computed, ref } from 'vue';
import type { Game } 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 testGame = ref<Game>({
	players: [
		{ hp: 4, items: ['🔍', '🔪', '', '', '', '', '', ''] },
		{ hp: 3, items: ['👮', '🚬', '', '', '', '', '', ''] },
	],
	round: 1,
	dealer: true,
	damage: 1,
	previous: null,
	live: 3,
	blank: 4,
});
</script>