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

made bconnect.click() into function, seems to have solved the re loading of ping buddies after guest name change

Browse source
This commit is contained in:
NigeParis 2025-12-04 18:04:41 +01:00
parent b2862c303a
commit b280c1b7f6
2 changed files with 153 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,6 @@ import authHtml from './chat.html?raw';
import client from '@app/api' import client from '@app/api'
import { getUser, updateUser } from "@app/auth"; import { getUser, updateUser } from "@app/auth";
import io, { Socket } from 'socket.io-client'; import io, { Socket } from 'socket.io-client';
// import type { ClientMessage } from "@app/@types/dom";
const color = { const color = {
red: 'color: red;', red: 'color: red;',
@ -15,6 +14,7 @@ const color = {
}; };
export type ClientMessage = { export type ClientMessage = {
command: string
destination: string; destination: string;
user: string; user: string;
text: string; text: string;
@ -32,7 +32,7 @@ document.addEventListener('ft:pageChange', () => {
__socket.close(); __socket.close();
__socket = undefined; __socket = undefined;
console.log("Page changed"); console.log("Page changed");
}) });
function getSocket(): Socket { function getSocket(): Socket {
let addressHost = `wss://${machineHostName}:8888`; let addressHost = `wss://${machineHostName}:8888`;
@ -45,12 +45,24 @@ function getSocket(): Socket {
transports: ["websocket"], transports: ["websocket"],
}); });
return __socket; return __socket;
} };
function addMessage(text: string) {
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
if (!chatWindow) return;
const messageElement = document.createElement("div-test");
messageElement.textContent = text;
chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight;
console.log(`Added new message: ${text}`)
return ;
};
async function isLoggedIn() { async function isLoggedIn() {
return getUser() || null; return getUser() || null;
} };
async function windowStateHidden() { async function windowStateHidden() {
const socketId = __socket || undefined; const socketId = __socket || undefined;
@ -66,7 +78,7 @@ async function windowStateHidden() {
why: 'tab window hidden - socket not dead', why: 'tab window hidden - socket not dead',
}); });
return; return;
} };
async function windowStateVisable() { async function windowStateVisable() {
@ -85,8 +97,30 @@ async function windowStateVisable() {
}); });
setTitle('Chat Page'); setTitle('Chat Page');
return; return;
} };
function parseCmdMsg(msgText: string): string[] | undefined {
if (!msgText?.trim()) {
console.log('%c DEBUG - in FN parseCmdMsg : msgText = ""', color.red);
return;
}
msgText = msgText.trim();
// Find the first space
const firstSpaceIndex = msgText.indexOf(' ');
const cmd = firstSpaceIndex === -1 ? msgText : msgText.slice(0, firstSpaceIndex);
const rest = firstSpaceIndex === -1 ? "" : msgText.slice(firstSpaceIndex + 1).trim();
const command: string[] = ["", ""];
if (!msgText.startsWith('@')) {
command[0] = "@msg";
command[1] = msgText;
} else {
command[0] = cmd;
command[1] = rest;
}
console.log('%c DEBUG - split msgText[0]:', color.red, command[0]);
console.log('%c DEBUG - split msgText[1]:', color.red, command[1]);
return command;
};
async function listBuddies(buddies: HTMLDivElement, listBuddies: string ) { async function listBuddies(buddies: HTMLDivElement, listBuddies: string ) {
@ -98,14 +132,15 @@ async function listBuddies(buddies: HTMLDivElement, listBuddies: string ) {
console.log(`Added buddies: ${listBuddies}`) console.log(`Added buddies: ${listBuddies}`)
return ; return ;
} };
function waitSocketConnected(socket: Socket): Promise<void> { function waitSocketConnected(socket: Socket): Promise<void> {
return new Promise(resolve => { return new Promise(resolve => {
if (socket.connected) return resolve(); // already connected if (socket.connected) return resolve(); // already connected
socket.on("connect", () => resolve()); socket.on("connect", () => resolve());
}); });
} };
const bconnected = document.getElementById('b-help') as HTMLButtonElement; const bconnected = document.getElementById('b-help') as HTMLButtonElement;
if (bconnected) { if (bconnected) {
bconnected.click(); bconnected.click();
@ -118,8 +153,52 @@ function logout(socket: Socket) {
if (__socket !== undefined) if (__socket !== undefined)
__socket.close(); __socket.close();
// window.location.href = "/login"; // window.location.href = "/login";
} };
function broadcastMsg (socket: Socket, msgCommand: string[]): void {
let msgText = msgCommand[1] ?? "";
console.log('%cmsgText:', color.red, msgText);
addMessage(msgText);
const user = getUser();
if (user && socket?.connected) {
const message = {
command: msgCommand,
destination: "",
type: "chat",
user: user.name,
token: document.cookie,
text: msgText,
timestamp: Date.now(),
SenderWindowID: socket.id,
};
socket.emit('message', JSON.stringify(message));
}
};
async function connected(socket: Socket): Promise<void> {
const buddies = document.getElementById('div-buddies') as HTMLDivElement;
const loggedIn = await isLoggedIn();
console.log('%cloggedIn:',color.blue, loggedIn?.name);
let oldUser = localStorage.getItem("oldName") ?? "";
console.log('%coldUser:',color.yellow, oldUser);
if (loggedIn?.name === undefined) {console.log('');return ;}
oldUser = loggedIn.name ?? "";
const res = await client.guestLogin();
let user = await updateUser();
console.log('%cUser?name:',color.yellow, user?.name);
localStorage.setItem("oldName", oldUser);
buddies.textContent = "";
// if (chatWindow) {
// addMessage('@list - lists all connected users in the chat');
socket.emit('list', {
oldUser: oldUser,
user: user?.name,
});
// }
};
function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn { function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
@ -130,13 +209,15 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
// 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;
await waitSocketConnected(socket); await waitSocketConnected(socket);
console.log("I AM Connected to the server:", socket.id); console.log("I AM Connected to the server:", socket.id);
const user = getUser()?.name; const user = getUser()?.name;
// Ensure we have a user AND socket is connected // Ensure we have a user AND socket is connected
if (!user || !socket.connected) return; if (!user || !socket.connected) return;
const message = { const message = {
command: "",
destination: 'system-info', destination: 'system-info',
type: "chat", type: "chat",
user, user,
@ -146,6 +227,12 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
SenderWindowID: socket.id, SenderWindowID: socket.id,
}; };
socket.emit('message', JSON.stringify(message)); socket.emit('message', JSON.stringify(message));
// if (systemWindow) {
const messageElement = document.createElement("div");
messageElement.textContent = `${user}: is connected au server`;
systemWindow.appendChild(messageElement);
systemWindow.scrollTop = systemWindow.scrollHeight;
// }
}); });
// Listen for messages from the server "MsgObjectServer" // Listen for messages from the server "MsgObjectServer"
@ -157,8 +244,9 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
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; const bconnected = document.getElementById('b-help') as HTMLButtonElement;
if (bconnected) { if (bconnected) {
bconnected.click(); connected(socket);
} }
if (chatWindow && data.message.destination === "") { if (chatWindow && data.message.destination === "") {
@ -178,16 +266,12 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
while (systemWindow.children.length > MAX_SYSTEM_MESSAGES) { while (systemWindow.children.length > MAX_SYSTEM_MESSAGES) {
systemWindow.removeChild(systemWindow.firstChild!); systemWindow.removeChild(systemWindow.firstChild!);
} }
systemWindow.scrollTop = systemWindow.scrollHeight; systemWindow.scrollTop = systemWindow.scrollHeight;
} }
console.log("Getuser():", getUser()); console.log("Getuser():", getUser());
}); });
socket.on('logout', () => { socket.on('logout', () => {
const bquit = document.getElementById('b-quit') as HTMLDivElement | null; const bquit = document.getElementById('b-quit') as HTMLDivElement | null;
if (bquit instanceof HTMLDivElement) { if (bquit instanceof HTMLDivElement) {
@ -202,25 +286,24 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
color?: { default: string, hover: string }, color?: { default: string, hover: string },
}; };
let toggle = false
let toggle = false window.addEventListener("focus", () => {
window.addEventListener("focus", () => { const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement;
const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement; if (window.location.pathname === '/app/chat') {
if (window.location.pathname === '/app/chat') { console.log("%cWindow is focused on /chat:" + socket.id, color.green);
console.log("%cWindow is focused on /chat:" + socket.id, color.green); if (socket.id) {
if (socket.id) windowStateVisable();
windowStateVisable(); connected(socket);
bwhoami.click();
toggle = true;
} }
}); toggle = true;
}
window.addEventListener("blur", () => { });
console.log("%cWindow is not focused on /chat", color.red); window.addEventListener("blur", () => {
if (socket.id) console.log("%cWindow is not focused on /chat", color.red);
windowStateHidden(); if (socket.id)
toggle = false; windowStateHidden();
}); toggle = false;
});
setTitle('Chat Page'); setTitle('Chat Page');
// Listen for the 'connect' event // Listen for the 'connect' event
@ -236,6 +319,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const username = document.getElementById('username') as HTMLDivElement; const username = document.getElementById('username') as HTMLDivElement;
const buddies = document.getElementById('div-buddies') as HTMLDivElement; const buddies = document.getElementById('div-buddies') as HTMLDivElement;
const bquit = document.getElementById('b-quit') as HTMLDivElement; const bquit = document.getElementById('b-quit') as HTMLDivElement;
const systemWindow = document.getElementById('system-box') as HTMLDivElement;
chatWindow.textContent = ''; chatWindow.textContent = '';
chatWindow.innerHTML = ''; chatWindow.innerHTML = '';
@ -252,56 +336,51 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
console.log('unknown response: ', value); console.log('unknown response: ', value);
} }
const addMessage = (text: string) => {
if (!chatWindow) return;
const messageElement = document.createElement("div-test");
messageElement.textContent = text;
chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight;
console.log(`Added new message: ${text}`)
return ;
};
socket.once('welcome', (data) => { socket.once('welcome', (data) => {
chatWindow.textContent = ''; chatWindow.textContent = '';
chatWindow.innerHTML = ''; chatWindow.innerHTML = '';
buddies.textContent = ''; buddies.textContent = '';
buddies.innerHTML = ''; buddies.innerHTML = '';
bconnected.click(); connected(socket);
addMessage (`${data.msg} ` + getUser()?.name); addMessage (`${data.msg} ` + getUser()?.name);
}); });
// Send button // Send button
sendButton?.addEventListener("click", () => { sendButton?.addEventListener("click", () => {
if (sendtextbox && sendtextbox.value.trim()) { if (sendtextbox && sendtextbox.value.trim()) {
const msgText = sendtextbox.value.trim(); let msgText: string = sendtextbox.value.trim();
bconnected.click(); const msgCommand = parseCmdMsg(msgText) ?? "";
addMessage(msgText); connected(socket);
const user = getUser(); if (msgCommand !== "") {
if (user && socket?.connected) { switch (msgCommand[0]) {
const message = { case '@msg':
destination: "", broadcastMsg(socket, msgCommand);
type: "chat", break;
user: user.name, case '@who':
token: document.cookie, bwhoami.click();
text: msgText, break;
timestamp: Date.now(), case '@cls':
SenderWindowID: socket.id, clearText.click();
}; break;
socket.emit('message', JSON.stringify(message)); case '@quit':
bquit.click();
break;
default:
addMessage('Command not known');
break;
}
// Clear the input in all cases
sendtextbox.value = "";
} }
sendtextbox.value = "";
} }
}); });
// Clear Text button // Clear Text button
clearText?.addEventListener("click", () => { clearText?.addEventListener("click", () => {
if (chatWindow) { if (chatWindow) {
bconnected.click(); connected(socket);
chatWindow.innerHTML = ''; chatWindow.innerHTML = '';
} }
}); });
@ -310,7 +389,9 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
if (socket) { if (socket) {
logout(socket); logout(socket);
setTitle('Chat Page'); setTitle('Chat Page');
bconnected.click(); systemWindow.innerHTML = "";
chatWindow.textContent = "";
connected(socket);
} else { } else {
getSocket(); getSocket();
} }
@ -318,32 +399,8 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
setInterval(async () => { setInterval(async () => {
//bconnected.click(); //connected(socket);
}, 10000); // every 10 second },10000); // every 10 second
// Help Text button
bconnected?.addEventListener("click", async () => {
const loggedIn = await isLoggedIn();
console.log('%cloggedIn:',color.blue, loggedIn?.name);
let oldUser = localStorage.getItem("oldName") ?? "";
console.log('%coldUser:',color.yellow, oldUser);
if (loggedIn?.name === undefined) {console.log('');return ;}
oldUser = loggedIn.name || "undefined";
const res = await client.guestLogin();
let user = await updateUser();
console.log('%cUser?name:',color.yellow, user?.name);
localStorage.setItem("oldName", oldUser);
buddies.textContent = "";
// if (chatWindow) {
// addMessage('@list - lists all connected users in the chat');
socket.emit('list', {
oldUser: oldUser,
user: user?.name,
});
// }
});
socket.on('listBud', (myBuddies: string) => { socket.on('listBud', (myBuddies: string) => {
console.log('List buddies connected ', myBuddies); console.log('List buddies connected ', myBuddies);

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

@ -34,6 +34,7 @@ interface ClientInfo {
} }
export type ClientMessage = { export type ClientMessage = {
command: string
destination: string; destination: string;
user: string; user: string;
text: string; text: string;
@ -269,6 +270,7 @@ async function onReady(fastify: FastifyInstance) {
if (!clientName) return; if (!clientName) return;
console.log(color.green, `Client logging out: ${clientName} (${socket.id})`); console.log(color.green, `Client logging out: ${clientName} (${socket.id})`);
const obj = { const obj = {
command: '',
destination: 'system-info', destination: 'system-info',
type: 'chat' as const, type: 'chat' as const,
user: clientName, user: clientName,
@ -295,6 +297,7 @@ async function onReady(fastify: FastifyInstance) {
if (clientName !== null) { if (clientName !== null) {
const obj = { const obj = {
command: '',
destination: 'system-info', destination: 'system-info',
type: 'chat', type: 'chat',
user: clientName, user: clientName,
@ -319,6 +322,7 @@ async function onReady(fastify: FastifyInstance) {
if (clientName !== null) { if (clientName !== null) {
const obj = { const obj = {
command: '',
destination: 'system-info', destination: 'system-info',
type: 'chat', type: 'chat',
user: clientName, user: clientName,
@ -364,6 +368,7 @@ async function onReady(fastify: FastifyInstance) {
); );
if (clientName !== null) { if (clientName !== null) {
const obj = { const obj = {
command: '',
destination: 'system-info', destination: 'system-info',
type: 'chat', type: 'chat',
user: clientName, user: clientName,