tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site

Browse Source 
- 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
This commit is contained in:
Kum1ta
2024-09-29 03:52:10 +02:00
parent 4ef459e2cc
commit 24fe748130
8 changed files with 104 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 19:21:10 by edbernar #+# #+# */ /* 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 */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -45,10 +45,15 @@ function showListUser() {
user.classList.add("user"); user.classList.add("user");
user.innerHTML = ` user.innerHTML = `
<div class="status ${element.status}"> <div class="status ${element.status}">
<img> <img>
</div> </div>
<h3></h3> <h3></h3>
` `
if (element.haveUnread)
{
user.innerHTML += `<span></span>`;
user.querySelector("span").style.marginLeft = "auto";
}
user.querySelector("img").src = element.pfp; user.querySelector("img").src = element.pfp;
user.querySelector("h3").innerText = element.name; user.querySelector("h3").innerText = element.name;
divMessageListChatHome.appendChild(user); divMessageListChatHome.appendChild(user);

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/02 00:39:53 by edbernar #+# #+# */ /* 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,35 +31,48 @@ function waitForLogin() {
function typeLogin(content) function typeLogin(content)
{ {
// setTimeout(() => { const popout = document.getElementById('loginPopup');
const popout = document.getElementById('loginPopup'); const loginButton = document.getElementById('loginButton');
const loginButton = document.getElementById('loginButton'); let pLoginButton = loginButton ? loginButton.getElementsByTagName('p')[0] : null;
let pLoginButton = null; let notifBadgeChat = null;
if (loginButton) let usernameNode = null;
pLoginButton = loginButton.getElementsByTagName('p')[0]; let interval = null;
let usernameNode = null; let i = 0;
if (content && typeof(content) != 'boolean' && content.status == true)
if (content && typeof(content) != 'boolean' && content.status == true) {
{ console.log("Welcome " + content.username + "\nYour id is " + content.id);
console.log("Welcome " + content.username + "\nYour id is " + content.id); userMeInfo.username = content.username;
userMeInfo.username = content.username; userMeInfo.id = content.id;
userMeInfo.id = content.id;
if (popout && popout.style.display === 'flex') interval = setInterval(() => {
notifBadgeChat = document.getElementsByClassName('notification-badge')[0];
if (notifBadgeChat && content.haveUnredMessage)
{ {
usernameNode = document.createTextNode(userMeInfo.username); console.log("You have unread messages");
loginButton.replaceChild(usernameNode, pLoginButton); notifBadgeChat.style.display = 'flex';
CN.new("Connected successfully", "Welcome " + userMeInfo.username, CN.defaultIcon.success); clearInterval(interval);
popout.style.display = 'none';
} }
} else if (notifBadgeChat)
loginAvailable = true; clearInterval(interval);
if (loginResolve != []) else if (i == 5)
clearInterval(interval);
i++;
}, 500);
if (popout && popout.style.display === 'flex')
{ {
loginResolve.forEach(func => func(content)); usernameNode = document.createTextNode(userMeInfo.username);
loginResolve = []; loginButton.replaceChild(usernameNode, pLoginButton);
CN.new("Connected successfully", "Welcome " + userMeInfo.username, CN.defaultIcon.success);
popout.style.display = 'none';
} }
// }, 100); }
loginAvailable = true;
if (loginResolve != [])
{
loginResolve.forEach(func => func(content));
loginResolve = [];
}
} }
export { userMeInfo, typeLogin, waitForLogin }; export { userMeInfo, typeLogin, waitForLogin };

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 15:15:49 by edbernar #+# #+# */ /* 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) function typeNewPrivateMessage(content)
{ {
const notifBadgeChat = document.getElementsByClassName('notification-badge')[0];
if (infoPanel.isOpen && infoPanel.id === content.channel) if (infoPanel.isOpen && infoPanel.id === content.channel)
{ {
if (content.from != userMeInfo.id)
sendRequest("read_message", {id: content.from});
messageList.push(content); messageList.push(content);
infoPanel.divMessage.insertAdjacentHTML('beforeend', ` infoPanel.divMessage.insertAdjacentHTML('beforeend', `
<div class="${content.from === userMeInfo.id ? "meMessage" : "opponentMessage"}"> <div class="${content.from === userMeInfo.id ? "meMessage" : "opponentMessage"}">
@ -31,6 +35,7 @@ function typeNewPrivateMessage(content)
} }
else if (content.from != userMeInfo.id) else if (content.from != userMeInfo.id)
{ {
notifBadgeChat.style.display = 'flex';
sendRequest("get_user_info", {id: content.from}); sendRequest("get_user_info", {id: content.from});
waitForUserInfo().then((userInfo) => { waitForUserInfo().then((userInfo) => {
CN.new("Message", "New message from " + userInfo.username); CN.new("Message", "New message from " + userInfo.username);

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

@ -6,13 +6,14 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/02 01:56:15 by edbernar #+# #+# */ /* 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 userList = []; let userListUnread = [];
let userListAvailable = false; let userList = [];
let userListResolve = null; let userListAvailable = false;
let userListResolve = null;
function waitForUserList() { function waitForUserList() {
return new Promise((resolve) => { return new Promise((resolve) => {
@ -28,6 +29,12 @@ function waitForUserList() {
function typePrivateListUser(list) { function typePrivateListUser(list) {
userList = list; userList = list;
userListUnread = [];
userList.forEach(element => {
if (element.haveUnread)
userListUnread.push(element.id);
});
console.log(userListUnread);
userListAvailable = true; userListAvailable = true;
if (userListResolve) if (userListResolve)
{ {
@ -37,4 +44,4 @@ function typePrivateListUser(list) {
} }
} }
export { userList, typePrivateListUser, waitForUserList }; export { userList, userListUnread, typePrivateListUser, waitForUserList };

6
docker-compose/requirements/nginx/static/style/global/global.css
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* global.css :+: :+: :+: */ /* global.css :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/19 23:57:22 by edbernar #+# #+# */ /* 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 */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -27,4 +27,4 @@ body {
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
scroll-behavior: smooth; scroll-behavior: smooth;
} }

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

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* liveChat.css :+: :+: :+: */ /* liveChat.css :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:53:39 by edbernar #+# #+# */ /* 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; transition: transform 0.3s ease;
} }
/* Pour EDDY : Put display none and change on js to display flex when we have notification */
.notification-badge { .notification-badge {
display: flex; display: none;
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
@ -251,4 +249,23 @@
#infoChat { #infoChat {
text-align: center; text-align: center;
margin-top: 100px; 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;
} }