From b2867757b620d41c76307100ca95bea34c6be768 Mon Sep 17 00:00:00 2001 From: NigeParis Date: Sat, 6 Dec 2025 15:33:11 +0100 Subject: [PATCH] Added profil popup - WIP page opens on double click of the name of buddy --- frontend/src/chat/chat.css | 29 +++++++++++++++++++ frontend/src/pages/chat/chat.html | 6 ++++ frontend/src/pages/chat/chat.ts | 48 ++++++++++++++++++++++++++++--- src/chat/src/app.ts | 48 +++++++++++-------------------- 4 files changed, 95 insertions(+), 36 deletions(-) diff --git a/frontend/src/chat/chat.css b/frontend/src/chat/chat.css index 9c3bccd..e12d5f3 100644 --- a/frontend/src/chat/chat.css +++ b/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; } \ No newline at end of file diff --git a/frontend/src/pages/chat/chat.html b/frontend/src/pages/chat/chat.html index 2882ae5..6314eff 100644 --- a/frontend/src/pages/chat/chat.html +++ b/frontend/src/pages/chat/chat.html @@ -31,6 +31,12 @@

Charlie

--> + diff --git a/frontend/src/pages/chat/chat.ts b/frontend/src/pages/chat/chat.ts index 5a514cb..406a731 100644 --- a/frontend/src/pages/chat/chat.ts +++ b/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 { 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); }); diff --git a/src/chat/src/app.ts b/src/chat/src/app.ts index f85f2ea..d2a7cae 100644 --- a/src/chat/src/app.ts +++ b/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( - color.red, - 'Client (unverified):', - color.reset, - username, - ); - console.log( - color.red, - 'Chat Socket ID (unverified):', - color.reset, - socketId, - ); + console.log(color.red, 'DEBUG LOG: - Client (unverified):', color.reset, username ); + console.log(color.red, 'DEBUG LOG: - 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(' Target socket ID:', s.id); - console.log(' Target rooms:', [...s.rooms]); - console.log(' Sender socket ID:', sender ?? 'none'); + console.log(color.green, `'Broadcast to:', ${data.command} message: ${data.text}`); + // console.log('DEBUG - Target socket ID:', s.id); + // console.log('DEBUG - Target rooms:', [...s.rooms]); + // 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( - color.red, - 'connected in the Chat :', - connectedUser(fastify.io), - color.reset, - ); + console.log(color.red, 'DEBUG LOG: 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}'`); } } });