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

Added tab 'hidden' detection when chat is on, added css red text messages sent

Browse source
This commit is contained in:
NigeParis 2025-11-26 19:58:34 +01:00 • committed by apetitco
parent 4d838585b4
commit 18956ee953
3 changed files with 115 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -80,20 +80,17 @@
.mainboxDisplay button { .mainboxDisplay button {
@apply @apply
cursor-pointer; cursor-pointer
} }
p { p {
@apply @apply
text-black text-black
} }
.div-test { div-test {
@apply @apply
italic text-red-800
text-right
} }

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

@ -14,6 +14,28 @@ document.addEventListener('ft:pageChange', () => {
}) })
function getSocket(): Socket {
if (__socket === undefined)
__socket = io("wss://localhost:8888", {
path: "/api/chat/socket.io/",
secure: false,
transports: ["websocket"],
});
return __socket;
}
async function isLoggedIn() {
return getUser() || null;
}
function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
let socket = getSocket();
document.addEventListener("visibilitychange", async () => { document.addEventListener("visibilitychange", async () => {
const socketId = __socket || undefined; const socketId = __socket || undefined;
@ -40,44 +62,6 @@ document.addEventListener("visibilitychange", async () => {
async function getUserName(): Promise<string | null> {
try {
const res = await client.guestLogin();
if (res.kind !== "success") {
console.error("Login failed:", res.msg);
return null;
}
const user = await updateUser();
if (!user) return null;
return user.name; // <-- return the username
} catch (err) {
console.error("getUserName error:", err);
return null;
}
}
function getSocket(): Socket {
if (__socket === undefined)
__socket = io("wss://localhost:8888", {
path: "/api/chat/socket.io/",
secure: false,
transports: ["websocket"],
});
return __socket;
}
async function isLoggedIn() {
return getUser() || null;
}
function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
let socket = getSocket();
// Listen for the 'connect' event // Listen for the 'connect' event
socket.on("connect", () => { socket.on("connect", () => {
console.log("I AM Connected to the server:", socket.id); console.log("I AM Connected to the server:", socket.id);
@ -154,7 +138,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const addMessage = (text: string) => { const addMessage = (text: string) => {
if (!chatWindow) return; if (!chatWindow) return;
const messageElement = document.createElement("div"); const messageElement = document.createElement("div-test");
messageElement.textContent = text; messageElement.textContent = text;
chatWindow.appendChild(messageElement); chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight; chatWindow.scrollTop = chatWindow.scrollHeight;
@ -200,14 +184,20 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
bconnected?.addEventListener("click", async () => { bconnected?.addEventListener("click", async () => {
const loggedIn = await isLoggedIn(); const loggedIn = await isLoggedIn();
let oldUser = localStorage.getItem("oldName") || undefined;
if (loggedIn?.name === undefined) return ; if (loggedIn?.name === undefined) return ;
oldUser = loggedIn.name || "undefined";
const res = await client.guestLogin(); const res = await client.guestLogin();
let user = await updateUser(); let user = await updateUser();
localStorage.setItem("oldName", oldUser);
console.log('USER ', user?.name); console.log('USER ', user?.name);
if (chatWindow) { if (chatWindow) {
addMessage('@list - lists all connected users in the chat'); addMessage('@list - lists all connected users in the chat');
socket.emit('list'); socket.emit('list', {
oldUser: oldUser,
user: user?.name
});
} }
}); });
socket.on('listObj', (list: string) => { socket.on('listObj', (list: string) => {
@ -229,10 +219,22 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
// Whoami button to display user name // Whoami button to display user name
bwhoami?.addEventListener('click', async () => { bwhoami?.addEventListener('click', async () => {
try { try {
const loggedIn = await isLoggedIn();
let oldUser = localStorage.getItem("oldName") || undefined;
oldUser = loggedIn?.name || "undefined";
localStorage.setItem("oldName", oldUser);
const res = await client.guestLogin(); const res = await client.guestLogin();
switch (res.kind) { switch (res.kind) {
case 'success': { case 'success': {
let user = await updateUser(); let user = await updateUser();
console.log('USER ', user?.name);
if (chatWindow) {
socket.emit('updateClientName', {
oldUser: oldUser,
user: user?.name
});
}
if (user === null) if (user === null)
return showError('Failed to get user: no user ?'); return showError('Failed to get user: no user ?');
setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`); setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`);

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

@ -74,6 +74,9 @@ declare module 'fastify' {
MsgObjectServer: (data: { message: ClientMessage }) => void; MsgObjectServer: (data: { message: ClientMessage }) => void;
message: (msg: string) => void; message: (msg: string) => void;
testend: (sock_id_client: string) => void; testend: (sock_id_client: string) => void;
client_entered: (userName: string, user: string) => void;
list: (oldUser: string, user: string) => void;
updateClientName: (oldUser: string, user: string) => void;
}>; }>;
} }
} }
@ -84,7 +87,7 @@ async function onReady(fastify: FastifyInstance) {
const seen = new Set<string>(); const seen = new Set<string>();
// <- only log/count unique usernames // <- only log/count unique usernames
for (const [socketId, username,] of clientChat) { for (const [socketId, username] of clientChat) {
// Basic sanity checks // Basic sanity checks
if (typeof socketId !== 'string' || socketId.length === 0) { if (typeof socketId !== 'string' || socketId.length === 0) {
clientChat.delete(socketId); clientChat.delete(socketId);
@ -164,7 +167,6 @@ async function onReady(fastify: FastifyInstance) {
}); });
} }
fastify.io.on('connection', (socket: Socket) => { fastify.io.on('connection', (socket: Socket) => {
socket.on('message', (message: string) => { socket.on('message', (message: string) => {
@ -187,10 +189,10 @@ async function onReady(fastify: FastifyInstance) {
color.green, color.green,
'Message from client', 'Message from client',
color.reset, color.reset,
`Sender: login name: "${obj.user}" - windowID "${obj.SenderWindowID}" - text message: "${obj.text}"`, `Sender: login name: ${obj.user} - windowID ${obj.SenderWindowID} - text message: ${obj.text}`,
); );
socket.emit('welcome', { socket.emit('welcome', {
msg: `Welcome to the chat! `, msg: 'Welcome to the chat!',
}); });
// Send object directly — DO NOT wrap it in a string // Send object directly — DO NOT wrap it in a string
@ -207,20 +209,45 @@ async function onReady(fastify: FastifyInstance) {
console.log('testend received from client socket id:', sock_id_cl); console.log('testend received from client socket id:', sock_id_cl);
}); });
socket.on('wakeup', (message: string) => { socket.on('list', (object) => {
const obj: ClientMessage = JSON.parse(message) as ClientMessage;
clientChat.set(socket.id, { user: obj.user, lastSeen: Date.now() });
connectedUser(fastify.io),
console.log('Wakeup: ', message);
});
socket.on('list', () => { const userFromFrontend = object || null;
console.log(color.red, 'list activated', color.reset, socket.id); const client = clientChat.get(socket.id) || null;
console.log(color.red, 'list activated', userFromFrontend, color.reset, socket.id);
if (userFromFrontend.oldUser !== userFromFrontend.user) {
console.log(color.red, 'list activated', userFromFrontend.oldUser, color.reset);
if (client === null) {
console.log('ERROR: clientName is NULL');
return;
};
if (client) {
client.user = userFromFrontend.user;
}
}
connectedUser(fastify.io, socket.id); connectedUser(fastify.io, socket.id);
}); });
socket.on('updateClientName', (object) => {
const userFromFrontend = object || null;
const client = clientChat.get(socket.id) || null;
console.log(color.red, 'whoAMi activated', userFromFrontend, color.reset, socket.id);
if (userFromFrontend.oldUser !== userFromFrontend.user) {
console.log(color.red, 'whoAMi activated', userFromFrontend.oldUser, color.reset);
if (client === null) {
console.log('ERROR: clientName is NULL');
return;
};
if (client) {
client.user = userFromFrontend.user;
}
}
});
socket.on('disconnecting', (reason) => { socket.on('disconnecting', (reason) => {
const clientName = clientChat.get(socket.id)?.user|| null; const clientName = clientChat.get(socket.id)?.user || null;
console.log( console.log(
color.green, color.green,
`Client disconnecting: ${clientName} (${socket.id}) reason:`, `Client disconnecting: ${clientName} (${socket.id}) reason:`,
@ -239,12 +266,11 @@ async function onReady(fastify: FastifyInstance) {
}; };
broadcast(obj, obj.SenderWindowID); broadcast(obj, obj.SenderWindowID);
// clientChat.delete(obj.user);
} }
}); });
socket.on('client_left', (reason) => { socket.on('client_left', (reason) => {
const clientName = clientChat.get(socket.id)?.user|| null; const clientName = clientChat.get(socket.id)?.user || null;
console.log( console.log(
color.green, color.green,
`Client left the Chat: ${clientName} (${socket.id}) reason:`, `Client left the Chat: ${clientName} (${socket.id}) reason:`,
@ -267,7 +293,6 @@ async function onReady(fastify: FastifyInstance) {
} }
}); });
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)
@ -277,28 +302,32 @@ async function onReady(fastify: FastifyInstance) {
const client = clientChat.get(socket.id) || null; const client = clientChat.get(socket.id) || null;
let text = 'is back in the chat'; let text = 'is back in the chat';
// connectedUser(fastify.io, socket.id); if (clientName === null) {
if(clientName === null) {console.log('ERROR: clientName is NULL'); return;}; console.log('ERROR: clientName is NULL'); return;
if(client === null) {console.log('ERROR: client is NULL'); return;}; };
if (client === null) {
console.log('ERROR: client is NULL'); return;
};
if (userNameFromFrontend !== userFromFrontend) { if (userNameFromFrontend !== userFromFrontend) {
text = `'is back in the chat, I used to be called '${userNameFromFrontend}`; text = `'is back in the chat, I used to be called '${userNameFromFrontend}`;
clientName = userFromFrontend; clientName = userFromFrontend;
if(clientName === null) {console.log('ERROR: clientName is NULL'); return;}; if (clientName === null) {
console.log('ERROR: clientName is NULL'); return;
};
if (client) { if (client) {
client.user = clientName; client.user = clientName;
} }
} }
console.log( console.log(
color.green, color.green,
`Client entered the Chat: ${clientName} (${socket.id})` `Client entered the Chat: ${clientName} (${socket.id})`,
); );
if (clientName !== null) { if (clientName !== null) {
const obj = { const obj = {
type: 'chat', type: 'chat',
user: clientName, // server-side stored name user: clientName,
frontendUserName: userNameFromFrontend, // from frontend frontendUserName: userNameFromFrontend,
frontendUser: userFromFrontend, // from frontend frontendUser: userFromFrontend,
token: '', token: '',
text: text, text: text,
timestamp: Date.now(), timestamp: Date.now(),