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

added PingBuddies Bar to detect connected Chatters in real time

Browse source
This commit is contained in:
NigeParis 2025-11-28 14:03:00 +01:00 • committed by apetitco
parent 09ff8eb5a1
commit fc6b7042f2
4 changed files with 75 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -107,6 +107,33 @@
text-gray-800
}
.ping-box {
@apply
w-[150px]
ml-2 border-1
border-gray-500
bg-white
rounded-2xl
p-2
shadow-md
flex flex-col
gap-1
h-[350px];
}
.ping-title {
@apply
text-sm
font-semibold
text-blue-800;
}
div-buddies-list {
@apply
text-black
whitespace-pre-wrap;
}
p {
@apply

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

@ -2,7 +2,7 @@
<div id="mainbox" class="mainboxDisplay">
<button id="b-whoami" class="btn-style absolute top-4 left-6">Who am i</button>
<h1 class="text-3xl font-bold text-gray-800">
ChatterBoxes 😀😀😀<span id="t-username"></span>
ChatterBoxes <span id="t-username"></span>
</h1><br>
<button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button>
<button id="b-help" class="btn-style absolute top-14 left-6">Connected</button>
@ -10,7 +10,7 @@
<!-- Center wrapper for chat + vertical box -->
<div class="flex justify-center mt-2">
<!-- Groupe Chat + vertical box container -->
<div id = "g-boxes" class="flex gap-1">
<div id = "g-boxes" class="flex gap-2">
<!-- Text Chat box panel + send -->
<div id = "g-textBoxes" class="flex flex-col">
<div id="t-chatbox" class="chatbox-style"></div>
@ -20,13 +20,15 @@
</div>
</div>
<!-- Vertical Ping box panel-->
<div id="ping-box" class="w-[150px] ml-2 bg-gray-300 rounded-2xl p-2 shadow-md flex flex-col gap-1 h-[350px]">
<p id="ping-title" class="text-sm font-semibold text-gray-700">Ping Buddies</p>
<!-- Vertical Ping Buddies box panel-->
<div id="ping-box" class="ping-box">
<p id="ping-title" class="ping-title">Ping Buddies</p>
<div id="ping-list" class="flex-1 overflow-y-auto">
<p>Alice</p>
<p>Bob</p>
<p>Charlie</p>
<div id = "div-buddies">
<!-- <p>Alice</p>
<p>Bob</p>
<p>Charlie</p> -->
</div>
</div>
</div>
</div>

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

@ -30,8 +30,8 @@ document.addEventListener('ft:pageChange', () => {
function getSocket(): Socket {
//let addressHost = `wss://${machineHostName}:8888`;
let addressHost = `wss://localhost:8888`;
let addressHost = `wss://${machineHostName}:8888`;
// let addressHost = `wss://localhost:8888`;
if (__socket === undefined)
__socket = io(addressHost, {
@ -82,55 +82,23 @@ async function windowStateVisable() {
async function listBuddies(buddies: HTMLDivElement, listBuddies: string ) {
if (!buddies) return;
const messageElement = document.createElement("div-buddies-list");
messageElement.textContent = listBuddies + '\n';
buddies.appendChild(messageElement);
buddies.scrollTop = buddies.scrollHeight;
console.log(`Added buddies: ${listBuddies}`)
return ;
}
function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
let socket = getSocket();
// document.addEventListener("visibilitychange", async () => {
// const socketId = __socket || undefined;
// let oldName = localStorage.getItem("oldName") || undefined;
// if (socketId == undefined) return;
// if (document.visibilityState === "hidden") {
// let userName = await updateUser();
// oldName = userName?.name || undefined;
// if (oldName === undefined) return;
// localStorage.setItem('oldName', oldName);
// socketId.emit('client_left', {
// user: userName?.name,
// why: 'tab window hidden - socket not dead',
// });
// return;
// }
// if (document.visibilityState === "visible") {
// const res = await client.guestLogin();
// let user = await updateUser();
// socketId.emit('client_entered', {
// userName: oldName,
// user: user?.name,
// });
// setTitle('Chat Page');
// return;
// }
// });
@ -161,8 +129,14 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
console.log("Recieved data.message.timestamp: ", data.message.timestamp);
// Display the message in the chat window
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
const bconnected = document.getElementById('b-help') as HTMLButtonElement;
if (bconnected) {
bconnected.click();
}
if (chatWindow) {
const messageElement = document.createElement("div");
// if (getUser()?.id !== `${data.message.id}`) {
console.log('==================> HERE');
messageElement.textContent = `${data.message.user}: ${data.message.text}`;
@ -197,6 +171,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement;
const bconnected = document.getElementById('b-help') as HTMLButtonElement;
const username = document.getElementById('username') as HTMLDivElement;
const buddies = document.getElementById('div-buddies') as HTMLDivElement;
const value = await client.chatTest();
if (value.kind === "success") {
@ -216,6 +191,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
if (window.location.pathname === "/app/chat") {
window.addEventListener("focus", () => {
bconnected.click();
windowStateVisable();
console.log("%cWindow is focused on /chat", color.green);
});
@ -227,11 +203,13 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}
socket.once('welcome', (data) => {
bconnected.click();
addMessage (`${data.msg} ` + getUser()?.name);
});
// Send button
sendButton?.addEventListener("click", () => {
bconnected.click();
if (sendtextbox && sendtextbox.value.trim()) {
const msgText = sendtextbox.value.trim();
addMessage(msgText);
@ -259,6 +237,10 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}
});
// setInterval(async () => {
// bconnected.click();
// }, 5000); // every 1 second
// Help Text button
bconnected?.addEventListener("click", async () => {
@ -270,21 +252,27 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const res = await client.guestLogin();
let user = await updateUser();
localStorage.setItem("oldName", oldUser);
buddies.textContent = "";
console.log('USER ', user?.name);
if (chatWindow) {
addMessage('@list - lists all connected users in the chat');
//addMessage('@list - lists all connected users in the chat');
socket.emit('list', {
oldUser: oldUser,
user: user?.name
user: user?.name,
});
}
});
socket.on('listObj', (list: string) => {
console.log('List chat clients connected ', list);
addMessage(list);
});
socket.on('listBud', (myBuddies: string) => {
console.log('List buddies connected ', myBuddies);
listBuddies(buddies,myBuddies);
});

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

@ -82,6 +82,7 @@ declare module 'fastify' {
hello: (message: string) => string;
MsgObjectServer: (data: { message: ClientMessage }) => void;
message: (msg: string) => void;
listBud: (msg: string) => void;
testend: (sock_id_client: string) => void;
client_entered: (userName: string, user: string) => void;
client_left: (userName: string, why: string) => void;
@ -130,8 +131,8 @@ async function onReady(fastify: FastifyInstance) {
console.log(color.yellow, 'Client:', color.reset, username.user);
const targetSocketId = target;
io.to(targetSocketId!).emit('listObj', username.user);
// io.to(targetSocketId!).emit('listObj', username.user);
io.to(targetSocketId!).emit('listBud', username.user);
console.log(
color.yellow,
'Chat Socket ID:',
@ -163,9 +164,9 @@ async function onReady(fastify: FastifyInstance) {
function broadcast(data: ClientMessage, sender?: string) {
fastify.io.fetchSockets().then((sockets) => {
for (const s of sockets) {
const clientName = clientChat.get(s.id)?.user;
if (s.id !== sender) {
// Send REAL JSON object
const clientName = clientChat.get(s.id)?.user;
if (clientName !== undefined) {
s.emit('MsgObjectServer', { message: data });
}