From 5e5475eaa8583aabfafa54d294c2078612cb29e3 Mon Sep 17 00:00:00 2001
From: Kum1ta <eddydhj@gmail.com>
Date: Wed, 13 Nov 2024 16:23:50 +0100
Subject: [PATCH] Game     - remove pub on not chrome web viewer     - force
 opacity 1 when ball pos reset     - remove color hue when goal     - fix bug
 when i have no color skin Site     - fix style bug on chat tournament     -
 fix style bug on goal selector

---
 .../nginx/static/javascript/lobbyPage/3d.js   |  5 ++--
 .../nginx/static/javascript/login/3d.js       | 23 +++++++++++++++++++
 .../nginx/static/javascript/login/main.js     |  4 +++-
 .../nginx/static/javascript/main.js           |  5 ++--
 .../static/javascript/multiLocalGame/Map.js   |  4 ++--
 .../static/javascript/multiOnlineGame/Ball.js |  3 ++-
 .../javascript/multiOnlineGame/Player.js      | 23 +++++--------------
 .../multiOnlineGame/multiOnlineGamePage.js    | 10 ++++----
 .../static/style/lobbyPage/lobbyPage.css      |  6 ++++-
 .../style/tournamentPage/tournamentPage.css   |  4 ++++
 10 files changed, 55 insertions(+), 32 deletions(-)
 create mode 100644 docker-compose/requirements/nginx/static/javascript/login/3d.js

diff --git a/docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js b/docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
index 2cbba89..043c74d 100644
--- a/docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
+++ b/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/13 23:25:15 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/11/12 19:19:33 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -134,7 +134,7 @@ class barSelecter
 		}
 		lastSelected = availableSkins[id];
 		if (availableSkins[id].color)
-			this.bar.material = new THREE.MeshPhysicalMaterial({color: skin.color});
+			this.bar.material = new THREE.MeshPhysicalMaterial({color: availableSkins[id].color});
 		else
 		{
 			if (typeof availableSkins[id].texture !== 'object')
@@ -256,6 +256,7 @@ class goalSelecter
 			goal[i].appendChild(this.showObject(availableGoals[i], goal[i].getBoundingClientRect()));
 			goal[i].removeEventListener('click', this.boundChangeGoal);
 			goal[i].addEventListener('click', this.boundChangeGoal);
+			goal[i].style.backgroundColor = `#1a1a1a`;
 		}
 		popup.removeEventListener('click', this.boundhideGoalSelector);
 		popup.addEventListener('click', this.boundhideGoalSelector);
diff --git a/docker-compose/requirements/nginx/static/javascript/login/3d.js b/docker-compose/requirements/nginx/static/javascript/login/3d.js
new file mode 100644
index 0000000..c95227c
--- /dev/null
+++ b/docker-compose/requirements/nginx/static/javascript/login/3d.js
@@ -0,0 +1,23 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   3d.js                                              :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/11/13 11:36:46 by edbernar          #+#    #+#             */
+/*   Updated: 2024/11/13 11:43:46 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+function main3d()
+{
+	const	div = document.getElementById('left-side');
+
+	div.innerHTML = '<canvas id="canvas-left-side" width="800" height="600"></canvas>';
+	const canvas = div.getElementsByTagName('canvas')[0];
+
+
+}
+
+export { main3d };
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/javascript/login/main.js b/docker-compose/requirements/nginx/static/javascript/login/main.js
index 5074e89..1342838 100644
--- a/docker-compose/requirements/nginx/static/javascript/login/main.js
+++ b/docker-compose/requirements/nginx/static/javascript/login/main.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 17:40:15 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/08 23:32:11 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/11/13 11:40:25 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -14,6 +14,7 @@ import { userMeInfo, waitForLogin } from "/static/javascript/typeResponse/typeLo
 import { createNotification as CN } from "/static/javascript/notification/main.js";
 import { sendRequest } from "/static/javascript/websocket.js";
 import { pageRenderer } from '/static/javascript/main.js'
+import { main3d } from '/static/javascript/login/3d.js'
 
 class Login
 {
@@ -204,6 +205,7 @@ function	showLoginDiv()
 	{
 		document.body.style.overflow = 'hidden';
 		popout.style.display = 'flex';
+		main3d();
 	}
 }
 
diff --git a/docker-compose/requirements/nginx/static/javascript/main.js b/docker-compose/requirements/nginx/static/javascript/main.js
index 72bf4bf..ec8256e 100644
--- a/docker-compose/requirements/nginx/static/javascript/main.js
+++ b/docker-compose/requirements/nginx/static/javascript/main.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:50:35 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/02 00:18:51 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/11/13 15:11:00 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -16,6 +16,7 @@ import { loadFiles } from '/static/javascript/filesLoader.js';
 
 let		pageRenderer	= null;
 const	isMobile		= /mobile|android|iphone|ipad/.test(navigator.userAgent.toLowerCase())
+const	isOnChrome		= /chrome/.test(navigator.userAgent.toLowerCase())
 
 document.addEventListener('DOMContentLoaded', () => {
 	loadFiles().then(() => {
@@ -24,4 +25,4 @@ document.addEventListener('DOMContentLoaded', () => {
 	});
 });
 
-export { pageRenderer, isMobile };
\ No newline at end of file
+export { pageRenderer, isMobile, isOnChrome };
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/javascript/multiLocalGame/Map.js b/docker-compose/requirements/nginx/static/javascript/multiLocalGame/Map.js
index c5665f1..b2b142b 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiLocalGame/Map.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiLocalGame/Map.js
@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   Map.js                                             :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/28 12:23:48 by edbernar          #+#    #+#             */
-/*   Updated: 2024/11/11 18:02:49 by hubourge         ###   ########.fr       */
+/*   Updated: 2024/11/13 14:54:17 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js
index cd85023..3f81c89 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 17:02:47 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/15 21:10:18 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/11/13 15:33:26 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -67,6 +67,7 @@ class Ball
 	resetPosBall()
 	{
 		this.setPosition(this.centerPos.x, this.object.geometry.parameters.radius * 2, this.centerPos.z);
+		this.object.material.opacity = 1;
 	}
 
 	resetScaleBall()
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
index bf73332..c972479 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:30:31 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/22 16:24:58 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/11/13 15:23:47 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -16,7 +16,7 @@ import { scene, renderer, isInVrMode, ball } from '/static/javascript/multiOnlin
 import { lastSelectedGoal, availableGoals } from '/static/javascript/lobbyPage/3d.js';
 import * as THREE from '/static/javascript/three/build/three.module.js'
 import { layoutSelected } from '/static/javascript/lobbyPage/main.js'
-import { isMobile } from '/static/javascript/main.js'
+import { isMobile, isOnChrome } from '/static/javascript/main.js'
 
 /*
 	Explication du code :
@@ -152,7 +152,7 @@ class Player
 		this.mapVar.putVideoOnCanvas(3, 'goal');
 		setTimeout(() => {
 			this.mapVar.putVideoOnCanvas(0, null);
-			if (!isMobile)
+			if (!isMobile && isOnChrome)
 				this.mapVar.putVideoOnCanvas(2, 3);
 		}, 4000);
 
@@ -176,8 +176,6 @@ class Player
 		const	tmpCamera	= new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
 		const	tmp			= this.camera;
 		let		interval	= null;
-		const	startColor	= this.object.material.color.clone();
-		let		hue			= 0;
 
 		document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
 		document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.199s';
@@ -196,10 +194,6 @@ class Player
 			this.camera = tmpCamera;
 			interval = setInterval(() => {
 				tmpCamera.lookAt(this.object.position);
-				hue += 0.01;
-				if (hue > 1)
-					hue = 0;
-				this.object.material.color.setHSL(hue, 1, 0.5);
 				tmpCamera.fov -= 0.05;
 				tmpCamera.updateProjectionMatrix();
 			}, 10);
@@ -223,7 +217,6 @@ class Player
 						ball.setCastShadow(true);
 
 						this.camera = tmp;
-						this.object.material.color.copy(startColor);
 						isOnPointAnim = false;
 						if (!this.cameraFixed)
 						{
@@ -248,7 +241,6 @@ class Player
 		const	tmpCamera	= new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
 		const	tmp			= this.camera;
 		let		interval	= null;
-		const	startColor	= oppponentObject.material.color.clone();
 		let		hue			= 0;
 
 		document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
@@ -267,10 +259,6 @@ class Player
 			this.camera = tmpCamera;
 			interval = setInterval(() => {
 				tmpCamera.lookAt(oppponentObject.position);
-				hue += 0.01;
-				if (hue > 1)
-					hue = 0;
-				oppponentObject.material.color.setHSL(hue, 1, 0.5);
 				tmpCamera.fov -= 0.05;
 				tmpCamera.updateProjectionMatrix();
 			}, 10);
@@ -279,7 +267,9 @@ class Player
 			}, 1000);
 			
 			setTimeout(() => {
-				clearInterval(interval);
+				if (interval)
+					clearInterval(interval);
+				interval = null;
 				document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
 				document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.99s';
 				document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
@@ -289,7 +279,6 @@ class Player
 					ball.setCastShadow(true);
 
 					this.camera = tmp;
-					oppponentObject.material.color.copy(startColor);
 					isOnPointAnim = false;
 					if (!this.cameraFixed)
 					{
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
index ef03f79..875333f 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:53:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/16 00:55:59 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/11/13 15:22:43 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -16,7 +16,7 @@ import { VRButton } from "/static/javascript/three/examples/jsm/webxr/VRButton.j
 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 { pageRenderer, isMobile } from '/static/javascript/main.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'
 import { sendRequest } from "/static/javascript/websocket.js";
@@ -87,7 +87,6 @@ class MultiOnlineGamePage
 {
 	static create(skin)
 	{
-		console.log('skin', skin);
 		if (!skin)
 		{
 			skin = {player: 4, opponent: 0};
@@ -129,7 +128,6 @@ class MultiOnlineGamePage
 		map.ballObject = ball.object;
 		if (isMobile)
 			player.mobileMode();
-
 		//////////////////////////
 		controls = new OrbitControls(cameraTmp, renderer.domElement)
 		cameraTmp.position.set(5, 3, 5);
@@ -155,7 +153,7 @@ class MultiOnlineGamePage
 
 		renderer.setAnimationLoop(loop)
 		sendRequest('game', {action: 1});
-		if (!isMobile)
+		if (!isMobile && isOnChrome)
 			map.putVideoOnCanvas(2, 3);
 		let lastPosition = player.object.position.x;
 		let lastUp = player.isUp;
@@ -212,7 +210,7 @@ class MultiOnlineGamePage
 			scene.children.forEach(child => {
 				if (child.geometry)
 					child.geometry.dispose();
-				if (child.material)
+				if (child.material && child.material.dispose)
 					child.material.dispose();
 				if (child.texture)
 					child.texture.dispose();
diff --git a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
index 1a4d8b6..482a93a 100644
--- a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
+++ b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
@@ -62,7 +62,7 @@ body {
     align-items: center;
 }
 
-.main{
+.main {
 	padding-block: 45px;
 	display: flex;
 	flex-direction: row;
@@ -607,6 +607,10 @@ input:checked + .slider:before {
 	border-radius: 50%;
 }
 
+#canvas-left-side{
+	background-color: #21f356;
+}
+
 @media (max-aspect-ratio: 1/1){
 	.main {
 		flex-direction: column;
diff --git a/docker-compose/requirements/nginx/static/style/tournamentPage/tournamentPage.css b/docker-compose/requirements/nginx/static/style/tournamentPage/tournamentPage.css
index a8d2ed5..e41440d 100644
--- a/docker-compose/requirements/nginx/static/style/tournamentPage/tournamentPage.css
+++ b/docker-compose/requirements/nginx/static/style/tournamentPage/tournamentPage.css
@@ -223,6 +223,10 @@
 	overflow-x: none;
 }
 
+#tournamentPage .chat-tournament .chat p {
+	word-break: break-all;
+}
+
 #tournamentPage #chat-title {
 	color: white;
 	font-size: 20px;