Site

- remove time and from in message request
    - add page lobby when click on tv (only when we are connected)

docker-compose/requirements/djangoserver/file/server/server/templates/index.html

@@ -9,6 +9,7 @@
 	<link rel='stylesheet' type='text/css' href='/static/style/homePage/liveChat.css'>
 	<link rel='stylesheet' type='text/css' href='/static/style/homePage/loginPage.css'>
 	<link rel='stylesheet' type='text/css' href='/static/style/global/notification.css'>
+	<link rel='stylesheet' type='text/css' href='/static/style/lobbyPage/lobbyPage.css'>
 	<script type="module" src='/static/javascript/main.js'></script>
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html

@@ -0,0 +1,48 @@
+<div id="topBar">
+	<div class="search-container">
+		<input type="text" placeholder="Search..." class="search-input">
+		<button class="search-button">Search</button>
+	</div>
+</div>
+<div class="main">
+	<div id="loginPopup" class="popup">
+		<div class="popup-content">
+			<span id="closePopupBtn" class="close"></span>
+			<h1>Select your game mode</h1>
+			<div id="choose">
+				<div class="select-card">
+					<p>Multiplayer local</p>
+				</div>
+				<div class="select-card">
+					<p>Matchmaking</p>
+				</div>
+				<div class="select-card">
+					<p>Ranked</p>
+				</div>
+				<div class="select-card">
+					<p>Tournament</p>
+				</div>
+			</div>
+			</form>
+		</div>
+	</div>
+
+	<div class="game-mode">
+		<div class="mode-card">
+			<p>Multiplayer local</p>
+		</div>
+	</div>
+	<div class="skin-select">
+		<div id="bar">
+
+		</div>
+		<div id="goal">
+			
+		</div>
+		<div class="switch">
+			<input id="checkbox1" class="look" type="checkbox">
+			<label for="checkbox1"></label>
+			<p>Fix the camera on the bar</p>
+		</div>
+	</div>
+</div>

docker-compose/requirements/djangoserver/file/server/server/urls.py

@@ -20,4 +20,5 @@ from . import views
 urlpatterns = [
 	path("",views.index, name='patate'),
 	path("homePage",views.homePage, name='homePage'),
+	path("lobbyPage", views.lobbyPage, name='lobbyPage')
 ]

docker-compose/requirements/djangoserver/file/server/server/views.py

@@ -9,3 +9,7 @@ def index(request):
 def homePage(request):
 	request.session.save()
 	return render(request, "homePage.html", {})
+
+def lobbyPage(request):
+	request.session.save()
+	return render(request, "lobbyPage.html", {})

docker-compose/requirements/nginx/static/javascript/Page.js

@@ -6,17 +6,19 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/25 00:00:21 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/25 15:22:15 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/25 21:09:33 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import { HomePage } from "/static/javascript/homePage/main.js";
+import { LobbyPage } from "/static/javascript/lobbyPage/main.js";
 
 class Page
 {
 	actualPage = null;
 	availablePages = [
 		{url:'/', servUrl: '/homePage', class: HomePage, name: 'homePage', title: 'PTME - Home'},
+		{url:'/lobby', servUrl: '/lobbyPage', class: LobbyPage, name: 'lobbyPage', title: 'PTME - Lobby'},
 	]
 
 	constructor()
@@ -48,12 +50,13 @@ class Page
 				})
 				.then(data => {
 					data.text().then(text => {
+						console.log("Page updated !");
 						document.body.innerHTML = text;
-						this.availablePages[i].class.create();
+						this.actualPage = this.availablePages[i].class;
 						document.title = this.availablePages[i].title;
-						this.actualPage = this.availablePages[i].name;
 						history.pushState({}, this.availablePages[i].title, this.availablePages[i].url);
-					});
+						this.actualPage.create();
+					})
 				})
 				.catch(error => {
 					throw Error(error);

docker-compose/requirements/nginx/static/javascript/home3D/home3D.js

@@ -6,15 +6,17 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 17:19:17 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/25 15:03:42 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/25 21:10:59 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import { EffectComposer } from '/static/javascript/three/examples/jsm/postprocessing/EffectComposer.js';
 import { RenderPass } from '/static/javascript/three/examples/jsm/postprocessing/RenderPass.js';
 import { BokehPass } from '/static/javascript/three/examples/jsm/postprocessing/BokehPass.js';
+import { userMeInfo } from "/static/javascript/typeResponse/typeLogin.js";
 import * as THREE from '/static/javascript/three/build/three.module.js'
 import { Screen, light } from '/static/javascript/home3D/Screen.js'
+import { pageRenderer } from '/static/javascript/main.js'
 
 let		scene			= null;
 let		renderer		= null;
@@ -40,6 +42,7 @@ class Home3D
 	{
 		document.removeEventListener('resize', windowUpdater);
 		document.removeEventListener('mousemove', mouseTracker);
+		document.removeEventListener('click', redirection);
 
 		if (interval)
 			clearInterval(interval);
@@ -190,6 +193,8 @@ function home3D()
 		actualVideo = 0;
 	}, 100);
 
+	let	clickDetect = false;
+
 	function loop()
 	{
 		raycaster.setFromCamera( mouse, camera );
@@ -208,7 +213,16 @@ function home3D()
 				actualVideo = 0;
 			}
 		}
-		else if (intersects[0].object == screen.screen)
+		else
+		{
+			if (clickDetect)
+			{
+				document.removeEventListener('click', redirection);
+				clickDetect = false;
+			}
+			if (intersects[0].object == screen.screen)
+			{
+				if (userMeInfo.id == -1)
 				{
 					if (actualVideo != 1)
 					{
@@ -216,11 +230,21 @@ function home3D()
 						actualVideo = 1;
 					}
 				}
+				else
+				{
+					if (!clickDetect)
+					{
+						document.addEventListener('click', redirection);
+						clickDetect = true;
+					}
+				}
+			}
 			else if (actualVideo != 0)
 			{
 				screen.changeVideo(video.pong);
 				actualVideo = 0;
 			}
+		}
 		composer.render();
 	}
 
@@ -316,4 +340,9 @@ function mouseTracker (event)
 	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 };
 
+function redirection()
+{
+	pageRenderer.changePage('lobbyPage');
+}
+
 export { Home3D };

docker-compose/requirements/nginx/static/javascript/homePage/main.js

@@ -6,13 +6,13 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/25 00:02:19 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/25 18:18:09 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/25 18:26:17 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+import { LiveChat } from "/static/javascript/liveChat/main.js";
 import { Home3D } from "/static/javascript/home3D/home3D.js"
 import { Login } from "/static/javascript/login/main.js";
-import { LiveChat } from "/static/javascript/liveChat/main.js";
 
 class HomePage
 {

docker-compose/requirements/nginx/static/javascript/liveChat/main.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 19:19:10 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/25 18:17:13 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/25 18:26:52 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -27,8 +27,6 @@ class LiveChat
 {
 	static create()
 	{
-		const	chatDiv = document.getElementById("chatDiv");
-
 		chatButton = document.getElementById("chatButton");
 		topChatHomeCross = document.getElementById("topChatCross");
 		

docker-compose/requirements/nginx/static/javascript/liveChat/showPrivateChat.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/04 19:17:54 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/24 23:49:04 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/25 21:24:06 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -142,10 +142,8 @@ function	sendMessage(user)
 	let 	message;
 
 	message = {
-		from: userMeInfo.id,
 		to: user.id,
 		content: inputMessage.value,
-		time: new Date()
 	};
 	sendRequest("send_private_message", message);
 }

docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js

@@ -0,0 +1,103 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   main.js                                            :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/08/22 17:08:46 by madegryc          #+#    #+#             */
+/*   Updated: 2024/08/25 21:20:17 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+/* 
+	Information :
+		- 0: Multiplayer local
+		- 1: Matchmaking
+		- 2: Ranked
+		- 3: Tournament
+*/
+
+let	listSelectCard	= null;
+let	gameMode		= 0;
+
+class LobbyPage
+{
+	static create()
+	{
+		console.log("Lobby created");
+		listSelectCard = document.getElementsByClassName('select-card');
+
+		gameMode = 0;
+		document.getElementsByClassName('game-mode')[0].addEventListener('click', showGameMode);
+		document.getElementById('closePopupBtn').addEventListener('click', hideGameMode);
+		window.addEventListener('click', closeClickOutsiteGameMode);
+		listSelectCard[0].addEventListener('click', selectGameModeOne);
+		listSelectCard[1].addEventListener('click', selectGameModeTwo);
+		listSelectCard[2].addEventListener('click', selectGameModeThree);
+		listSelectCard[3].addEventListener('click', selectGameModeFour);
+	}
+
+	static dispose()
+	{
+		gameMode = 0;
+		document.getElementsByClassName('game-mode')[0].removeEventListener('click', showGameMode);
+		document.getElementById('closePopupBtn').removeEventListener('click', hideGameMode);
+		window.removeEventListener('click', closeClickOutsiteGameMode);
+		listSelectCard[0].removeEventListener('click', selectGameModeOne);
+		listSelectCard[1].removeEventListener('click', selectGameModeTwo);
+		listSelectCard[2].removeEventListener('click', selectGameModeThree);
+		listSelectCard[3].removeEventListener('click', selectGameModeFour);
+		listSelectCard = null;
+	}
+}
+
+
+function showGameMode()
+{
+	document.getElementById('loginPopup').style.display = 'flex';
+}
+
+
+function hideGameMode()
+{
+	document.getElementById('loginPopup').style.display = 'none';
+}
+
+function closeClickOutsiteGameMode(event)
+{
+	if (event.target == document.getElementById('loginPopup')) {
+		document.getElementById('loginPopup').style.display = 'none';
+	}
+}
+
+function selectGameModeOne()
+{
+	document.getElementById('loginPopup').style.display = 'none';
+	document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[0].innerHTML;
+	gameMode = 0;
+}
+
+function selectGameModeTwo()
+{
+	document.getElementById('loginPopup').style.display = 'none';
+	document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[1].innerHTML;
+	gameMode = 1;
+}
+
+function selectGameModeThree()
+{
+	document.getElementById('loginPopup').style.display = 'none';
+	document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[2].innerHTML;
+	gameMode = 2;
+}
+
+function selectGameModeFour()
+{
+	document.getElementById('loginPopup').style.display = 'none';
+	document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[3].innerHTML;
+	gameMode = 3;
+}
+
+
+export { LobbyPage };

docker-compose/requirements/nginx/static/javascript/login/main.js

@@ -6,13 +6,14 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 17:40:15 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/25 17:14:01 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/25 18:54:51 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import { createNotification as CN } from "/static/javascript/notification/main.js";
 import { userMeInfo, waitForLogin } from "/static/javascript/typeResponse/typeLogin.js";
 import { sendRequest } from "/static/javascript/websocket.js";
+
 class Login
 {
 	static create()

docker-compose/requirements/nginx/static/javascript/main.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:50:35 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/25 15:52:57 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/25 19:09:02 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -18,3 +18,5 @@ let		pageRenderer = null;
 document.addEventListener('DOMContentLoaded', () => {
 	pageRenderer = new Page();
 });
+
+export { pageRenderer };

site/lobby/index.html

@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta charset='utf-8'>
-	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
-	<title>Lobby</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="topBar">
-        <div class="search-container">
-            <input type="text" placeholder="Search..." class="search-input">
-            <button class="search-button">Search</button>
-        </div>
-    </div>
-    <div class="main">
-        <div id="loginPopup" class="popup">
-            <div class="popup-content">
-                <span id="closePopupBtn" class="close"></span>
-                <h1>Select your game mode</h1>
-                <div id="choose">
-                    <div class="select-card">
-                        <p>Multiplayer local</p>
-                    </div>
-                    <div class="select-card">
-                        <p>Matchmaking</p>
-                    </div>
-                    <div class="select-card">
-                        <p>Ranked</p>
-                    </div>
-                    <div class="select-card">
-                        <p>Tournament</p>
-                    </div>
-                </div>
-                </form>
-            </div>
-        </div>
-    
-        <div class="game-mode">
-            <div class="mode-card">
-                <p>Multiplayer local</p>
-            </div>
-        </div>
-        <div class="skin-select">
-            <div id="bar">
-
-            </div>
-            <div id="goal">
-                
-            </div>
-            <div class="switch">
-                <input id="checkbox1" class="look" type="checkbox">
-                <label for="checkbox1"></label>
-                <p>Fix the camera on the bar</p>
-            </div>
-        </div>
-    </div>
-</body>

site/lobby/main.js

@@ -1,52 +0,0 @@
-/* ************************************************************************** */
-/*                                                                            */
-/*                                                        :::      ::::::::   */
-/*   main.js                                            :+:      :+:    :+:   */
-/*                                                    +:+ +:+         +:+     */
-/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
-/*                                                +#+#+#+#+#+   +#+           */
-/*   Created: 2024/08/22 17:08:46 by madegryc          #+#    #+#             */
-/*   Updated: 2024/08/23 18:34:42 by madegryc         ###   ########.fr       */
-/*                                                                            */
-/* ************************************************************************** */
-
-/* 
-
-    INFORMATION :
-
-    id 0 = Multiplayer local
-    id 1 = Matchmaking
-    id 2 = Ranked
-    id 3 = Tournament
-*/
-
-let gameMode = 0;
-
-document.addEventListener('DOMContentLoaded', () => {
-    document.getElementsByClassName('game-mode')[0].addEventListener('click', function() {
-        document.getElementById('loginPopup').style.display = 'flex';
-    });
-    
-    document.getElementById('closePopupBtn').addEventListener('click', function() {
-        document.getElementById('loginPopup').style.display = 'none';
-    });
-    
-    // Fermer la popup si on clique en dehors du contenu
-    window.addEventListener('click', function(event) {
-        if (event.target == document.getElementById('loginPopup')) {
-            document.getElementById('loginPopup').style.display = 'none';
-        }
-    });
-    
-
-    const listSelectCard = document.getElementsByClassName('select-card');
-    console.log('listSelectCard', listSelectCard);
-	for(let i = 0; i < listSelectCard.length; i++) {
-        listSelectCard[i].addEventListener('click', function() {
-            console.log('Card selected:', listSelectCard[i].id);
-            document.getElementById('loginPopup').style.display = 'none';
-            document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[i].innerHTML;
-            gameMode = i;
-        });
-    }
-});