Begin foundational logic in order of webpage state

src/App.vue

@@ -1,27 +1,47 @@
 <template>
-  <div id="app">
+	<div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
+		<WS-Entry
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+			v-if="state == 'ws-url'"
-  </div>
+			@set-ws-url="websocket_url = $event"
+		/>
+		<Game-Code
+			v-else-if="state == 'game-code'"
+			@set-game-code="game_code = $event"
+		/>
+	</div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import GameCodeEntry from `./components/GameCode`;
+import WebsocketEntry from `./components/WebsocketURL`;
 
 export default {
-  name: 'App',
+	name: 'App',
-  components: {
+	components: {
-    HelloWorld
+		'WS-Entry': WebsocketEntry,
-  }
+		'Game-Code': GameCodeEntry,
+	},
+	data() {return {
+		state: `ws-url`,
+		websocket_url: ``,
+		game_code: ``,
+	}},
+	methods: {
+		set_ws(ws_uri) {
+			this.websocket_url = ws_uri;
+			this.state = `game-code`;
+		},
+		set_gamecode(gamecode) {
+			this.game_code = gamecode;
+			this.state = `game`;
+		},
+	},
 }
 </script>
 
 <style lang="stylus">
-#app
+#app {
-  font-family Avenir, Helvetica, Arial, sans-serif
+	height: 100vh
-  -webkit-font-smoothing antialiased
+	width: 100vw
-  -moz-osx-font-smoothing grayscale
+}
-  text-align center
-  color #2c3e50
-  margin-top 60px
 </style>