From 0c16448d433feb456616b95931a26398690adf2e Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sun, 27 Sep 2020 16:13:35 -0600
Subject: [PATCH] Add base functionality to the view switching

---
 src/App.vue | 55 +++++++++++++++++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 00d5762..697249c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,46 +1,65 @@
 <template>
 	<div id="app">
-		<WS-Entry
-			v-if="state == 'ws-url'"
-			@set-ws-url="websocket_url = $event"
+		<WS-Test
+			v-if="state == 'ws-test'"
 		/>
 		<Join-Or-Host
 			v-else-if="state == 'game-type'"
+			@is-host="is_host = $event"
+			@go-to="state = $event"
 		/>
 		<Game-Code
 			v-else-if="state == 'game-code'"
-			@set-game-code="game_code = $event"
+			@go-to="state = $event"
 		/>
+		<div
+			v-else-if="state == 'lobby'"
+			@go-to="state = $event"
+		>
+			IT'S A LOBBY
+		</div>
 	</div>
 </template>
 
 <script>
 import JoinHost from './components/JoinHost';
 import GameCodeEntry from './components/GameCode';
-import WebsocketEntry from './components/WebsocketURL';
+import WebsocketTests from './components/WebsocketTesting';
 
 export default {
 	name: 'App',
 	components: {
-		'WS-Entry': WebsocketEntry,
+		'WS-Test': WebsocketTests,
 		'Game-Code': GameCodeEntry,
 		'Join-Or-Host': JoinHost,
 	},
 	data() {return {
-		state: `ws-url`,
-		websocket_url: ``,
+		/*
+		The different states are used to indicate what part of the game players
+		should be seeing.
+
+		Valid values:
+			ws-test - Purely development driven, allows testing the socket
+				events on the server
+			game-type - The first screen that the user will see, this is when
+				the user will choose to join an existing game or create a new
+				one
+			game-code - This is displayed when users are joining a game, it
+				allows entering a username and game code, if the game code
+				is supplied in the URL Search Parameters, default to that,
+				otherwise leave the field empty.
+			lobby - When the player is in the lobby, this displays all the
+				players in the game so far, and updates as new players join.
+				If the player is the host, they can re-arrange the presidential
+				order by dragging and dropping the list of players, they also
+				get a "Start Game" button that allows them to, well... start
+				the game.
+		*/
+		state: `ws-test`,
 		game_code: ``,
+		is_host: false,
 	}},
-	methods: {
-		set_ws(ws_uri) {
-			this.websocket_url = ws_uri;
-			this.state = `game-code`;
-		},
-		set_gamecode(gamecode) {
-			this.game_code = gamecode;
-			this.state = `game`;
-		},
-	},
+	methods: {},
 }
 </script>