Site

- add button (same as login in home page) in lobby page with menu

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

@@ -4,7 +4,14 @@
 		<input type="text" placeholder="Search..." class="search-input">
 		<button class="search-button">Search</button>
 	</div>
-	<!-- METTRE LE BOUTTON LOGIN -->
+	<div id="loginButton">
+		<p></p>
+	</div>
+	<div id="popMenuLoginButton">
+		<p>Profil</p>
+		<p>Settings</p>
+		<p>Logout</p>
+	</div>
 </div>
 <div class="main">
 	<div id="loginPopup" class="popup">

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

@@ -6,12 +6,14 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 17:08:46 by madegryc          #+#    #+#             */
-/*   Updated: 2024/09/14 23:21:38 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/17 22:46:41 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+import { userMeInfo, waitForLogin } from '/static/javascript/typeResponse/typeLogin.js';
 import { barSelecter, goalSelecter } from '/static/javascript/lobbyPage/3d.js';
 import { pageRenderer } from '/static/javascript/main.js'
+
 /* 
 	Information :
 		- 0: Multiplayer local
@@ -30,6 +32,17 @@ class LobbyPage
 	static create()
 	{
 		const	startButton = document.getElementsByClassName('buttonStartGame')[0];
+		const	usernameP = document.getElementById('loginButton').getElementsByTagName('p')[0];
+		const	loginButton = document.getElementById('loginButton');
+
+		if (userMeInfo.id == -1)
+			waitForLogin().then(() => usernameP.innerHTML = userMeInfo.username);
+		else
+			usernameP.innerHTML = userMeInfo.username;
+		loginButton.addEventListener('click', showMenu);
+		window.addEventListener('resize', movePopMenuLoginButton);
+		movePopMenuLoginButton();
+		initButtonPopMenuLogin();
 		
 		listSelectCard = document.getElementsByClassName('select-card');
 		document.getElementsByClassName('game-mode')[0].addEventListener('click', showGameMode);
@@ -53,6 +66,7 @@ class LobbyPage
 	{
 		const	startButton = document.getElementsByClassName('buttonStartGame')[0];
 
+		window.removeEventListener('resize', movePopMenuLoginButton);
 		startButton.removeEventListener('click', startMode);
 		document.getElementsByClassName('game-mode')[0].removeEventListener('click', showGameMode);
 		document.getElementById('closePopupBtn').removeEventListener('click', hideGameMode);
@@ -150,5 +164,45 @@ function selectGameModeFour()
 	gameMode = 3;
 }
 
+function movePopMenuLoginButton()
+{
+	const	loginButton			= document.getElementById('loginButton');
+	const	pos					= loginButton.getBoundingClientRect();
+	const	popMenuLoginButton 	= document.getElementById('popMenuLoginButton');
+
+	popMenuLoginButton.style.left = pos.left + "px";
+	popMenuLoginButton.style.top = pos.top + pos.height + "px";
+}
+
+function showMenu()
+{
+	const	popMenuLoginButton 	= document.getElementById('popMenuLoginButton');
+	const	loginButton			= document.getElementById('loginButton');
+	
+	popMenuLoginButton.style.display = 'flex';
+	setTimeout(() => {
+		document.addEventListener('click', hideMenu);
+		loginButton.removeEventListener('click', showMenu);
+	}, 50);
+}
+
+function hideMenu()
+{
+	const	loginButton			= document.getElementById('loginButton');
+	const	popMenuLoginButton 	= document.getElementById('popMenuLoginButton');
+	
+	popMenuLoginButton.style.display = 'none';
+	document.removeEventListener('click', hideMenu);
+	loginButton.addEventListener('click', showMenu);
+}
+
+function initButtonPopMenuLogin()
+{
+	const	buttons = document.getElementById('popMenuLoginButton').getElementsByTagName('p');
+
+	buttons[2].addEventListener('click', () => {
+		window.location.replace('/logout');
+	})
+}
 
 export { LobbyPage };

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

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 17:40:15 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/15 10:32:23 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/17 22:46:19 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 

docker-compose/requirements/nginx/static/style/homePage/home.css

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   home.css                                           :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: marvin <marvin@student.42.fr>              +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 12:00:55 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/17 14:20:28 by marvin           ###   ########.fr       */
+/*   Updated: 2024/09/17 22:34:12 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 

docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css

@@ -305,3 +305,22 @@ body {
 		opacity: 0;
 	}
 }
+
+
+#topBarLobby #loginButton {
+	font-size: 20px;
+	background-color: white;
+	height: 40px;
+	width: 130px;	
+	color: black;
+	text-align: center;
+	line-height: 40px;
+	margin-left: auto;
+	transition: background-color 0.3s ease;
+}
+
+#topBarLobby #loginButton:hover {
+	background-color: transparent;
+	color: white;
+	cursor: pointer;
+}