Begin adding socket communication for lobby creating/joining

web-svelte/src/views/home.svelte

@@ -1,11 +1,29 @@
 <script lang="ts">
-import type { ICreateLobby, IJoinLobby } from "common";
+import { ICreateLobby, IJoinLobby, ILobbyInfo, Status } from "common";
-
 import SciFiButton from "../components/SciFi-Button.svelte";
+import { onMount, onDestroy } from "svelte";
 import { socket } from "../main";
+import { myName, players, isHost, state, gameCode } from "../stores";
 
 const invalidUsername = /[^A-Z\-\_\ ]/i;
 
+function handleLobbyCreation(data: ILobbyInfo) {
+	if (data.status == Status.Success) {
+		console.log(`Succesfully joined lobby`);
+		gameCode.set(data.game_code);
+		players.set(data.players);
+		state.set(`multiplayer-lobby`);
+	} else {
+		console.error(data.message);
+	};
+};
+function handleLobbyJoin(data: ILobbyInfo) {};
+
+onMount(() => {
+	socket.on(`res:lobby.create`, handleLobbyCreation);
+	socket.on(`res:lobby.players.join`, handleLobbyJoin);
+});
+
 /** Prompts a user for a name until it's valid */
 function getUsername() {
 	do {
@@ -14,6 +32,7 @@ function getUsername() {
 			return null;
 		};
 	} while (name.match(invalidUsername));
+	myName.set(name);
 	return name;
 };
 
@@ -21,7 +40,7 @@ function hostGame() {
 	let data: ICreateLobby = {
 		name: getUsername(),
 	};
-	socket.once(`res:lobby.create`, (data) => {console.log(data)});
+	isHost.set(true);
 	socket.emit(`req:lobby.create`, data)
 };
 
@@ -30,10 +49,18 @@ function joinGame() {
 		name: getUsername(),
 		game_code: prompt("Enter the lobby's room ID:")
 	};
+	isHost.set(false);
 	socket.emit(`req:lobby.players.join`, data)
 };
 
 function singleplayerGame() {};
+
+
+// Remove all of the listeners for the socket io events
+onDestroy(() => {
+	socket.off(`res:lobby.create`);
+	socket.off(`res:lobby.players.join`);
+})
 </script>
 
 <main>