From c340755ba28b34d7f73a0cb218a2767c0f1f6e2a Mon Sep 17 00:00:00 2001
From: Oliver Akins <oliver.akins1999@gmail.com>
Date: Tue, 15 Mar 2022 01:34:09 -0600
Subject: [PATCH] Make the JoinLobby modal nicer

---
 .../src/components/modals/JoinLobby.svelte    | 23 +++++++++----------
 web-svelte/src/views/home.svelte              |  9 ++++++++
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/web-svelte/src/components/modals/JoinLobby.svelte b/web-svelte/src/components/modals/JoinLobby.svelte
index 96dfdf8..cf1858c 100644
--- a/web-svelte/src/components/modals/JoinLobby.svelte
+++ b/web-svelte/src/components/modals/JoinLobby.svelte
@@ -1,22 +1,24 @@
 <script lang="ts">
-import { isHost, myName, gameCode, players, state } from "../../stores";
+import { onDestroy, createEventDispatcher, onMount } from "svelte";
+import { isHost, myName, gameCode, players } 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";
 
+const emit = createEventDispatcher();
+
 export let open: boolean = false;
-export let joining: boolean = false;
+export let joining: boolean;
 
 let errorMessage: string|null = null;
 
 function handleLobbyConnection(data: ILobbyInfo) {
 	if (data.status == Status.Success) {
-		console.log(`Succesfully joined lobby`);
+		console.debug(`Succesfully joined lobby`);
 		gameCode.set(data.game_code);
 		players.set(data.players);
-		state.set(`multiplayer-lobby`);
+		emit(`joined`);
 	} else {
 		console.error(data);
 		errorMessage = data.message;
@@ -24,20 +26,17 @@ function handleLobbyConnection(data: ILobbyInfo) {
 };
 
 onMount(() => {
-	if (joining) {
-		socket.on(`res:lobby.players.join`, handleLobbyConnection);
-	} else {
-		socket.on(`res:lobby.create`, handleLobbyConnection);
-	};
+	socket.on(`res:lobby.players.join`, handleLobbyConnection);
+	socket.on(`res:lobby.create`, handleLobbyConnection);
 });
 
 function connectToLobby() {
 	errorMessage = null;
-	isHost.set(joining);
+	isHost.set(!joining);
 
 	// Emit the correct event for the modal type
 	if (joining) {
-		socket.emit(`req:lobby.players.create`, {
+		socket.emit(`req:lobby.players.join`, {
 			name: $myName,
 			game_code: $gameCode,
 		});
diff --git a/web-svelte/src/views/home.svelte b/web-svelte/src/views/home.svelte
index 6c62f32..2e4f37b 100644
--- a/web-svelte/src/views/home.svelte
+++ b/web-svelte/src/views/home.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import LobbyModal from "../components/modals/JoinLobby.svelte";
 import SciFiButton from "../components/SciFi-Button.svelte";
+import { state } from "../stores";
 
 // The modals that can appear from this component
 const modal = {
@@ -18,12 +19,20 @@ function joinGame() {
 	modal.joinLobby = true;
 };
 
+function joinedLobby() {
+	modal.joinLobby = false;
+	setTimeout(() => {
+		state.set("multiplayer-lobby");
+	}, 750);
+};
+
 function singleplayerGame() {};
 </script>
 
 <LobbyModal
 	open="{modal.joinLobby}"
 	joining="{joiningLobby}"
+	on:joined={joinedLobby}
 	on:close="{_ => modal.joinLobby = false}"
 />