From 6484969e4b242fdce6b2cc7b371e3bb1591ec339 Mon Sep 17 00:00:00 2001
From: Kum1ta <eddydhj@gmail.com>
Date: Fri, 4 Oct 2024 00:08:21 +0200
Subject: [PATCH] Site     - update lobby page style     - fix some bugs on
 lobby page

---
 .../server/server/templates/lobbyPage.html    | 30 ++-------
 .../nginx/static/javascript/lobbyPage/3d.js   | 59 +++++++++++------
 .../nginx/static/javascript/lobbyPage/main.js | 63 ++++++++++++++-----
 .../static/style/lobbyPage/lobbyPage.css      | 18 ------
 4 files changed, 92 insertions(+), 78 deletions(-)

diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
index 05228f3..b4bc000 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
@@ -58,42 +58,20 @@
 
 <div class="main-container">
 	<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">
+			<div class="mode-card select-card">
 				<p>Multiplayer local</p>
 			</div>
 
-			<div class="mode-card-ns">
+			<div class="mode-card-ns select-card">
 				<p>Matchmaking</p>
 			</div>
 
-			<div class="mode-card-ns">
+			<div class="mode-card-ns select-card">
 				<p>Ranked</p>
 			</div>
 
-			<div class="mode-card-ns">
+			<div class="mode-card-ns select-card">
 				<p>Tournament</p>
 			</div>
 		</div>
diff --git a/docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js b/docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
index f8ff63e..846bf27 100644
--- a/docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
+++ b/docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/13 13:59:46 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/03 14:20:12 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/03 21:15:40 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -171,8 +171,10 @@ class goalSelecter
 	rendererList			= [];
 	sceneList				= [];
 	cameraList				= [];
+	div						= null;
 	boundChangeGoal			= this.changeGoal.bind(this);
 	boundhideGoalSelector	= this.hideGoalSelector.bind(this);
+	boundshowGoals			= this.showGoals.bind(this);
 
 	constructor(div)
 	{
@@ -181,6 +183,7 @@ class goalSelecter
 		this.renderer	= new THREE.WebGLRenderer({antialias: true});
 		this.camera		= new THREE.PerspectiveCamera(60, (pos.width - 10) / (pos.height - 10));
 	
+		this.div = div;
 		lastSelectedGoal = this.selected;
 		this.scene.background = new THREE.Color(0x020202);
 		this.renderer.setSize(pos.width - 10, pos.height - 10);
@@ -191,23 +194,31 @@ class goalSelecter
 		this.scene.add(this.goal);
 		this.camera.lookAt(actualGoalSelecter.goal.position);
 		this.renderer.setAnimationLoop(this.#loop.bind(this));
-		div.addEventListener('click', () => {
-			const	popup	=	document.getElementById('popup-goal-selector');
-			const	goal	=	document.getElementsByClassName('color-box-goal');
-		
-			popup.style.display = 'flex';
-			for (let i = 0; i < goal.length; i++)
-			{
-				goal[i].setAttribute('goalId', i);
-				goal[i].appendChild(this.showObject(availableGoals[i], goal[i].getBoundingClientRect()));
-				goal[i].removeEventListener('click', this.boundChangeGoal);
-				goal[i].addEventListener('click', this.boundChangeGoal);
-			}
-			popup.removeEventListener('click', this.boundhideGoalSelector);
-			popup.addEventListener('click', this.boundhideGoalSelector);
-		});
+		div.removeEventListener('click', this.boundshowGoals);
+		div.addEventListener('click', this.boundshowGoals);
 	}
 
+	showGoals()
+	{
+		const	popup	=	document.getElementById('popup-goal-selector');
+		const	goal	=	document.getElementsByClassName('color-box-goal');
+	
+		popup.style.display = 'flex';
+		for (let i = 0; i < goal.length; i++)
+		{
+			const	canvas = goal[i].getElementsByTagName('canvas');
+
+			for (let j = 0; j < canvas.length; j++)
+				canvas[j].remove();
+			goal[i].setAttribute('goalId', i);
+			goal[i].appendChild(this.showObject(availableGoals[i], goal[i].getBoundingClientRect()));
+			goal[i].removeEventListener('click', this.boundChangeGoal);
+			goal[i].addEventListener('click', this.boundChangeGoal);
+		}
+		popup.removeEventListener('click', this.boundhideGoalSelector);
+		popup.addEventListener('click', this.boundhideGoalSelector);
+	};
+
 	showObject(func, pos)
 	{
 		const	scene		= new THREE.Scene();
@@ -238,9 +249,12 @@ class goalSelecter
 		popup.style.display = 'none';
 		lastSelectedGoal = availableGoals[id];
 		this.selected = availableGoals[id];
-		this.scene.children[1].geometry.dispose();
-		this.scene.children[1].material.dispose();
-		this.scene.remove(this.scene.children[1]);
+		if (this.scene && this.scene.children && this.scene.children.length > 1)
+		{
+			this.scene.children[1].geometry.dispose();
+			this.scene.children[1].material.dispose();
+			this.scene.remove(this.scene.children[1]);
+		}
 		this.goal = this.selected(colorList[Math.floor(Math.random() * 100 % colorList.length)], true);
 		this.scene.add(this.goal);
 		this.camera.lookAt(this.goal.position);
@@ -265,7 +279,10 @@ class goalSelecter
 
 		for (let i = colorBoxGoal.length - 1; i >= 0; i--)
 		{
-			colorBoxGoal[i].getElementsByTagName('canvas')[0].remove();
+			const	canvas = colorBoxGoal[i].getElementsByTagName('canvas');
+
+			for (let j = 0; j < canvas.length; j++)
+				canvas[j].remove();
 			if (this.rendererList && this.rendererList[i])
 			{
 				this.rendererList[i].dispose();
@@ -301,6 +318,7 @@ class goalSelecter
 
 	dispose()
 	{
+		this.disposeGoalSelector();
 		if (this.renderer)
 		{
 			this.renderer.dispose();
@@ -329,6 +347,7 @@ class goalSelecter
 		}
 		this.scene = null;
 		actualGoalSelecter = null;
+		this.div.removeEventListener('click', this.boundshowGoals);
 	}
 }
 
diff --git a/docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js b/docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
index 99813af..44a7774 100644
--- a/docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
+++ b/docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 17:08:46 by madegryc          #+#    #+#             */
-/*   Updated: 2024/10/03 14:37:14 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/04 00:07:11 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -58,8 +58,6 @@ class LobbyPage
 		initButtonLaytout();
 		window.addEventListener('click', closePopUpWhenClickOutsite);
 		listSelectCard = document.getElementsByClassName('select-card');
-		document.getElementsByClassName('game-mode')[0].addEventListener('click', showGameMode);
-		document.getElementById('closePopupBtn').addEventListener('click', hideGameMode);
 		listSelectCard[0].addEventListener('click', selectGameModeOne);
 		listSelectCard[1].addEventListener('click', selectGameModeTwo);
 		listSelectCard[2].addEventListener('click', selectGameModeThree);
@@ -88,8 +86,6 @@ class LobbyPage
 		window.removeEventListener('click', closePopUpWhenClickOutsite);
 		window.removeEventListener('resize', movePopMenuLoginButton);
 		startButton.removeEventListener('click', startMode);
-		document.getElementsByClassName('game-mode')[0].removeEventListener('click', showGameMode);
-		document.getElementById('closePopupBtn').removeEventListener('click', hideGameMode);
 		window.removeEventListener('resize', ajustSearchUserList);
 		LiveChat.dispose();
 
@@ -202,9 +198,22 @@ function hideGameMode()
 
 function selectGameModeOne()
 {
-	document.getElementById('loginPopup').style.display = 'none';
-	document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[0].innerHTML;
 	const	menuList = document.getElementsByClassName('menuSelected');
+	const	gameModeDiv	= document.getElementsByClassName('game-mode')[0].children;
+
+	for (let i = 0; i < menuList.length; i++)
+	{
+		menuList[i].style.display = 'none';
+		gameModeDiv[i].classList.remove('mode-card');
+		gameModeDiv[i].classList.remove('mode-card-ns');
+	}
+	document.getElementsByClassName('menuSelected')[0].style.display = 'flex';
+	for (let i = 0; i < gameModeDiv.length; i++)
+	{
+		if (i != 0)
+			gameModeDiv[i].classList.add('mode-card-ns');
+	}
+	gameModeDiv[0].classList.add('mode-card');
 	for (let i = 0; i < menuList.length; i++)
 	{
 		menuList[i].style.display = 'none';
@@ -215,14 +224,22 @@ function selectGameModeOne()
 
 function selectGameModeTwo()
 {
-	document.getElementById('loginPopup').style.display = 'none';
-	document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[1].innerHTML;
-	const	menuList = document.getElementsByClassName('menuSelected');
+	const	menuList	= document.getElementsByClassName('menuSelected');
+	const	gameModeDiv	= document.getElementsByClassName('game-mode')[0].children;
+
 	for (let i = 0; i < menuList.length; i++)
 	{
 		menuList[i].style.display = 'none';
+		gameModeDiv[i].classList.remove('mode-card');
+		gameModeDiv[i].classList.remove('mode-card-ns');
 	}
 	document.getElementsByClassName('menuSelected')[1].style.display = 'flex';
+	for (let i = 0; i < gameModeDiv.length; i++)
+	{
+		if (i != 1)
+			gameModeDiv[i].classList.add('mode-card-ns');
+	}
+	gameModeDiv[1].classList.add('mode-card');
 	if (barSelector)
 		barSelector.dispose();
 	if (goalSelector)
@@ -242,13 +259,22 @@ function selectGameModeTwo()
 
 function selectGameModeThree()
 {
-	document.getElementById('loginPopup').style.display = 'none';
-	document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[2].innerHTML;
 	const	menuList = document.getElementsByClassName('menuSelected');
+	const	gameModeDiv	= document.getElementsByClassName('game-mode')[0].children;
+
 	for (let i = 0; i < menuList.length; i++)
 	{
 		menuList[i].style.display = 'none';
+		gameModeDiv[i].classList.remove('mode-card');
+		gameModeDiv[i].classList.remove('mode-card-ns');
 	}
+	document.getElementsByClassName('menuSelected')[2].style.display = 'flex';
+	for (let i = 0; i < gameModeDiv.length; i++)
+	{
+		if (i != 2)
+			gameModeDiv[i].classList.add('mode-card-ns');
+	}
+	gameModeDiv[2].classList.add('mode-card');
 	document.getElementById('bar1').innerHTML = '';
 	document.getElementById('goal1').innerHTML = '';
 	document.getElementsByClassName('menuSelected')[2].style.display = 'flex';
@@ -265,13 +291,22 @@ function selectGameModeThree()
 
 function selectGameModeFour()
 {
-	document.getElementById('loginPopup').style.display = 'none';
-	document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[3].innerHTML;
 	const	menuList = document.getElementsByClassName('menuSelected');
+	const	gameModeDiv	= document.getElementsByClassName('game-mode')[0].children;
+
 	for (let i = 0; i < menuList.length; i++)
 	{
 		menuList[i].style.display = 'none';
+		gameModeDiv[i].classList.remove('mode-card');
+		gameModeDiv[i].classList.remove('mode-card-ns');
 	}
+	document.getElementsByClassName('menuSelected')[3].style.display = 'flex';
+	for (let i = 0; i < gameModeDiv.length; i++)
+	{
+		if (i != 3)
+			gameModeDiv[i].classList.add('mode-card-ns');
+	}
+	gameModeDiv[3].classList.add('mode-card');
 	document.getElementById('bar2').innerHTML = '';
 	document.getElementById('goal2').innerHTML = '';
 	document.getElementsByClassName('menuSelected')[3].style.display = 'flex';
diff --git a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
index d1ef794..254001b 100644
--- a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
+++ b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
@@ -155,24 +155,6 @@ body {
 	gap: 20px;
 }
 
-.select-card{
-	margin: 30px;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	padding: 20px;
-	background-color: #d3d3d3;
-	color: #000;
-	height: 90px;
-	font-size: 1.2em;
-	transition: transform 0.3s ease;
-}
-
-.select-card:hover {
-	transform: scale(1.05);
-}
-
 .switch {
 	position: relative;
 }