Notification :

- Added function on cross for close notification
    - Added stop timer when mouse is over
Global :
    - Improved security

site/interface/site/liveChat/showActualGameMessage.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 19:21:55 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/04 22:41:07 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/06 23:19:51 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -15,9 +15,13 @@ import { sendRequest } from "../websocket.js";
 function	showActualGameMessage()
 {
 	const	divMessageListChatHome	= document.getElementById("messageListChatHome");
+	let		newDiv					= null;
+	let		contentNode				= null;
+	let		dateNode				= null;
+	let		tmp						= null;
 	let		me 						= "Kumita";
 	let		request = {
-		isInGame: false,
+		isInGame: true,
 		opponent: {
 			name: "Astropower",
 			id: "301547"
@@ -66,12 +70,19 @@ function	showActualGameMessage()
 		return ;	
 	}
 	request.listMessage.forEach(element => {
-		divMessageListChatHome.innerHTML += `
+		newDiv = document.createElement("div");
-		<div class="${element.from === me ? "meMessage" : "opponentMessage"}">
+		contentNode = document.createTextNode(element.content);
-			<p class="content">${element.content}</p>
+		dateNode = document.createTextNode(element.date);
-			<p class="time">${element.date}</p>
+		newDiv.classList.add(element.from == me ? "meMessage" : "opponentMessage");
-		</div>
+		tmp = document.createElement("p");
-		`;
+		tmp.classList.add("content");
+		tmp.appendChild(contentNode);
+		newDiv.appendChild(tmp);
+		tmp = document.createElement("p");
+		tmp.classList.add("time");
+		tmp.appendChild(dateNode);
+		newDiv.appendChild(tmp);
+		divMessageListChatHome.appendChild(newDiv);
 	});
 	divMessageListChatHome.scrollTop = divMessageListChatHome.scrollHeight;
 	divMessageListChatHome.innerHTML += `

site/interface/site/liveChat/showPrivateChat.js

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   showPrivateChat.js                                 :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 19:17:54 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/05 16:51:04 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/06 23:32:35 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -44,9 +44,11 @@ async function	restoreButton()
 async function	changeButton(user)
 {
 	const	divButtonTypeChatHome	= document.getElementById("buttonTypeChatHome");
-	let		returnButton;
+	const	h2Username				= document.createElement("h2");
-	let		h2Button;
+	const	h2UsernameNode			= document.createTextNode(user.name);
-	let		lenh2Button;
+	let		returnButton 			= null;
+	let		h2Button				= null;
+	let		lenh2Button				= 0;
 
 	h2Button = divButtonTypeChatHome.getElementsByTagName("h2");
 	lenh2Button = h2Button.length;
@@ -55,8 +57,9 @@ async function	changeButton(user)
 		savedButtons.push(h2Button[0]);
 		h2Button[0].remove();
 	}
+	h2Username.appendChild(h2UsernameNode);
+	divButtonTypeChatHome.appendChild(h2Username);
 	divButtonTypeChatHome	.innerHTML += `
-		<h2>${user.name}</h2>
 		<p id="returnButton" style="margin: 8px 10px 0 0; text-align: right;">Return</p>
 	`;
 	h2Button[0].style.cursor = "default";
@@ -71,16 +74,29 @@ async function	changeButton(user)
 
 async function	displayAllMessage(divMessageListChatHome)
 {
+	let		newDiv				= null;
+	let		contentNode			= null;
+	let		dateNode			= null;
+	let		tmp					= null;
+
 	divMessageListChatHome.style.height = "230px";
 	divMessageListChatHome.style.paddingBottom = "20px";
 	divMessageListChatHome.innerHTML = '';
 	messageList.forEach(element => {
-		divMessageListChatHome.innerHTML += `
+		newDiv = document.createElement("div");
-		<div class="${element.from === userMeInfo.id ? "meMessage" : "opponentMessage"}">
+		contentNode = document.createTextNode(element.content);
-		<p class="content">${element.content}</p>
+		dateNode = document.createTextNode(element.date);
-		<p class="time">${element.date}</p>
+		console.log(element.from, userMeInfo.id);
-		</div>
+		newDiv.classList.add(element.from === userMeInfo.id ? "meMessage" : "opponentMessage");
-		`;
+		tmp = document.createElement("p");
+		tmp.classList.add("content");
+		tmp.appendChild(contentNode);
+		newDiv.appendChild(tmp);
+		tmp = document.createElement("p");
+		tmp.classList.add("time");
+		tmp.appendChild(dateNode);
+		newDiv.appendChild(tmp);
+		divMessageListChatHome.appendChild(newDiv);
 	});
 	divMessageListChatHome.scrollTop = divMessageListChatHome.scrollHeight;
 }

site/interface/site/notification/main.js

@@ -3,16 +3,15 @@
 /*                                                        :::      ::::::::   */
 /*   main.js                                            :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 23:32:52 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/06 16:25:21 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/06 23:00:33 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 /*
 	Todo (Eddy) : 
-		- Close button
 		- pause when hover
 */
 
@@ -22,6 +21,7 @@ function	createHeader(title, img)
 	const	icon			= document.createElement("img");
 	const	h1Title			= document.createElement("h1");
 	const	cross			= document.createElement("p");
+	const	titleTextNode	= document.createTextNode(title);
 
 	divHeader.classList.add("header");
 	if (img)
@@ -31,7 +31,7 @@ function	createHeader(title, img)
 		icon.style.position = 'absolute';
 		icon.src = img;
 	}
-	h1Title.innerHTML = title;
+	h1Title.appendChild(titleTextNode);
 	h1Title.style.textAlign = "center";
 	h1Title.style.width = "100%";
 	h1Title.style.marginTop = "5px";
@@ -43,6 +43,12 @@ function	createHeader(title, img)
 	cross.style.marginTop = '5px';
 	cross.style.fontSize = '20px';
 	cross.style.fontWeight = 'bold';
+	cross.addEventListener("click", () => {
+		divHeader.parentNode.style.animation = "slideOut 0.21s";
+		setTimeout(() => {
+			divHeader.parentNode.remove();
+		}, 199);
+	});
 	if (img)
 		divHeader.appendChild(icon);
 	divHeader.appendChild(h1Title);
@@ -54,18 +60,19 @@ function	createContent(message)
 {
 	const	divContent		= document.createElement("div");
 	const	pMessage		= document.createElement("p");
+	const	pMessageNode	= document.createTextNode(message);
 	const	limit			= 100;
 
 	divContent.classList.add("content");
 	pMessage.style.textAlign = "center";
 	if (message.length > limit)
 		message = message.substring(0, limit) + "...";
-	pMessage.innerHTML = message;
+	pMessage.appendChild(pMessageNode);
 	divContent.appendChild(pMessage);
 	return (divContent);
 }
 
-function	createLoadBar(timer)
+function	createLoadBar(newNotification, timer)
 {
 	const	divLoadBar		= document.createElement("div");
 	const	progress		= document.createElement("div");
@@ -79,6 +86,10 @@ function	createLoadBar(timer)
 	progress.style.height = '5px';
 	progress.style.width = '0px';
 	progress.style.backgroundColor = 'black';
+	newNotification.addEventListener("mouseover", () => {
+		clearInterval(interval);
+		progress.style.width = "100%";
+	});
 	interval = setInterval(() => {
 		progress.style.width = (intervalTimer * i) * 100 / timer + "%";
 		i++;
@@ -86,19 +97,21 @@ function	createLoadBar(timer)
 	setTimeout(() => {
 		clearInterval(interval);
 	}, timer);
-	return (divLoadBar);
+	newNotification.appendChild(divLoadBar);
+	return (interval);
 }
 
 function	createFooter(action, actionText)
 {
 	const	newButton	= document.createElement("div");
+	const	textNode	= document.createTextNode(actionText);
 
 	if (action == null)
 		return (null);
 	newButton.style.cursor = "pointer";
 	if (actionText.length > 20)
 		actionText = actionText.substring(0, 20) + "...";
-	newButton.innerHTML = actionText;
+	newButton.appendChild(textNode);
 	newButton.setAttribute("onclick", action);
 	newButton.classList.add("footer");
 	if (typeof(action) !== "function")
@@ -114,8 +127,10 @@ function	newNotification(title, message, img, action, timer, actionText)
 	const	header			= createHeader(title, img);
 	const	content			= createContent(message);
 	const	footer			= createFooter(action, actionText);
-	const	loadBar			= createLoadBar(timer);
+	let		intervalLoadBar	= null;
+	let		timeoutInTimout	= null;
 
+	console.log("New notification: " + message);
 	newNotification.classList.add("notification");
 	newNotification.style.width = "100%";
 	newNotification.appendChild(header);
@@ -123,13 +138,18 @@ function	newNotification(title, message, img, action, timer, actionText)
 	newNotification.appendChild(content);
 	if (footer)
 		newNotification.appendChild(footer);
-	newNotification.appendChild(loadBar);
+	intervalLoadBar = createLoadBar(newNotification, timer);
-	setTimeout(() => {
+	const timeout = setTimeout(() => {
-		setTimeout(() => {
+		timeoutInTimout = setTimeout(() => {
 			divNotification.removeChild(newNotification);
 		}, 199);
 		newNotification.style.animation = "slideOut 0.21s";
 	}, timer);
+	newNotification.addEventListener("mouseover", () => {
+		clearTimeout(timeout);
+		clearTimeout(timeoutInTimout);
+		clearInterval(intervalLoadBar);
+	});
 }
 
 class notification
@@ -146,7 +166,6 @@ class notification
 
 	new(title, message, img=null, action=null, actionText="Confirm")
 	{
-		console.log("New notification: " + message);
 		newNotification(title, message, img, action, this.timer, actionText);
 	}
 }

site/interface/site/websocket.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/31 22:17:24 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/04 23:29:58 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/06 23:33:28 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -51,8 +51,7 @@ socket.onmessage = (event) => {
 	{
 		try {
 			functionResponse[typeResponse.indexOf(response.type)](response.content);
-		}
+		} catch {
-		catch {
 			console.warn(response);
 		}
 	}

websocket-server/typeRequets/getPrivateListMessage.py

@@ -6,7 +6,7 @@
 #    By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+         #
 #                                                 +#+#+#+#+#+   +#+            #
 #    Created: 2024/08/03 22:53:14 by edbernar          #+#    #+#              #
-#    Updated: 2024/08/04 22:36:29 by edbernar         ###   ########.fr        #
+#    Updated: 2024/08/06 23:32:08 by edbernar         ###   ########.fr        #
 #                                                                              #
 # **************************************************************************** #
 
@@ -61,7 +61,7 @@ async def getPrivateListMessage(userClass, content):
 	copyListMessage = listMessage.copy()
 	for message in copyListMessage["content"]:
 		if (random.randint(1, 10) % 2 == 0):
-			message["from"] = 4561268
+			message["from"] = 9999999
 		else:
 			message["from"] = content["id"]
 		message["content"] = generate_random_string()