rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
NigeParis 2025-12-06 15:33:11 +01:00
parent e128793913
commit 3550303a93
4 changed files with 95 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/chat/chat.css
View file

@ -4,6 +4,8 @@
src: url("/fonts/NimbusMonoL.woff2") format("woff2");
}
@tailwind utilities;
.btn-style {
@apply
w-[100px]
@ -190,3 +192,30 @@ div-private {
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;
}

6
frontend/src/pages/chat/chat.html
View file

@ -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>

48
frontend/src/pages/chat/chat.ts
View file

@ -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);
});

48
src/chat/src/app.ts
View file

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