Site

- Add skin selector in lobby page
    - change div with info and selectors in lobby page

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

@@ -74,6 +74,17 @@
 			</div>
 		</div>
 
+		<!--------- FOR MATHIS : I made some changes here ---------->
+
+		<div class="menuSelected" id="multiLocalSelected">
+			<div id="whatGame">
+				<p>The key to success is timing and precision, as you need to position your paddle correctly to deflect the ball at the right angle.</p>
+				<span class="line"></span>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet velit vitae lorem tempor auctor. In tempor ac ex ut finibus. Duis lobortis non justo eu venenatis.</p>
+			</div>
+		</div>
+
+		<div class="menuSelected" id="multiOnlineSelected">
 			<div id="whatGame">
 				<p>The key to success is timing and precision, as you need to position your paddle correctly to deflect the ball at the right angle.</p>
 				<span class="line"></span>
@@ -87,9 +98,29 @@
 				<div id="goal">
 					
 				</div>
-			
 			</div>
 		</div>
+
+		<div class="menuSelected" id="rankedSelected">
+			<div id="whatGame">
+				<p>Bonsoir non ?</p>
+			</div>
+			<div class="skin-select">
+				<!-- Make sure you have ids and classes to make multiple "bars" and "goals" -->
+			</div>
+		</div>
+
+		<div class="menuSelected" id="tournamentSelected">
+			<div id="whatGame">
+				<p>Bonsoir non ?</p>
+			</div>
+			<div class="skin-select">
+				<!-- Make sure you have ids and classes to make multiple "bars" and "goals" -->
+			</div>
+		</div>
+
+		<!--------------------- END OF CHANGES --------------------->
+	</div>
 </div>
 <div class="bottom">
 	<div class="buttonStartGame">

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/09/13 15:36:35 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/25 00:05:55 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -14,14 +14,25 @@ import * as THREE from '/static/javascript/three/build/three.module.js'
 
 let actualBarSelecor	= null;
 let actualGoalSelecter	= null;
-
+let	lastSelected		= null;
 class barSelecter
 {
 	scene			= null;
 	renderer		= null;
 	camera			= null;
-	ambiantLight	= new THREE.AmbientLight(0xffffff, 35);
+	spotLight		= new THREE.SpotLight(0xffffff, 5);
-	bar				= this.createBarPlayer(0xe3e3e3)
+	availableSkins		=	[
+		{id: 0, color: 0xff53aa, texture: null},
+		{id: 1, color: 0xaa24ea, texture: null},
+		{id: 2, color: 0x2c9c49, texture: null},
+		{id: 3, color: 0x101099, texture: null},
+		{id: 4, color: null, texture: '/static/img/skin/1.jpg'},
+		{id: 5, color: null, texture: '/static/img/skin/2.jpg'},
+		{id: 6, color: null, texture: '/static/img/skin/3.jpg'},
+		{id: 7, color: null, texture: '/static/img/skin/4.jpg'},
+	]
+	selected		= lastSelected ? lastSelected : this.availableSkins[0];
+	bar				= this.createBarPlayer(this.selected.color ? this.selected.color : this.selected.texture);
 
 	constructor(div)
 	{
@@ -32,19 +43,69 @@ class barSelecter
 	
 		this.scene.background = new THREE.Color(0x020202);
 		this.renderer.setSize(pos.width - 10, pos.height - 10);
-		this.scene.add(this.ambiantLight);
+		this.scene.add(this.spotLight);
 		this.camera.position.set(0.7, 0.5, 0.7);
+		this.spotLight.position.set(0.7, 0.5, 0.7);
 		div.appendChild(this.renderer.domElement);
 		actualBarSelecor = this;
 		this.scene.add(this.bar);
 		actualBarSelecor.camera.lookAt(actualBarSelecor.bar.position);
+		this.spotLight.target = this.bar;
+		this.spotLight.lookAt(this.bar.position);
 		this.renderer.setAnimationLoop(this.#loop);
+		div.addEventListener('click', () => {
+			const	popup	=	document.getElementById('popup-background');
+			const	skins	=	document.getElementsByClassName('color-box');
+		
+			popup.style.display = 'flex';
+			for (let i = 0; i < skins.length; i++)
+			{
+				skins[i].setAttribute('skinId', this.availableSkins[i].id);
+				if (this.availableSkins[i].color != null)
+					skins[i].style.backgroundColor = `#${this.availableSkins[i].color.toString(16)}`;
+				else
+					skins[i].style.backgroundImage = `url("${this.availableSkins[i].texture}")`
+				skins[i].removeEventListener('click', this.changeSkin.bind(this));
+				skins[i].addEventListener('click', this.changeSkin.bind(this));
+			}
+			popup.removeEventListener('click', this.hideSkinSelector);
+			popup.addEventListener('click', this.hideSkinSelector);
+		})
+	}
+
+	hideSkinSelector(event)
+	{
+		const	popup	=	document.getElementById('popup-background');
+
+		if (event.target.getAttribute('class') == 'popup-background')
+			popup.style.display = 'none';
+	}
+
+	changeSkin (event)
+	{
+		const	popup	=	document.getElementById('popup-background');
+	
+		const id = event.target.getAttribute('skinId');
+		popup.style.display = 'none';
+		console.log(this.bar);
+		this.bar.material.dispose();
+		lastSelected = this.availableSkins[id];
+		if (this.availableSkins[id].color != null)
+			this.bar.material = new THREE.MeshPhysicalMaterial({color: this.availableSkins[id].color});
+		else
+			this.bar.material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(this.availableSkins[id].texture)});
+		this.selected = this.availableSkins[id];
 	}
 
 	createBarPlayer(color)
 	{
 		const	geometry	= new THREE.BoxGeometry(1, 0.1, 0.1);
-		const material	= new THREE.MeshPhysicalMaterial({color: color});
+		let		material	= null;
+
+		if (typeof(color) == 'number')
+			material = new THREE.MeshPhysicalMaterial({color: color});
+		else
+			material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(color)});
 		const	mesh		= new THREE.Mesh(geometry, material);
 
 		mesh.castShadow = true;

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/09/22 23:43:07 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/24 23:56:38 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -64,10 +64,9 @@ class LobbyPage
 		{
 			document.body.children[i].style.animation = 'animShowMenuDiv 0.5s';
 		}
-		barSelector = new barSelecter(document.getElementById('bar'));
-		goalSelector = new goalSelecter(document.getElementById('goal'));
 		startButton.addEventListener('click', startMode);
 		methButton.addEventListener('click', goBackHome);
+		document.getElementsByClassName('menuSelected')[gameMode].style.display = 'flex';
 	}
 
 	static dispose()
@@ -180,28 +179,68 @@ function hideGameMode()
 function selectGameModeOne()
 {
 	document.getElementById('loginPopup').style.display = 'none';
+	if (gameMode == 0)
+		return ;
 	document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[0].innerHTML;
+	const	menuList = document.getElementsByClassName('menuSelected');
+	for (let i = 0; i < menuList.length; i++)
+	{
+		menuList[i].style.display = 'none';
+	}
+	document.getElementsByClassName('menuSelected')[0].style.display = 'flex';
 	gameMode = 0;
 }
 
 function selectGameModeTwo()
 {
 	document.getElementById('loginPopup').style.display = 'none';
+	if (gameMode == 1)
+		return ;
 	document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[1].innerHTML;
+	const	menuList = document.getElementsByClassName('menuSelected');
+	for (let i = 0; i < menuList.length; i++)
+	{
+		menuList[i].style.display = 'none';
+	}
+	document.getElementsByClassName('menuSelected')[1].style.display = 'flex';
+	if (barSelector)
+		barSelector.dispose();
+	if (goalSelector)
+		goalSelector.dispose();
+	document.getElementById('bar').innerHTML = '';
+	document.getElementById('goal').innerHTML = '';
+	barSelector = new barSelecter(document.getElementById('bar'));
+	goalSelector = new goalSelecter(document.getElementById('goal'));
 	gameMode = 1;
 }
 
 function selectGameModeThree()
 {
 	document.getElementById('loginPopup').style.display = 'none';
+	if (gameMode == 2)
+		return ;
 	document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[2].innerHTML;
+	const	menuList = document.getElementsByClassName('menuSelected');
+	for (let i = 0; i < menuList.length; i++)
+	{
+		menuList[i].style.display = 'none';
+	}
+	document.getElementsByClassName('menuSelected')[2].style.display = 'flex';
 	gameMode = 2;
 }
 
 function selectGameModeFour()
 {
 	document.getElementById('loginPopup').style.display = 'none';
+	if (gameMode == 3)
+		return ;
 	document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[3].innerHTML;
+	const	menuList = document.getElementsByClassName('menuSelected');
+	for (let i = 0; i < menuList.length; i++)
+	{
+		menuList[i].style.display = 'none';
+	}
+	document.getElementsByClassName('menuSelected')[3].style.display = 'flex';
 	gameMode = 3;
 }
 

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

@@ -74,8 +74,6 @@ body {
 	justify-content: space-between;
 }
 
-/* POUR EDDY : CHANGE HERE FOR SELECTING THE SKIN */
-
 .popup-background {
 	display: none;
 	position: fixed;
@@ -86,6 +84,7 @@ body {
 	background-color: rgba(0, 0, 0, 0.5);
 	justify-content: center;
 	align-items: center;
+	z-index: 700;
 }
 
 .popup-skin {
@@ -425,3 +424,12 @@ body {
 	border-radius: 50%;
 	margin-left: 10px;
 }
+
+.menuSelected {
+	display: flex;
+	flex-direction: row;
+}
+
+.menuSelected {
+	display: none;
+}