Chat Overlay on global site done - needs to have chat hide still

frontend/src/auth.ts

@@ -4,6 +4,7 @@ import cookie from "js-cookie";
 import { ensureWindowState } from "@app/utils";
 import { navigateTo } from "./routing";
 
+
 cookie.remove("pkce");
 const headerProfile =
 	document.querySelector<HTMLDivElement>("#header-profile")!;

frontend/src/chat/chat.ts

@@ -393,7 +393,7 @@ clearText?.addEventListener("click", () => {
 });
 
 bquit?.addEventListener("click", () => {
-  showInfo('Nigel close the chat overlay please')
+  quitChat(socket);
 });
 
 // Enter key to send message
@@ -418,3 +418,8 @@ chatButton!.addEventListener("click", () => {
   }
 });
 
+document.addEventListener('click', () => {
+  if (socket) {
+    connected(socket);
+  }
+});

frontend/src/chat/chatHelperFunctions/connected.ts

@@ -6,27 +6,28 @@ import { updateUser } from "@app/auth";
 /**
  * function displays who is logged in the chat in the ping-Bubbies window 
  * @param socket 
- */
+*/
 
 export async function connected(socket: Socket): Promise<void> {
-
+	
+	const buddies = document.getElementById('div-buddies') as HTMLDivElement;
 	setTimeout(async () => {
 		try {
-				const buddies = document.getElementById('div-buddies') as HTMLDivElement;
-				const loggedIn = isLoggedIn();
-				if (!loggedIn) throw('Not Logged in');
-				let oldUser = localStorage.getItem("oldName") ?? "";
-				if (loggedIn?.name === undefined) {return ;};
-				oldUser =  loggedIn.name ?? "";
-				let user = await updateUser();
-				localStorage.setItem("oldName", oldUser);
-				buddies.textContent = "";
-				socket.emit('list', {
-					oldUser: oldUser,
-					user: user?.name,
-				});
-			} catch (e) {
-				showError('Failed to login: Unknown error');
-			}
-		}, 16);
+			let oldUser = localStorage.getItem("oldName") ?? "";
+			let user = await updateUser();
+			const loggedIn = isLoggedIn();
+			if (!loggedIn) throw('Not Logged in');
+			if (loggedIn?.name === undefined) {return ;};
+			oldUser =  loggedIn.name ?? "";
+			localStorage.setItem("oldName", oldUser);
+			socket.emit('list', {
+				oldUser: oldUser,
+				user: user?.name,
+			});
+			socket.connect();
+		} catch (e) {
+			buddies.textContent = "";
+			socket.disconnect();
+		}
+	}, 16);
 };

frontend/src/chat/chatHelperFunctions/quitChat.ts

@@ -8,22 +8,22 @@ import { setTitle } from "@app/routing";
 /**
  * function to quit the chat - leaves the ping-Buddies list
  * @param socket 
- */
+*/
 
 export function quitChat (socket: Socket) {
-
+	const chatBox = document.getElementById("chatBox")!;
+	const overlay = document.querySelector('#overlay')!;
+	
 	try {
-		const systemWindow = document.getElementById('system-box') as HTMLDivElement;
-		const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
-		if (socket) {
-			logout(socket);
-			setTitle('Chat Page');
-			connected(socket);
+		if (chatBox.classList.contains('hidden')) {
+			// chatBox.classList.toggle('hidden');
+			// overlay.classList.add('opacity-60');
 		} else {
-			getSocket();
+			chatBox.classList.toggle('hidden');
+			overlay.classList.remove('opacity-60');
 		}
 	} catch (e) {
 		showError('Failed to Quit Chat: Unknown error');
 	}
-
+	
 };

frontend/src/pages/root/root.html

@@ -1,4 +1,4 @@
-<div class="bg-gradient-to-br from-slate-50 to-slate-100 text-slate-800">
+<div class="bg-linear-to-br from-slate-50 to-slate-100 text-slate-800">
 
 	<!-- Hero -->
 	<section class="max-w-7xl mx-auto px-6 py-20 grid lg:grid-cols-2 gap-12 items-center">