Move the view components into a views folder rather than mixing them in with the other components.

src/views/GameCode.vue

@@ -0,0 +1,91 @@
+<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"
+				:disabled="is_host"
+				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) {
+				alert('The game code you have entered is invalid.');
+				this.game_code = ``;
+			}
+		},
+	},
+}
+</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>