Site/Game

- goal selector finish | waiting for server

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

@@ -46,7 +46,7 @@
 
 <div class="popup-background" id="popup-goal-selector">
 	<div class="popup-skin">
-		<h1>Select your skin</h1>
+		<h1>Select your goal object</h1>
 		<div class="color-grid">
 			<div class="color-box color-box-goal"></div>
 			<div class="color-box color-box-goal"></div>

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 04:30:32 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/03 14:20:12 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -162,15 +162,17 @@ class barSelecter
 
 class goalSelecter
 {
-	scene			= null;
+	scene					= null;
-	renderer		= null;
+	renderer				= null;
-	camera			= null;
+	camera					= null;
-	selected		= lastSelectedGoal ? lastSelectedGoal : availableGoals[0];
+	selected				= lastSelectedGoal ? lastSelectedGoal : availableGoals[0];
-	ambiantLight	= new THREE.AmbientLight(0xffffff, 35);
+	ambiantLight			= new THREE.AmbientLight(0xffffff, 35);
-	goal			= this.selected(colorList[Math.floor(Math.random() * 100 % colorList.length)], true);
+	goal					= this.selected(colorList[Math.floor(Math.random() * 100 % colorList.length)], true);
-	rendererList	= [];
+	rendererList			= [];
-	sceneList		= [];
+	sceneList				= [];
-	cameraList		= [];
+	cameraList				= [];
+	boundChangeGoal			= this.changeGoal.bind(this);
+	boundhideGoalSelector	= this.hideGoalSelector.bind(this);
 
 	constructor(div)
 	{
@@ -179,6 +181,7 @@ class goalSelecter
 		this.renderer	= new THREE.WebGLRenderer({antialias: true});
 		this.camera		= new THREE.PerspectiveCamera(60, (pos.width - 10) / (pos.height - 10));
 	
+		lastSelectedGoal = this.selected;
 		this.scene.background = new THREE.Color(0x020202);
 		this.renderer.setSize(pos.width - 10, pos.height - 10);
 		this.scene.add(this.ambiantLight);
@@ -190,18 +193,18 @@ class goalSelecter
 		this.renderer.setAnimationLoop(this.#loop.bind(this));
 		div.addEventListener('click', () => {
 			const	popup	=	document.getElementById('popup-goal-selector');
-			const	skins	=	document.getElementsByClassName('color-box-goal');
+			const	goal	=	document.getElementsByClassName('color-box-goal');
 		
 			popup.style.display = 'flex';
-			for (let i = 0; i < skins.length; i++)
+			for (let i = 0; i < goal.length; i++)
 			{
-				skins[i].setAttribute('goalId', i);
+				goal[i].setAttribute('goalId', i);
-				skins[i].appendChild(this.showObject(availableGoals[i], skins[i].getBoundingClientRect()));
+				goal[i].appendChild(this.showObject(availableGoals[i], goal[i].getBoundingClientRect()));
-				skins[i].removeEventListener('click', this.boundChangeSkin);
+				goal[i].removeEventListener('click', this.boundChangeGoal);
-				skins[i].addEventListener('click', this.boundChangeSkin);
+				goal[i].addEventListener('click', this.boundChangeGoal);
 			}
-			popup.removeEventListener('click', this.hideGoalSelector);
+			popup.removeEventListener('click', this.boundhideGoalSelector);
-			popup.addEventListener('click', this.hideGoalSelector);
+			popup.addEventListener('click', this.boundhideGoalSelector);
 		});
 	}
 
@@ -227,27 +230,60 @@ class goalSelecter
 		return (renderer.domElement)
 	}
 
-	changeGoal (event)
+	changeGoal(event)
 	{
-		const	popup	=	document.getElementById('popup-skin-selector');
+		const	popup	=	document.getElementById('popup-goal-selector');
 	
-		const id = event.target.getAttribute('goalId');
+		const id = event.target.parentElement.getAttribute('goalId');
 		popup.style.display = 'none';
-		this.bar.material.dispose();
 		lastSelectedGoal = availableGoals[id];
-		// if (availableSkins[id].color != null)
-		// 	this.bar.material = new THREE.MeshPhysicalMaterial({color: availableSkins[id].color});
-		// else
-		// 	this.bar.material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture)});
 		this.selected = availableGoals[id];
+		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);
+		this.disposeGoalSelector();
 	}
 
 	hideGoalSelector(event)
 	{
-		const	popup	=	document.getElementById('popup-skin-selector');
+		const	popup	=	document.getElementById('popup-goal-selector');
 
-		if (event.target.getAttribute('id') == 'popup-skin-selector')
+		if (event.target.getAttribute('id') == 'popup-goal-selector')
+		{
+			this.disposeGoalSelector();
 			popup.style.display = 'none';
+		}
+	}
+	
+	disposeGoalSelector()
+	{
+		const	colorBoxGoal	=	document.getElementsByClassName('color-box-goal');
+
+
+		for (let i = colorBoxGoal.length - 1; i >= 0; i--)
+		{
+			colorBoxGoal[i].getElementsByTagName('canvas')[0].remove();
+			if (this.rendererList && this.rendererList[i])
+			{
+				this.rendererList[i].dispose();
+				this.rendererList[i].forceContextLoss();
+				this.sceneList[i].children.forEach(child => {
+					if (child.geometry)
+						child.geometry.dispose();
+					if (child.material)
+						child.material.dispose();
+					if (child.texture)
+						child.texture.dispose();
+					this.scene.remove(child);
+				});
+				this.rendererList.splice(i, 1);
+				this.sceneList.splice(i, 1);
+				this.cameraList.splice(i, 1);
+			}
+		}
 	}
 
 	#loop()
@@ -296,4 +332,4 @@ class goalSelecter
 	}
 }
 
-export { barSelecter, goalSelecter, lastSelected, availableSkins}
+export { barSelecter, goalSelecter, lastSelected, availableSkins, lastSelectedGoal, availableGoals };

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 03:00:53 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/03 14:37:14 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -30,7 +30,7 @@ let	gameMode		= 0;
 let barSelector		= null;
 let goalSelector	= null;
 let timeout			= null;
-let	layoutSelected	= {US: false, FR: false};
+let	layoutSelected	= {US: true, FR: false};
 
 class LobbyPage
 {

docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 14:52:55 by hubourge          #+#    #+#             */
-/*   Updated: 2024/10/03 03:14:28 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/03 14:40:41 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -680,43 +680,14 @@ class Map
 		scene.remove(this.banner);
 	};
 
-	animationGoal(cordX, cordY, cordZ, nameObject)
+	animationGoal(cordX, cordY, cordZ, nameObject, funcCreateObject)
 	{
 		this.#clearAnimationGoal();
 
 		let objectList = [];
 
-		if (nameObject == "triangle")
+		for (let i = 0; i < 6; i++)
-		{
+			objectList.push(funcCreateObject(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
-			for (let i = 0; i < 6; i++)
-				objectList.push(createTriangle(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
-		}
-		else if (nameObject == "cylinder")
-		{
-			for (let i = 0; i < 6; i++)
-				objectList.push(createCylinder(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
-		}
-		else if (nameObject == "star")
-		{
-			for (let i = 0; i < 6; i++)
-				objectList.push(createStar(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
-		}
-		else if (nameObject == "box")
-		{
-			for (let i = 0; i < 6; i++)
-				objectList.push(createBox(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
-		}
-		else if (nameObject == "rectangle")
-		{
-			for (let i = 0; i < 6; i++)
-				objectList.push(createRectangle(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
-		}
-		else if (nameObject == "ring")
-		{
-			for (let i = 0; i < 6; i++)
-				objectList.push(createRing(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
-		}
-
 		for (let i = 0; i < objectList.length; i++)
 		{
 			objectList[i].position.set(cordX, cordY, cordZ);

docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js

@@ -6,12 +6,13 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:30:31 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/03 01:09:57 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/03 14:48:51 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import * as THREE from '/static/javascript/three/build/three.module.js'
 import { layoutSelected } from '/static/javascript/lobbyPage/main.js'
+import { lastSelectedGoal, availableGoals } from '/static/javascript/lobbyPage/3d.js';
 
 /*
 	Explication du code :
@@ -53,20 +54,21 @@ let	key					= null;
 
 class Player
 {
-	isUp			= false;
+	isUp				= false;
-	object			= null;
+	object				= null;
-	camera			= null;
+	camera				= null;
-	speed			= 4;
+	speed				= 4;
-	cameraFixed		= false;
+	cameraFixed			= false;
-	interval		= null;
+	interval			= null;
-	limits			= {};
+	limits				= {};
-	previousTime	= Date.now();	
+	previousTime		= Date.now();	
-	deltaTime		= 1;
+	deltaTime			= 1;
-	mapVar			= null;
+	mapVar				= null;
-	opponent		= null;
+	opponent			= null;
 	playerGoalAnimation = null;
+	opponentGoal		= null;
 	
-	constructor (object, map, opponent, indexGoalAnimation)
+	constructor (object, map, opponent, indexGoalAnimation, goalIdOppenent)
 	{
 		this.mapVar = map;
 		this.opponent = opponent;
@@ -77,6 +79,9 @@ class Player
 		pressedButton = [];
 		console.log(layoutSelected);
 		key			= {up: layoutSelected.US ? "w" : "z", down: "s", left: layoutSelected.US ? "a" : "q", right: "d"};
+		console.warn("Remettre opponentGoal = availableGoals[goalIdOppenent] qaund le serveur le permettra");
+		this.opponentGoal = availableGoals[0];
+		// opponentGoal = availableGoals[goalIdOppenent];
 		this.object = object;
 		this.limits = map.playerLimits;
 		this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000);
@@ -180,7 +185,8 @@ class Player
 			}, 10);
 
 			setTimeout(() => {
-				map.animationGoal(this.object.position.x, this.object.position.y, this.object.position.z, this.playerGoalAnimation);
+				console.log("Player : " + lastSelectedGoal);
+				map.animationGoal(this.object.position.x, this.object.position.y, this.object.position.z, this.playerGoalAnimation, lastSelectedGoal ? lastSelectedGoal : availableGoals[0]);
 			}, 1000);
 
 			setTimeout(() => {
@@ -241,9 +247,9 @@ class Player
 				tmpCamera.updateProjectionMatrix();
 			}, 10);
 
+			console.log("Oppenent : " + this.opponentGoal);
 			setTimeout(() => {
-				map.animationGoal(this.opponent.object.position.x, this.opponent.object.position.y,
+				map.animationGoal(this.opponent.object.position.x, this.opponent.object.position.y, this.opponent.object.position.z, this.opponent.playerGoalAnimation, this.opponentGoal);
-					this.opponent.object.position.z, this.opponent.playerGoalAnimation);
 			}, 1000);
 			
 			setTimeout(() => {

docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js

@@ -3,14 +3,14 @@
 /*                                                        :::      ::::::::   */
 /*   multiOnlineGamePage.js                             :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:53:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/30 17:30:15 by hubourge         ###   ########.fr       */
+/*   Updated: 2024/10/03 14:27:34 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
-import { availableSkins } from '/static/javascript/lobbyPage/3d.js';
+import { availableSkins, lastSelectedGoal } from '/static/javascript/lobbyPage/3d.js';
 import * as THREE from '/static/javascript/three/build/three.module.js'
 import { OrbitControls } from '/static/javascript/three/examples/jsm/controls/OrbitControls.js'
 import { sendRequest } from "/static/javascript/websocket.js";
@@ -75,6 +75,7 @@ class MultiOnlineGamePage
 {
 	static create(skin)
 	{
+		console.log(lastSelectedGoal);
 		if (!skin)
 			skin = {player: 0, opponent: 0};
 		const bar1		= createBarPlayer(availableSkins[skin.player]);
@@ -89,7 +90,7 @@ class MultiOnlineGamePage
 		renderer.domElement.style.animation = 'fadeOutStartGames 1s';
 		renderer.domElement.style.filter = 'brightness(1)';
 		opponent				= new Opponent(bar2, map, Math.floor(Math.random() * 100 % 6));
-		player					= new Player(bar1, map, opponent, Math.floor(Math.random() * 100 % 6));
+		player					= new Player(bar1, map, opponent, Math.floor(Math.random() * 100 % 6), skin.goalId);
 		spotLight				= new THREE.SpotLight(0xffffff, 10000, 0, 0.2);
 		spotLight.castShadow	= true;
 		ambiantLight			= new THREE.AmbientLight(0xffffff, 0.5);

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

@@ -6,11 +6,11 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/14 21:20:45 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/03 01:21:20 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/03 14:35:54 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
-import { lastSelected } from '/static/javascript/lobbyPage/3d.js';
+import { lastSelected, lastSelectedGoal, availableGoals } from '/static/javascript/lobbyPage/3d.js';
 import { sendRequest } from "/static/javascript/websocket.js";
 import { pageRenderer } from '/static/javascript/main.js'
 
@@ -27,6 +27,7 @@ class WaitingGamePage
 		const	isTournament	= opponentInfo && typeof(opponentInfo) != 'boolean' && opponentInfo.isTournament;
 		let		text			= sentence.innerText;
 		let		points			= "";
+		let		goalId			= goalIdSelect();
 
 		document.body.style.opacity = 1;
 		for (let i = 0; i < document.body.children.length; i++)
@@ -44,9 +45,9 @@ class WaitingGamePage
 		}, 500);
 		timeout = setTimeout(() => {
 			if (opponentInfo && typeof(opponentInfo) != 'boolean')
-				sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, opponent: opponentInfo.id});
+				sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, goalId: goalId, opponent: opponentInfo.id});
 			else
-				sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, isRanked: opponentInfo ? true : false});
+				sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, goalId: goalId, isRanked: opponentInfo ? true : false});
 			timeout = null;
 		}, isTournament ? 1500 : 500);
 		if (!opponentInfo || !isTournament)
@@ -89,7 +90,7 @@ class WaitingGamePage
 			setTimeout(() => {
 				document.body.style.animation = 'anim3 0.5s';
 				document.body.style.opacity = 0;
-				pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected ? lastSelected.id : 0, opponent: content.skin});
+				pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected ? lastSelected.id : 0, opponent: content.skin, opponentGoaldId: content.goalId});
 			}, 1000);
 		}, 500);
 		document.body.removeChild(returnButton);
@@ -120,4 +121,14 @@ function returnToLobby()
 	}, 500);
 }
 
+function goalIdSelect()
+{
+	for (let i = 0; i < availableGoals.length; i++)
+	{
+		if (availableGoals[i] == lastSelectedGoal)
+			return (i);
+	}
+	return (0);
+}
+
 export { WaitingGamePage };