From c2a85a8ff512bb396df258ebd4dd3c6aa7f16fbc Mon Sep 17 00:00:00 2001
From: Kum1ta <eddydhj@gmail.com>
Date: Tue, 19 Nov 2024 21:53:36 +0100
Subject: [PATCH] Game     - fix bug vr mode     - remove some useless function

---
 .../static/javascript/multiOnlineGame/Map.js  | 64 +------------------
 .../javascript/multiOnlineGame/Opponent.js    | 46 +++++++++----
 .../javascript/multiOnlineGame/Player.js      | 10 +--
 .../multiOnlineGame/multiOnlineGamePage.js    | 42 ++++++++++--
 4 files changed, 76 insertions(+), 86 deletions(-)

diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
index 5e49ca7..1b62f3f 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   Map.js                                             :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 14:52:55 by hubourge          #+#    #+#             */
-/*   Updated: 2024/11/19 15:10:55 by hubourge         ###   ########.fr       */
+/*   Updated: 2024/11/19 16:35:13 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -802,44 +802,6 @@ class Map
 		}
 	}
 
-	#generateObstacle()
-	{
-		const wallPos = [
-			{ x: 1, y: 0, z: 1, onTop: false},
-			{ x: 1, y: 0, z: 1, onTop: true},
-			{ x: -1, y: 0, z: 1, onTop: false},
-			{ x: -1, y: 0, z: 1, onTop: true}
-		];
-		for (let i = 0; i < wallPos.length; i++)
-		{
-			if (Math.random() < 0.5)
-				scene.add(this.#createWallObstacle(wallPos[i].x, wallPos[i].y, wallPos[i].z, wallPos[i].onTop));
-		}
-
-		const type = "gravityChanger";
-		const typeNameBottom = "jumperBottom";
-		const typeNameTop = "jumperTop";
-		const jumperPos = [
-			{ x: -1.5, y: 0.2, z: this.mapLength / 4, type: type, typeName: typeNameBottom, onTop: false},
-			{ x: -1.5, y: 3.2, z: this.mapLength / 4, type: type, typeName: typeNameTop, onTop: true},
-			{ x: 1.5, y: 0.2, z: this.mapLength / 4, type: type, typeName: typeNameBottom, onTop: false},
-			{ x: 1.5, y: 3.2, z: this.mapLength / 4, type: type, typeName: typeNameTop, onTop: true},
-			{ x: -1.5, y: 0.2, z: -this.mapLength / 4, type: type, typeName: typeNameBottom, onTop: false},
-			{ x: -1.5, y: 3.2, z: -this.mapLength / 4, type: type, typeName: typeNameTop, onTop: true},
-			{ x: 1.5, y: 0.2, z: -this.mapLength / 4, type: type, typeName: typeNameBottom, onTop: false},
-			{ x: 1.5, y: 3.2, z: -this.mapLength / 4, type: type, typeName: typeNameTop, onTop: true}
-		];
-		for (let i = 0; i < jumperPos.length; i++)
-		{
-			if (Math.random() < 0.5)
-			{
-				this.#createGravityChanger(jumperPos[i].x, jumperPos[i].y, jumperPos[i].z, jumperPos[i].type + i, jumperPos[i].typeName, jumperPos[i].onTop);
-				if (i % 2 == 0)
-					i++;
-			}
-		}
-	};
-
 	update(ball)
 	{
 		for (let i = 0; this.arrObject && i < this.arrObject.length; i++)
@@ -1016,28 +978,6 @@ function drawScore(score)
 	contextTextScore.fillText(score.player + " - " + score.opponent, canvasTextScore.width / 2, canvasTextScore.height - canvasTextScore.height / 4);
 };
 
-function createTriangle(colorO) {
-	const shape = new THREE.Shape();
-	shape.moveTo(0, 1);
-	shape.lineTo(-1, -1);
-	shape.lineTo(1, -1);
-	shape.lineTo(0, 1);
-	const extrudeSettings = {
-		depth: 0.5,
-		bevelEnabled: false
-	};
-
-	const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
-	const material = new THREE.MeshBasicMaterial({ color: colorO });
-	return new THREE.Mesh(geometry, material);
-}
-
-function createCylinder(colorO) {
-	const geometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
-	const material = new THREE.MeshBasicMaterial({ color: colorO });
-	return new THREE.Mesh(geometry, material);
-}
-
 function createStar(colorO) {
 	const shape = new THREE.Shape();
 	const outerRadius = 0.5;
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Opponent.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Opponent.js
index d64101a..802331f 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Opponent.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Opponent.js
@@ -3,13 +3,14 @@
 /*                                                        :::      ::::::::   */
 /*   Opponent.js                                        :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/21 10:34:49 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/01 15:28:00 by hubourge         ###   ########.fr       */
+/*   Updated: 2024/11/19 18:41:34 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+import { isInVrMode } from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js';
 import { goalAnimation } from '/static/javascript/multiOnlineGame/Player.js'
 
 let opponentExist = false;
@@ -56,17 +57,38 @@ class Opponent
 		const thisClass		= this;
 		const speedFactor	= 0.5;
 
-		if (thisClass.animationFrame)
-			cancelAnimationFrame(thisClass.animationFrame);
-		const animate = () => {
-			this.object.position.x = lerp(this.object.position.x, content.pos, speedFactor);
-			if (Math.abs(this.object.position.x - content.pos) < 0.01)
-				this.object.position.x = content.pos;
-			else
-				thisClass.animationFrame = requestAnimationFrame(animate);
-		};
+		if (isInVrMode)
+		{
+			if (thisClass.animationFrame)
+				clearInterval(thisClass.animationFrame);
+			const animate = () => {
+				this.object.position.x = lerp(this.object.position.x, content.pos, speedFactor);
+				if (Math.abs(this.object.position.x - content.pos) < 0.01)
+				{
+					this.object.position.x = content.pos;
+					clearInterval(thisClass.animationFrame);
+					thisClass.animationFrame = null;
+				}
+			};
+	
+			thisClass.animationFrame = setInterval(animate, 5);
+		}
+		else
+		{
+			if (thisClass.animationFrame)
+				cancelAnimationFrame(thisClass.animationFrame);
+			const animate = () => {
+				this.object.position.x = lerp(this.object.position.x, content.pos, speedFactor);
+				if (Math.abs(this.object.position.x - content.pos) < 0.01)
+					this.object.position.x = content.pos;
+				else
+					thisClass.animationFrame = requestAnimationFrame(animate);
+			};
+
+			thisClass.animationFrame = requestAnimationFrame(animate);
+		}
+		
 
-		thisClass.animationFrame = requestAnimationFrame(animate);
 	
 		if (content.up && thisClass.object.position.y < thisClass.limits.up)
 		{
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
index 91a2cb8..7c26228 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   Player.js                                          :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:30:31 by edbernar          #+#    #+#             */
-/*   Updated: 2024/11/19 15:11:45 by hubourge         ###   ########.fr       */
+/*   Updated: 2024/11/19 17:40:08 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -95,8 +95,8 @@ class Player
 		if (this.interval)
 			clearInterval(this.interval);
 		key = null;
-		document.addEventListener('touchstart', addKeyTouch);
-		document.addEventListener('touchend', removeKeyTouch);
+		document.removeEventListener('touchstart', addKeyTouch);
+		document.removeEventListener('touchend', removeKeyTouch);
 	}
 
 	reserCameraPlayer()
@@ -556,4 +556,4 @@ function removeKeyTouch(event)
 	}
 }
 
-export { Player, playerExist, goalAnimation};
+export { Player, playerExist, goalAnimation, isOnPointAnim};
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
index 112d102..192f585 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
@@ -6,15 +6,15 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:53:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/11/19 15:49:51 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/11/19 18:25:40 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
-import { availableSkins, lastSelectedGoal } from '/static/javascript/lobbyPage/3d.js';
+import { availableSkins } from '/static/javascript/lobbyPage/3d.js';
 import { VRButton } from "/static/javascript/three/examples/jsm/webxr/VRButton.js"
 import { Opponent } from '/static/javascript/multiOnlineGame/Opponent.js'
 import * as THREE from '/static/javascript/three/build/three.module.js'
-import { Player } from '/static/javascript/multiOnlineGame/Player.js'
+import { Player, isOnPointAnim } from '/static/javascript/multiOnlineGame/Player.js'
 import { pageRenderer, isMobile, isOnChrome } from '/static/javascript/main.js'
 import { Ball } from '/static/javascript/multiOnlineGame/Ball.js'
 import { Map } from '/static/javascript/multiOnlineGame/Map.js'
@@ -312,21 +312,49 @@ function vrMode()
 		document.body.append(newButton);
 }
 
+let xrReferenceSpace;
+
 function configButton()
 {
 	const	newButton = document.createElement('button');
 	const	cameraGroup	=	new THREE.Group();
+	let		interval	=	null;
 
 	cameraGroup.name = "vrHeadset";
 	newButton.innerText = "Vr mode";
 	newButton.setAttribute('id', 'newButtonVr');
 	newButton.addEventListener('click', () => {
 		VrButton.click();
-		scene.add(cameraGroup);
-		scene.remove(player.camera);
 		player.configureVrController();
-		cameraGroup.add(player.camera);
-		cameraGroup.position.set(0, 0.5, 7.5);
+		let interval2 = setInterval(() => {
+			const xrSession = renderer.xr.getSession();
+			if (!xrSession)
+				return ;
+			clearInterval(interval2);
+			interval2 = null;
+			xrSession.requestReferenceSpace('local').then((refSpace) => {
+				xrReferenceSpace = refSpace;
+			});
+		}, 16);
+		if (isOnPointAnim)
+		{
+			interval = setInterval(() => {
+				if (isOnPointAnim)
+					return ;
+				scene.add(cameraGroup);
+				scene.remove(player.camera);
+				cameraGroup.add(player.camera);
+				cameraGroup.position.set(0, 0.5, 7.5);
+				clearInterval(interval);
+			}, 10);
+		}
+		else
+		{
+			scene.add(cameraGroup);
+			scene.remove(player.camera);
+			cameraGroup.add(player.camera);
+			cameraGroup.position.set(0, 0.5, 7.5);
+		}
 		isInVrMode = true;
 	});
 	return (newButton);