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

fixed buddies list bug

Browse source
This commit is contained in:
NigeParis 2026-01-04 11:13:21 +01:00 • committed by Maix0
parent 4fc43cc429
commit d293185a28
2 changed files with 7 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -41,7 +41,6 @@ document.addEventListener('ft:pageChange', () => {
export function getSocket(): Socket { export function getSocket(): Socket {
let addressHost = `wss://${machineHostName}:8888`; let addressHost = `wss://${machineHostName}:8888`;
// let addressHost = `wss://localhost:8888`;
if (__socket === undefined) if (__socket === undefined)
__socket = io(addressHost, { __socket = io(addressHost, {
@ -73,19 +72,16 @@ async function windowStateVisable() {
const buddies = document.getElementById('div-buddies') as HTMLDivElement; const buddies = document.getElementById('div-buddies') as HTMLDivElement;
const socketId = __socket || undefined; const socketId = __socket || undefined;
let oldName = localStorage.getItem("oldName") || undefined; let oldName = localStorage.getItem("oldName") || undefined;
console.log("%c WINDOW VISIBLE - oldName :'" + oldName + "'", color.green);
if (socketId === undefined || oldName === undefined) {console.log("%SOCKET ID", color.red); return;} if (socketId === undefined || oldName === undefined) {console.log("%SOCKET ID", color.red); return;}
let user = await updateUser(); let user = await updateUser();
if(user === null) return; if(user === null) return;
console.log("%cUserName :'" + user?.name + "'", color.green);
socketId.emit('client_entered', { socketId.emit('client_entered', {
userName: oldName, userName: oldName,
user: user?.name, user: user?.name,
}); });
buddies.innerHTML = ''; buddies.innerHTML = '';
buddies.textContent = ''; buddies.textContent = '';
//connected(socketId);
setTitle('Chat Page'); setTitle('Chat Page');
return; return;
}; };
@ -144,14 +140,11 @@ function quitChat (socket: Socket) {
if (socket) { if (socket) {
logout(socket); logout(socket);
setTitle('Chat Page'); setTitle('Chat Page');
// systemWindow.innerHTML = "";
// chatWindow.textContent = "";
connected(socket); connected(socket);
} else { } else {
getSocket(); getSocket();
} }
} catch (e) { } catch (e) {
console.error("Quit Chat error:", e);
showError('Failed to Quit Chat: Unknown error'); showError('Failed to Quit Chat: Unknown error');
} }
@ -163,7 +156,6 @@ function logout(socket: Socket) {
localStorage.clear(); localStorage.clear();
if (__socket !== undefined) if (__socket !== undefined)
__socket.close(); __socket.close();
// window.location.href = "/login";
}; };
@ -189,7 +181,6 @@ async function connected(socket: Socket): Promise<void> {
user: user?.name, user: user?.name,
}); });
} catch (e) { } catch (e) {
console.error("Login error:", e);
showError('Failed to login: Unknown error'); showError('Failed to login: Unknown error');
} }
}, 16); }, 16);
@ -217,21 +208,18 @@ async function openMessagePopup(message: string) {
} }
const gameMessage = document.getElementById("game-modal") ?? null; const gameMessage = document.getElementById("game-modal") ?? null;
if (gameMessage) if (gameMessage) {
gameMessage.classList.remove("hidden"); gameMessage.classList.remove("hidden");
// The popup now exists → attach the event }
} }
function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn { function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
let socket = getSocket(); let socket = getSocket();
let blockMessage: boolean; let blockMessage: boolean;
setTimeout(async () => {
// Listen for the 'connect' event // Listen for the 'connect' event
socket.on("connect", async () => { socket.on("connect", async () => {
const systemWindow = document.getElementById('system-box') as HTMLDivElement; const systemWindow = document.getElementById('system-box') as HTMLDivElement;
await waitSocketConnected(socket); await waitSocketConnected(socket);
console.log("I AM Connected to the server:", socket.id);
const user = getUser()?.name; const user = getUser()?.name;
const userID = getUser()?.id; const userID = getUser()?.id;
// Ensure we have a user AND socket is connected // Ensure we have a user AND socket is connected
@ -246,7 +234,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
timestamp: Date.now(), timestamp: Date.now(),
SenderWindowID: socket.id, SenderWindowID: socket.id,
SenderID: userID, SenderID: userID,
}; };
socket.emit('message', JSON.stringify(message)); socket.emit('message', JSON.stringify(message));
const messageElement = document.createElement("div"); const messageElement = document.createElement("div");
@ -254,30 +241,23 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
systemWindow.appendChild(messageElement); systemWindow.appendChild(messageElement);
systemWindow.scrollTop = systemWindow.scrollHeight; systemWindow.scrollTop = systemWindow.scrollHeight;
}); });
},0);
// Listen for messages from the server "MsgObjectServer" // Listen for messages from the server "MsgObjectServer"
socket.on("MsgObjectServer", (data: { message: ClientMessage}) => { socket.on("MsgObjectServer", (data: { message: ClientMessage}) => {
// Display the message in the chat window
const systemWindow = document.getElementById('system-box') as HTMLDivElement; const systemWindow = document.getElementById('system-box') as HTMLDivElement;
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement; const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
const bconnected = document.getElementById('b-help') as HTMLButtonElement;
if (socket) {
console.log('UserSender:', data.message.SenderUserID);
console.log('User:', getUser()?.id);
if (bconnected) {
connected(socket); connected(socket);
} }
console.log('stahe eeee :', blockMessage);
if (chatWindow && data.message.destination === "") { if (chatWindow && data.message.destination === "") {
const messageElement = document.createElement("div"); const messageElement = document.createElement("div");
messageElement.textContent = `${data.message.user}: ${data.message.text}`; messageElement.textContent = `${data.message.user}: ${data.message.text}`;
chatWindow.appendChild(messageElement); chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight; chatWindow.scrollTop = chatWindow.scrollHeight;
} }
if (chatWindow && data.message.destination === "privateMsg") { if (chatWindow && data.message.destination === "privateMsg") {
const messageElement = document.createElement("div-private"); const messageElement = document.createElement("div-private");
messageElement.textContent = `🔒${data.message.user}: ${data.message.text}`; messageElement.textContent = `🔒${data.message.user}: ${data.message.text}`;
@ -285,7 +265,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
chatWindow.scrollTop = chatWindow.scrollHeight; chatWindow.scrollTop = chatWindow.scrollHeight;
} }
if (chatWindow && data.message.destination === "inviteMsg") { if (chatWindow && data.message.destination === "inviteMsg") {
const messageElement = document.createElement("div-private"); const messageElement = document.createElement("div-private");
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement; const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
@ -305,7 +284,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
} }
systemWindow.scrollTop = systemWindow.scrollHeight; systemWindow.scrollTop = systemWindow.scrollHeight;
} }
console.log("Getuser():", getUser());
}); });
socket.on('profilMessage', (profil: ClientProfil) => { socket.on('profilMessage', (profil: ClientProfil) => {
@ -359,7 +337,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
connected(socket); connected(socket);
}, 16); }, 16);
if (window.location.pathname === '/app/chat') { if (window.location.pathname === '/app/chat') {
console.log('%cWindow is focused on /chat:' + socket.id, color.green);
if (socket.id) { if (socket.id) {
await windowStateVisable(); await windowStateVisable();
} }
@ -368,7 +345,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}); });
window.addEventListener("blur", () => { window.addEventListener("blur", () => {
console.log('%cWindow is not focused on /chat', color.red);
if (socket.id) if (socket.id)
windowStateHidden(); windowStateHidden();
toggle = false; toggle = false;
@ -376,23 +352,19 @@ 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('%cList buddies connected ',color.yellow, myBuddies);
listBuddies(socket, buddies, myBuddies); listBuddies(socket, buddies, myBuddies);
}); });
socket.once('welcome', (data) => { socket.once('welcome', (data) => {
const buddies = document.getElementById('div-buddies') as HTMLDivElement; const buddies = document.getElementById('div-buddies') as HTMLDivElement;
const chatWindow = document.getElementById('t-chatbox') as HTMLDivElement; const chatWindow = document.getElementById('t-chatbox') as HTMLDivElement;
// chatWindow.innerHTML = '';
buddies.textContent = ''; buddies.textContent = '';
buddies.innerHTML = ''; buddies.innerHTML = '';
connected(socket); connected(socket);
addMessage (`${data.msg} ` + getUser()?.name); addMessage (`${data.msg} ` + getUser()?.name);
}); });
setTitle('Chat Page'); setTitle('Chat Page');
// Listen for the 'connect' event
return { return {
html: authHtml, postInsert: async (app) => { html: authHtml, postInsert: async (app) => {
@ -526,6 +498,5 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}); });
} }
} }
}; };
addRoute('/chat', handleChat); addRoute('/chat', handleChat);

1
frontend/src/pages/chat/chatHelperFunctions/openProfilePopup.ts
View file

@ -19,5 +19,4 @@ export async function openProfilePopup(profil: ClientProfil) {
const profilList = document.getElementById("profile-modal") ?? null; const profilList = document.getElementById("profile-modal") ?? null;
if (profilList) if (profilList)
profilList.classList.remove("hidden"); profilList.classList.remove("hidden");
// The popup now exists → attach the event
} }