Added Date.now ClientChat that stores user, socket id and date

frontend/src/pages/chat/chat.html

@@ -1,19 +1,19 @@
 <div class="displaybox">
 	<div id="mainbox" class="mainboxDisplay">
-			<button id="b-whoami" class="btn-style absolute top-6 left-6">Who am i</button>
-			<h1 class="text-3xl font-bold text-gray-800">
-				Chat Box <span id="t-username"></span>
-			</h1><br>
-			<button id="b-clear" class="btn-style absolute top-6 right-6">Clear Text</button>
-			<button id="b-help" class="btn-style absolute top-18 left-6">Connected</button>
-			<p>Welcome <span id="username"></span></p></br>
-			<div id="t-chatbox" class="chatbox-style"></div>
-			</br>
-			<div class="flex gap-2">
-				<input id="t-chat-window" placeholder="Type your message..." class="chat-window-style flex-1" />
-				<button id="b-send" class="send-btn-style">Send</button>
-			</div>
-			</br>
-			<p class="text-gray-400">From this Chat Box you can send messages to other players</p>
+		<button id="b-whoami" class="btn-style absolute top-6 left-6">Who am i</button>
+		<h1 class="text-3xl font-bold text-gray-800">
+			Chat Box <span id="t-username"></span>
+		</h1><br>
+		<button id="b-clear" class="btn-style absolute top-6 right-6">Clear Text</button>
+		<button id="b-help" class="btn-style absolute top-18 left-6">Connected</button>
+		<p>Welcome <span id="username"></span></p></br>
+		<div id="t-chatbox" class="chatbox-style"></div>
+		</br>
+		<div class="flex gap-2">
+			<input id="t-chat-window" placeholder="Type your message..." class="chat-window-style flex-1" />
+			<button id="b-send" class="send-btn-style">Send</button>
 		</div>
-	</div>
+		</br>
+		<p class="text-gray-400">From this Chat Box you can send messages to other players</p>
+	</div>
+</div>

frontend/src/pages/chat/chat.ts

@@ -12,6 +12,33 @@ document.addEventListener('ft:pageChange', () => {
 	__socket = undefined;
 	console.log("Page changed");
 })
+
+
+document.addEventListener("visibilitychange", async () => {
+
+	// When user leaves tab
+	if (document.visibilityState === "hidden") {
+		console.log("User LEFT this tab");
+
+		// if (__socket) {
+		// 	__socket.close();
+		// 	__socket = undefined;
+		// }
+
+		return;
+	}
+
+	// When user returns to tab → soft reload using imported HTML file
+	if (document.visibilityState === "visible") {
+	//     location.reload();
+	//console.log(location.replace(location.href));
+
+
+		console.log('Chat Visible')
+	}
+});
+
+
 function getSocket(): Socket {
 	if (__socket === undefined)
 		__socket = io("wss://localhost:8888", {
@@ -23,6 +50,10 @@ function getSocket(): Socket {
 }
 
 
+async function isLoggedIn() {
+	return getUser() || null;
+} 
+
 
 
 function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
@@ -43,6 +74,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 		};
 		socket.emit('message', JSON.stringify(message));
 	});
+
 	// Listen for messages from the server "MsgObjectServer"
 	socket.on("MsgObjectServer", (data: any) => {
 		console.log("Message Obj Recieved:", data.message);
@@ -109,6 +141,11 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 				console.log(`Added new message: ${text}`)
 			};
 
+
+			socket.on("welcome", (data) => {
+    			addMessage(`${data.msg}`);
+			});
+
 			// Send button
 			sendButton?.addEventListener("click", () => {
 				if (sendtextbox && sendtextbox.value.trim()) {
@@ -141,9 +178,13 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 
 			// Help Text button
 			bconnected?.addEventListener("click", async () => {
+
+				const loggedIn = await isLoggedIn();
+				
+				if (loggedIn?.name === undefined) return ;
 				if (chatWindow) {
 					addMessage('@list - lists all connected users in the chat');
-					await socket.emit('list');
+					socket.emit('list');
 				}
 			});
 			socket.on('listObj', (list: string) => {
@@ -152,6 +193,9 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 			});
 
 
+
+
+
 			// Enter key to send message
 			sendtextbox!.addEventListener('keydown', (event) => {
 				if (event.key === 'Enter') {

frontend/src/routing/index.ts

@@ -196,6 +196,7 @@ export async function handleRoute() {
 		return navigateTo(`/login?returnTo=${encodeURIComponent(window.location.pathname)}`)
 	const app = document.getElementById('app')!;
 	document.dispatchEvent(new CustomEvent('ft:pageChange' as any, {} as any) as any);
+	document.dispatchEvent(new CustomEvent('ft:tabChange' as any, {} as any) as any);
 	let ret = await executeRouteHandler(route_handler, window.location.pathname, args)
 	app.innerHTML = ret.html;
 	if (ret.postInsert) {