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

profil displays basic info if guest or not

Browse source
This commit is contained in:
NigeParis 2025-12-08 15:43:43 +01:00
parent 01f85c2779
commit 2959dca576
3 changed files with 159 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -216,6 +216,13 @@ div-private {
items-center; items-center;
} }
.popup-b-clear {
@apply
absolute
bottom-42
right-12
}
.hidden{ .hidden{
display: none; display: none;
} }

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

@ -68,8 +68,30 @@ function isLoggedIn() {
return getUser() || null; return getUser() || null;
}; };
function getProfil(user: string): string { function actionBtnPopUp() {
return `Profil: ${user} </br> <button id="popup-b-clear" class="btn-style">Clear Text</button>` setTimeout(() => {
const clearTextBtn = document.querySelector("#popup-b-clear");
clearTextBtn?.addEventListener("click", () => {
clearText();
});
}, 0)
}
// getProfil get the profil of user
function getProfil(socket: Socket, user: string) {
if (!socket.connected) return;
const profil = {
command: '@profil',
destination: 'profilMessage',
type: "chat",
user: user,
token: document.cookie ?? "",
text: user,
timestamp: Date.now(),
SenderWindowID: socket.id,
};
// addMessage(JSON.stringify(profil));
socket.emit('profilMessage', JSON.stringify(profil));
} }
async function windowStateHidden() { async function windowStateHidden() {
@ -149,7 +171,7 @@ function parseCmdMsg(msgText: string): string[] | undefined {
return command; return command;
} }
async function listBuddies(buddies: HTMLDivElement, listBuddies: string) { async function listBuddies(socket: Socket, buddies: HTMLDivElement, listBuddies: string) {
if (!buddies) return; if (!buddies) return;
const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement; const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement;
@ -169,14 +191,15 @@ async function listBuddies(buddies: HTMLDivElement, listBuddies: string) {
buddiesElement.addEventListener("dblclick", () => { buddiesElement.addEventListener("dblclick", () => {
console.log("Open profile:", listBuddies); console.log("Open profile:", listBuddies);
const profile: string = getProfil(listBuddies); getProfil(socket, listBuddies);
openProfilePopup(`${profile}`); // openProfilePopup(`${profile}`);
setTimeout(() => { // setTimeout(() => {
const clearTextBtn = document.querySelector("#popup-b-clear"); // const clearTextBtn = document.querySelector("#popup-b-clear");
clearTextBtn?.addEventListener("click", () => { // clearTextBtn?.addEventListener("click", () => {
clearText(); // clearText();
}); // });
}, 0) // }, 0)
// actionBtnPopUp();
}); });
buddies.appendChild(buddiesElement); buddies.appendChild(buddiesElement);
@ -313,7 +336,6 @@ async function openProfilePopup(profil: string) {
if (profilList) if (profilList)
profilList.classList.remove("hidden"); profilList.classList.remove("hidden");
// The popup now exists → attach the event // The popup now exists → attach the event
} }
@ -394,7 +416,12 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
console.log("Getuser():", getUser()); console.log("Getuser():", getUser());
}); });
socket.on('profilMessage', (profil) => {
openProfilePopup(profil);
actionBtnPopUp();
});
socket.on('logout', () => { socket.on('logout', () => {
quitChat(socket); quitChat(socket);
}); });
@ -437,7 +464,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
socket.on('listBud', async (myBuddies: string) => { socket.on('listBud', async (myBuddies: string) => {
const buddies = document.getElementById('div-buddies') as HTMLDivElement; const buddies = document.getElementById('div-buddies') as HTMLDivElement;
console.log('List buddies connected ', myBuddies); console.log('List buddies connected ', myBuddies);
listBuddies(buddies,myBuddies); listBuddies(socket, buddies, myBuddies);
}); });
socket.once('welcome', (data) => { socket.once('welcome', (data) => {
@ -507,8 +534,22 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
whoami(socket); whoami(socket);
break; break;
case '@profil': case '@profil':
if (`${msgCommand[1]}`) getProfil(socket, msgCommand[1]);
openProfilePopup(`Profil: ${msgCommand[1]}`); // Ensure we have a user AND socket is connected
// if (!socket.connected) return;
// const profil = {
// command: msgCommand[0],
// destination: 'profil',
// type: "chat",
// user: msgCommand[1],
// token: document.cookie ?? "",
// text: msgCommand[1],
// timestamp: Date.now(),
// SenderWindowID: socket.id,
// };
// //socket.emit('MsgObjectServer', message);
// addMessage(JSON.stringify(profil));
// socket.emit('profilMessage', JSON.stringify(profil));
break; break;
case '@cls': case '@cls':
chatWindow.innerHTML = ''; chatWindow.innerHTML = '';
@ -524,7 +565,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
command: msgCommand[0], command: msgCommand[0],
destination: '', destination: '',
type: "chat", type: "chat",
user, user: user,
token: document.cookie ?? "", token: document.cookie ?? "",
text: msgCommand[1], text: msgCommand[1],
timestamp: Date.now(), timestamp: Date.now(),

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

@ -6,6 +6,7 @@ import * as auth from '@shared/auth';
import * as swagger from '@shared/swagger'; import * as swagger from '@shared/swagger';
import * as utils from '@shared/utils'; import * as utils from '@shared/utils';
import { Server, Socket } from 'socket.io'; import { Server, Socket } from 'socket.io';
import type { User } from '@shared/database/mixin/user';
// colors for console.log // colors for console.log
export const color = { export const color = {
@ -84,6 +85,7 @@ declare module 'fastify' {
hello: (message: string) => string; hello: (message: string) => string;
MsgObjectServer: (data: { message: ClientMessage }) => void; MsgObjectServer: (data: { message: ClientMessage }) => void;
privMessage: (data: string) => void; privMessage: (data: string) => void;
profilMessage: (data: string) => void;
privMessageCopy: (msg: string) => void; privMessageCopy: (msg: string) => void;
message: (msg: string) => void; message: (msg: string) => void;
listBud: (msg: string) => void; listBud: (msg: string) => void;
@ -146,7 +148,7 @@ async function onReady(fastify: FastifyInstance) {
} }
// If no io provided, assume entries in the map are valid and count them. // If no io provided, assume entries in the map are valid and count them.
count++; count++;
console.log(color.red, 'DEBUG LOG: - Client (unverified):', color.reset, username ); console.log(color.red, 'DEBUG LOG: - Client (unverified):', color.reset, username);
console.log(color.red, 'DEBUG LOG: - Chat Socket ID (unverified):', color.reset, socketId); console.log(color.red, 'DEBUG LOG: - Chat Socket ID (unverified):', color.reset, socketId);
} }
return count; return count;
@ -174,7 +176,58 @@ async function onReady(fastify: FastifyInstance) {
}); });
} }
function formatTimestamp(ms: number) {
const d = new Date(ms);
return d.toLocaleString('fr-FR', { timeZone: 'Europe/Paris' });
}
function getUserByName(users: User[], name: string) {
return users.find(u => u.name === name) || null;
}
// this function returns html the profil pop up in CHAT of a user 'nickname unique' TODO ....
async function getProfil(user: string): Promise <string> {
let profilHtmlPopup = '404: Error: Profil not found';
const sockets = await fastify.io.fetchSockets();
const users: User[] = fastify.db.getAllUsers() ?? [];
// const senderSocket = sockets.find(socket => socket.id === user);
for (const socket of sockets) {
const clientInfo = clientChat?.get(socket.id);
const allUsers: User | null = getUserByName(users, user);
if (clientInfo?.user === allUsers?.name) {
const lastSeen = formatTimestamp(clientInfo?.lastSeen ?? 0);
console.log(color.yellow, `'Clientinfo.user: '${lastSeen}' user: '${user}'`);
profilHtmlPopup = `<div class="profile-info">
<div-profil-name id="profilName"> Profil of ${clientInfo?.user} </div>
<div-login-name id="loginName"> Login Name: '${allUsers?.login ?? 'Guest'}' </div>
</br>
<button id="popup-b-clear" class="btn-style popup-b-clear">Clear Text</button>
<div id="profile-joined">Joined: xx/xx/xx</div>
<div id="profile-lastseen">Last connection: ${lastSeen}</div>
<div id="profile-about">About: No description</div>
</div>`;
break;
}
};
return profilHtmlPopup;
};
function sendProfil(data: ClientMessage, clientProfil?: string) {
fastify.io.fetchSockets().then((sockets) => {
const senderSocket = sockets.find(socket => socket.id === clientProfil);
for (const socket of sockets) {
const clientInfo = clientChat.get(socket.id);
if (clientInfo?.user === data.user) {
if (senderSocket) {
socket.emit('profilMessage', `${data.text}`);
}
}
}
});
}
function sendPrivMessage(data: ClientMessage, sender?: string) { function sendPrivMessage(data: ClientMessage, sender?: string) {
fastify.io.fetchSockets().then((sockets) => { fastify.io.fetchSockets().then((sockets) => {
@ -186,20 +239,20 @@ async function onReady(fastify: FastifyInstance) {
console.log(color.yellow, `Skipping socket ${s.id} (no user found)`); console.log(color.yellow, `Skipping socket ${s.id} (no user found)`);
continue; continue;
} }
let user: string = clientChat.get(s.id)?.user ?? ""; const user: string = clientChat.get(s.id)?.user ?? '';
const atUser = `@${user}`; const atUser = `@${user}`;
if (atUser !== data.command || atUser === "") { if (atUser !== data.command || atUser === '') {
console.log(color.yellow, `DEBUG LOG: User: '${atUser}' command NOT FOUND: '${data.command[0]}' `); console.log(color.yellow, `DEBUG LOG: User: '${atUser}' command NOT FOUND: '${data.command[0]}' `);
continue; continue;
} }
if (data.text !== "") { if (data.text !== '') {
s.emit('MsgObjectServer', { message: data }); s.emit('MsgObjectServer', { message: data });
console.log(color.yellow, `DEBUG LOG: User: '${atUser}' command FOUND: '${data.command}' `); console.log(color.yellow, `DEBUG LOG: User: '${atUser}' command FOUND: '${data.command}' `);
if (senderSocket) if (senderSocket) {
senderSocket.emit('privMessageCopy',`${data.command}: ${data.text}🔒`); senderSocket.emit('privMessageCopy', `${data.command}: ${data.text}🔒`);
// Debug logs }
} }
console.log(color.green, `'Priv to:', ${data.command} message: ${data.text}`); console.log(color.green, `DEBUG LOG: 'Priv to:', ${data.command} message: ${data.text}`);
} }
}); });
} }
@ -355,12 +408,12 @@ async function onReady(fastify: FastifyInstance) {
socket.on('privMessage', (data) => { socket.on('privMessage', (data) => {
const clientName: string = clientChat.get(socket.id)?.user || ""; const clientName: string = clientChat.get(socket.id)?.user || '';
const prvMessage: ClientMessage = JSON.parse(data) || ""; const prvMessage: ClientMessage = JSON.parse(data) || '';
console.log( console.log(
color.blue, color.blue,
`DEBUG LOG: ClientName: '${clientName}' id Socket: '${socket.id}' target Name:`, `DEBUG LOG: ClientName: '${clientName}' id Socket: '${socket.id}' target Name:`,
prvMessage.command prvMessage.command,
); );
if (clientName !== null) { if (clientName !== null) {
@ -374,12 +427,42 @@ async function onReady(fastify: FastifyInstance) {
timestamp: Date.now(), timestamp: Date.now(),
SenderWindowID: socket.id, SenderWindowID: socket.id,
}; };
console.log(color.blue, 'PRIV MESSAGE OUT :', obj.SenderWindowID); console.log(color.blue, 'DEBUG LOG: PRIV MESSAGE OUT :', obj.SenderWindowID);
sendPrivMessage(obj, obj.SenderWindowID); sendPrivMessage(obj, obj.SenderWindowID);
// clientChat.delete(obj.user); // clientChat.delete(obj.user);
} }
}); });
socket.on('profilMessage', async (data) => {
const clientName: string = clientChat.get(socket.id)?.user || '';
const profilMessage: ClientMessage = JSON.parse(data) || '';
const users: User[] = fastify.db.getAllUsers() ?? [];
console.log(color.yellow, 'DEBUG LOG: ALL USERS EVER CONNECTED:', users);
console.log(
color.blue,
`DEBUG LOG: ClientName: '${clientName}' id Socket: '${socket.id}' target profil:`,
profilMessage.user,
);
const profileHtml: string = await getProfil(profilMessage.user);
if (clientName !== null) {
const testuser: User | null = getUserByName(users, profilMessage.user);
console.log(color.yellow, 'user:', testuser?.login ?? 'Guest');
const obj = {
command: profilMessage.command,
destination: 'profilMsg',
type: 'chat',
user: clientName,
token: '',
text: profileHtml,
timestamp: Date.now(),
SenderWindowID: socket.id,
};
console.log(color.blue, 'DEBUG - profil message MESSAGE OUT :', obj.SenderWindowID);
sendProfil(obj, obj.SenderWindowID);
// clientChat.delete(obj.user);
}
});
socket.on('client_entered', (data) => { socket.on('client_entered', (data) => {
// data may be undefined (when frontend calls emit with no payload) // data may be undefined (when frontend calls emit with no payload)