Game multi

- Add score board box
    - Implement scoring evolution on board
    - Add a recreat method while goal
    - Start to implement goal animation (not working)
    - Add temporary imput 'l' and 'k' to increment player score

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

@@ -13,6 +13,9 @@
 import { GLTFLoader } from '/static/javascript/three/examples/jsm/loaders/GLTFLoader.js';
 import * as THREE from '/static/javascript/three/build/three.module.js'
 import { Video } from '/static/javascript/multiOnlineGame/Video.js';
+import { GUI } from '/static/javascript/three/examples/jsm/libs/lil-gui.module.min.js';
+import { player, opponent, ball} from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js';
+import { Ball } from '/static/javascript/multiOnlineGame/Ball.js'
 
 let loader				= null;
 let	scene				= null;
@@ -24,6 +27,11 @@ let materialCanvas		= null;
 let textureLoaderPlane	= null;
 let texturePlane		= null;
 let ctx					= null;
+let fireworkMixer		= null;
+let canvasText			= null;
+let contextCanvasText	= null;
+let textureCanvasText	= null;
+let	score				= {player: 0, opponent: 0};
 
 let path = [
 	{name: 'goal', 			onChoice: true, src:'/static/video/multiOnlineGamePage/goal2.webm', blob: null},
@@ -55,9 +63,6 @@ class Map
 	ballObject = null;
 	mapLength = 0;
 	banner = null;
-	firework = null;
-	fireworkMixer = null;
-	fireworkAnimations = null;
 	centerPos = {
 		x: -1,
 		y: -1,
@@ -131,6 +136,29 @@ class Map
 		scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight"));
 		if (obstacles)
 			this.#generateObstacle();
+
+		{ // A retirer
+			/* Style de couleur why not
+			0xFFCCCC
+			0xFF9999
+			0xFF6666
+			0xFF3333
+			0xCC0000
+
+			0xCCFFCC
+			0x99FF99
+			0x66FF66
+			0x33FF33
+			0x009900
+
+			0xCCCCFF
+			0x9999FF
+			0x6666FF
+			0x3333FF
+			0x0000CC
+			*/
+		}
+		this.putScoreboard(0xCCCCFF);
 	};
 
 	#createPlanes(x, y, rot, name, isBottom, visual)
@@ -185,7 +213,7 @@ class Map
 					this.arrObject[i].mesh.material.color.set(texture);
 			}
 		}
-	}
+	};
 
 	#createWall(x, y, z, name)
 	{
@@ -331,15 +359,82 @@ class Map
 		else
 			meshWallObs.position.set(x, 0.4, y);
 		return (meshWallObs);
-	}
+	};
+
+	putScoreboard(color)
+	{
+		this.#clearScoreboard();
+		let materialScoreboard	= null;
+		let geometryScoreboard1	= null;
+		let meshScoreboard1		= null;
+		let geometryScoreboard2	= null;
+		let meshScoreboard2		= null;
+
+		let materialText		= null;
+		let geometryText1		= null;
+		let meshText1			= null;
+		let geometryText2		= null;
+		let meshText2			= null;
+
+		let height = 1.8;
+		let width = 6;
+		let depth = 0.2;
+
+		materialScoreboard	= new THREE.MeshPhysicalMaterial({color: color});
+		geometryScoreboard1	= new THREE.BoxGeometry(width, height, depth);
+		meshScoreboard1		= new THREE.Mesh(geometryScoreboard1, materialScoreboard);
+		geometryScoreboard2	= new THREE.BoxGeometry(width, height, depth);
+		meshScoreboard2		= new THREE.Mesh(geometryScoreboard2, materialScoreboard);
+
+		canvasText = document.createElement('canvas');
+		contextCanvasText = canvasText.getContext('2d');
+		canvasText.width = 512 * 2;
+		canvasText.height = 256 * 2;
+    	drawScore(score);
+		textureCanvasText = new THREE.CanvasTexture(canvasText);
+		
+		materialText		= new THREE.MeshBasicMaterial({ map: textureCanvasText });
+		geometryText1		= new THREE.PlaneGeometry(width - 0.15, height - 0.15);
+		meshText1			= new THREE.Mesh(geometryText1, materialText);
+		geometryText2		= new THREE.PlaneGeometry(width - 0.15, height - 0.15);
+		meshText2			= new THREE.Mesh(geometryText2, materialText);
+
+		meshScoreboard1.rotation.y = Math.PI;
+		meshText1.rotation.y = Math.PI;
+		meshScoreboard1.position.set(0, 1.65, 9.5);
+		meshText1.position.set(0, 1.65, 9.5 - depth / 2 - 0.05);
+		meshScoreboard2.position.set(0, 1.65, -9.5);
+		meshText2.position.set(0, 1.65, - 9.5 + depth / 2 + 0.05);
+
+		scene.add(meshScoreboard1);
+		scene.add(meshScoreboard2);
+		scene.add(meshText1);
+		scene.add(meshText2);
+		this.arrObject.push({mesh: meshScoreboard1, name: "", type: "scoreboard"});
+		this.arrObject.push({mesh: meshScoreboard2, name: "", type: "scoreboard"});
+		this.arrObject.push({mesh: meshText1, name: "", type: "scoreboard"});
+		this.arrObject.push({mesh: meshText2, name: "", type: "scoreboard"});
+	};
+
+	#clearScoreboard()
+	{
+		for (let i = 0; i < this.arrObject.length; i++)
+		{
+			if (this.arrObject[i].type == "scoreboard")
+			{
+				if (this.arrObject[i].mesh.geometry)
+					this.arrObject[i].mesh.geometry.dispose();
+				if (this.arrObject[i].mesh.material)
+					this.arrObject[i].mesh.material.dispose();
+				scene.remove(this.arrObject[i].mesh);
+				this.arrObject[i].mesh.geometry = null;
+				this.arrObject[i].mesh.material = null;
+				this.arrObject[i].mesh = null;
+				this.arrObject.splice(i, 1);
+			}
+		}
+	};
 
-	/* Todo (Hugo) :
-		- Faire une zone Player banner (importer un model blender)
-		- Faire une zone pour les pub 							 		(ok)
-		- Effet gros pixel 												(ok)
-		- Effet de lumière en 2d (essayer shader ou filtre)
-		- Preparer differents events 									(ok)
-	*/
 	putVideoOnCanvas(nbImage, vNameNb)
 	{
 		this.#clearVideoCanvas();
@@ -440,7 +535,7 @@ class Map
 		}, undefined, function ( error ) {
 			console.error( error );
 		} );
-	}
+	};
 
 	#clearVideoCanvas()
 	{
@@ -475,27 +570,31 @@ class Map
 			interval2 = null;
 		}
 		scene.remove(this.banner);
-	}
+	};
 
 	animationGoal()
 	{
+		let actions = {};
+
 		loader.load('/static/models3D/multiOnlineGame/fireworkv1.glb', (gltf) => {
-			this.firework = gltf.scene.children[0];
+			fireworkMixer = new THREE.AnimationMixer(gltf.scene);
-			this.fireworkAnimations = gltf.animations; // Récupérez les animations du modèle
+			for (let value of gltf.animations){
-			gltf = null;
+				let action = fireworkMixer.clipAction(value);
-			this.firework.material = new THREE.MeshPhysicalMaterial({color: 0xff0000});
+				action.play();
-			scene.add(this.firework);
+			}
-
+			scene.add(gltf.scene);
-			this.fireworkMixer = new THREE.AnimationMixer(this.firework);
+			fireworkAnimate();
-			this.fireworkAnimations.forEach((clip) => {
-				this.fireworkMixer.clipAction(clip).play(); // Joue toutes les animations
-			});
-
-			console.log(this.firework);
 		}, undefined, function (error) {
 			console.error(error);
 		});
-	}
+
+		let fireworkAnimate = function ()
+		{
+			console.log("fireworkAnimate");
+			requestAnimationFrame(fireworkAnimate);
+			fireworkMixer.update(0.016);
+		}
+	};
 
 	#animationGravityChanger(group, onTop)
 	{
@@ -522,7 +621,7 @@ class Map
 			if (materialGC.opacity == 0)
 				clearInterval(interval);
 		}, 10);
-	}
+	};
 
 	#generateObstacle()
 	{
@@ -564,9 +663,6 @@ class Map
 
 	update(ball)
 	{
-		if (this.mixer) {
-			this.mixer.update(0.016); // Le deltaTime, ajustez selon le temps entre les frames
-		}
 		for (let i = 0; this.arrObject && i < this.arrObject.length; i++)
 		{
 			if (this.arrObject[i].name == "wallLeft")
@@ -643,6 +739,34 @@ class Map
 			}
 		}
 	};
+
+	updateScore(name, score)
+	{
+		if (name == "player")
+			score.player++;
+		else if (name == "opponent")
+			score.opponent++;
+		drawScore(score);
+		textureCanvasText.needsUpdate = true;
+	}
+
+	reCreate(name)
+	{
+		this.updateScore(name, score);
+		ball.resetPosBall();
+		player.resetPosPlayer();
+		player.reserCameraPlayer();
+		opponent.resetPosOpponent();
+	};
 };
 
-export { Map };
+function drawScore(score)
+{
+	contextCanvasText.clearRect(0, 0, canvasText.width, canvasText.height);
+	contextCanvasText.fillStyle = "white";
+	contextCanvasText.font = "bold 350px Arial";
+	contextCanvasText.textAlign = "center";
+	contextCanvasText.fillText(score.player + " - " + score.opponent, canvasText.width / 2, canvasText.height - canvasText.height / 4);
+};
+
+export { Map };

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

@@ -11,6 +11,7 @@
 /* ************************************************************************** */
 
 let opponentExist = false;
+let mapLength = 0;
 
 class Opponent
 {
@@ -33,6 +34,7 @@ class Opponent
 		opponentExist = true;
 		this.object = object;
 		this.object.position.set(0, 0.3, -map.mapLength / 2 + 0.2);
+		mapLength = map.mapLength;
 	}
 
 	dispose()
@@ -44,6 +46,11 @@ class Opponent
 	{
 	}
 
+	resetPosOpponent()
+	{
+		this.object.position.set(0, 0.3, -mapLength / 2 + 0.2);
+	}
+
 	movePlayer(content)
 	{
 		const lerp			= (start, end, t) => start + (end - start) * t;

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

@@ -46,6 +46,7 @@ import * as THREE from '/static/javascript/three/build/three.module.js'
 let	playerExist			= false;
 let	isOnPointAnim		= false;
 let	pressedButton		= [];
+let mapLength			= 0;
 
 class Player
 {
@@ -70,6 +71,7 @@ class Player
 		this.limits = map.playerLimits;
 		this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000);
 		this.object.position.set(0, this.limits.down, map.mapLength / 2 - 0.2);
+		mapLength = map.mapLength;
 		this.setCameraPosition(
 			this.object.position.x,
 			this.object.position.y + 0.7,
@@ -92,6 +94,20 @@ class Player
 			clearInterval(interval);
 	}
 
+	resetPosPlayer()
+	{
+		this.object.position.set(0, this.limits.down, mapLength / 2 - 0.2);
+	}
+
+	reserCameraPlayer()
+	{
+		this.setCameraPosition(
+			this.object.position.x,
+			this.object.position.y + 0.7,
+			this.object.position.z + 1.5
+		);
+	}
+
 	pointAnimation(map)
 	{
 		const	tmpCamera	= new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);

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

@@ -45,6 +45,9 @@ Controls :
 	- u : 16 video
 	- y : 8 video
 	- t : 4 video
+
+	- l : recreate et augmente le score de player
+	- k : recreate et augmente le score de opponent
 */
 
 let scene				= null;
@@ -107,7 +110,6 @@ class MultiOnlineGamePage
 		controls.target = new THREE.Vector3(map.centerPos.x, 0, map.centerPos.z);
 		//////////////////////////
 
-
 		document.addEventListener('keypress', (e) => {
 			if (e.key == 'g')
 				player.pointAnimation(map);
@@ -130,6 +132,10 @@ class MultiOnlineGamePage
 				map.putVideoOnCanvas(2, 3);
 			if (e.key == 't')
 				map.putVideoOnCanvas(1, 3);
+			if (e.key == 'l')
+				map.reCreate("player");
+			if (e.key == 'k')
+				map.reCreate("opponent");
 		})
 
 		renderer.setAnimationLoop(loop)
@@ -225,4 +231,4 @@ function loop()
 	////////////
 }
 
-export { MultiOnlineGamePage, opponent, ball };
+export { MultiOnlineGamePage, player, opponent, ball };