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

add part of site to docker and login works using sessions

Browse Source
This commit is contained in:
tomoron
2024-08-24 18:28:32 +02:00
parent 1291a6add8
commit 57ef3a5d2d
49 changed files with 2544 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
docker-compose/requirements/nginx/static/liveChat/main.js Normal file
View File

@ -0,0 +1,81 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 19:19:10 by edbernar #+# #+# */
/* Updated: 2024/08/04 23:10:18 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { infoPanel } from "../typeResponse/typePrivateListMessage.js";
import { showActualGameMessage } from "./showActualGameMessage.js";
import { showListUser } from "./showUserList.js";
/*
Todo (Eddy) :
- add a function to "New conversation +"
- game message when game will be implemented
*/
function addDefaultButton()
{
const newDiv = document.createElement("div");
const newPrivateButton = document.createElement("h2");
const newGameButton = document.createElement("h2");
const divMessageListChatHome = document.createElement("div");
newDiv.setAttribute("id", "buttonTypeChatHome");
newPrivateButton.textContent = "Private";
newGameButton.textContent = "Game";
newPrivateButton.setAttribute("id", "selected");
newDiv.appendChild(newPrivateButton);
newDiv.appendChild(newGameButton);
document.getElementById("chatDiv").appendChild(newDiv);
divMessageListChatHome.setAttribute("id", "messageListChatHome");
document.getElementById("chatDiv").appendChild(divMessageListChatHome);
newPrivateButton.addEventListener("click", async () => {
newGameButton.removeAttribute("id");
newPrivateButton.setAttribute("id", "selected");
await showListUser();
});
newGameButton.addEventListener("click", () => {
newPrivateButton.removeAttribute("id");
newGameButton.setAttribute("id", "selected");
showActualGameMessage();
});
}
function removeButtonIfExist()
{
const divButtonTypeChatHome = document.getElementById("buttonTypeChatHome");
if (divButtonTypeChatHome)
{
divButtonTypeChatHome.remove();
document.getElementById("messageListChatHome").remove();
}
}
function liveChat()
{
const chatButton = document.getElementById("chatButton");
const chatDiv = document.getElementById("chatDiv");
const topChatHomeCross = document.getElementById("topChatCross");
chatButton.addEventListener("click", async () => {
chatDiv.style.display = "flex";
removeButtonIfExist();
addDefaultButton();
await showListUser();
});
topChatHomeCross.addEventListener("click", () => {
chatDiv.style.display = "none";
infoPanel.isOpen = false;
});
}
export { liveChat };

96
docker-compose/requirements/nginx/static/liveChat/showActualGameMessage.js Normal file
View File

@ -0,0 +1,96 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* showActualGameMessage.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 19:21:55 by edbernar #+# #+# */
/* Updated: 2024/08/06 23:19:51 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
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: true,
opponent: {
name: "Astropower",
id: "301547"
},
listMessage: [
{
from: "Astropower",
content: "Hello !",
date: "19:21 30/07/2024"
},
{
from: "Kumita",
content: "Hey",
date: "19:21 30/07/2024"
},
{
from: "Astropower",
content: "Do you want play ?",
date: "19:22 30/07/2024"
},
{
from: "Kumita",
content: "Yes, i'm ready !",
date: "19:22 30/07/2024"
},
{
from: "Kumita",
content: "The game was too hard but well played",
date: "19:27 30/07/2024"
},
{
from: "Astropower",
content: "Yeah but you still won. See you soon",
date: "19:27 30/07/2024"
},
]
}; //Remplace temporairement la requete qui devra être de la meme forme
divMessageListChatHome.style.height = "230px";
divMessageListChatHome.style.paddingBottom = "20px";
divMessageListChatHome.innerHTML = '';
if (request.isInGame === false)
{
divMessageListChatHome.innerHTML = "<p style='text-align: center; margin-top: 20px;'>You are currently not in a game.</p>";
return ;
}
request.listMessage.forEach(element => {
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 += `
<div id="inputMessageDiv">
<textarea type="text" id="inputMessage" placeholder="Enter your message here"></textarea>
<p id="sendButton">\></p>
</div>
`;
}
export { showActualGameMessage };

153
docker-compose/requirements/nginx/static/liveChat/showPrivateChat.js Normal file
View File

@ -0,0 +1,153 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* showPrivateChat.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 19:17:54 by edbernar #+# #+# */
/* Updated: 2024/08/06 23:32:35 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { messageList, infoPanel, waitForMessageList } from "../typeResponse/typePrivateListMessage.js";
import { userMeInfo } from "../typeResponse/typeLogin.js";
import { showListUser } from "./showUserList.js";
import { sendRequest } from "../websocket.js";
let savedButtons = [];
async function showPrivateChat(user)
{
const divMessageListChatHome = document.getElementById("messageListChatHome");
sendRequest("get_private_list_message", {id: user.id});
await waitForMessageList();
infoPanel.id = user.id;
infoPanel.isOpen = true;
infoPanel.divMessage = divMessageListChatHome;
await changeButton(user);
await displayAllMessage(divMessageListChatHome);
await displayInputBar(divMessageListChatHome, user);
}
async function restoreButton()
{
const divButtonTypeChatHome = document.getElementById("buttonTypeChatHome");
divButtonTypeChatHome.innerHTML = '';
savedButtons.forEach(element => {
divButtonTypeChatHome.appendChild(element);
});
}
async function changeButton(user)
{
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;
savedButtons.splice(0, savedButtons.length);
for (let i = 0; i < lenh2Button; i++) {
savedButtons.push(h2Button[0]);
h2Button[0].remove();
}
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";
returnButton = document.getElementById("returnButton");
returnButton.style.cursor = "pointer";
returnButton.addEventListener("click", () => {
restoreButton();
infoPanel.isOpen = false;
showListUser();
});
}
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 => {
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;
}
async function displayInputBar(divMessageListChatHome, user)
{
let sendButton;
let inputMessage;
divMessageListChatHome.innerHTML += `
<div id="inputMessageDiv">
<textarea type="text" id="inputMessage" placeholder="Enter your message here"></textarea>
<p id="sendButton"">\></p>
</div>
`;
sendButton = document.getElementById("sendButton");
sendButton.style.cursor = "pointer";
sendButton.addEventListener("click", () => {
sendMessage(user);
inputMessage.value = "";
inputMessage.focus();
});
inputMessage = document.getElementById("inputMessage");
inputMessage.addEventListener("keyup", (event) => {
if (event.key === "Enter" && !event.shiftKey && inputMessage.value.trim() !== "")
{
event.preventDefault();
sendMessage(user);
inputMessage.value = "";
inputMessage.focus();
}
});
inputMessage.addEventListener("keydown", (event) => {
if (event.key === "Enter")
event.preventDefault();
});
inputMessage.focus();
}
function sendMessage(user)
{
const inputMessage = document.getElementById("inputMessage");
let message;
message = {
from: userMeInfo.id,
to: user.id,
content: inputMessage.value,
time: new Date()
};
sendRequest("send_private_message", message);
}
export { showPrivateChat };

53
docker-compose/requirements/nginx/static/liveChat/showUserList.js Normal file
View File

@ -0,0 +1,53 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* showUserList.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 19:21:10 by edbernar #+# #+# */
/* Updated: 2024/08/05 14:28:31 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { waitForUserList } from "../typeResponse/typePrivateListUser.js";
import { userList } from "../typeResponse/typePrivateListUser.js";
import { showPrivateChat } from "./showPrivateChat.js";
import { sendRequest } from "../websocket.js";
async function showListUser() {
const divMessageListChatHome = document.getElementById("messageListChatHome");
let divUser;
sendRequest("get_private_list_user", {});
await waitForUserList();
divMessageListChatHome.style.height = "100%";
divMessageListChatHome.style.paddingBottom = "10px";
divMessageListChatHome.innerHTML = '';
divMessageListChatHome.scrollTop = 0;
if (JSON.stringify(userList) !== "{}")
{
userList.forEach(element => {
let user = document.createElement("div");
user.classList.add("user");
user.innerHTML = `
<div class="status ${element.status}">
<img>
</div>
<h3></h3>
`
user.querySelector("img").src = element.pfp;
user.querySelector("h3").innerText = element.name;
divMessageListChatHome.appendChild(user);
});
}
divMessageListChatHome.innerHTML += "<p style='text-align: center; margin-top: 20px;'>New conversation +</p>";
divUser = document.getElementsByClassName("user");
for (let i = 0; i < divUser.length; i++) {
divUser[i].addEventListener("click", async () => {
await showPrivateChat(userList[i]);
});
}
}
export { showListUser };