<template>
	<div id="game_type_choice">
		<h1>
			Secret Hitler Online
		</h1>
		<div>
			<button
				@click.stop="join_game()"
			>Join a Game</button>
			<button
				@click.stop="host_game()"
			>Host a Game</button>
		</div>
	</div>
</template>

<script>
export default {
	name: 'JoinHost',
	components: {},
	data() {return {}},
	methods: {
		host_game() {
			let username = ``;
			do {
				username = prompt(`Enter a username:`, ``);
				if (!username) {
					return
				}
			} while (username.length == 0);

			sessionStorage.setItem(`user-name`, username);
			this.$socket.emit(`HostGame`, {
				username: username
			});
		},
		join_game() {
			sessionStorage.setItem(`is-host`, false)
			this.$emit(`go-to`, `game-code`)
		},
	},
	sockets: {
		HostInformation(data) {
			if (data.success) {
				localStorage.setItem(`user-id`, data.uuid)
				sessionStorage.setItem(`game-code`, data.game_code);
				sessionStorage.setItem(`is-host`, true);
				this.$emit(`go-to`, `lobby`);
			} else {
				console.error(data.message);
				this.$emit(`alert`, {
					message: data.message,
					classes: [`error`]
				});
			};
		}
	},
}
</script>

<style scoped>
@import "../css/colours.css";

#game_type_choice {
	text-align: center;
	width: 50vw;
}

button {
	width: 100%;
	margin: 5px;
}
</style>