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}'`);
}
}
});