Livechat
- Fixed forgetting to import "showActualGameMessage" - Changed filename "launchPrivateChat" to "showPrivateChat.js" - Fixed bug on buttons "private" and "game" Global - Reorganize folders
This commit is contained in:
@ -22,12 +22,6 @@
|
|||||||
<h2>X</h2>
|
<h2>X</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="buttonTypeChatHome">
|
|
||||||
<h2 id="selected">Private</h2>
|
|
||||||
<h2>Game</h2>
|
|
||||||
</div>
|
|
||||||
<div id="messageListChatHome">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
@ -6,48 +6,76 @@
|
|||||||
/* 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/08/04 19:49:19 by edbernar ### ########.fr */
|
/* Updated: 2024/08/04 23:10:18 by edbernar ### ########.fr */
|
||||||
/* */
|
/* */
|
||||||
/* ************************************************************************** */
|
/* ************************************************************************** */
|
||||||
|
|
||||||
import { infoPanel } from "../typeResponse/typePrivateListMessage.js";
|
import { infoPanel } from "../typeResponse/typePrivateListMessage.js";
|
||||||
|
import { showActualGameMessage } from "./showActualGameMessage.js";
|
||||||
import { showListUser } from "./showUserList.js";
|
import { showListUser } from "./showUserList.js";
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Todo (Eddy) :
|
Todo (Eddy) :
|
||||||
- add a function to "New conversation +"
|
- add a function to "New conversation +"
|
||||||
- game message when game will be implemented
|
- game message when game will be implemented
|
||||||
- fix the bug on button "private" and "game"
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
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()
|
function liveChat()
|
||||||
{
|
{
|
||||||
const chatButton = document.getElementById("chatButton");
|
const chatButton = document.getElementById("chatButton");
|
||||||
const chatDiv = document.getElementById("chatDiv");
|
const chatDiv = document.getElementById("chatDiv");
|
||||||
const topChatHomeCross = document.getElementById("topChatCross");
|
const topChatHomeCross = document.getElementById("topChatCross");
|
||||||
const privateButtonChatHome = document.getElementById("buttonTypeChatHome").getElementsByTagName("h2")[0];
|
|
||||||
const gameButtonChatHome= document.getElementById("buttonTypeChatHome").getElementsByTagName("h2")[1];
|
|
||||||
|
|
||||||
chatButton.addEventListener("click", async () => {
|
chatButton.addEventListener("click", async () => {
|
||||||
chatDiv.style.display = "flex";
|
chatDiv.style.display = "flex";
|
||||||
gameButtonChatHome.removeAttribute("id");
|
removeButtonIfExist();
|
||||||
privateButtonChatHome.setAttribute("id", "selected");
|
addDefaultButton();
|
||||||
await showListUser();
|
await showListUser();
|
||||||
});
|
});
|
||||||
topChatHomeCross.addEventListener("click", () => {
|
topChatHomeCross.addEventListener("click", () => {
|
||||||
chatDiv.style.display = "none";
|
chatDiv.style.display = "none";
|
||||||
infoPanel.isOpen = false;
|
infoPanel.isOpen = false;
|
||||||
});
|
});
|
||||||
privateButtonChatHome.addEventListener("click", async () => {
|
|
||||||
gameButtonChatHome.removeAttribute("id");
|
|
||||||
privateButtonChatHome.setAttribute("id", "selected");
|
|
||||||
await showListUser();
|
|
||||||
});
|
|
||||||
gameButtonChatHome.addEventListener("click", () => {
|
|
||||||
privateButtonChatHome.removeAttribute("id");
|
|
||||||
gameButtonChatHome.setAttribute("id", "selected");
|
|
||||||
showActualGameMessage();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { liveChat };
|
export { liveChat };
|
@ -6,11 +6,11 @@
|
|||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||||
/* +#+#+#+#+#+ +#+ */
|
/* +#+#+#+#+#+ +#+ */
|
||||||
/* Created: 2024/08/04 19:21:55 by edbernar #+# #+# */
|
/* Created: 2024/08/04 19:21:55 by edbernar #+# #+# */
|
||||||
/* Updated: 2024/08/04 19:49:35 by edbernar ### ########.fr */
|
/* Updated: 2024/08/04 22:41:07 by edbernar ### ########.fr */
|
||||||
/* */
|
/* */
|
||||||
/* ************************************************************************** */
|
/* ************************************************************************** */
|
||||||
|
|
||||||
import { sendRequest } from "../websocket";
|
import { sendRequest } from "../websocket.js";
|
||||||
|
|
||||||
function showActualGameMessage()
|
function showActualGameMessage()
|
||||||
{
|
{
|
||||||
@ -20,7 +20,7 @@ function showActualGameMessage()
|
|||||||
isInGame: false,
|
isInGame: false,
|
||||||
opponent: {
|
opponent: {
|
||||||
name: "Astropower",
|
name: "Astropower",
|
||||||
pfp: "https://ashisheditz.com/wp-content/uploads/2024/03/cool-anime-pfp-demon-slayer-HD.jpg"
|
id: "301547"
|
||||||
},
|
},
|
||||||
listMessage: [
|
listMessage: [
|
||||||
{
|
{
|
||||||
@ -68,8 +68,8 @@ function showActualGameMessage()
|
|||||||
request.listMessage.forEach(element => {
|
request.listMessage.forEach(element => {
|
||||||
divMessageListChatHome.innerHTML += `
|
divMessageListChatHome.innerHTML += `
|
||||||
<div class="${element.from === me ? "meMessage" : "opponentMessage"}">
|
<div class="${element.from === me ? "meMessage" : "opponentMessage"}">
|
||||||
<p class="content">${element.content}</p>
|
<p class="content">${element.content}</p>
|
||||||
<p class="time">${element.date}</p>
|
<p class="time">${element.date}</p>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
});
|
});
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
/* ************************************************************************** */
|
/* ************************************************************************** */
|
||||||
/* */
|
/* */
|
||||||
/* ::: :::::::: */
|
/* ::: :::::::: */
|
||||||
/* launchPrivateChat.js :+: :+: :+: */
|
/* showPrivateChat.js :+: :+: :+: */
|
||||||
/* +:+ +:+ +:+ */
|
/* +:+ +:+ +:+ */
|
||||||
/* 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/08/04 19:42:49 by edbernar ### ########.fr */
|
/* Updated: 2024/08/04 23:00:10 by edbernar ### ########.fr */
|
||||||
/* */
|
/* */
|
||||||
/* ************************************************************************** */
|
/* ************************************************************************** */
|
||||||
|
|
||||||
@ -15,7 +15,9 @@ import { userMeInfo } from "../typeResponse/typeLogin.js";
|
|||||||
import { showListUser } from "./showUserList.js";
|
import { showListUser } from "./showUserList.js";
|
||||||
import { sendRequest } from "../websocket.js";
|
import { sendRequest } from "../websocket.js";
|
||||||
|
|
||||||
async function launchPrivateChat(user)
|
let savedButtons = [];
|
||||||
|
|
||||||
|
async function showPrivateChat(user)
|
||||||
{
|
{
|
||||||
const divMessageListChatHome = document.getElementById("messageListChatHome");
|
const divMessageListChatHome = document.getElementById("messageListChatHome");
|
||||||
|
|
||||||
@ -29,6 +31,16 @@ async function launchPrivateChat(user)
|
|||||||
await displayInputBar(divMessageListChatHome, user);
|
await displayInputBar(divMessageListChatHome, user);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function restoreButton()
|
||||||
|
{
|
||||||
|
const divButtonTypeChatHome = document.getElementById("buttonTypeChatHome");
|
||||||
|
|
||||||
|
divButtonTypeChatHome.innerHTML = '';
|
||||||
|
savedButtons.forEach(element => {
|
||||||
|
divButtonTypeChatHome.appendChild(element);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
async function changeButton(user)
|
async function changeButton(user)
|
||||||
{
|
{
|
||||||
const divButtonTypeChatHome = document.getElementById("buttonTypeChatHome");
|
const divButtonTypeChatHome = document.getElementById("buttonTypeChatHome");
|
||||||
@ -38,8 +50,10 @@ async function changeButton(user)
|
|||||||
|
|
||||||
h2Button = divButtonTypeChatHome.getElementsByTagName("h2");
|
h2Button = divButtonTypeChatHome.getElementsByTagName("h2");
|
||||||
lenh2Button = h2Button.length;
|
lenh2Button = h2Button.length;
|
||||||
|
savedButtons.splice(0, savedButtons.length);
|
||||||
for (let i = 0; i < lenh2Button; i++) {
|
for (let i = 0; i < lenh2Button; i++) {
|
||||||
h2Button[i - i].remove();
|
savedButtons.push(h2Button[0]);
|
||||||
|
h2Button[0].remove();
|
||||||
}
|
}
|
||||||
divButtonTypeChatHome.innerHTML += `
|
divButtonTypeChatHome.innerHTML += `
|
||||||
<h2>${user.name}</h2>
|
<h2>${user.name}</h2>
|
||||||
@ -49,10 +63,7 @@ async function changeButton(user)
|
|||||||
returnButton = document.getElementById("returnButton");
|
returnButton = document.getElementById("returnButton");
|
||||||
returnButton.style.cursor = "pointer";
|
returnButton.style.cursor = "pointer";
|
||||||
returnButton.addEventListener("click", () => {
|
returnButton.addEventListener("click", () => {
|
||||||
divButtonTypeChatHome.innerHTML = `
|
restoreButton();
|
||||||
<h2 id="selected">Private</h2>
|
|
||||||
<h2>Game</h2>
|
|
||||||
`;
|
|
||||||
infoPanel.isOpen = false;
|
infoPanel.isOpen = false;
|
||||||
showListUser();
|
showListUser();
|
||||||
});
|
});
|
||||||
@ -122,4 +133,4 @@ function sendMessage(user) {
|
|||||||
sendRequest("send_private_message", message);
|
sendRequest("send_private_message", message);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { launchPrivateChat };
|
export { showPrivateChat };
|
@ -6,13 +6,13 @@
|
|||||||
/* 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/08/04 19:29:20 by edbernar ### ########.fr */
|
/* Updated: 2024/08/04 22:54:30 by edbernar ### ########.fr */
|
||||||
/* */
|
/* */
|
||||||
/* ************************************************************************** */
|
/* ************************************************************************** */
|
||||||
|
|
||||||
import { waitForUserList } from "../typeResponse/typePrivateListUser.js";
|
import { waitForUserList } from "../typeResponse/typePrivateListUser.js";
|
||||||
import { userList } from "../typeResponse/typePrivateListUser.js";
|
import { userList } from "../typeResponse/typePrivateListUser.js";
|
||||||
import { launchPrivateChat } from "./launchPrivateChat.js";
|
import { showPrivateChat } from "./showPrivateChat.js";
|
||||||
import { sendRequest } from "../websocket.js";
|
import { sendRequest } from "../websocket.js";
|
||||||
|
|
||||||
async function showListUser() {
|
async function showListUser() {
|
||||||
@ -42,7 +42,7 @@ async function showListUser() {
|
|||||||
divUser = document.getElementsByClassName("user");
|
divUser = document.getElementsByClassName("user");
|
||||||
for (let i = 0; i < divUser.length; i++) {
|
for (let i = 0; i < divUser.length; i++) {
|
||||||
divUser[i].addEventListener("click", async () => {
|
divUser[i].addEventListener("click", async () => {
|
||||||
await launchPrivateChat(userList[i]);
|
await showPrivateChat(userList[i]);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,13 +0,0 @@
|
|||||||
8000 ~ 8999 : Ok code
|
|
||||||
|
|
||||||
9000 ~ 9999 : Error code
|
|
||||||
- 9000 : Invalid token
|
|
||||||
- 9001 : Token not found
|
|
||||||
- 9002 : Invalid json
|
|
||||||
- 9003 : Invalid path
|
|
||||||
- 9004 : Invalid type
|
|
||||||
- 9005 : Invalid request
|
|
||||||
- 9006 : Invalid login type
|
|
||||||
- 9007 : Invalid username or password
|
|
||||||
- 9008 : User not found
|
|
||||||
- 9009 : Invalid message sent
|
|
@ -1,121 +0,0 @@
|
|||||||
# **************************************************************************** #
|
|
||||||
# #
|
|
||||||
# ::: :::::::: #
|
|
||||||
# User.py :+: :+: :+: #
|
|
||||||
# +:+ +:+ +:+ #
|
|
||||||
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
|
|
||||||
# +#+#+#+#+#+ +#+ #
|
|
||||||
# Created: 2024/08/03 15:54:14 by edbernar #+# #+# #
|
|
||||||
# Updated: 2024/08/04 15:55:15 by edbernar ### ########.fr #
|
|
||||||
# #
|
|
||||||
# **************************************************************************** #
|
|
||||||
|
|
||||||
import websockets
|
|
||||||
import asyncio
|
|
||||||
import json
|
|
||||||
|
|
||||||
connected_clients = []
|
|
||||||
|
|
||||||
class User():
|
|
||||||
debugMode = True
|
|
||||||
websocket = None
|
|
||||||
username = ""
|
|
||||||
token = ""
|
|
||||||
id = -1
|
|
||||||
|
|
||||||
def __init__(self, websocket):
|
|
||||||
if (self.debugMode):
|
|
||||||
print("\033[42m|------ New user Connected ------|\033[1;0m")
|
|
||||||
self.websocket = websocket
|
|
||||||
connected_clients.append(self)
|
|
||||||
|
|
||||||
def __del__(self):
|
|
||||||
if (self.debugMode):
|
|
||||||
print("\033[43m|------ User disconnected -------|\033[1;0m")
|
|
||||||
print("User :", self.username)
|
|
||||||
print("Id :", self.id)
|
|
||||||
connected_clients.remove(self)
|
|
||||||
|
|
||||||
async def sendError(self, message, code, error=None):
|
|
||||||
try:
|
|
||||||
jsonVar = {"type": "error", "content": message, "code": code}
|
|
||||||
self.printDebug(jsonVar, 2, error)
|
|
||||||
await self.websocket.send(json.dumps(jsonVar))
|
|
||||||
except:
|
|
||||||
if (self.debugMode):
|
|
||||||
print("\033[0;31m|------ Error in sendError ------|\033[0;0m")
|
|
||||||
|
|
||||||
|
|
||||||
async def send(self, content):
|
|
||||||
try:
|
|
||||||
if (type(content) == dict):
|
|
||||||
self.printDebug(content, 1)
|
|
||||||
await self.websocket.send(json.dumps(content))
|
|
||||||
else:
|
|
||||||
self.printDebug(json.loads(content), 1)
|
|
||||||
await self.websocket.send(content)
|
|
||||||
except Exception as e:
|
|
||||||
if (self.debugMode):
|
|
||||||
print("\033[0;31m|--------- Error in send --------|\033[0;0m")
|
|
||||||
print("Error message :", e)
|
|
||||||
|
|
||||||
async def verifyToken(self, token):
|
|
||||||
try:
|
|
||||||
if (self.token != token or self.token == ""):
|
|
||||||
await self.sendError("Invalid token", 9001)
|
|
||||||
return False
|
|
||||||
return True
|
|
||||||
except:
|
|
||||||
if (self.debugMode):
|
|
||||||
print("\033[0;31m|----- Error in verifyToken -----|\033[0;0m")
|
|
||||||
|
|
||||||
def printDebug(self, request, typeRequest, error=None):
|
|
||||||
try:
|
|
||||||
if (self.debugMode and typeRequest == 0):
|
|
||||||
print("\033[0;34m|----- New received request -----|\033[0;0m")
|
|
||||||
print("User :", self.username)
|
|
||||||
print("Token :", self.token)
|
|
||||||
print("Id :", self.id)
|
|
||||||
try:
|
|
||||||
print("Var type :", type(request["type"]))
|
|
||||||
print("Type :", request["type"])
|
|
||||||
except:
|
|
||||||
pass
|
|
||||||
try:
|
|
||||||
print("Content type :", request["content"])
|
|
||||||
except:
|
|
||||||
pass
|
|
||||||
elif (self.debugMode and typeRequest == 1):
|
|
||||||
print("\033[0;32m|------- New sent request -------|\033[0;0m")
|
|
||||||
print("To :", self.username)
|
|
||||||
print("Id :", self.id)
|
|
||||||
try:
|
|
||||||
print("Var type :", type(request["type"]))
|
|
||||||
print("Type :", request["type"])
|
|
||||||
except:
|
|
||||||
pass
|
|
||||||
try:
|
|
||||||
print("Content :", request["content"])
|
|
||||||
except:
|
|
||||||
pass
|
|
||||||
if ("type" not in request or "content" not in request):
|
|
||||||
print("Warning : not usual json format")
|
|
||||||
elif (self.debugMode and typeRequest == 2):
|
|
||||||
print("\033[0;31m|------------- Error ------------|\033[0;0m")
|
|
||||||
print("User :", self.username)
|
|
||||||
print("Token :", self.token)
|
|
||||||
print("Id :", self.id)
|
|
||||||
print("Error message :", request["content"])
|
|
||||||
print("Error code :", request["code"])
|
|
||||||
if (error != None):
|
|
||||||
print("Error python :", error)
|
|
||||||
print("File :", error.__traceback__.tb_frame.f_globals["__file__"])
|
|
||||||
print("Line :", error.__traceback__.tb_lineno)
|
|
||||||
except:
|
|
||||||
print("\033[0;31m|------ Error in printDebug -----|\033[0;0m")
|
|
||||||
|
|
||||||
async def close(self):
|
|
||||||
try:
|
|
||||||
await self.websocket.close()
|
|
||||||
except:
|
|
||||||
pass
|
|
@ -1,61 +0,0 @@
|
|||||||
# **************************************************************************** #
|
|
||||||
# #
|
|
||||||
# ::: :::::::: #
|
|
||||||
# main.py :+: :+: :+: #
|
|
||||||
# +:+ +:+ +:+ #
|
|
||||||
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
|
|
||||||
# +#+#+#+#+#+ +#+ #
|
|
||||||
# Created: 2024/08/03 08:10:40 by edbernar #+# #+# #
|
|
||||||
# Updated: 2024/08/04 14:31:26 by edbernar ### ########.fr #
|
|
||||||
# #
|
|
||||||
# **************************************************************************** #
|
|
||||||
|
|
||||||
from typeRequets.getPrivateListMessage import getPrivateListMessage
|
|
||||||
from typeRequets.getPrivateListUser import getPrivateListUser
|
|
||||||
from typeRequets.sendPrivateMessage import sendPrivateMessage
|
|
||||||
from typeRequets.login import login
|
|
||||||
from Class.User import User
|
|
||||||
import websockets
|
|
||||||
import asyncio
|
|
||||||
import json
|
|
||||||
|
|
||||||
# Todo :
|
|
||||||
# - verifier que l'utilisateur n'est pas déjà connecté pour éviter les doublons
|
|
||||||
|
|
||||||
typeRequest = ["login", "get_private_list_user", "get_private_list_message", "send_private_message"]
|
|
||||||
functionRequest = [login, getPrivateListUser, getPrivateListMessage, sendPrivateMessage]
|
|
||||||
|
|
||||||
async def handler(websocket, path):
|
|
||||||
if (path != "/"):
|
|
||||||
await websocket.sendError("Invalid path", 9003)
|
|
||||||
await websocket.close()
|
|
||||||
return
|
|
||||||
userClass = User(websocket)
|
|
||||||
try:
|
|
||||||
async for resquet in userClass.websocket:
|
|
||||||
try:
|
|
||||||
jsonRequest = json.loads(resquet)
|
|
||||||
except json.JSONDecodeError:
|
|
||||||
await userClass.sendError("Invalid JSON", 9002)
|
|
||||||
continue
|
|
||||||
try:
|
|
||||||
userClass.printDebug(jsonRequest, 0)
|
|
||||||
if (jsonRequest["type"] in typeRequest):
|
|
||||||
if jsonRequest["type"] == "login":
|
|
||||||
await functionRequest[typeRequest.index(jsonRequest["type"])](userClass, jsonRequest["content"])
|
|
||||||
else:
|
|
||||||
if (await userClass.verifyToken(jsonRequest["token"]) == False):
|
|
||||||
continue
|
|
||||||
await functionRequest[typeRequest.index(jsonRequest["type"])](userClass, jsonRequest["content"])
|
|
||||||
else:
|
|
||||||
await userClass.sendError("Invalid type", 9004)
|
|
||||||
except Exception as e:
|
|
||||||
await userClass.sendError("Invalid request", 9005, e)
|
|
||||||
except websockets.ConnectionClosed:
|
|
||||||
pass
|
|
||||||
await userClass.close()
|
|
||||||
start_server = websockets.serve(handler, "localhost", 8000, subprotocols=['123456'])
|
|
||||||
|
|
||||||
asyncio.get_event_loop().run_until_complete(start_server)
|
|
||||||
print("Server started")
|
|
||||||
asyncio.get_event_loop().run_forever()
|
|
@ -1,69 +0,0 @@
|
|||||||
# **************************************************************************** #
|
|
||||||
# #
|
|
||||||
# ::: :::::::: #
|
|
||||||
# getPrivateListMessage.py :+: :+: :+: #
|
|
||||||
# +:+ +:+ +:+ #
|
|
||||||
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
|
|
||||||
# +#+#+#+#+#+ +#+ #
|
|
||||||
# Created: 2024/08/03 22:53:14 by edbernar #+# #+# #
|
|
||||||
# Updated: 2024/08/03 23:43:09 by edbernar ### ########.fr #
|
|
||||||
# #
|
|
||||||
# **************************************************************************** #
|
|
||||||
|
|
||||||
import random
|
|
||||||
|
|
||||||
listMessage = {
|
|
||||||
"type": "private_list_message",
|
|
||||||
"content": [
|
|
||||||
{
|
|
||||||
"from": 0,
|
|
||||||
"content": "",
|
|
||||||
"date": "10:05 31/07/2024"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"from": 0,
|
|
||||||
"content": "",
|
|
||||||
"date": "10:05 31/07/2024"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"from": 0,
|
|
||||||
"content": "",
|
|
||||||
"date": "10:06 31/07/2024"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"from": 0,
|
|
||||||
"content": "",
|
|
||||||
"date": "10:06 31/07/2024"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"from": 0,
|
|
||||||
"content": "",
|
|
||||||
"date": "10:45 31/07/2024"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"from": 0,
|
|
||||||
"content": "",
|
|
||||||
"date": "10:46 31/07/2024"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
def generate_random_string():
|
|
||||||
char = "abcdefghijklmnopqrstuvwxyz 123456789"
|
|
||||||
string = ""
|
|
||||||
|
|
||||||
for i in range(20):
|
|
||||||
string += char[random.randint(0, len(char) - 1)]
|
|
||||||
return string
|
|
||||||
|
|
||||||
async def getPrivateListMessage(userClass, content):
|
|
||||||
# |TOM| Requete pour avoir la liste des messages privés grace à l'id de l'utilisateur
|
|
||||||
copyListMessage = listMessage.copy()
|
|
||||||
for message in copyListMessage["content"]:
|
|
||||||
if (random.randint(1, 10) % 2 == 0):
|
|
||||||
message["from"] = 4561268
|
|
||||||
else:
|
|
||||||
message["from"] = content["id"]
|
|
||||||
message["content"] = generate_random_string()
|
|
||||||
await userClass.send(copyListMessage)
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
|||||||
# **************************************************************************** #
|
|
||||||
# #
|
|
||||||
# ::: :::::::: #
|
|
||||||
# getPrivateListUser.py :+: :+: :+: #
|
|
||||||
# +:+ +:+ +:+ #
|
|
||||||
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
|
|
||||||
# +#+#+#+#+#+ +#+ #
|
|
||||||
# Created: 2024/08/03 15:10:23 by edbernar #+# #+# #
|
|
||||||
# Updated: 2024/08/04 14:00:44 by edbernar ### ########.fr #
|
|
||||||
# #
|
|
||||||
# **************************************************************************** #
|
|
||||||
|
|
||||||
import websockets
|
|
||||||
import asyncio
|
|
||||||
import json
|
|
||||||
|
|
||||||
data = [
|
|
||||||
{
|
|
||||||
"name": "Nessundorma",
|
|
||||||
"status": "online",
|
|
||||||
"pfp": "https://wallpapers-clan.com/wp-content/uploads/2023/05/cool-pfp-02.jpg",
|
|
||||||
"id": 145564
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Succotash",
|
|
||||||
"status": "offline",
|
|
||||||
"pfp": "https://i.pinimg.com/200x/28/75/96/287596f98304bf1adc2c411619ae8fef.jpg",
|
|
||||||
"id": 256981
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Astropower",
|
|
||||||
"status": "online",
|
|
||||||
"pfp": "https://ashisheditz.com/wp-content/uploads/2024/03/cool-anime-pfp-demon-slayer-HD.jpg",
|
|
||||||
"id": 301547
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Assaultive",
|
|
||||||
"status": "offline",
|
|
||||||
"pfp": "https://i1.sndcdn.com/artworks-1Li0JIJrQGlojD3y-AEiNkw-t500x500.jpg",
|
|
||||||
"id": 432448
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Redshock",
|
|
||||||
"status": "offline",
|
|
||||||
"pfp": "https://cdn.pfps.gg/pfps/7094-boy-pfp.png",
|
|
||||||
"id": 543211
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Parley",
|
|
||||||
"status": "offline",
|
|
||||||
"pfp": "https://pbs.twimg.com/media/EscE6ckU0AA-Uhe.png",
|
|
||||||
"id": 654123
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
async def getPrivateListUser(userClass, content=None):
|
|
||||||
# |TOM| Faire une requête à la base de données pour récupérer la liste des
|
|
||||||
# utilisateurs qui doivent apparaitre dans la liste du chat privé
|
|
||||||
# (ceux qui ont eu conversation avec l'utilisateur)
|
|
||||||
# Si user existe pas, faire ça : await userClass.sendError("User not found", 9008)
|
|
||||||
await userClass.send({"type": "private_list_user", "content": data})
|
|
@ -1,108 +0,0 @@
|
|||||||
# **************************************************************************** #
|
|
||||||
# #
|
|
||||||
# ::: :::::::: #
|
|
||||||
# login.py :+: :+: :+: #
|
|
||||||
# +:+ +:+ +:+ #
|
|
||||||
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
|
|
||||||
# +#+#+#+#+#+ +#+ #
|
|
||||||
# Created: 2024/08/03 08:10:38 by edbernar #+# #+# #
|
|
||||||
# Updated: 2024/08/04 15:51:04 by edbernar ### ########.fr #
|
|
||||||
# #
|
|
||||||
# **************************************************************************** #
|
|
||||||
|
|
||||||
import requests
|
|
||||||
import json
|
|
||||||
|
|
||||||
# Les requêtes de login peuvent être de 3 types:
|
|
||||||
# <-- {"type" : "login", "content" : {"type": "byToken", "token": "123456"}}
|
|
||||||
# <-- {"type" : "login", "content" : {"type": "byPass", "mail": "aaa@a.com", "pass": "dasd"}}
|
|
||||||
# <-- {"type" : "login", "content" : {"type": "by42", "token": "1dsa23dsa456"}}
|
|
||||||
# --> {"type" : "login", "content" : {"username": "". "token": "", "id": 0}}
|
|
||||||
|
|
||||||
userList = [
|
|
||||||
{
|
|
||||||
"username": "Nexalith",
|
|
||||||
"token": "IDSNCSDAd465sd13215421",
|
|
||||||
"mail": "eddy@ediwor.fr",
|
|
||||||
"password": "ABC123",
|
|
||||||
"id": 9999999
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"username": "user2",
|
|
||||||
"token": "789123",
|
|
||||||
"mail": "bb@bb.fr",
|
|
||||||
"password": "DEF456",
|
|
||||||
"id": 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"username": "user3",
|
|
||||||
"token": "456789",
|
|
||||||
"mail": "cc@cc,fr",
|
|
||||||
"password": "GHI789",
|
|
||||||
"id": 3
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
async def loginByToken(userClass, content):
|
|
||||||
# |TOM| Requete pour savoir si le token est valide
|
|
||||||
for user in userList:
|
|
||||||
if (user["token"] == content["token"]):
|
|
||||||
jsonVar = {"type": "login", "content": {"username": user["username"], "token": user["token"], "id": user["id"]}}
|
|
||||||
userClass.username = jsonVar["content"]["username"]
|
|
||||||
userClass.token = jsonVar["content"]["token"]
|
|
||||||
userClass.id = jsonVar["content"]["id"]
|
|
||||||
await userClass.send(jsonVar)
|
|
||||||
return
|
|
||||||
jsonVar = {"type": "error", "content": "Invalid token", "code": 9001}
|
|
||||||
await userClass.send(json.dumps(jsonVar))
|
|
||||||
|
|
||||||
async def loginByPass(userClass, content):
|
|
||||||
# |TOM| Requete pour savoir si le mail et le mot de passe sont valides
|
|
||||||
# et créer un token si celui-ci n'existe pas
|
|
||||||
for user in userList:
|
|
||||||
if (user["mail"] == content["mail"] and user["password"] == content["password"]):
|
|
||||||
jsonVar = {"type": "login", "content": {"username": user["username"], "token": user["token"], "id": user["id"]}}
|
|
||||||
userClass.username = jsonVar["content"]["username"]
|
|
||||||
userClass.token = jsonVar["content"]["token"]
|
|
||||||
userClass.id = jsonVar["content"]["id"]
|
|
||||||
await userClass.send(jsonVar)
|
|
||||||
return
|
|
||||||
await userClass.send({"type": "error", "content": "Invalid username or password", "code": 9007})
|
|
||||||
|
|
||||||
async def verifyToken42(token42):
|
|
||||||
url = "https://api.intra.42.fr/v2/me"
|
|
||||||
headers = {
|
|
||||||
"Authorization": f"Bearer {token42}"
|
|
||||||
}
|
|
||||||
response = requests.get(url, headers=headers)
|
|
||||||
# |Eddy| Regarder ce que renvoie la requete quand elle est valide pour savoir qui rechercher
|
|
||||||
# dans la base de données
|
|
||||||
return (response.status_code == 200)
|
|
||||||
|
|
||||||
async def loginBy42(userClass, content):
|
|
||||||
# |TOM| Requete pour récuperer les informations de l'utilisateur selon l'intra de la personne
|
|
||||||
# et créer un token si celui-ci n'existe pas
|
|
||||||
for user in userList:
|
|
||||||
if (await verifyToken42(content["token42"])):
|
|
||||||
jsonVar = {"type": "login", "content": {"username": user["username"], "token": user["token"], "id": user["id"]}}
|
|
||||||
await userClass.send(json.dumps(jsonVar))
|
|
||||||
return
|
|
||||||
jsonVar = {"type": "error", "content": "Invalid 42 token", "code": 9008}
|
|
||||||
await userClass.send(json.dumps(jsonVar))
|
|
||||||
|
|
||||||
async def login(userClass, content):
|
|
||||||
# |TOM| Faire 3 types de requêtes:
|
|
||||||
# - byToken: Récupérer les informations de l'utilisateur en fonction de son token
|
|
||||||
# - byPass: Récupérer les informations de l'utilisateur en fonction de mail et de son mot de passe
|
|
||||||
# - by42: Récupérer les informations de l'utilisateur en fonction de son token42 (qui sera different du token)
|
|
||||||
try:
|
|
||||||
if (content["type"] == "byToken"):
|
|
||||||
await loginByToken(userClass, content)
|
|
||||||
elif (content["type"] == "byPass"):
|
|
||||||
await loginByPass(userClass, content)
|
|
||||||
elif (content["type"] == "by42"):
|
|
||||||
await loginBy42(userClass, content)
|
|
||||||
else:
|
|
||||||
await userClass.sendError("Invalid login type", 9006)
|
|
||||||
except Exception as e:
|
|
||||||
await userClass.sendError("Invalid request", 9005, e)
|
|
@ -1,35 +0,0 @@
|
|||||||
# **************************************************************************** #
|
|
||||||
# #
|
|
||||||
# ::: :::::::: #
|
|
||||||
# sendPrivateMessage.py :+: :+: :+: #
|
|
||||||
# +:+ +:+ +:+ #
|
|
||||||
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
|
|
||||||
# +#+#+#+#+#+ +#+ #
|
|
||||||
# Created: 2024/08/04 13:44:11 by edbernar #+# #+# #
|
|
||||||
# Updated: 2024/08/04 15:48:24 by edbernar ### ########.fr #
|
|
||||||
# #
|
|
||||||
# **************************************************************************** #
|
|
||||||
|
|
||||||
from datetime import datetime
|
|
||||||
|
|
||||||
async def sendPrivateMessage(userClass, content):
|
|
||||||
# |Tom| Requete pour vérifier si l'user existe
|
|
||||||
# Si user existe pas, faire ça : await userClass.sendError("User not found", 9008)
|
|
||||||
# Sinon l'ajouter à la base de données
|
|
||||||
# |Eddy| Si user existe, envoyer le message privé aux deux personnes concernées
|
|
||||||
# sachant que le receveur doit être connecté. Dans le cas contraire, uniquement
|
|
||||||
# l'envoyeur recevra le message.
|
|
||||||
|
|
||||||
try:
|
|
||||||
time = content["time"]
|
|
||||||
time = datetime.strptime(time, "%Y-%m-%dT%H:%M:%S.%fZ")
|
|
||||||
time = time.strftime("%H:%M %d/%m/%Y")
|
|
||||||
jsonVar = {"type": "new_private_message", "content": {
|
|
||||||
"from": content["from"],
|
|
||||||
"channel": content["to"],
|
|
||||||
"content": content["content"],
|
|
||||||
"date": time
|
|
||||||
}}
|
|
||||||
await userClass.send(jsonVar)
|
|
||||||
except Exception as e:
|
|
||||||
await userClass.sendError("Invalid message sent", 9009, e)
|
|
@ -1,33 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset='utf-8'>
|
|
||||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
|
||||||
<title>Chat</title>
|
|
||||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
|
||||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
|
||||||
<script type="module" src='main.js'></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="chatButton">
|
|
||||||
<p>CHAT</p>
|
|
||||||
</div>
|
|
||||||
<div id="chatDiv">
|
|
||||||
<div id="topChatHome">
|
|
||||||
<h1>Chat</h1>
|
|
||||||
<div id="topChatCross">
|
|
||||||
<h2>X</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="buttonTypeChatHome">
|
|
||||||
<h2 id="selected">Private</h2>
|
|
||||||
<h2>Game</h2>
|
|
||||||
</div>
|
|
||||||
<div id="messageListChatHome">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
@ -1,235 +0,0 @@
|
|||||||
/* ************************************************************************** */
|
|
||||||
/* */
|
|
||||||
/* ::: :::::::: */
|
|
||||||
/* main.js :+: :+: :+: */
|
|
||||||
/* +:+ +:+ +:+ */
|
|
||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
|
||||||
/* +#+#+#+#+#+ +#+ */
|
|
||||||
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
|
|
||||||
/* Updated: 2024/08/04 19:03:57 by edbernar ### ########.fr */
|
|
||||||
/* */
|
|
||||||
/* ************************************************************************** */
|
|
||||||
|
|
||||||
import { sendRequest } from "./websocket.js";
|
|
||||||
import { userList, waitForUserList } from "./typeResponse/typePrivateListUser.js";
|
|
||||||
import { messageList, infoPanel, waitForMessageList } from "./typeResponse/typePrivateListMessage.js";
|
|
||||||
import { userMeInfo } from "./typeResponse/typeLogin.js";
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (event) => {
|
|
||||||
if (event.key === "-")
|
|
||||||
console.log(userList);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
liveChat();
|
|
||||||
});
|
|
||||||
|
|
||||||
function liveChat() {
|
|
||||||
const chatButton = document.getElementById("chatButton");
|
|
||||||
const chatDiv = document.getElementById("chatDiv");
|
|
||||||
const topChatHomeCross = document.getElementById("topChatCross");
|
|
||||||
const privateButtonChatHome = document.getElementById("buttonTypeChatHome").getElementsByTagName("h2")[0];
|
|
||||||
const gameButtonChatHome= document.getElementById("buttonTypeChatHome").getElementsByTagName("h2")[1];
|
|
||||||
|
|
||||||
chatButton.addEventListener("click", async () => {
|
|
||||||
chatDiv.style.display = "flex";
|
|
||||||
gameButtonChatHome.removeAttribute("id");
|
|
||||||
privateButtonChatHome.setAttribute("id", "selected");
|
|
||||||
await showListUserMessage();
|
|
||||||
});
|
|
||||||
topChatHomeCross.addEventListener("click", () => {
|
|
||||||
chatDiv.style.display = "none";
|
|
||||||
infoPanel.isOpen = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
privateButtonChatHome.addEventListener("click", async () => {
|
|
||||||
gameButtonChatHome.removeAttribute("id");
|
|
||||||
privateButtonChatHome.setAttribute("id", "selected");
|
|
||||||
await showListUserMessage();
|
|
||||||
});
|
|
||||||
gameButtonChatHome.addEventListener("click", () => {
|
|
||||||
privateButtonChatHome.removeAttribute("id");
|
|
||||||
gameButtonChatHome.setAttribute("id", "selected");
|
|
||||||
showActualGameMessage();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function showListUserMessage() {
|
|
||||||
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 => {
|
|
||||||
divMessageListChatHome.innerHTML += `
|
|
||||||
<div class="user">
|
|
||||||
<div class="status ${element.status}">
|
|
||||||
<img src="${element.pfp}">
|
|
||||||
</div>
|
|
||||||
<h3>${element.name}</h3>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
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 launchPrivateChat(userList[i]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function showActualGameMessage() {
|
|
||||||
const divMessageListChatHome = document.getElementById("messageListChatHome");
|
|
||||||
let me = "Kumita";
|
|
||||||
let request = {
|
|
||||||
isInGame: false,
|
|
||||||
opponent: {
|
|
||||||
name: "Astropower",
|
|
||||||
pfp: "https://ashisheditz.com/wp-content/uploads/2024/03/cool-anime-pfp-demon-slayer-HD.jpg"
|
|
||||||
},
|
|
||||||
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 => {
|
|
||||||
divMessageListChatHome.innerHTML += `
|
|
||||||
<div class="${element.from === me ? "meMessage" : "opponentMessage"}">
|
|
||||||
<p class="content">${element.content}</p>
|
|
||||||
<p class="time">${element.date}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
});
|
|
||||||
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>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function launchPrivateChat(user) {
|
|
||||||
const divMessageListChatHome = document.getElementById("messageListChatHome");
|
|
||||||
const divButtonTypeChatHome = document.getElementById("buttonTypeChatHome");
|
|
||||||
let returnButton;
|
|
||||||
|
|
||||||
sendRequest("get_private_list_message", {id: user.id});
|
|
||||||
await waitForMessageList();
|
|
||||||
infoPanel.id = user.id;
|
|
||||||
infoPanel.isOpen = true;
|
|
||||||
infoPanel.divMessage = divMessageListChatHome;
|
|
||||||
let h2Button = divButtonTypeChatHome.getElementsByTagName("h2");
|
|
||||||
let len = h2Button.length;
|
|
||||||
for (let i = 0; i < len; i++) {
|
|
||||||
h2Button[i - i].remove();
|
|
||||||
}
|
|
||||||
divButtonTypeChatHome.innerHTML += `
|
|
||||||
<h2>${user.name}</h2>
|
|
||||||
<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", () => {
|
|
||||||
divButtonTypeChatHome.innerHTML = `
|
|
||||||
<h2 id="selected">Private</h2>
|
|
||||||
<h2>Game</h2>
|
|
||||||
`;
|
|
||||||
infoPanel.isOpen = false;
|
|
||||||
showListUserMessage();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
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>
|
|
||||||
`;
|
|
||||||
});
|
|
||||||
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>
|
|
||||||
`;
|
|
||||||
let sendButton = document.getElementById("sendButton");
|
|
||||||
sendButton.style.cursor = "pointer";
|
|
||||||
sendButton.addEventListener("click", () => {
|
|
||||||
sendMessage();
|
|
||||||
inputMessage.value = "";
|
|
||||||
});
|
|
||||||
let 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");
|
|
||||||
|
|
||||||
sendRequest("send_private_message", {from: userMeInfo.id, to: user.id, content: inputMessage.value, time: new Date()});
|
|
||||||
}
|
|
Binary file not shown.
Before Width: | Height: | Size: 8.9 KiB |
@ -1,243 +0,0 @@
|
|||||||
/* ************************************************************************** */
|
|
||||||
/* */
|
|
||||||
/* ::: :::::::: */
|
|
||||||
/* style.css :+: :+: :+: */
|
|
||||||
/* +:+ +:+ +:+ */
|
|
||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
|
||||||
/* +#+#+#+#+#+ +#+ */
|
|
||||||
/* Created: 2024/07/30 13:53:39 by edbernar #+# #+# */
|
|
||||||
/* Updated: 2024/08/01 23:25:38 by edbernar ### ########.fr */
|
|
||||||
/* */
|
|
||||||
/* ************************************************************************** */
|
|
||||||
|
|
||||||
body {
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #616161;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chatButton {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 10px;
|
|
||||||
left: 30px;
|
|
||||||
background-color: white;
|
|
||||||
width: 100px;
|
|
||||||
height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
cursor : pointer;
|
|
||||||
z-index: 998;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chatButton p {
|
|
||||||
margin: 0;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chatButton:hover {
|
|
||||||
background-color: rgb(204, 204, 204);
|
|
||||||
}
|
|
||||||
|
|
||||||
#chatDiv {
|
|
||||||
width: 350px;
|
|
||||||
height: 400px;
|
|
||||||
background-color: #131313;
|
|
||||||
position: absolute;
|
|
||||||
left: 20px;
|
|
||||||
bottom: 0px;
|
|
||||||
z-index: 999;
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
color: white;
|
|
||||||
font-family: 'Poppins';
|
|
||||||
padding: 20px;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chatDiv h1 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Delete this, is just for cross style */
|
|
||||||
#chatDiv h2 {
|
|
||||||
cursor : pointer;
|
|
||||||
margin: 0;
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chatDiv #topChatHome {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#buttonTypeChatHome {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 50% 50%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#buttonTypeChatHome h2 {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 20px;
|
|
||||||
color: #dfdfdf;
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#selected {
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: auto;
|
|
||||||
height: 230px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome .user {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 75px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px 0 5px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome .user:hover {
|
|
||||||
background-color: #484848;
|
|
||||||
cursor : pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome .user .status {
|
|
||||||
border-radius: 1000px;
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome .online {
|
|
||||||
background-color: rgb(17, 165, 29);
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome .offline {
|
|
||||||
background-color: rgb(148, 39, 39);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome .user img {
|
|
||||||
height: 52px;
|
|
||||||
width: 52px;
|
|
||||||
margin-left: 4px;
|
|
||||||
margin-top: 4px;
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#messageListChatHome .opponentMessage {
|
|
||||||
max-width: 80%;
|
|
||||||
padding: 10px;
|
|
||||||
margin-top: 20px;
|
|
||||||
background-color: #484848;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome .meMessage {
|
|
||||||
max-width: 80%;
|
|
||||||
padding: 10px;
|
|
||||||
margin-top: 20px;
|
|
||||||
background-color: #222222;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome .meMessage p {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#messageListChatHome .content {
|
|
||||||
user-select: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome .time {
|
|
||||||
margin-top: 10px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome p {
|
|
||||||
margin: 0;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
#inputMessageDiv {
|
|
||||||
position: absolute;
|
|
||||||
width: 348px;
|
|
||||||
height: 50px;
|
|
||||||
background-color: #0B0B0B;
|
|
||||||
bottom: 10px;
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#inputMessageDiv p {
|
|
||||||
margin: 0;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
font-family: "Poppins";
|
|
||||||
font-weight: bolder;
|
|
||||||
font-size: 35px;
|
|
||||||
margin-top: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#inputMessage{
|
|
||||||
user-select: text;
|
|
||||||
background-color: #0f0f0f;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
resize: none;
|
|
||||||
border: 0;
|
|
||||||
color: white;
|
|
||||||
padding: 15px 5% 15px 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#inputMessage:focus {
|
|
||||||
outline: none;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#messageListChatHome {
|
|
||||||
--sb-thumb-color: #080808;
|
|
||||||
--sb-size: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome::-webkit-scrollbar {
|
|
||||||
width: var(--sb-size)
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome::-webkit-scrollbar-track {
|
|
||||||
border-radius: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messageListChatHome::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--sb-thumb-color);
|
|
||||||
border-radius: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports not selector(::-webkit-scrollbar) {
|
|
||||||
#messageListChatHome {
|
|
||||||
scrollbar-color: var(--sb-thumb-color)
|
|
||||||
var(--sb-track-color);
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,25 +0,0 @@
|
|||||||
/* ************************************************************************** */
|
|
||||||
/* */
|
|
||||||
/* ::: :::::::: */
|
|
||||||
/* typeLogin.js :+: :+: :+: */
|
|
||||||
/* +:+ +:+ +:+ */
|
|
||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
|
||||||
/* +#+#+#+#+#+ +#+ */
|
|
||||||
/* Created: 2024/08/02 00:39:53 by edbernar #+# #+# */
|
|
||||||
/* Updated: 2024/08/03 23:37:33 by edbernar ### ########.fr */
|
|
||||||
/* */
|
|
||||||
/* ************************************************************************** */
|
|
||||||
|
|
||||||
let userMeInfo = {
|
|
||||||
username: "",
|
|
||||||
id: 42
|
|
||||||
};
|
|
||||||
|
|
||||||
function typeLogin(content)
|
|
||||||
{
|
|
||||||
console.log("Welcome " + content.username + "\nYou're id is " + content.id);
|
|
||||||
userMeInfo.username = content.username;
|
|
||||||
userMeInfo.id = content.id;
|
|
||||||
}
|
|
||||||
|
|
||||||
export { userMeInfo, typeLogin };
|
|
@ -1,32 +0,0 @@
|
|||||||
/* ************************************************************************** */
|
|
||||||
/* */
|
|
||||||
/* ::: :::::::: */
|
|
||||||
/* typeNewPrivateMessage.js :+: :+: :+: */
|
|
||||||
/* +:+ +:+ +:+ */
|
|
||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
|
||||||
/* +#+#+#+#+#+ +#+ */
|
|
||||||
/* Created: 2024/08/04 15:15:49 by edbernar #+# #+# */
|
|
||||||
/* Updated: 2024/08/04 18:26:40 by edbernar ### ########.fr */
|
|
||||||
/* */
|
|
||||||
/* ************************************************************************** */
|
|
||||||
|
|
||||||
import { sendRequest } from "../websocket.js";
|
|
||||||
import { messageList, infoPanel } from "./typePrivateListMessage.js";
|
|
||||||
import { userMeInfo } from "./typeLogin.js";
|
|
||||||
|
|
||||||
function typeNewPrivateMessage(content)
|
|
||||||
{
|
|
||||||
messageList.push(content);
|
|
||||||
if (infoPanel.isOpen && infoPanel.id === content.channel)
|
|
||||||
{
|
|
||||||
infoPanel.divMessage.insertAdjacentHTML('beforeend', `
|
|
||||||
<div class="${content.from === userMeInfo.id ? "meMessage" : "opponentMessage"}">
|
|
||||||
<p class="content">${content.content}</p>
|
|
||||||
<p class="time">${content.date}</p>
|
|
||||||
</div>
|
|
||||||
`);
|
|
||||||
infoPanel.divMessage.scrollTop = infoPanel.divMessage.scrollHeight;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { typeNewPrivateMessage };
|
|
@ -1,43 +0,0 @@
|
|||||||
/* ************************************************************************** */
|
|
||||||
/* */
|
|
||||||
/* ::: :::::::: */
|
|
||||||
/* typePrivateListMessage.js :+: :+: :+: */
|
|
||||||
/* +:+ +:+ +:+ */
|
|
||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
|
||||||
/* +#+#+#+#+#+ +#+ */
|
|
||||||
/* Created: 2024/08/03 22:20:35 by edbernar #+# #+# */
|
|
||||||
/* Updated: 2024/08/04 18:58:45 by edbernar ### ########.fr */
|
|
||||||
/* */
|
|
||||||
/* ************************************************************************** */
|
|
||||||
|
|
||||||
let infoPanel = {
|
|
||||||
isOpen: false,
|
|
||||||
id: -1,
|
|
||||||
divMessage: null
|
|
||||||
}
|
|
||||||
let messageList = [];
|
|
||||||
let messageListAvailable = false;
|
|
||||||
let messageListResolve = null;
|
|
||||||
|
|
||||||
function waitForMessageList() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
|
|
||||||
if (messageListAvailable)
|
|
||||||
resolve();
|
|
||||||
else
|
|
||||||
messageListResolve = resolve;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function typePrivateListMessage(list) {
|
|
||||||
messageList = list;
|
|
||||||
messageListAvailable = true;
|
|
||||||
if (messageListResolve)
|
|
||||||
{
|
|
||||||
messageListResolve();
|
|
||||||
messageListResolve = null;
|
|
||||||
messageListAvailable = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { messageList, infoPanel, typePrivateListMessage, waitForMessageList };
|
|
@ -1,36 +0,0 @@
|
|||||||
/* ************************************************************************** */
|
|
||||||
/* */
|
|
||||||
/* ::: :::::::: */
|
|
||||||
/* typePrivateListUser.js :+: :+: :+: */
|
|
||||||
/* +:+ +:+ +:+ */
|
|
||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
|
||||||
/* +#+#+#+#+#+ +#+ */
|
|
||||||
/* Created: 2024/08/02 01:56:15 by edbernar #+# #+# */
|
|
||||||
/* Updated: 2024/08/03 14:36:20 by edbernar ### ########.fr */
|
|
||||||
/* */
|
|
||||||
/* ************************************************************************** */
|
|
||||||
|
|
||||||
let userList = [];
|
|
||||||
let userListAvailable = false;
|
|
||||||
let userListResolve = null;
|
|
||||||
|
|
||||||
function waitForUserList() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
if (userListAvailable)
|
|
||||||
resolve();
|
|
||||||
else
|
|
||||||
userListResolve = resolve;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function typePrivateListUser(list) {
|
|
||||||
userList = list;
|
|
||||||
userListAvailable = true;
|
|
||||||
if (userListResolve)
|
|
||||||
{
|
|
||||||
userListResolve();
|
|
||||||
userListResolve = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { userList, typePrivateListUser, waitForUserList };
|
|
@ -1,72 +0,0 @@
|
|||||||
/* ************************************************************************** */
|
|
||||||
/* */
|
|
||||||
/* ::: :::::::: */
|
|
||||||
/* websocket.js :+: :+: :+: */
|
|
||||||
/* +:+ +:+ +:+ */
|
|
||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
|
||||||
/* +#+#+#+#+#+ +#+ */
|
|
||||||
/* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */
|
|
||||||
/* Updated: 2024/08/04 15:17:41 by edbernar ### ########.fr */
|
|
||||||
/* */
|
|
||||||
/* ************************************************************************** */
|
|
||||||
|
|
||||||
import { typeLogin } from "./typeResponse/typeLogin.js";
|
|
||||||
import { typePrivateListUser } from "./typeResponse/typePrivateListUser.js";
|
|
||||||
import { typePrivateListMessage } from "./typeResponse/typePrivateListMessage.js";
|
|
||||||
import { typeNewPrivateMessage } from "./typeResponse/typeNewPrivateMessage.js";
|
|
||||||
|
|
||||||
const socket = new WebSocket('ws://localhost:8000/');
|
|
||||||
const token = "IDSNCSDAd465sd13215421";
|
|
||||||
|
|
||||||
const typeResponse = ["login", "private_list_user", "private_list_message", "new_private_message"];
|
|
||||||
const functionResponse = [typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage];
|
|
||||||
|
|
||||||
socket.onopen = () => {
|
|
||||||
console.log('Connected');
|
|
||||||
if (token)
|
|
||||||
sendRequest("login", {"type": "byToken", "token": token});
|
|
||||||
// |Eddy| Requete pour se connecter par mail et password. En attente du front pour le faire (déjà fonctionnel côté back)
|
|
||||||
// sendRequest("login", {type: "byPass", mail: "aa@aa.fr", password: "ABC123"});
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.onmessage = (event) => {
|
|
||||||
let response;
|
|
||||||
|
|
||||||
try {
|
|
||||||
response = JSON.parse(event.data);
|
|
||||||
} catch {
|
|
||||||
return ;
|
|
||||||
}
|
|
||||||
if (response.code >= 9000 && response.code <= 9999)
|
|
||||||
console.warn(response);
|
|
||||||
else
|
|
||||||
{
|
|
||||||
try {
|
|
||||||
functionResponse[typeResponse.indexOf(response.type)](response.content);
|
|
||||||
}
|
|
||||||
catch {
|
|
||||||
console.warn(response);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.onclose = () => {
|
|
||||||
console.log('Disconnected');
|
|
||||||
};
|
|
||||||
|
|
||||||
function sendRequest(type, content) {
|
|
||||||
let coc = null;
|
|
||||||
|
|
||||||
if (content instanceof Object)
|
|
||||||
coc = JSON.stringify(content);
|
|
||||||
else
|
|
||||||
coc = content;
|
|
||||||
socket.send(JSON.stringify({
|
|
||||||
type: type,
|
|
||||||
token: token,
|
|
||||||
content: content
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
export { socket, token, sendRequest };
|
|
@ -6,7 +6,7 @@
|
|||||||
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
|
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
|
||||||
# +#+#+#+#+#+ +#+ #
|
# +#+#+#+#+#+ +#+ #
|
||||||
# Created: 2024/08/03 22:53:14 by edbernar #+# #+# #
|
# Created: 2024/08/03 22:53:14 by edbernar #+# #+# #
|
||||||
# Updated: 2024/08/03 23:43:09 by edbernar ### ########.fr #
|
# Updated: 2024/08/04 22:36:29 by edbernar ### ########.fr #
|
||||||
# #
|
# #
|
||||||
# **************************************************************************** #
|
# **************************************************************************** #
|
||||||
|
|
Reference in New Issue
Block a user