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>