Added profil popup - WIP page opens on double click of the name of buddy

frontend/src/chat/chat.css

@@ -4,6 +4,8 @@
   src: url("/fonts/NimbusMonoL.woff2") format("woff2");
 }
 
+@tailwind utilities;
+
 .btn-style {
   @apply
   w-[100px]
@@ -189,4 +191,31 @@ div-private {
   @apply
   text-blue-800;
 
+}
+
+.popUpBox {
+  @apply
+  bg-white 
+  p-6 rounded-xl 
+  shadow-xl 
+  w-[800px]
+  h-[350px]
+  p-[10px]
+  border-1 
+  border-black
+
+}
+
+.profilPopup {
+  @apply 
+  fixed 
+  inset-0 
+  bg-black/50 
+  flex
+  justify-center 
+  items-center;
+}
+
+.hidden{
+    display: none;
 }

frontend/src/pages/chat/chat.html

@@ -31,6 +31,12 @@
               <p>Charlie</p> -->
             </div>
           </div>
+          <div id="profile-modal" class="profilPopup hidden">
+            <div class="popUpBox">
+              <p class="text-xl font-bold" id="modal-name"></p>
+              <button id="close-modal" class="btn-style absolute bottom-32 right-12">Close</button>
+            </div>
+          </div>
         </div>
       </div>
     </div>

frontend/src/pages/chat/chat.ts

@@ -110,13 +110,23 @@ function parseCmdMsg(msgText: string): string[] | undefined {
         command[1] = msgText;
         return command;
     }
-    const noArgCommands = ['@quit', '@cls', '@profile'];
+    const noArgCommands = ['@quit', '@who', '@cls'];
     if (noArgCommands.includes(msgText)) {
         command[0] = msgText;
         command[1] = '';
         return command;
     }
-    const colonIndex = msgText.indexOf(":");
+
+	const ArgCommands = ['@profil', '@block'];
+	const userName = msgText.indexOf(" ");
+	const cmd2 = msgText.slice(0, userName).trim() ?? "";        
+	const user = msgText.slice(userName + 1).trim();
+	if (ArgCommands.includes(cmd2)) {
+    	    command[0] = cmd2;
+    	    command[1] = user;
+    	    return command;
+	}
+	const colonIndex = msgText.indexOf(":");
     if (colonIndex === -1) {
         command[0] = msgText;
         command[1] = '';
@@ -147,6 +157,12 @@ async function listBuddies(buddies: HTMLDivElement, listBuddies: string) {
 		} 
 	});
 
+	buddiesElement.addEventListener("dblclick", () => {
+        console.log("Open profile:", listBuddies);
+    	openProfilePopup(`Profil: ${listBuddies}`);
+
+    });
+
 	buddies.appendChild(buddiesElement);
 	buddies.scrollTop = buddies.scrollHeight;
 	console.log(`Added buddies: ${listBuddies}`);
@@ -244,7 +260,7 @@ async function connected(socket: Socket): Promise<void> {
 async function whoami(socket: Socket) {
 	try {
 		const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
-		const loggedIn = await isLoggedIn();
+		const loggedIn = isLoggedIn();
 
 		const res = await client.guestLogin();
 		switch (res.kind) {
@@ -271,6 +287,15 @@ async function whoami(socket: Socket) {
 	}
 };
 
+async function openProfilePopup(profil: string) {
+
+	const modalname = document.getElementById("modal-name") ?? null;
+	if (modalname)
+		modalname.innerHTML = profil;
+			const profilList = document.getElementById("profile-modal") ?? null;
+	if (profilList)
+		profilList.classList.remove("hidden");
+}
 
 
 function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
@@ -438,6 +463,16 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
                 console.log('unknown response: ', value);
             }
 
+
+
+			const buttonPro = document.getElementById("close-modal") ?? null;
+
+			if (buttonPro)
+				buttonPro.addEventListener("click", () => {
+  				const profilList = document.getElementById("profile-modal") ?? null;
+				if (profilList) profilList.classList.add("hidden");
+			});
+
 			// Send button
 			sendButton?.addEventListener("click", () => {
 				if (sendtextbox && sendtextbox.value.trim()) {
@@ -452,6 +487,10 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
     						case '@who':
 								whoami(socket);
 								break;
+							case '@profil':
+								if (`${msgCommand[1]}`)
+									openProfilePopup(`Profil: ${msgCommand[1]}`);
+								break;
     						case '@cls':
     						    chatWindow.innerHTML = '';
     						    break;
@@ -501,7 +540,8 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 				}
 			});
 
-			// Whoami button to display user name
+			// Whoami button to display user name					addMessage(msgCommand[0]);
+
 			bwhoami?.addEventListener('click', async () => {
 				whoami(socket);
 			});

src/chat/src/app.ts

@@ -144,43 +144,32 @@ async function onReady(fastify: FastifyInstance) {
 				// );
 				continue;
 			}
-
 			// If no io provided, assume entries in the map are valid and count them.
 			count++;
-			console.log(
+			console.log(color.red, 'DEBUG LOG: - Client (unverified):', color.reset, username );
-				color.red,
+			console.log(color.red, 'DEBUG LOG: - Chat Socket ID (unverified):', color.reset, socketId);
-				'Client (unverified):',
-				color.reset,
-				username,
-			);
-			console.log(
-				color.red,
-				'Chat Socket ID (unverified):',
-				color.reset,
-				socketId,
-			);
 		}
 		return count;
 	}
 
 	function broadcast(data: ClientMessage, sender?: string) {
 		fastify.io.fetchSockets().then((sockets) => {
-			for (const s of sockets) {
+			for (const socket of sockets) {
 				// Skip sender's own socket
-				if (s.id === sender) continue;
+				if (socket.id === sender) continue;
 				// Get client name from map
-				const clientInfo = clientChat.get(s.id);
+				const clientInfo = clientChat.get(socket.id);
 				if (!clientInfo?.user) {
-					console.log(color.yellow, `Skipping socket ${s.id} (no user found)`);
+					console.log(color.yellow, `Skipping socket ${socket.id} (no user found)`);
 					continue;
 				}
 				// Emit structured JSON object
-				s.emit('MsgObjectServer', { message: data });
+				socket.emit('MsgObjectServer', { message: data });
 				// Debug logs
-				console.log(color.green, 'Broadcast to:', clientInfo.user);
+				console.log(color.green, `'Broadcast to:', ${data.command} message: ${data.text}`);
-				console.log(' Target socket ID:', s.id);
+				// console.log('DEBUG - Target socket ID:', s.id);
-				console.log(' Target rooms:', [...s.rooms]);
+				// console.log('DEBUG - Target rooms:', [...s.rooms]);
-				console.log(' Sender socket ID:', sender ?? 'none');
+				// console.log('DEBUG - Sender socket ID:', sender ?? 'none');
 			}
 		});
 	}
@@ -200,16 +189,17 @@ async function onReady(fastify: FastifyInstance) {
 				let user: string = clientChat.get(s.id)?.user ?? "";
 				const atUser = `@${user}`;
 				if (atUser !== data.command || atUser === "") {
-					console.log(color.yellow, `User: '${atUser}' (No user the same is found): '${data.command}' `);
+					console.log(color.yellow, `DEBUG LOG: User: '${atUser}' command NOT FOUND: '${data.command[0]}' `);
 					continue;
 				}
 				if (data.text !== "") {
 					s.emit('MsgObjectServer', { message: data });
+					console.log(color.yellow, `DEBUG LOG: User: '${atUser}' command FOUND: '${data.command}' `);
 					if (senderSocket)
 						senderSocket.emit('privMessageCopy',`${data.command}: ${data.text}🔒`);
 					// Debug logs
 				}
-				console.log(color.green, 'Priv to:', data.text);
+				console.log(color.green, `'Priv to:', ${data.command} message: ${data.text}`);
 			}
 		});
 	}
@@ -244,12 +234,7 @@ async function onReady(fastify: FastifyInstance) {
 
 			// Send object directly — DO NOT wrap it in a string
 			broadcast(obj, obj.SenderWindowID);
-			console.log(
+			console.log(color.red, 'DEBUG LOG: connected in the Chat :', connectedUser(fastify.io), color.reset);
-				color.red,
-				'connected in the Chat :',
-				connectedUser(fastify.io),
-				color.reset,
-			);
 		});
 
 		socket.on('testend', (sock_id_cl: string) => {
@@ -288,8 +273,7 @@ async function onReady(fastify: FastifyInstance) {
 				// };
 				if (client) {
   					client.user = userFromFrontend.user;
-					console.log(color.green, 'client.user is: ', client.user);
+					console.log(color.green, `'DEBUG LOG: client.user is, '${client.user}'`);
-
 				}
 			}
 		});