Create view to choose whether to host or join a game.

src/components/JoinHost.vue

@@ -1,34 +0,0 @@
-<template>
-	<div id="game_code_entry">
-		<h1>
-			Secret Hitler Online
-		</h1>
-		<div>
-			<button>Join</button>
-			<button>Host</button>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'JoinHost',
-	components: {},
-	data() {return {
-		players: []
-	}},
-	methods: {},
-}
-</script>
-
-<style lang="stylus">
-@import "../theme.styl"
-</style>
-<style lang="stylus" scoped>
-@import "../theme.styl"
-
-button {
-	width: 100%
-	margin: 5px
-}
-</style>

src/views/JoinHost.vue

@@ -0,0 +1,62 @@
+<template>
+	<div id="game_code_entry">
+		<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 {}},
+	sockets: {
+		HostInformation(data) {
+			console.log(data)
+			if (data.success) {
+				sessionStorage.setItem(`game-code`, data.game_code);
+				this.$emit(`is-host`, true);
+				this.$emit(`go-to`, `lobby`);
+			} else {
+				this.error = data.error_message
+			};
+		}
+	},
+	methods: {
+		host_game() {
+			let username = ``;
+			do {
+				username = prompt(`Enter a username:`, ``);
+				if (!username) {
+					return
+				}
+			} while (username.length == 0);
+
+			this.$socket.emit(`HostGame`, {
+				username: username
+			});
+		},
+		join_game() {
+			this.$emit(`go-to`, ``)
+		},
+	},
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "../theme.styl"
+
+button {
+	width: 100%
+	margin: 5px
+}
+</style>