Move lobby creation/hosting into it's own modal

web-svelte/src/components/modals/JoinLobby.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+import { isHost, myName, gameCode, players, state } from "../../stores";
+import SciFiButton from "../SciFi-Button.svelte";
+import { ILobbyInfo, Status } from "common";
+import { onDestroy, onMount } from "svelte";
+import BaseModal from "./BaseModal.svelte";
+import { socket } from "../../main";
+
+export let open: boolean = false;
+export let joining: boolean = false;
+
+let errorMessage: string|null = null;
+
+function handleLobbyConnection(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);
+		errorMessage = data.message;
+	};
+};
+
+onMount(() => {
+	if (joining) {
+		socket.on(`res:lobby.players.join`, handleLobbyConnection);
+	} else {
+		socket.on(`res:lobby.create`, handleLobbyConnection);
+	};
+});
+
+function connectToLobby() {
+	errorMessage = null;
+	isHost.set(joining);
+
+	// Emit the correct event for the modal type
+	if (joining) {
+		socket.emit(`req:lobby.players.create`, {
+			name: $myName,
+			game_code: $gameCode,
+		});
+	} else {
+		socket.emit(`req:lobby.create`, {
+			name: $myName
+		});
+	};
+}
+
+onDestroy(() => {
+	socket.off(`res:lobby.create`);
+	socket.off(`res:lobby.players.join`);
+});
+</script>
+
+<BaseModal {open} on:close>
+	<div class="foreground">
+		<h1>{joining ? "Join Game" : "Create Lobby"}</h1>
+		<hr>
+		<div class="form">
+			<label for="name">Username:</label>
+			<input
+				type="text"
+				name="name"
+				id="name"
+				bind:value="{$myName}"
+			>
+			{#if joining}
+				<br>
+				<label for="game-code">Game Code:</label>
+				<input
+					type="text"
+					name="game code"
+					id="game-code"
+					bind:value="{$gameCode}"
+				>
+			{/if}
+		</div>
+		<br>
+		<SciFiButton
+			on:click="{connectToLobby}"
+		>
+			{joining ? "Join Game" : "Create Lobby"}
+		</SciFiButton>
+		{#if errorMessage}
+			<div class="error">
+				{errorMessage}
+			</div>
+		{/if}
+	</div>
+</BaseModal>
+
+<style lang="scss">
+.foreground {
+	text-align: center;
+
+	.form {
+		display: inline-block;
+		text-align: right;
+	}
+
+	input[type="text"] {
+		background: black;
+		color: white;
+		padding: 5px 7px;
+		outline: none;
+		border-radius: 7px;
+		border-width: 2px;
+		border-color: transparent;
+		border-style: solid;
+		margin: 10px;
+	}
+
+	input[type="text"]:focus {
+		border-color: #0a0;
+	}
+}
+</style>

web-svelte/src/views/home.svelte

@@ -1,77 +1,32 @@
 <script lang="ts">
-import { ICreateLobby, IJoinLobby, ILobbyInfo, Status } from "common";
+import LobbyModal from "../components/modals/JoinLobby.svelte";
 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;
+// The modals that can appear from this component
-
+const modal = {
-function handleLobbyCreation(data: ILobbyInfo) {
+	joinLobby: false,
-	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) {
-	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);
-	};
-};
-
-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 {
-		var name = prompt("What name do you want to appear in game?");
-		if (name.length == 0) {
-			return null;
-		};
-	} while (name.match(invalidUsername));
-	myName.set(name);
-	return name;
 };
+let joiningLobby = false;
 
 function hostGame() {
-	let data: ICreateLobby = {
+	joiningLobby = false;
-		name: getUsername(),
+	modal.joinLobby = true;
-	};
-	isHost.set(true);
-	socket.emit(`req:lobby.create`, data)
 };
 
 function joinGame() {
-	let data: IJoinLobby = {
+	joiningLobby = true;
-		name: getUsername(),
+	modal.joinLobby = true;
-		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>
 
+<LobbyModal
+	open="{modal.joinLobby}"
+	joining="{joiningLobby}"
+	on:close="{_ => modal.joinLobby = false}"
+/>
+
 <main>
 	<div>
 		<h1>Gravwell</h1>