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

feat(chat): Handle user change

Browse source
This commit is contained in:
Maieul BOYER 2026-01-11 13:52:00 +01:00 • committed by Nigel
parent 0ec2b3007c
commit f14d618ed5
4 changed files with 363 additions and 351 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/@types/dom.d.ts vendored
View file

@ -2,6 +2,7 @@ import { type State } from "ft_state";
interface CustomEventMap { interface CustomEventMap {
"ft:pageChange": CustomEvent<string>; "ft:pageChange": CustomEvent<string>;
"ft:userChange": CustomEvent<{id: user, name: string} | null>;
} }
declare global { declare global {

8
frontend/src/auth.ts
View file

@ -1,7 +1,7 @@
import { showError } from "@app/toast"; import { showError } from "@app/toast";
import client from "@app/api"; import client from "@app/api";
import cookie from "js-cookie"; import cookie from "js-cookie";
import { ensureWindowState } from "@app/utils"; import { ensureWindowState, isNullish } from "@app/utils";
import { navigateTo } from "./routing"; import { navigateTo } from "./routing";
@ -40,8 +40,14 @@ export function isLogged(): boolean {
} }
export function setUser(newUser: User | null) { export function setUser(newUser: User | null) {
let sendEvent = (window.__state.user?.id !== newUser?.id);
window.__state.user = newUser; window.__state.user = newUser;
updateHeaderProfile(); updateHeaderProfile();
if (sendEvent) {
const event = new CustomEvent("ft:userChange", { detail: isNullish(newUser) ? null : { id: newUser.id, name: newUser.name } });
document.dispatchEvent(event);
}
} }
export function updateHeaderProfile() { export function updateHeaderProfile() {

139
frontend/src/chat/chat.ts
View file

@ -31,7 +31,7 @@ import { quitChat } from "./chatHelperFunctions/quitChat";
import { openMessagePopup } from "./chatHelperFunctions/openMessagePopup"; import { openMessagePopup } from "./chatHelperFunctions/openMessagePopup";
import { windowStateVisable } from "./chatHelperFunctions/windowStateVisable"; import { windowStateVisable } from "./chatHelperFunctions/windowStateVisable";
import { cmdList } from "./chatHelperFunctions/cmdList"; import { cmdList } from "./chatHelperFunctions/cmdList";
import { showInfo } from '../toast'; import { showInfo } from "../toast";
const MAX_SYSTEM_MESSAGES = 10; const MAX_SYSTEM_MESSAGES = 10;
let inviteMsgFlag: boolean = false; let inviteMsgFlag: boolean = false;
@ -52,19 +52,33 @@ export function getSocket(): Socket {
} }
const chatBox = document.getElementById("chatBox")!; const chatBox = document.getElementById("chatBox")!;
chatBox.classList.add('hidden'); chatBox.classList.add("hidden");
chatBox.innerHTML = authHtml; chatBox.innerHTML = authHtml;
const bquit = document.getElementById("b-quit") as HTMLDivElement;
const buddies = document.getElementById("div-buddies") as HTMLDivElement;
const buttonMessage = document.getElementById("close-modal-message") ?? null;
const buttonPro = document.getElementById("close-modal") ?? null;
const chatButton = document.querySelector("#chatButton");
const chatWindow = document.querySelector("#t-chatbox")!;
const clearText = document.getElementById("b-clear") as HTMLButtonElement;
const gameMessage = document.getElementById("game-modal") ?? null;
const modalmessage = document.getElementById("modal-message") ?? null;
const noGuest = document.getElementById("noGuest") ?? null;
const notify = document.getElementById("notify") ?? null;
const overlay = document.querySelector("#overlay")!;
const profilList = document.getElementById("profile-modal") ?? null;
const sendButton = document.getElementById("b-send") as HTMLButtonElement;
const sendtextbox = document.getElementById(
"t-chat-window",
) as HTMLButtonElement;
const systemWindow = document.getElementById("chat-system-box") as HTMLDivElement;
function initChatSocket() {
let socket = getSocket(); let socket = getSocket();
let blockMessage: boolean; let blockMessage: boolean;
// 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;
const sendtextbox = document.getElementById(
"t-chat-window"
) as HTMLButtonElement;
const noGuest = document.getElementById("noGuest") ?? null;
await waitSocketConnected(socket); await waitSocketConnected(socket);
const user = getUser()?.name; const user = getUser()?.name;
const userID = getUser()?.id; const userID = getUser()?.id;
@ -105,9 +119,6 @@ socket.on("connect", async () => {
// Listen for messages from the server "MsgObjectServer" // Listen for messages from the server "MsgObjectServer"
socket.on("MsgObjectServer", (data: { message: ClientMessage }) => { socket.on("MsgObjectServer", (data: { message: ClientMessage }) => {
const systemWindow = document.getElementById("system-box") as HTMLDivElement;
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
if (socket) { if (socket) {
connected(socket); connected(socket);
} }
@ -128,7 +139,9 @@ socket.on("MsgObjectServer", (data: { message: ClientMessage }) => {
if (chatWindow && data.message.destination === "inviteMsg") { if (chatWindow && data.message.destination === "inviteMsg") {
const messageElement = document.createElement("div-private"); const messageElement = document.createElement("div-private");
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement; 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.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight; chatWindow.scrollTop = chatWindow.scrollHeight;
@ -160,7 +173,6 @@ socket.on("profilMessage", (profil: ClientProfil) => {
socket.on("blockUser", (blocked: ClientProfil) => { socket.on("blockUser", (blocked: ClientProfil) => {
let icon = "⛔"; let icon = "⛔";
if (inviteMsgFlag) { if (inviteMsgFlag) {
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
const messageElement = document.createElement("div"); const messageElement = document.createElement("div");
if (`${blocked.text}` === "I have un-blocked you") { if (`${blocked.text}` === "I have un-blocked you") {
icon = "💚"; icon = "💚";
@ -176,16 +188,16 @@ socket.on("blockBtn", (data: blockedUnBlocked) => {
if (blockUserBtn) { if (blockUserBtn) {
let message = ""; let message = "";
if (data.userState === "block") { if (data.userState === "block") {
(message = "un-block"), (blockMessage = true); ((message = "un-block"), (blockMessage = true));
} else { } else {
(message = "block"), (blockMessage = false); ((message = "block"), (blockMessage = false));
} }
blockUserBtn.textContent = message; blockUserBtn.textContent = message;
} }
}); });
socket.on("logout", () => { socket.on("logout", () => {
quitChat(socket); quitChat();
}); });
socket.on("privMessageCopy", (message: string) => { socket.on("privMessageCopy", (message: string) => {
@ -197,63 +209,34 @@ socket.on("nextGame", (message: string) => {
openMessagePopup(message); openMessagePopup(message);
}); });
let toggle = false;
window.addEventListener("focus", async () => {
setTimeout(() => {
connected(socket);
}, 16);
if (window.location.pathname === "/app/chat") {
if (socket.id) {
await windowStateVisable();
}
toggle = true;
}
});
window.addEventListener("blur", () => {
if (socket.id) windowStateHidden();
toggle = false;
});
socket.on("listBud", async (myBuddies: string[]) => { socket.on("listBud", async (myBuddies: string[]) => {
const buddies = document.getElementById("div-buddies") as HTMLDivElement; const buddies = document.getElementById(
"div-buddies",
) as HTMLDivElement;
listBuddies(socket, buddies, myBuddies); listBuddies(socket, buddies, myBuddies);
}); });
socket.once("welcome", (data) => { socket.once("welcome", (data) => {
const buddies = document.getElementById("div-buddies") as HTMLDivElement; const buddies = document.getElementById(
"div-buddies",
) as HTMLDivElement;
buddies.textContent = ""; buddies.textContent = "";
buddies.innerHTML = ""; buddies.innerHTML = "";
connected(socket); connected(socket);
addMessage(`${data.msg} ` + getUser()?.name); addMessage(`${data.msg} ` + getUser()?.name);
}); });
setTitle("Chat Page");
const sendButton = document.getElementById("b-send") as HTMLButtonElement;
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 buddies = document.getElementById("div-buddies") as HTMLDivElement;
const bquit = document.getElementById("b-quit") as HTMLDivElement;
buddies.textContent = ""; buddies.textContent = "";
buddies.innerHTML = ""; buddies.innerHTML = "";
const buttonPro = document.getElementById("close-modal") ?? null; }
if (buttonPro) if (buttonPro)
buttonPro.addEventListener("click", () => { buttonPro.addEventListener("click", () => {
const profilList = document.getElementById("profile-modal") ?? null;
if (profilList) profilList.classList.add("hidden"); if (profilList) profilList.classList.add("hidden");
}); });
const buttonMessage = document.getElementById("close-modal-message") ?? null;
if (buttonMessage) if (buttonMessage)
buttonMessage.addEventListener("click", () => { buttonMessage.addEventListener("click", () => {
const gameMessage = document.getElementById("game-modal") ?? null;
if (gameMessage) gameMessage.classList.add("hidden"); if (gameMessage) gameMessage.classList.add("hidden");
const modalmessage = document.getElementById("modal-message") ?? null;
if (modalmessage) { if (modalmessage) {
modalmessage.innerHTML = ""; modalmessage.innerHTML = "";
} }
@ -261,8 +244,8 @@ if (buttonMessage)
// Send button // Send button
sendButton?.addEventListener("click", () => { sendButton?.addEventListener("click", () => {
const notify = document.getElementById("notify") ?? null; let socket = window.__state.chatSock;
const noGuest = document.getElementById("noGuest") ?? null; if (!socket) return;
const userId = getUser()?.id; const userId = getUser()?.id;
const userAskingToBlock = getUser()?.name; const userAskingToBlock = getUser()?.name;
if (sendtextbox && sendtextbox.value.trim()) { if (sendtextbox && sendtextbox.value.trim()) {
@ -357,7 +340,7 @@ sendButton?.addEventListener("click", () => {
break; break;
case "@quit": case "@quit":
quitChat(socket); quitChat();
break; break;
default: default:
@ -385,6 +368,23 @@ sendButton?.addEventListener("click", () => {
} }
}); });
let toggle = false;
window.addEventListener("focus", async () => {
setTimeout(() => {
if (window.__state.chatSock) connected(window.__state.chatSock);
}, 16);
if (window.location.pathname === "/app/chat") {
if (window.__state.chatSock?.id) {
await windowStateVisable();
}
toggle = true;
}
});
window.addEventListener("blur", () => {
if (window.__state.chatSock?.id) windowStateHidden();
toggle = false;
});
// Clear Text button // Clear Text button
clearText?.addEventListener("click", () => { clearText?.addEventListener("click", () => {
if (chatWindow) { if (chatWindow) {
@ -393,7 +393,7 @@ clearText?.addEventListener("click", () => {
}); });
bquit?.addEventListener("click", () => { bquit?.addEventListener("click", () => {
quitChat(socket); quitChat();
}); });
// Enter key to send message // Enter key to send message
@ -405,21 +405,26 @@ sendtextbox.addEventListener("keydown", (event) => {
} }
}); });
const chatButton = document.querySelector('#chatButton');
chatButton!.addEventListener("click", () => { chatButton!.addEventListener("click", () => {
if (chatBox.classList.contains("hidden")) {
const overlay = document.querySelector('#overlay')!; chatBox.classList.toggle("hidden");
if (chatBox.classList.contains('hidden')) { overlay.classList.add("opacity-60");
chatBox.classList.toggle('hidden');
overlay.classList.add('opacity-60');
} else { } else {
chatBox.classList.toggle('hidden'); chatBox.classList.toggle("hidden");
overlay.classList.remove('opacity-60'); overlay.classList.remove("opacity-60");
} }
}); });
document.addEventListener('click', () => { document.addEventListener("ft:userChange", (user) => {
if (socket) { let newUser: { id: string; name: string } | null = user.detail;
connected(socket); window.__state.chatSock?.disconnect();
window.__state.chatSock = undefined;
if (newUser === null) {
quitChat();
// logged out
// hide chat button
} else {
// user has changed
initChatSocket();
} }
}); });

2
frontend/src/chat/chatHelperFunctions/quitChat.ts
View file

@ -10,7 +10,7 @@ import { setTitle } from "@app/routing";
* @param socket * @param socket
*/ */
export function quitChat (socket: Socket) { export function quitChat () {
const chatBox = document.getElementById("chatBox")!; const chatBox = document.getElementById("chatBox")!;
const overlay = document.querySelector('#overlay')!; const overlay = document.querySelector('#overlay')!;