<template>
	<div id="game_code_entry">
		<h1>
			Secret Hitler Online
		</h1>
		<div>
			<label for="username">Username:</label>
			<input
				type="text"
				id="username"
				name="User Name"
				v-model="username"
				@keyup.enter.stop="$refs.gamecode.focus()"
			>
			<br>
			<label for="gamecode">Game Code:</label>
			<input
				ref="gamecode"
				type="text"
				id="gamecode"
				name="Game Code"
				v-model="game_code"
				@keyup.enter.stop="try_game_code"
			>
			<br>
			<button
				@click.stop="try_game_code"
			>
				Join Game
			</button>
		</div>
	</div>
</template>

<script>
export default {
	name: 'GameCodeEntry',
	components: {},
	data() {return {
		game_code: ``,
		username: ``,
	}},
	methods: {
		try_game_code() {
			if (this.game_code.length > 0) {
				this.$socket.emit(`JoinGame`, {
					game_code: this.game_code,
					username: this.username,
				})
			} else {
				alert(`Please a enter game code before proceeding.`)
			}
		},
	},
	sockets: {
		GameJoined(data) {
			if (!data.success) {
				this.$emit(`alert`, {
					message: data.message,
					classes: [`warning`],
				});
				return;
			};
			sessionStorage.setItem(`game-code`, this.game_code);
			sessionStorage.setItem(`is-host`, false);
			this.$emit(`go-to`, `lobby`);
		}
	}
}
</script>

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

#game_code_entry {
	text-align: center
	margin: 0 auto
	height: 100vh
	width: 50vw
	color: $main-text-colour

	h1, h3 {
		letter-spacing: $title-letter-spacing
	}

	p {
		letter-spacing: $body-letter-spacing
	}

	@media screen and (max-width: 600px) {
		width: 90vw
	}
}
</style>
<style lang="stylus" scoped>
@import "../theme.styl"

#game_code_entry {
	label {
		font-size: 1.2em
	}
	input[type="text"] {
		margin-bottom: 10px
		margin-left: 10px
		text-align: left
	}
}
</style>