Docker
- Updated all path import
This commit is contained in:
@ -0,0 +1,81 @@
|
||||
/* ************************************************************************** */
|
||||
/* */
|
||||
/* ::: :::::::: */
|
||||
/* main.js :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/08/04 19:19:10 by edbernar #+# #+# */
|
||||
/* Updated: 2024/08/24 23:22:20 by edbernar ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
import { infoPanel } from "/static/javascript/typeResponse/typePrivateListMessage.js";
|
||||
import { showActualGameMessage } from "/static/javascript/liveChat/showActualGameMessage.js";
|
||||
import { showListUser } from "/static/javascript/liveChat/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 };
|
@ -0,0 +1,96 @@
|
||||
/* ************************************************************************** */
|
||||
/* */
|
||||
/* ::: :::::::: */
|
||||
/* showActualGameMessage.js :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/08/04 19:21:55 by edbernar #+# #+# */
|
||||
/* Updated: 2024/08/24 23:28:45 by edbernar ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
import { sendRequest } from "/static/javascript/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 };
|
@ -0,0 +1,153 @@
|
||||
/* ************************************************************************** */
|
||||
/* */
|
||||
/* ::: :::::::: */
|
||||
/* showPrivateChat.js :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/08/04 19:17:54 by edbernar #+# #+# */
|
||||
/* Updated: 2024/08/24 23:49:04 by edbernar ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
import { messageList, infoPanel, waitForMessageList } from "/static/javascript/typeResponse/typePrivateListMessage.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 = [];
|
||||
|
||||
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 };
|
@ -0,0 +1,53 @@
|
||||
/* ************************************************************************** */
|
||||
/* */
|
||||
/* ::: :::::::: */
|
||||
/* showUserList.js :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/08/04 19:21:10 by edbernar #+# #+# */
|
||||
/* Updated: 2024/08/24 23:31:19 by edbernar ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
import { waitForUserList } from "/static/javascript/typeResponse/typePrivateListUser.js";
|
||||
import { userList } from "/static/javascript/typeResponse/typePrivateListUser.js";
|
||||
import { showPrivateChat } from "/static/javascript/liveChat/showPrivateChat.js";
|
||||
import { sendRequest } from "/static/javascript/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 };
|
Reference in New Issue
Block a user