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

Notification :

Browse Source 
- Added function on cross for close notification
    - Added stop timer when mouse is over
Global :
    - Improved security
This commit is contained in:
Kum1ta
2024-08-06 23:34:22 +02:00
parent 7399ec638f
commit 63cdcabcbd
10 changed files with 95 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
site/interface/site/liveChat/showActualGameMessage.js
View File

@ -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 */
/* */
/* ************************************************************************** */
@ -14,10 +14,14 @@ import { sendRequest } from "../websocket.js";
function showActualGameMessage()
{
const divMessageListChatHome = document.getElementById("messageListChatHome");
let me = "Kumita";
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 += `
<div class="${element.from === me ? "meMessage" : "opponentMessage"}">
<p class="content">${element.content}</p>
<p class="time">${element.date}</p>
</div>
`;
newDiv = document.createElement("div");
contentNode = document.createTextNode(element.content);
dateNode = document.createTextNode(element.date);
newDiv.classList.add(element.from == me ? "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;
divMessageListChatHome.innerHTML += `

44
site/interface/site/liveChat/showPrivateChat.js
View File

@ -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 */
/* */
/* ************************************************************************** */
@ -43,10 +43,12 @@ async function restoreButton()
async function changeButton(user)
{
const divButtonTypeChatHome = document.getElementById("buttonTypeChatHome");
let returnButton;
let h2Button;
let lenh2Button;
const divButtonTypeChatHome = document.getElementById("buttonTypeChatHome");
const h2Username = document.createElement("h2");
const h2UsernameNode = document.createTextNode(user.name);
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();
}
divButtonTypeChatHome.innerHTML += `
<h2>${user.name}</h2>
h2Username.appendChild(h2UsernameNode);
divButtonTypeChatHome.appendChild(h2Username);
divButtonTypeChatHome .innerHTML += `
<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 += `
<div class="${element.from === userMeInfo.id ? "meMessage" : "opponentMessage"}">
<p class="content">${element.content}</p>
<p class="time">${element.date}</p>
</div>
`;
newDiv = document.createElement("div");
contentNode = document.createTextNode(element.content);
dateNode = document.createTextNode(element.date);
console.log(element.from, userMeInfo.id);
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;
}

59
site/interface/site/notification/main.js
View File

@ -3,25 +3,25 @@
/* ::: :::::::: */
/* 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
*/
function createHeader(title, img)
{
const divHeader = document.createElement("div");
const icon = document.createElement("img");
const h1Title = document.createElement("h1");
const cross = document.createElement("p");
const divHeader = document.createElement("div");
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);
@ -52,20 +58,21 @@ function createHeader(title, img)
function createContent(message)
{
const divContent = document.createElement("div");
const pMessage = document.createElement("p");
const limit = 100;
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);
setTimeout(() => {
setTimeout(() => {
intervalLoadBar = createLoadBar(newNotification, timer);
const timeout = 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);
}
}

7
site/interface/site/websocket.js
View File

@ -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 */
/* */
/* ************************************************************************** */
@ -38,7 +38,7 @@ socket.onopen = () => {
};
socket.onmessage = (event) => {
let response;
let response;
try {
response = JSON.parse(event.data);
@ -51,8 +51,7 @@ socket.onmessage = (event) => {
{
try {
functionResponse[typeResponse.indexOf(response.type)](response.content);
}
catch {
} catch {
console.warn(response);
}
}

BIN
websocket-server/Class/__pycache__/User.cpython-310.pyc
View File

Binary file not shown.

BIN
websocket-server/typeRequets/__pycache__/getPrivateListMessage.cpython-310.pyc
View File

Binary file not shown.

BIN
websocket-server/typeRequets/__pycache__/getPrivateListUser.cpython-310.pyc
View File

Binary file not shown.

BIN
websocket-server/typeRequets/__pycache__/login.cpython-310.pyc
View File

Binary file not shown.

BIN
websocket-server/typeRequets/__pycache__/sendPrivateMessage.cpython-310.pyc
View File

Binary file not shown.

4
websocket-server/typeRequets/getPrivateListMessage.py
View File

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