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. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 };

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

@ -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);
})
}

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

@ -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 */
/* */
/* ************************************************************************** */
@ -45,10 +45,15 @@ function showListUser() {
user.classList.add("user");
user.innerHTML = `
<div class="status ${element.status}">
<img>
<img>
</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);

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

@ -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,35 +31,48 @@ function waitForLogin() {
function typeLogin(content)
{
// setTimeout(() => {
const popout = document.getElementById('loginPopup');
const loginButton = document.getElementById('loginButton');
let pLoginButton = null;
if (loginButton)
pLoginButton = loginButton.getElementsByTagName('p')[0];
let usernameNode = null;
const popout = document.getElementById('loginPopup');
const loginButton = document.getElementById('loginButton');
let pLoginButton = loginButton ? loginButton.getElementsByTagName('p')[0] : null;
let notifBadgeChat = null;
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;
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;
if (popout && popout.style.display === 'flex')
interval = setInterval(() => {
notifBadgeChat = document.getElementsByClassName('notification-badge')[0];
if (notifBadgeChat && content.haveUnredMessage)
{
usernameNode = document.createTextNode(userMeInfo.username);
loginButton.replaceChild(usernameNode, pLoginButton);
CN.new("Connected successfully", "Welcome " + userMeInfo.username, CN.defaultIcon.success);
popout.style.display = 'none';
console.log("You have unread messages");
notifBadgeChat.style.display = 'flex';
clearInterval(interval);
}
}
loginAvailable = true;
if (loginResolve != [])
else if (notifBadgeChat)
clearInterval(interval);
else if (i == 5)
clearInterval(interval);
i++;
}, 500);
if (popout && popout.style.display === 'flex')
{
loginResolve.forEach(func => func(content));
loginResolve = [];
usernameNode = document.createTextNode(userMeInfo.username);
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 };

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

@ -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);

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

@ -6,13 +6,14 @@
/* 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 userList = [];
let userListAvailable = false;
let userListResolve = null;
let userListUnread = [];
let userList = [];
let userListAvailable = false;
let userListResolve = null;
function waitForUserList() {
return new Promise((resolve) => {
@ -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 };

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

@ -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 */
/* */
/* ************************************************************************** */

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

@ -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;
}