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

New look

Browse source
This commit is contained in:
NigeParis 2025-11-28 16:40:33 +01:00
parent ddead83583
commit 0eba95a402
4 changed files with 40 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,8 @@
@import "tailwindcss"; @import "tailwindcss";
@font-face {
font-family: "Nimbus Mono L";
src: url("/fonts/NimbusMonoL.woff2") format("woff2");
}
.btn-style { .btn-style {
@apply @apply

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

@ -2,7 +2,7 @@
<div id="mainbox" class="mainboxDisplay"> <div id="mainbox" class="mainboxDisplay">
<button id="b-whoami" class="btn-style absolute top-4 left-6">Who am i</button> <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"> <h1 class="text-3xl font-bold text-gray-800">
ChatterBoxes <span id="t-username"></span> ChatterBox<span id="t-username"></span>
</h1><br> </h1><br>
<button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button> <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> <button id="b-help" class="btn-style absolute top-14 left-6">Connected</button>

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

@ -18,8 +18,6 @@ const color = {
const machineHostName = window.location.hostname; const machineHostName = window.location.hostname;
console.log('connect to login at %chttps://' + machineHostName + ':8888/app/login',color.yellow); console.log('connect to login at %chttps://' + machineHostName + ':8888/app/login',color.yellow);
let __socket: Socket | undefined = undefined; let __socket: Socket | undefined = undefined;
document.addEventListener('ft:pageChange', () => { document.addEventListener('ft:pageChange', () => {
if (__socket !== undefined) if (__socket !== undefined)
@ -28,10 +26,9 @@ document.addEventListener('ft:pageChange', () => {
console.log("Page changed"); console.log("Page changed");
}) })
function getSocket(): Socket { function getSocket(): Socket {
let addressHost = `wss://${machineHostName}:8888`; // let addressHost = `wss://${machineHostName}:8888`;
// let addressHost = `wss://localhost:8888`; let addressHost = `wss://localhost:8888`;
if (__socket === undefined) if (__socket === undefined)
__socket = io(addressHost, { __socket = io(addressHost, {
@ -47,9 +44,6 @@ async function isLoggedIn() {
return getUser() || null; return getUser() || null;
} }
async function windowStateHidden() { async function windowStateHidden() {
const socketId = __socket || undefined; const socketId = __socket || undefined;
let oldName = localStorage.getItem("oldName") || undefined; let oldName = localStorage.getItem("oldName") || undefined;
@ -81,7 +75,6 @@ async function windowStateVisable() {
} }
async function listBuddies(buddies: HTMLDivElement, listBuddies: string ) { async function listBuddies(buddies: HTMLDivElement, listBuddies: string ) {
if (!buddies) return; if (!buddies) return;
@ -94,6 +87,16 @@ async function listBuddies(buddies: HTMLDivElement, listBuddies: string ) {
} }
function waitSocketConnected(socket: Socket): Promise<void> {
return new Promise(resolve => {
if (socket.connected) return resolve(); // already connected
socket.on("connect", () => resolve());
});
}
const bconnected = document.getElementById('b-help') as HTMLButtonElement;
if (bconnected) {
bconnected.click();
}
@ -103,7 +106,9 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
// Listen for the 'connect' event // Listen for the 'connect' event
socket.on("connect", () => { socket.on("connect", async () => {
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
@ -157,7 +162,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
color?: { default: string, hover: string }, color?: { default: string, hover: string },
}; };
// function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
setTitle('Chat Page'); setTitle('Chat Page');
// Listen for the 'connect' event // Listen for the 'connect' event
@ -173,10 +177,10 @@ 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 value = await client.chatTest(); chatWindow.textContent = '';
if (value.kind === "success") { chatWindow.innerHTML = '';
console.log(value.payload); buddies.textContent = '';
buddies.innerHTML = '';
const addMessage = (text: string) => { const addMessage = (text: string) => {
@ -191,27 +195,32 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
if (window.location.pathname === "/app/chat") { if (window.location.pathname === "/app/chat") {
window.addEventListener("focus", () => { window.addEventListener("focus", () => {
bconnected.click();
windowStateVisable(); windowStateVisable();
bconnected.click();
console.log("%cWindow is focused on /chat", color.green); console.log("%cWindow is focused on /chat", color.green);
}); });
window.addEventListener("blur", () => { window.addEventListener("blur", () => {
windowStateHidden(); windowStateHidden();
bconnected.click();
console.log("%cWindow is not focused on /chat", color.red); console.log("%cWindow is not focused on /chat", color.red);
}); });
} }
socket.once('welcome', (data) => { socket.once('welcome', (data) => {
chatWindow.textContent = '';
chatWindow.innerHTML = '';
buddies.textContent = '';
buddies.innerHTML = '';
bconnected.click(); bconnected.click();
addMessage (`${data.msg} ` + getUser()?.name); addMessage (`${data.msg} ` + getUser()?.name);
}); });
// Send button // Send button
sendButton?.addEventListener("click", () => { sendButton?.addEventListener("click", () => {
bconnected.click();
if (sendtextbox && sendtextbox.value.trim()) { if (sendtextbox && sendtextbox.value.trim()) {
const msgText = sendtextbox.value.trim(); const msgText = sendtextbox.value.trim();
bconnected.click();
addMessage(msgText); addMessage(msgText);
const user = getUser(); const user = getUser();
if (user && socket?.connected) { if (user && socket?.connected) {
@ -233,14 +242,16 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
// Clear Text button // Clear Text button
clearText?.addEventListener("click", () => { clearText?.addEventListener("click", () => {
if (chatWindow) { if (chatWindow) {
bconnected.click();
chatWindow.innerHTML = ''; chatWindow.innerHTML = '';
} }
}); });
// setInterval(async () => { bconnected.click();
// bconnected.click(); setInterval(async () => {
// }, 5000); // every 1 second bconnected.click();
}, 50000); // every 1 second
// Help Text button // Help Text button
bconnected?.addEventListener("click", async () => { bconnected?.addEventListener("click", async () => {
@ -253,9 +264,8 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
let user = await updateUser(); let user = await updateUser();
localStorage.setItem("oldName", oldUser); localStorage.setItem("oldName", oldUser);
buddies.textContent = ""; buddies.textContent = "";
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, oldUser: oldUser,
user: user?.name, user: user?.name,
@ -317,21 +327,9 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
showError('Failed to login: Unknown error'); showError('Failed to login: Unknown error');
} }
}); });
} else if (value.kind === "notLoggedIn") {
if (!chatWindow) return;
const messageElement = document.createElement('div-notlog');
messageElement.textContent = "Not Logged in ....";
chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight;
console.log('not logged in');
} else {
console.log('unknown response: ', value);
}
} }
} }
}; };
addRoute('/chat', handleChat, { bypass_auth: true }); addRoute('/chat', handleChat, { bypass_auth: true });
addRoute('/chat/', handleChat, { bypass_auth: true }); addRoute('/chat/', handleChat, { bypass_auth: true });

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

@ -157,15 +157,14 @@ async function onReady(fastify: FastifyInstance) {
socketId, socketId,
); );
} }
return count; return count;
} }
function broadcast(data: ClientMessage, sender?: string) { function broadcast(data: ClientMessage, sender?: string) {
fastify.io.fetchSockets().then((sockets) => { fastify.io.fetchSockets().then((sockets) => {
for (const s of sockets) { for (const s of sockets) {
const clientName = clientChat.get(s.id)?.user;
if (s.id !== sender) { if (s.id !== sender) {
const clientName = clientChat.get(s.id)?.user;
// Send REAL JSON object // Send REAL JSON object
if (clientName !== undefined) { if (clientName !== undefined) {
s.emit('MsgObjectServer', { message: data }); s.emit('MsgObjectServer', { message: data });
@ -229,7 +228,7 @@ async function onReady(fastify: FastifyInstance) {
if (userFromFrontend.oldUser !== userFromFrontend.user) { if (userFromFrontend.oldUser !== userFromFrontend.user) {
console.log(color.red, 'list activated', userFromFrontend.oldUser, color.reset); console.log(color.red, 'list activated', userFromFrontend.oldUser, color.reset);
if (client === null) { if (client?.user === null) {
console.log('ERROR: clientName is NULL'); console.log('ERROR: clientName is NULL');
return; return;
}; };