<template>
	<div class="bg-gray-900 min-h-100vh overflow-y-auto text-white p-10 font-normal">
		<div :class="$style.noise"/>
		<div :class="$style.vignette"/>
		<div class="relative">
			<div v-if="isLoading" class="flex flex-col justify-center items-center text-20">
				<span>Loading…</span>
			</div>
			<LoginScreen v-else-if="auth.authenticatedUser === null"/>
			<JoinScreen v-else-if="!game.isActive"/>
			<PreStartScreen v-else-if="game.state.phase === 'pre-start'"/>
			<Game v-else/>
		</div>
	</div>
</template>

<style module lang="scss">
	.noise, .vignette {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.noise {
		background: url("./assets/noise.png") repeat;
		opacity: 10%;
	}

	.vignette {
		background: radial-gradient(rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 20%));
	}
</style>

<style>
  *, *::before, *::after {
    box-sizing: border-box;
  }

	html, body, #app {
    margin: 0;
    padding: 0;
		min-height: 100vh;
		width: 100vw;
		overflow-x: hidden;
		user-select: none;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 200ms ease;
	}

	.fade-enter-from,
	.fade-leave-to {
		opacity: 0;
	}

	.slide-down-enter-active,
	.slide-down-leave-active {
		position: absolute;
		transition: 200ms ease;
		transition-property: opacity, transform;
	}

	.slide-down-enter-from,
	.slide-down-leave-to {
		opacity: 0;
		transform: translateY(40%);
	}
</style>

<script setup lang="ts">
	import { ref } from "vue"
	import { useGame } from "./clientGame"
	import Game from "./components/Game.vue"
	import { useAuth } from "./auth"
	import JoinScreen from "./components/JoinScreen.vue"
	import LoginScreen from "./components/LoginScreen.vue"
	import PreStartScreen from "./components/PreStartScreen.vue"

	const isLoading = ref(true)
	const auth = useAuth()

	auth.fetchSelf().then(() => {
		isLoading.value = false
	})

	const game = useGame()
</script>
