<template>
	<div id="game_lobby">
		<h1>
			Secret Hitler Online
		</h1>
		<div>
			<h3>Players:</h3>
			<div
				v-for="player in players"
				:key="player"
				class="player"
			>{{ player }}</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'GameLobby',
	components: {},
	data() {return {
		players: []
	}},
	mounted() {
		this.game_code = sessionStorage.getItem(`game-code`);
		this.is_host = JSON.parse(sessionStorage.getItem(`is-host`));
		this.$nextTick(() => this.getPlayerList());
	},
	methods: {
		getPlayerList() {
			this.$socket.emit(`GetPlayerList`, {
				game_code: this.game_code,
			});
		},
	},
	sockets: {
		PlayerListResponse(data) {
			if (data.success) {
				this.players = data.players;
			} else {
				this.$emit(`alert`, {
					message: data.message,
					classes: [`warning`],
				});
			};
		},
		NewPlayer(data) {
			this.players.push(data.player);
		},
	},
}
</script>

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

#game_lobby {
	text-align: center
	width: 90vw
}
</style>