<template>
	<div id="app">
		<WS-Test
			v-if="state == 'ws-test'"
		/>
		<Join-Or-Host
			v-else-if="state == 'game-type'"
			@is-host="is_host = $event"
			@go-to="state = $event"
		/>
		<Game-Code
			v-else-if="state == 'game-code'"
			@go-to="state = $event"
		/>
		<Game-Lobby
			v-else-if="state == 'lobby'"
		/>
	</div>
</template>

<script>
import GameLobby from './views/Lobby';
import JoinHost from './views/JoinHost';
import GameCodeEntry from './views/GameCode';
import WebsocketTests from './views/WebsocketTesting';

export default {
	name: 'App',
	components: {
		'WS-Test': WebsocketTests,
		'Game-Code': GameCodeEntry,
		'Join-Or-Host': JoinHost,
		'Game-Lobby': GameLobby,
	},
	data() {return {
		/*
		The different states are used to indicate what part of the game players
		should be seeing.

		Valid values:
			ws-test - Purely development driven, allows testing the socket
				events on the server
			game-type - The first screen that the user will see, this is when
				the user will choose to join an existing game or create a new
				one
			game-code - This is displayed when users are joining a game, it
				allows entering a username and game code, if the game code
				is supplied in the URL Search Parameters, default to that,
				otherwise leave the field empty.
			lobby - When the player is in the lobby, this displays all the
				players in the game so far, and updates as new players join.
				If the player is the host, they can re-arrange the presidential
				order by dragging and dropping the list of players, they also
				get a "Start Game" button that allows them to, well... start
				the game.
		*/
		state: `ws-test`,
		game_code: ``,
		is_host: false,
	}},
	methods: {},
}
</script>

<style lang="stylus">
@import "theme.styl"

html, body, #app {
	font-family: $fonts
	font-style: normal
	overflow: hidden
	padding: 0
	margin: 0
}

#app {
	background-color: $main-background-colour
	height: 100vh
	width: 100vw
}

.input {
	background-color: $input-background
	border-radius: $input-border-radius
	border-color: $input-border-colour
	border-width: $input-border-width
	border-style: solid
	text-align: center
	padding: 10px 15px
	color: $input-text
	outline: none
}

input[type="text"] {
	@extend .input
}
input[type="text"].warning {
	border-color: $input-border-colour-warning
}
input[type="text"].error {
	border-color: $input-border-colour-error
}
input[type="text"]:focus {
	border-color: $input-border-colour-focus
}

button {
	@extend .input
	font-family: $fonts
	letter-spacing: $input-letter-spacing
	font-size: 17px
}
button:hover {
	background-color: $input-background-hover
}
button:active {
	background-color: $input-background-active
}
</style>