<template>
	<div id="app" class="maximize">
		<div v-if="!isMobile" class="maximize">
			<CreateJoin v-if="gameState == `login`" />
			<GameLobby v-else-if="gameState == `lobby`" />
			<InGame v-else-if="gameState == `in-game`" />
			<Attributions />
		</div>
		<div
			v-else
			class="error"
		>
			<h1 class="centre">Ghost Writer Online</h1>
			<p class="centre">
				To use this site you must be using a laptop, desktop, or iPad.
				If you are on one of those devices and you still see this message,
				please contact "oliver {at} akins.me" with the following information:
				<br><br>
				{{ userAgent }}
			</p>
		</div>
	</div>
</template>

<script>
import AttributionsBar from "./components/Attributions";
import CreateJoinGame from "./views/CreateJoin";
import GameLobby from "./views/Lobby";
import InGame from "./views/InGame";

export default {
	name: `App`,
	components: {
		"Attributions": AttributionsBar,
		"CreateJoin": CreateJoinGame,
		"GameLobby": GameLobby,
		"InGame": InGame,
	},
	computed: {
		gameState() {
			return this.$store.state.view;
		},
		userAgent() {
			if (navigator == null) {
				return "Navigator Undefined";
			};
			return navigator.userAgent;
		},
		isMobile () {
			return this.userAgent.match(/Navigator|iPhone|iPod|Android/) != null;
		},
	},
	methods: {},
	sockets: {
		Error(data) {

			// Ensure that it was actually an error
			if (200 <= data.status && data.status < 300) { return; };

			console.error(data)
		}
	}
}
</script>

<style>
@import "css/theme.css";
@import "css/style.css";

html, body {
	background-color: var(--background1);
	color: var(--light-font-colour);
	font-family: var(--fonts);
	overflow-x: hidden;
	height: 100vh;
	width: 100vw;
	padding: 0;
	margin: 0;
}

.error {
	border: solid 2px red;
	margin: 50% auto;
	width: 90%;
}
</style>