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

Clean up starting

Browse source
This commit is contained in:
NigeParis 2025-12-29 16:52:01 +01:00 • committed by Maix0
parent 7532ce19d2
commit ddfee11474
6 changed files with 73 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/pages/chat/chat.css
View file

@ -233,24 +233,17 @@ div-private {
items-center;
}
.popup-b-clear {
.popup-b-invite {
@apply
absolute
bottom-42
right-12
}
.popup-b-invite {
@apply
absolute
bottom-52
right-12
}
.popup-b-block {
@apply
absolute
bottom-62
bottom-52
right-12
}

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

@ -1,13 +1,11 @@
<div class="displaybox">
<div id="mainbox" class="mainboxDisplay">
<button id="b-whoami" class="btn-style absolute top-4 left-6">Who am i</button>
<button id="b-nextGame" class="btn-style absolute top-4 left-34">nextGame</button>
<button id="b-nextGame" class="btn-style absolute top-4 left-14">nextGame</button>
<h1 class="text-3xl font-bold text-gray-800">
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>
<!-- Horizontal Message Box -->
<div id="system-box" class="system-info">System: connecting ... </div>
<div class="flex justify-center mt-2">

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

@ -1,4 +1,4 @@
import "./chat.css";
import './chat.css';
import { addRoute, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
import { showError } from "@app/toast";
import authHtml from './chat.html?raw';
@ -47,6 +47,8 @@ export type obj =
Sendertext: string,
};
const MAX_SYSTEM_MESSAGES = 10;
// 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);
@ -215,33 +217,33 @@ async function connected(socket: Socket): Promise<void> {
}, 16);
};
async function whoami(socket: Socket) {
try {
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
const loggedIn = isLoggedIn();
// async function whoami(socket: Socket) {
// try {
// const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
// const loggedIn = isLoggedIn();
const res = (getUser());
console.log('loginGuest():', res?.name);
if (res) {
let user = await updateUser();
if (chatWindow) {
socket.emit('updateClientName', {
oldUser: '',
user: user?.name
});
}
if (user === null)
return showError('Failed to get user: no user ?');
setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`);
} else {
showError(`Failed to login: ${res}`);
}
// const res = (getUser());
// console.log('loginGuest():', res?.name);
// if (res) {
// let user = await updateUser();
// if (chatWindow) {
// socket.emit('updateClientName', {
// oldUser: '',
// user: user?.name
// });
// }
// if (user === null)
// return showError('Failed to get user: no user ?');
// setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`);
// } else {
// showError(`Failed to login: ${res}`);
// }
} catch (e) {
console.error("Login error:", e);
showError('Failed to login: Unknown error');
}
};
// } catch (e) {
// console.error("Login error:", e);
// showError('Failed to login: Unknown error');
// }
// };
let count = 0;
function incrementCounter(): number {
@ -340,27 +342,14 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}
if (chatWindow && data.message.destination === "inviteMsg") {
const messageElement = document.createElement("div-private");
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
messageElement.innerHTML = `🎃${data.message.SenderUserName}: ${data.message.innerHtml}`;
messageElement.innerHTML = `🏓${data.message.SenderUserName}: ${data.message.innerHtml}`;
chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight;
}
const MAX_SYSTEM_MESSAGES = 10;
if (systemWindow && data.message.destination === "system-info") {
const messageElement = document.createElement("div");
messageElement.textContent = `${data.message.user}: ${data.message.text}`;
@ -380,21 +369,21 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
profil.SenderName = getUser()?.name ?? "";
openProfilePopup(profil);
socket.emit('isBlockdBtn', profil);
console.log(`DEBUG LOG: userId:${profil.userID}: senderID${profil.SenderID}' senderID:${getUser()?.id}`);
console.log(`DEBUG LOG: user:${profil.user}: sender:${profil.SenderName}' senderID:${getUser()?.name}`);
// console.log(`DEBUG LOG: userId:${profil.userID}: senderID${profil.SenderID}' senderID:${getUser()?.id}`);
// console.log(`DEBUG LOG: user:${profil.user}: sender:${profil.SenderName}' senderID:${getUser()?.name}`);
socket.emit('check_Block_button', profil);
actionBtnPopUpClear(profil, socket);
actionBtnPopUpInvite(profil, socket);
actionBtnPopUpBlock(profil, socket);
});
socket.on('inviteGame', (invite: ClientProfil) => {
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
const messageElement = document.createElement("div");
messageElement.innerHTML =`🏓${invite.SenderName}: ${invite.innerHtml}`;
chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight;
});
// socket.on('inviteGame', (invite: ClientProfil) => {
// const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
// const messageElement = document.createElement("div");
// messageElement.innerHTML =`🏓${invite.SenderName}: ${invite.innerHtml}`;
// chatWindow.appendChild(messageElement);
// chatWindow.scrollTop = chatWindow.scrollHeight;
// });
socket.on('blockUser', (blocked: ClientProfil) => {
@ -413,9 +402,9 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const blockUserBtn = document.querySelector("#popup-b-block");
if (blockUserBtn) {
console.log(' =================== >>> User State:', data.userState);
console.log(' =================== >>> UserTarget:', data.userTarget);
console.log(' =================== >>> By:', data.by);
// console.log(' =================== >>> User State:', data.userState);
// console.log(' =================== >>> UserTarget:', data.userTarget);
// console.log(' =================== >>> By:', data.by);
let message = "";
if (data.userState === "block") {message = "un-block", blockMessage = true} else{message = "block", blockMessage = false}
blockUserBtn.textContent = message;
@ -427,7 +416,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
quitChat(socket);
});
socket.on('privMessageCopy', (message) => {
socket.on('privMessageCopy', (message: string) => {
addMessage(message);
})
@ -485,8 +474,8 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const chatWindow = document.getElementById('t-chatbox') as HTMLDivElement;
const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement;
const clearText = document.getElementById('b-clear') as HTMLButtonElement;
const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement;
const bconnected = document.getElementById('b-help') as HTMLButtonElement;
// 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 bquit = document.getElementById('b-quit') as HTMLDivElement;
@ -532,9 +521,9 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
case '@msg':
broadcastMsg(socket, msgCommand);
break;
case '@who':
whoami(socket);
break;
// case '@who':
// whoami(socket);
// break;
case '@profil':
getProfil(socket, msgCommand[1]);
break;
@ -601,9 +590,9 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
// Whoami button to display user name addMessage(msgCommand[0]);
bwhoami?.addEventListener('click', async () => {
whoami(socket);
});
// bwhoami?.addEventListener('click', async () => {
// whoami(socket);
// });
}
}

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

@ -11,7 +11,6 @@ export async function openProfilePopup(profil: ClientProfil) {
</br>
<div-login-name id="loginName"> Login ID: '${profil.userID ?? ''}' </div>
</br>
<button id="popup-b-clear" class="btn-style popup-b-clear">Clear Text</button>
<button id="popup-b-invite" class="btn-style popup-b-invite">U Game ?</button>
<button id="popup-b-block" class="btn-style popup-b-block">Block User</button>
<div id="profile-about">About: '${profil.text}' </div>