Site

- on popup chat, point on end line for see if you have seen the last message
    - on chat buttton, red point for know if you have a new message
    - fix image in live chat

docker-compose/requirements/nginx/static/javascript/liveChat/main.js

@@ -6,12 +6,12 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 19:19:10 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/21 22:41:48 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/29 03:43:31 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+import { userListUnread } from "/static/javascript/typeResponse/typePrivateListUser.js";
 import { infoPanel } from "/static/javascript/typeResponse/typePrivateListMessage.js";
-import { showActualGameMessage } from "/static/javascript/liveChat/showActualGameMessage.js";
 import { showListUser } from "/static/javascript/liveChat/showUserList.js";
 import { userMeInfo } from "/static/javascript/typeResponse/typeLogin.js";
 
@@ -50,8 +50,14 @@ function showChatMenu()
 
 function hideChatMenu()
 {
+	const	notifBadgeChat	= document.getElementsByClassName('notification-badge')[0];
+
 	chatDiv.style.display = "none";
 	infoPanel.isOpen = false;
+	if (!userListUnread.length)
+		notifBadgeChat.style.display = 'none';
+	else
+		notifBadgeChat.style.display = 'flex';
 }
 
 export { LiveChat, showChatMenu };

docker-compose/requirements/nginx/static/javascript/liveChat/showPrivateChat.js

@@ -6,30 +6,33 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 19:17:54 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/22 17:16:00 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/29 03:46:37 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import { messageList, infoPanel, waitForMessageList } from "/static/javascript/typeResponse/typePrivateListMessage.js";
+import { userListUnread } from "/static/javascript/typeResponse/typePrivateListUser.js";
 import { userMeInfo } from "/static/javascript/typeResponse/typeLogin.js";
 import { showListUser } from "/static/javascript/liveChat/showUserList.js";
 import { sendRequest } from "/static/javascript/websocket.js";
 
-let savedButtons = [];
-
 function	showPrivateChat(user)
 {
 	const	divMessageListChatHome = document.getElementById("messageListChatHome");
 
 	sendRequest("get_private_list_message", {id: user.id});
 	waitForMessageList().then(() => {
+		try {
+			userListUnread.splice(userListUnread.indexOf(user.id), 1);
+		}
+		catch (e) {};			
 		infoPanel.id = user.id;
 		infoPanel.isOpen = true;
 		infoPanel.divMessage = divMessageListChatHome;
+		sendRequest("read_message", {id: user.id});
 		changeButton(user);
 		displayAllMessage(divMessageListChatHome);
 		displayInputBar(divMessageListChatHome, user);
-
 	})
 }
 

docker-compose/requirements/nginx/static/javascript/liveChat/showUserList.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 19:21:10 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/25 08:50:20 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/29 03:09:29 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -49,6 +49,11 @@ function	showListUser() {
 					</div>
 					<h3></h3>
 				`
+				if (element.haveUnread)
+				{
+					user.innerHTML += `<span></span>`;
+					user.querySelector("span").style.marginLeft = "auto";
+				}
 				user.querySelector("img").src = element.pfp;
 				user.querySelector("h3").innerText = element.name;
 				divMessageListChatHome.appendChild(user);

docker-compose/requirements/nginx/static/javascript/typeResponse/typeLogin.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/02 00:39:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/18 20:33:20 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/29 03:35:43 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -31,20 +31,34 @@ function waitForLogin() {
 
 function	typeLogin(content)
 {
-	// setTimeout(() => {
 	const	popout 			= document.getElementById('loginPopup');
 	const	loginButton		= document.getElementById('loginButton');
-		let		pLoginButton	= null;
+	let		pLoginButton	= loginButton ? loginButton.getElementsByTagName('p')[0] : null;
-		if (loginButton)
+	let		notifBadgeChat	= null;
-			pLoginButton = loginButton.getElementsByTagName('p')[0];
 	let		usernameNode	= null;
-	
+	let		interval		= null;
+	let		i				= 0;
 
 	if (content && typeof(content) != 'boolean' && content.status == true)
 	{
 		console.log("Welcome " + content.username + "\nYour id is " + content.id);
 		userMeInfo.username = content.username;
 		userMeInfo.id = content.id;
+		
+		interval = setInterval(() => {
+			notifBadgeChat	= document.getElementsByClassName('notification-badge')[0];
+			if (notifBadgeChat && content.haveUnredMessage)
+			{
+				console.log("You have unread messages");
+				notifBadgeChat.style.display = 'flex';
+				clearInterval(interval);
+			}
+			else if (notifBadgeChat)
+				clearInterval(interval);
+			else if (i == 5)
+				clearInterval(interval);
+			i++;
+		}, 500);
 		if (popout && popout.style.display === 'flex')
 		{
 			usernameNode = document.createTextNode(userMeInfo.username);
@@ -59,7 +73,6 @@ function	typeLogin(content)
 		loginResolve.forEach(func => func(content));
 		loginResolve = [];
 	}
-	// }, 100);
 }
 
 export { userMeInfo, typeLogin, waitForLogin };

docker-compose/requirements/nginx/static/javascript/typeResponse/typeNewPrivateMessage.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 15:15:49 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/21 22:19:26 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/29 03:45:24 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -18,8 +18,12 @@ import { sendRequest } from "/static/javascript/websocket.js";
 
 function typeNewPrivateMessage(content)
 {
+	const	notifBadgeChat	= document.getElementsByClassName('notification-badge')[0];
+
 	if (infoPanel.isOpen && infoPanel.id === content.channel)
 	{
+		if (content.from != userMeInfo.id)
+			sendRequest("read_message", {id: content.from});
 		messageList.push(content);
 		infoPanel.divMessage.insertAdjacentHTML('beforeend', `
 			<div class="${content.from === userMeInfo.id ? "meMessage" : "opponentMessage"}">
@@ -31,6 +35,7 @@ function typeNewPrivateMessage(content)
 	}
 	else if (content.from != userMeInfo.id)
 	{
+		notifBadgeChat.style.display = 'flex';
 		sendRequest("get_user_info", {id: content.from});
 		waitForUserInfo().then((userInfo) => {
 			CN.new("Message", "New message from " + userInfo.username);

docker-compose/requirements/nginx/static/javascript/typeResponse/typePrivateListUser.js

@@ -6,10 +6,11 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/02 01:56:15 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/21 16:32:42 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/29 03:36:44 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+let	userListUnread		= [];
 let userList			= [];
 let userListAvailable	= false;
 let userListResolve		= null;
@@ -28,6 +29,12 @@ function waitForUserList() {
 
 function typePrivateListUser(list) {
 	userList = list;
+	userListUnread = [];
+	userList.forEach(element => {
+		if (element.haveUnread)
+			userListUnread.push(element.id);
+	});
+	console.log(userListUnread);
 	userListAvailable = true;
 	if (userListResolve)
 	{
@@ -37,4 +44,4 @@ function typePrivateListUser(list) {
 	}
 }
 
-export { userList, typePrivateListUser, waitForUserList };
+export { userList, userListUnread, typePrivateListUser, waitForUserList };

docker-compose/requirements/nginx/static/style/global/global.css

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   global.css                                         :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/19 23:57:22 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/27 16:35:52 by madegryc         ###   ########.fr       */
+/*   Updated: 2024/09/29 03:23:58 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 

docker-compose/requirements/nginx/static/style/homePage/liveChat.css

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   liveChat.css                                       :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: marvin <marvin@student.42.fr>              +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:53:39 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/18 12:20:37 by marvin           ###   ########.fr       */
+/*   Updated: 2024/09/29 03:24:21 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -28,10 +28,8 @@
 	transition: transform 0.3s ease;
 }
 
-/* Pour EDDY : Put display none and change on js to display flex when we have notification */
-
 .notification-badge {
-	display: flex;
+	display: none;
 	position: absolute;
 	top: 10px;
 	right: 10px;
@@ -252,3 +250,22 @@
 	text-align: center;
 	margin-top: 100px;
 }
+
+.user {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.user span {
+	width: 15px;
+	height: 15px;
+	border-radius: 50%;
+	background-color: #ffffffe4;
+	margin-right: 10px;
+}
+
+.status img {
+	object-fit: cover;
+	object-position: center;
+}