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

Clean-up in progress

Browse source
This commit is contained in:
NigeParis 2026-01-09 09:48:25 +01:00 • committed by Nigel
parent 8086444098
commit 4f54d5a462
16 changed files with 292 additions and 214 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,21 +1,27 @@
import './chat.css';
import { addRoute, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
import { showError } from "@app/toast";
import authHtml from './chat.html?raw';
import { getUser, updateUser } from "@app/auth";
import io, { Socket } from 'socket.io-client';
import type { blockedUnBlocked } from './types_front';
import type { ClientMessage, ClientProfil, ClientProfilPartial } from './types_front';
import type { User } from '@app/auth';
import { addRoute, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
import authHtml from './chat.html?raw';
import { getUser } from "@app/auth";
import { listBuddies } from './chatHelperFunctions/listBuddies';
import { getProfil } from './chatHelperFunctions/getProfil';
import { addMessage } from './chatHelperFunctions/addMessage';
import { broadcastMsg } from './chatHelperFunctions/broadcastMsg';
import { isLoggedIn } from './chatHelperFunctions/isLoggedIn';
import type { ClientMessage, ClientProfil, ClientProfilPartial } from './types_front';
import { openProfilePopup } from './chatHelperFunctions/openProfilePopup';
import { actionBtnPopUpBlock } from './chatHelperFunctions/actionBtnPopUpBlock';
import { windowStateHidden } from './chatHelperFunctions/windowStateHidden';
import type { blockedUnBlocked, obj } from './types_front';
import { blockUser } from './chatHelperFunctions/blockUser';
import type { User } from '@app/auth';
import { parseCmdMsg } from './chatHelperFunctions/parseCmdMsg';
import { actionBtnPopUpInvite } from './chatHelperFunctions/actionBtnPopUpInvite';
import { waitSocketConnected } from './chatHelperFunctions/waitSocketConnected';
import { connected } from './chatHelperFunctions/connected';
import { quitChat } from './chatHelperFunctions/quitChat';
import { openMessagePopup } from './chatHelperFunctions/openMessagePopup';
import { windowStateVisable } from './chatHelperFunctions/windowStateVisable';
import { cmdList } from './chatHelperFunctions/cmdList';
const MAX_SYSTEM_MESSAGES = 10;
let inviteMsgFlag: boolean = false;
@ -42,164 +48,6 @@ export function getSocket(): Socket {
return __socket;
};
function inviteToPlayPong(profil: ClientProfil, senderSocket: Socket) {
profil.SenderName = getUser()?.name ?? '';
if (profil.SenderName === profil.user) return;
addMessage(`You invited to play: ${profil.user}🏓`)
senderSocket.emit('inviteGame', JSON.stringify(profil));
};
function actionBtnPopUpInvite(invite: ClientProfil, senderSocket: Socket) {
setTimeout(() => {
const InvitePongBtn = document.querySelector("#popup-b-invite");
InvitePongBtn?.addEventListener("click", () => {
inviteToPlayPong(invite, senderSocket);
});
}, 0)
};
async function windowStateVisable() {
const buddies = document.getElementById('div-buddies') as HTMLDivElement;
const socketId = __socket || undefined;
let oldName = localStorage.getItem("oldName") || undefined;
if (socketId === undefined || oldName === undefined) {return;};
let user = await updateUser();
if(user === null) return;
socketId.emit('client_entered', {
userName: oldName,
user: user?.name,
});
buddies.innerHTML = '';
buddies.textContent = '';
setTitle('Chat Page');
return;
};
function parseCmdMsg(msgText: string): string[] | undefined {
if (!msgText?.trim()) return;
msgText = msgText.trim();
const command: string[] = ['', ''];
if (!msgText.startsWith('@')) {
command[0] = '@msg';
command[1] = msgText;
return command;
}
const noArgCommands = ['@quit', '@help', '@cls'];
if (noArgCommands.includes(msgText)) {
command[0] = msgText;
command[1] = '';
return command;
}
const ArgCommands = ['@profile', '@block'];
const userName = msgText.indexOf(" ");
const cmd2 = msgText.slice(0, userName).trim() ?? "";
const user = msgText.slice(userName + 1).trim();
if (ArgCommands.includes(cmd2)) {
command[0] = cmd2;
command[1] = user;
return command;
}
const colonIndex = msgText.indexOf(":");
if (colonIndex === -1) {
command[0] = msgText;
command[1] = '';
return command;
}
const cmd = msgText.slice(0, colonIndex).trim();
const rest = msgText.slice(colonIndex + 1).trim();
command[0] = cmd;
command[1] = rest;
return command;
}
function waitSocketConnected(socket: Socket): Promise<void> {
return new Promise(resolve => {
if (socket.connected) return resolve();
socket.on("connect", () => resolve());
});
};
function quitChat (socket: Socket) {
try {
const systemWindow = document.getElementById('system-box') as HTMLDivElement;
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
if (socket) {
logout(socket);
setTitle('Chat Page');
connected(socket);
} else {
getSocket();
}
} catch (e) {
showError('Failed to Quit Chat: Unknown error');
}
};
function logout(socket: Socket) {
socket.emit("logout"); // notify server
socket.disconnect(); // actually close the socket
localStorage.clear();
if (__socket !== undefined)
__socket.close();
};
async function connected(socket: Socket): Promise<void> {
setTimeout(async () => {
try {
const buddies = document.getElementById('div-buddies') as HTMLDivElement;
const loggedIn = isLoggedIn();
if (!loggedIn) throw('Not Logged in');
let oldUser = localStorage.getItem("oldName") ?? "";
if (loggedIn?.name === undefined) {return ;};
oldUser = loggedIn.name ?? "";
// const res = await client.guestLogin();
let user = await updateUser();
localStorage.setItem("oldName", oldUser);
buddies.textContent = "";
socket.emit('list', {
oldUser: oldUser,
user: user?.name,
});
} catch (e) {
showError('Failed to login: Unknown error');
}
}, 16);
};
let count = 0;
function incrementCounter(): number {
count += 1;
return count;
}
async function openMessagePopup(message: string) {
const modalmessage = document.getElementById("modal-message") ?? null;
if(!message) return
const obj = JSON.parse(message);
if (modalmessage) {
const messageElement = document.createElement("div");
messageElement.innerHTML = `
<div id="profile-about">Next Game Message ${incrementCounter()}: ${obj.link}</div>
`;
modalmessage.appendChild(messageElement);
modalmessage.scrollTop = modalmessage.scrollHeight;
}
const gameMessage = document.getElementById("game-modal") ?? null;
if (gameMessage) {
gameMessage.classList.remove("hidden");
}
}
function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
let socket = getSocket();
let blockMessage: boolean;
@ -233,16 +81,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
command: '@noguest',
destination: '',
type: 'chat',
user: '',
loginName: '',
userID: '',
text: '',
timestamp: Date.now(),
SenderWindowID: '',
SenderName: '',
SenderID: '',
Sendertext: '',
innerHtml: '',
guestmsg: true,
}
socket.emit('guestmsg', JSON.stringify(userProfile));
@ -489,19 +328,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
chatWindow.innerHTML = '';
break;
case '@help':
addMessage('*');
addMessage('** ********** List of @cmds ********** **');
addMessage('\'@cls\' - clear chat screen conversations');
addMessage('\'@profile <name>\' - pulls ups user profile');
addMessage('\'@block <name>\' - blocks / unblock user');
const guestflag = getUser()?.guest;
if(!guestflag) {
addMessage('\'@guest\' - guest broadcast msgs on / off');
}
addMessage('\'@notify\' - toggles notifications on / off');
addMessage('\'@quit\' - disconnect user from the chat');
addMessage('** *********************************** **');
addMessage('*');
cmdList();
break;
case '@quit':

19
frontend/src/pages/chat/chatHelperFunctions/actionBtnPopUpInvite.ts Normal file
View file

@ -0,0 +1,19 @@
import type { ClientProfil } from "../types_front";
import { Socket } from "socket.io-client";
import { inviteToPlayPong } from "./inviteToPlayPong";
/**
* function listens for a click on the U-Game button and activates a popup function
* inviteToPlayPong
* @param invite - Clients target profil
* @param senderSocket - socket from the sender
**/
export function actionBtnPopUpInvite(invite: ClientProfil, senderSocket: Socket) {
setTimeout(() => {
const InvitePongBtn = document.querySelector("#popup-b-invite");
InvitePongBtn?.addEventListener("click", () => {
inviteToPlayPong(invite, senderSocket);
});
}, 0)
};

19
frontend/src/pages/chat/chatHelperFunctions/cmdList.ts Normal file
View file

@ -0,0 +1,19 @@
import { addMessage } from "./addMessage";
import { getUser } from "@app/auth";
export function cmdList() {
addMessage('*');
addMessage('** ********** List of @cmds ********** **');
addMessage('\'@cls\' - clear chat screen conversations');
addMessage('\'@profile <name>\' - pulls ups user profile');
addMessage('\'@block <name>\' - blocks / unblock user');
const guestflag = getUser()?.guest;
if(!guestflag) {
addMessage('\'@guest\' - guest broadcast msgs on / off');
}
addMessage('\'@notify\' - toggles notifications on / off');
addMessage('\'@quit\' - disconnect user from the chat');
addMessage('** *********************************** **');
addMessage('*');
}

32
frontend/src/pages/chat/chatHelperFunctions/connected.ts Normal file
View file

@ -0,0 +1,32 @@
import { Socket } from "socket.io-client";
import { isLoggedIn } from "./isLoggedIn";
import { showError } from "@app/toast";
import { updateUser } from "@app/auth";
/**
* function displays who is logged in the chat in the ping-Bubbies window
* @param socket
*/
export async function connected(socket: Socket): Promise<void> {
setTimeout(async () => {
try {
const buddies = document.getElementById('div-buddies') as HTMLDivElement;
const loggedIn = isLoggedIn();
if (!loggedIn) throw('Not Logged in');
let oldUser = localStorage.getItem("oldName") ?? "";
if (loggedIn?.name === undefined) {return ;};
oldUser = loggedIn.name ?? "";
let user = await updateUser();
localStorage.setItem("oldName", oldUser);
buddies.textContent = "";
socket.emit('list', {
oldUser: oldUser,
user: user?.name,
});
} catch (e) {
showError('Failed to login: Unknown error');
}
}, 16);
};

7
frontend/src/pages/chat/chatHelperFunctions/incrementCounter.ts Normal file
View file

@ -0,0 +1,7 @@
let count = 0;
export function incrementCounter(): number {
count += 1;
return count;
}

18
frontend/src/pages/chat/chatHelperFunctions/inviteToPlayPong.ts Normal file
View file

@ -0,0 +1,18 @@
import { Socket } from 'socket.io-client';
import type { ClientProfil } from '../types_front';
import { getUser } from '@app/auth';
import { addMessage } from './addMessage';
/**
* function displays an invite message to sender
* it also sends a message to backend for a link and displays it in the target window
* @param profil of the target
* @param senderSocket
*/
export function inviteToPlayPong(profil: ClientProfil, senderSocket: Socket) {
profil.SenderName = getUser()?.name ?? '';
if (profil.SenderName === profil.user) return;
addMessage(`You invited to play: ${profil.user}🏓`)
senderSocket.emit('inviteGame', JSON.stringify(profil));
};

11
frontend/src/pages/chat/chatHelperFunctions/logout.ts Normal file
View file

@ -0,0 +1,11 @@
import { Socket } from "socket.io-client";
import { __socket } from "../chat";
export function logout(socket: Socket) {
socket.emit("logout"); // notify server
socket.disconnect(); // actually close the socket
localStorage.clear();
if (__socket !== undefined)
__socket.close();
};

26
frontend/src/pages/chat/chatHelperFunctions/openMessagePopup.ts Normal file
View file

@ -0,0 +1,26 @@
import { incrementCounter } from "./incrementCounter";
// let count = 0;
// function incrementCounter(): number {
// count += 1;
// return count;
// }
export async function openMessagePopup(message: string) {
const modalmessage = document.getElementById("modal-message") ?? null;
if(!message) return
const obj = JSON.parse(message);
if (modalmessage) {
const messageElement = document.createElement("div");
messageElement.innerHTML = `
<div id="profile-about">Next Game Message ${incrementCounter()}: ${obj.link}</div>
`;
modalmessage.appendChild(messageElement);
modalmessage.scrollTop = modalmessage.scrollHeight;
}
const gameMessage = document.getElementById("game-modal") ?? null;
if (gameMessage) {
gameMessage.classList.remove("hidden");
}
}

47
frontend/src/pages/chat/chatHelperFunctions/parseCmdMsg.ts Normal file
View file

@ -0,0 +1,47 @@
/**
* function takes the input line of the chat and checks the it's not a cmd
* ex: @command "arg" or @command noarg
* ex: command @help - displays commands availble
* @param msgText : string from input line
*
*/
export function parseCmdMsg(msgText: string): string[] | undefined {
if (!msgText?.trim()) return;
msgText = msgText.trim();
const command: string[] = ['', ''];
if (!msgText.startsWith('@')) {
command[0] = '@msg';
command[1] = msgText;
return command;
}
const noArgCommands = ['@quit', '@help', '@cls'];
if (noArgCommands.includes(msgText)) {
command[0] = msgText;
command[1] = '';
return command;
}
const ArgCommands = ['@profile', '@block'];
const userName = msgText.indexOf(" ");
const cmd2 = msgText.slice(0, userName).trim() ?? "";
const user = msgText.slice(userName + 1).trim();
if (ArgCommands.includes(cmd2)) {
command[0] = cmd2;
command[1] = user;
return command;
}
const colonIndex = msgText.indexOf(":");
if (colonIndex === -1) {
command[0] = msgText;
command[1] = '';
return command;
}
const cmd = msgText.slice(0, colonIndex).trim();
const rest = msgText.slice(colonIndex + 1).trim();
command[0] = cmd;
command[1] = rest;
return command;
}

29
frontend/src/pages/chat/chatHelperFunctions/quitChat.ts Normal file
View file

@ -0,0 +1,29 @@
import { Socket } from "socket.io-client";
import { getSocket } from "../chat";
import { logout } from "./logout";
import { connected } from "./connected";
import { showError } from "@app/toast";
import { setTitle } from "@app/routing";
/**
* function to quit the chat - leaves the ping-Buddies list
* @param socket
*/
export function quitChat (socket: Socket) {
try {
const systemWindow = document.getElementById('system-box') as HTMLDivElement;
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
if (socket) {
logout(socket);
setTitle('Chat Page');
connected(socket);
} else {
getSocket();
}
} catch (e) {
showError('Failed to Quit Chat: Unknown error');
}
};

14
frontend/src/pages/chat/chatHelperFunctions/waitSocketConnected.ts Normal file
View file

@ -0,0 +1,14 @@
import { Socket } from "socket.io-client";
/**
* function waits for the socket to be connected and when connected calls socket.on "connect"
* @param socket
* @returns
*/
export function waitSocketConnected(socket: Socket): Promise<void> {
return new Promise(resolve => {
if (socket.connected) return resolve();
socket.on("connect", () => resolve());
});
};

28
frontend/src/pages/chat/chatHelperFunctions/windowStateVisable.ts Normal file
View file

@ -0,0 +1,28 @@
import { __socket } from "../chat";
import { setTitle } from "@app/routing";
import { updateUser } from "@app/auth";
/**
* function stores old name clears ping buddies list
* and emit a client entered to backend
* @returns
*/
export async function windowStateVisable() {
const buddies = document.getElementById('div-buddies') as HTMLDivElement;
const socketId = __socket || undefined;
let oldName = localStorage.getItem("oldName") || undefined;
if (socketId === undefined || oldName === undefined) {return;};
let user = await updateUser();
if(user === null) return;
socketId.emit('client_entered', {
userName: oldName,
user: user?.name,
});
buddies.innerHTML = '';
buddies.textContent = '';
setTitle('Chat Page');
return;
};

20
frontend/src/pages/chat/types_front.ts
View file

@ -18,10 +18,10 @@ export type ClientMessage = {
export type ClientProfil = ClientProfilPartial & {
loginName?: string,
SenderName?: string,
Sendertext?: string,
innerHtml?: string,
loginName?: string | '',
SenderName?: string | '',
Sendertext?: string | '',
innerHtml?: string | '',
};
@ -29,13 +29,13 @@ export type ClientProfilPartial = {
command: string,
type: string,
destination: string,
user: string,
userID: string,
user?: string | '',
userID?: string | '',
timestamp: number,
SenderWindowID?:string,
SenderID?: string,
text?: string,
token?: string
SenderWindowID?:string | '',
SenderID?: string | '',
text?: string | '',
token?: string | '',
guestmsg?: boolean,
}