merge

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

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   Map.js                                             :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 14:52:55 by hubourge          #+#    #+#             */
-/*   Updated: 2024/09/17 13:59:13 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/17 17:23:53 by hubourge         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -55,6 +55,9 @@ class Map
 	ballObject = null;
 	mapLength = 0;
 	banner = null;
+	firework = null;
+	fireworkMixer = null;
+	fireworkAnimations = null;
 	centerPos = {
 		x: -1,
 		y: -1,
@@ -474,6 +477,26 @@ class Map
 		scene.remove(this.banner);
 	}
 
+	animationGoal()
+	{
+		loader.load('/static/models3D/multiOnlineGame/fireworkv1.glb', (gltf) => {
+			this.firework = gltf.scene.children[0];
+			this.fireworkAnimations = gltf.animations; // Récupérez les animations du modèle
+			gltf = null;
+			this.firework.material = new THREE.MeshPhysicalMaterial({color: 0xff0000});
+			scene.add(this.firework);
+
+			this.fireworkMixer = new THREE.AnimationMixer(this.firework);
+			this.fireworkAnimations.forEach((clip) => {
+				this.fireworkMixer.clipAction(clip).play(); // Joue toutes les animations
+			});
+
+			console.log(this.firework);
+		}, undefined, function (error) {
+			console.error(error);
+		});
+	}
+
 	#animationGravityChanger(group, onTop)
 	{
 		let geometryGC			= new THREE.TorusGeometry(1.5, 0.05, 12, 24);
@@ -541,6 +564,9 @@ 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")

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

@@ -3,15 +3,17 @@
 /*                                                        :::      ::::::::   */
 /*   multiOnlineGamePage.js                             :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:53:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/17 15:38:02 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/17 18:02:20 by hubourge         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import { createNotification as CN } from "/static/javascript/notification/main.js";
 import * as THREE from '/static/javascript/three/build/three.module.js'
+import Stats from '/static/javascript/three/examples/jsm/libs/stats.module.js'
+import { OrbitControls } from '/static/javascript/three/examples/jsm/Addons.js';
 import { sendRequest } from "/static/javascript/websocket.js";
 import { Player } from '/static/javascript/multiOnlineGame/Player.js'
 import { Map } from '/static/javascript/multiOnlineGame/Map.js'
@@ -55,6 +57,15 @@ let ambiantLight		= null;
 let opponent			= null;
 let	interval			= null;
 
+// ------------------- (need to be remove) -------------------- //
+const stats = new Stats();
+stats.showPanel(0);
+document.body.appendChild(stats.dom);
+
+const cameraTmp = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight);
+let controls = null;
+// ------------------------------------------------------------ //
+
 class MultiOnlineGamePage
 {
 	static create()
@@ -88,6 +99,12 @@ class MultiOnlineGamePage
 		ball.initMoveBallTmp();
 		map.ballObject = ball.object;
 
+		//////////////////////////
+		controls = new OrbitControls(cameraTmp, renderer.domElement)
+		cameraTmp.position.set(5, 3, 5);
+		controls.target = new THREE.Vector3(map.centerPos.x, 0, map.centerPos.z);
+		//////////////////////////
+
 
 		document.addEventListener('keypress', (e) => {
 			if (e.key == 'g')
@@ -99,7 +116,10 @@ class MultiOnlineGamePage
 			if (e.key == 'p')
 				map.putVideoOnCanvas(0, null);
 			if (e.key == 'o')
+			{
 				map.putVideoOnCanvas(3, 'goal');
+				map.animationGoal();
+			}
 			if (e.key == 'i')
 				map.putVideoOnCanvas(3, 'outstanding');
 			if (e.key == 'u')
@@ -182,11 +202,25 @@ function changeBarColor(bar, color)
 
 function loop()
 {
+	/////////////
+	stats.begin();
+	/////////////
+
 	player.update();
 	opponent.update();
 	ball.update();
 	map.update(ball);
+	if (debug)
+	{
+		controls.update();
+		renderer.render(scene, cameraTmp);
+	}
+	else
 		renderer.render(scene, player.camera);
+
+	/////////////
+	stats.end();
+	////////////
 }
 
 export { MultiOnlineGamePage, opponent, ball };