Module livechat :

- Style finish
    - Just button "new conversation" not ready
    - Starting websocket but its

site/module_livechat/server/a.py

@@ -0,0 +1,23 @@
+import asyncio
+import websockets
+
+async def send_messages(websocket):
+    while True:
+        message = input("Enter message to send: ")
+        await websocket.send(message)
+        print(f"Sent: {message}")
+
+async def receive_messages(websocket):
+    while True:
+        response = await websocket.recv()
+        print(f"Received: {response}")
+
+async def main():
+    uri = "ws://localhost:8000"
+    async with websockets.connect(uri) as websocket:
+        send_task = asyncio.create_task(send_messages(websocket))
+        receive_task = asyncio.create_task(receive_messages(websocket))
+        await asyncio.gather(send_task, receive_task)
+
+# Démarrer le client
+asyncio.run(main())

site/module_livechat/server/main.py

@@ -0,0 +1,28 @@
+import asyncio
+import websockets
+
+connected_clients = set()
+validTokens = "123456"
+
+async def handler(websocket, path):
+	connected_clients.add(websocket)
+	try:
+		async for message in websocket:
+			for client in connected_clients:
+				if client == websocket:
+					print(f"Message reçu: {message}")
+					if message == validTokens:
+						await client.send("Token valide")
+					else:
+						await client.send("Token invalide")
+				if client != websocket:
+					await client.send(message)
+	except websockets.exceptions.ConnectionClosed as e:
+		print(f"Connexion fermée: {e}")
+	finally:
+		print("Client déconnecté")
+		connected_clients.remove(websocket)
+
+start_server = websockets.serve(handler, "localhost", 8000)
+asyncio.get_event_loop().run_until_complete(start_server)
+asyncio.get_event_loop().run_forever()

site/module_livechat/site/main.js

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   main.js                                            :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:50:35 by edbernar          #+#    #+#             */
-/*   Updated: 2024/07/30 19:55:40 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/07/31 00:37:11 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -60,9 +60,7 @@ function	liveChat() {
 		chatDiv.style.display = "none";
 	});
 
-	// showListUserMessage(userList);
-	console.warn("Retirer showActualGameMessage() et remettre showListUserMessage()")
-	showActualGameMessage();
+	showListUserMessage(userList);
 	privateButtonChatHome.addEventListener("click", () => {
 		gameButtonChatHome.removeAttribute("id");
 		privateButtonChatHome.setAttribute("id", "selected");
@@ -77,8 +75,12 @@ function	liveChat() {
 
 function	showListUserMessage(userList) {
 	const	divMessageListChatHome = document.getElementById("messageListChatHome");
+	let		divUser;
 
+	divMessageListChatHome.style.height = "100%";
+	divMessageListChatHome.style.paddingBottom = "10px";
 	divMessageListChatHome.innerHTML = '';
+	divMessageListChatHome.scrollTop = 0;
 	userList.forEach(element => {
 		divMessageListChatHome.innerHTML += `
 			<div class="user">
@@ -89,6 +91,13 @@ function	showListUserMessage(userList) {
 			</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", () => {
+			launchPrivateChat(userList[i]);
+		});
+	}
 }
 
 function	showActualGameMessage() {
@@ -111,29 +120,32 @@ function	showActualGameMessage() {
 				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"
-			// },
+			{
+				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)
 	{
@@ -142,14 +154,104 @@ function	showActualGameMessage() {
 	}
 	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>
+		<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="inputDiv" placeholder="Enter your message here"></div>
+		<div id="inputMessageDiv">
+			<textarea type="text" id="inputMessage" placeholder="Enter your message here"></textarea>
+			<p id="sendButton">\></p>
+		</div>
 	`;
-	divMessageListChatHome.setAttribute("contenteditable", "true");
+}
+
+function	launchPrivateChat(user) {
+	const	divMessageListChatHome = document.getElementById("messageListChatHome");
+	const	divButtonTypeChatHome = document.getElementById("buttonTypeChatHome");
+	let		returnButton;
+	let		me = "Kumita";
+	let		request = {
+		opponent: {
+			name: user.name,
+			pfp: user.pfp
+		},
+		listMessage: [
+			{
+				from: user.name,
+				content: "Salut !",
+				date: "10:05 31/07/2024"
+			},
+			{
+				from: "Kumita",
+				content: "Hey",
+				date: "10:05 31/07/2024"
+			},
+			{
+				from: user.name,
+				content: "Tu veux coder un peu ?",
+				date: "10:06 31/07/2024"
+			},
+			{
+				from: "Kumita",
+				content: "Ouais, je suis partant !",
+				date: "10:06 31/07/2024"
+			},
+			{
+				from: "Kumita",
+				content: "Ce bug était vraiment galère à résoudre, mais on y est arrivé.",
+				date: "10:45 31/07/2024"
+			},
+			{
+				from: user.name,
+				content: "Ouais, mais t'as trouvé la solution. À la prochaine !",
+				date: "10:46 31/07/2024"
+			},
+		]
+	}; //Remplace temporairement la requete qui devra être de la meme forme
+
+	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>
+		`;
+		liveChat();
+	});
+
+
+
+	divMessageListChatHome.style.height = "230px";
+	divMessageListChatHome.style.paddingBottom = "20px";
+	divMessageListChatHome.innerHTML = '';
+	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>
+	`;
+
 }

site/module_livechat/site/style.css

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   style.css                                          :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:53:39 by edbernar          #+#    #+#             */
-/*   Updated: 2024/07/30 20:18:19 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/07/31 00:37:48 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -99,7 +99,9 @@ body {
 	display: flex;
 	flex-direction: column;
 	overflow: auto;
-	height: 100%;
+	height: 230px;
+	padding-bottom: 20px;
+	padding-top: 5px;
 }
 
 #messageListChatHome .user {
@@ -107,8 +109,12 @@ body {
 	flex-direction: row;
 	height: 75px;
 	margin: 0;
-	padding: 0;
-	margin-top: 10px;
+	padding: 10px 0 5px 5px;
+}
+
+#messageListChatHome .user:hover {
+	background-color: #484848;
+	cursor : pointer;
 }
 
 #messageListChatHome .user .status {
@@ -123,14 +129,16 @@ body {
 }
 
 #messageListChatHome .offline {
-	background-color: rgb(85, 85, 85);
+	background-color: rgb(148, 39, 39);
+
 }
 
 #messageListChatHome .user img {
 	height: 52px;
+	width: 52px;
 	margin-left: 4px;
 	margin-top: 4px;
-	border-radius: 1000px;
+	border-radius: 100%;
 }
 
 
@@ -172,12 +180,66 @@ body {
 	word-break: break-word;
 }
 
-
-#inputDiv {
+#inputMessageDiv {
 	position: absolute;
-	width: 90%;
+	width: 348px;
 	height: 50px;
 	background-color: #0B0B0B;
 	bottom: 10px;
-	user-select: text;
+	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);
+}
 }