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

added Quit Chat Button

Browse source
This commit is contained in:
NigeParis 2025-12-01 12:16:08 +01:00
parent 899694a17f
commit d1496e1697
3 changed files with 88 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@
ChatterBox<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-quit" class="btn-style absolute top-14 right-6">Quit Chat</button>
<button id="b-help" class="btn-style absolute top-14 left-6">Connected</button>
<!-- Center wrapper for chat + vertical box -->
@ -12,9 +13,9 @@
<!-- Groupe Chat + vertical box container -->
<div id = "g-boxes" class="flex gap-2">
<!-- Text Chat box panel + send -->
<div id = "g-textBoxes" class="flex flex-col">
<div id="g-textBoxes" class="flex flex-col">
<div id="t-chatbox" class="chatbox-style"></div>
<div id = "t-input-send" class="flex gap-1 mt-2">
<div id="t-input-send" class="flex gap-1 mt-2">
<input id="t-chat-window" placeholder="Type your message..." class="chat-window-style" />
<button id="b-send" class="send-btn-style">Send</button>
</div>

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

@ -14,6 +14,9 @@ const color = {
};
// get the name of the machine used to connect
const machineHostName = window.location.hostname;
console.log('connect to login at %chttps://' + machineHostName + ':8888/app/login',color.yellow);
@ -101,6 +104,14 @@ if (bconnected) {
bconnected.click();
}
function logout(socket: Socket) {
socket.emit("logout"); // notify server
socket.disconnect(); // actually close the socket
localStorage.clear();
if (__socket !== undefined)
__socket.close();
// window.location.href = "/login";
}
function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
@ -108,6 +119,8 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
let socket = getSocket();
// Listen for the 'connect' event
socket.on("connect", async () => {
@ -151,6 +164,16 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
console.log("Getuser():", getUser());
});
socket.on('logout', () => {
const bquit = document.getElementById('b-quit') as HTMLDivElement | null;
if (bquit instanceof HTMLDivElement) {
bquit.click();
}
});
type Providers = {
name: string,
display_name: string,
@ -191,6 +214,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const bconnected = document.getElementById('b-help') as HTMLButtonElement;
const username = document.getElementById('username') as HTMLDivElement;
const buddies = document.getElementById('div-buddies') as HTMLDivElement;
const bquit = document.getElementById('b-quit') as HTMLDivElement;
chatWindow.textContent = '';
chatWindow.innerHTML = '';
@ -240,16 +264,28 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
});
// Clear Text button
clearText?.addEventListener("click", () => {
if (chatWindow) {
bconnected.click();
chatWindow.innerHTML = '';
}
});
bquit?.addEventListener('click', () => {
if (socket) {
logout(socket);
setTitle('Chat Page');
bconnected.click();
} else {
getSocket();
}
});
bconnected.click();
setInterval(async () => {
bconnected.click();
}, 10000); // every 10 second
@ -274,10 +310,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}
});
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);