From f3416a13f45c4de5a850134f11db62d6119ba10a Mon Sep 17 00:00:00 2001
From: Kum1ta <eddydhj@gmail.com>
Date: Fri, 27 Sep 2024 14:12:29 +0200
Subject: [PATCH] Site     - fix bug canvas

---
 .../djangoserver/file/server/server/Game.py   |  4 +-
 .../static/javascript/multiOnlineGame/Map.js  | 13 ++---
 .../javascript/multiOnlineGame/Player.js      | 49 +++++++++++--------
 3 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/docker-compose/requirements/djangoserver/file/server/server/Game.py b/docker-compose/requirements/djangoserver/file/server/server/Game.py
index 66fd293..7a46970 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/Game.py
+++ b/docker-compose/requirements/djangoserver/file/server/server/Game.py
@@ -6,7 +6,7 @@
 #    By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+         #
 #                                                 +#+#+#+#+#+   +#+            #
 #    Created: 2024/09/13 16:20:58 by tomoron           #+#    #+#              #
-#    Updated: 2024/09/27 13:04:59 by edbernar         ###   ########.fr        #
+#    Updated: 2024/09/27 13:59:03 by edbernar         ###   ########.fr        #
 #                                                                              #
 # **************************************************************************** #
 
@@ -137,7 +137,7 @@ class Game:
 				self.p1 = socket
 				self.p1Skin = skin
 			else:
-				if(self.opponentLock and dself.opponentLock != socket.id):
+				if(self.opponentLock and self.opponentLock != socket.id):
 					socket.sendError("You are not invited to this game", 9103)
 					return;
 				self.p2 = socket
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
index b08e71a..118607b 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
+++ b/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/09/25 22:19:13 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/27 13:44:33 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -982,13 +982,14 @@ class Map
 
 	updateScore(name, score) //  document.getElementsByTagName('canvas')[0]            Si fondu noir marche pas c'est la
 	{
-		console.log("fadeIN");
-		document.getElementsByTagName('canvas')[3].style.animation = 'fadeInGames 0.99s';
-		document.getElementsByTagName('canvas')[3].style.filter = 'brightness(0)';
+		const	canvasIndex = document.getElementsByTagName('canvas').length - 1;
+
+		document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.99s';
+		document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
 
 		setTimeout(() => {
-			document.getElementsByTagName('canvas')[3].style.animation = 'fadeOutGames 0.99s';
-			document.getElementsByTagName('canvas')[3].style.filter = 'brightness(1)';
+			document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOutGames 0.99s';
+			document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
 		}, 200);
 
 		setTimeout(() => {
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
index 8109e7d..d2d7c90 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/09/25 18:13:50 by hubourge         ###   ########.fr       */
+/*   Updated: 2024/09/27 13:55:55 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -134,21 +134,25 @@ class Player
 
 	pointAnimation(map)
 	{
+		const	canvasIndex = document.getElementsByTagName('canvas').length - 1;
 		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')[0].style.animation = 'fadeIn 0.199s';
-		document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)';
+		document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
+		document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.199s';
+		document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
 
 		setTimeout(() => {
-			document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
-			document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
+			document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
+			document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s';
+			document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
 		}, 300)
 
 		setTimeout(() => {
+
 			tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z);
 			isOnPointAnim = true;
 			this.camera = tmpCamera;
@@ -175,9 +179,9 @@ class Player
 
 			setTimeout(() => {
 				clearInterval(interval);
-				document.getElementsByTagName('canvas')[3].style.animation = null;
-				document.getElementsByTagName('canvas')[3].style.animation = 'fadeInGames 0.99s';
-				document.getElementsByTagName('canvas')[3].style.filter = 'brightness(0)';
+				document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
+				document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.99s';
+				document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
 
 				setTimeout(() => {
 					this.camera = tmp;
@@ -191,8 +195,9 @@ class Player
 							this.object.position.z + 1.5
 						);
 					}
-					document.getElementsByTagName('canvas')[3].style.animation = 'fadeOutGames 0.99s';
-					document.getElementsByTagName('canvas')[3].style.filter = 'brightness(1)';
+					document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
+					document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOutGames 0.99s';
+					document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
 				}, 400);
 			}, 4000);
 		}, 200)
@@ -200,17 +205,20 @@ class Player
 
 	pointOpponentAnimation(map, oppponentObject)
 	{
+		const	canvasIndex = document.getElementsByTagName('canvas').length - 1;
 		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')[0].style.animation = 'fadeIn 0.199s';
-		document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)';
+		document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
+		document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.199s';
+		document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
 		setTimeout(() => {
-			document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
-			document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
+			document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
+			document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s';
+			document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
 		}, 300)
 		setTimeout(() => {
 			tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z);
@@ -227,9 +235,9 @@ class Player
 			}, 10);
 			setTimeout(() => {
 				clearInterval(interval);
-				document.getElementsByTagName('canvas')[0].style.animation = null;
-				document.getElementsByTagName('canvas')[0].style.animation = 'fadeIn 0.19s';
-				document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)';
+				document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
+				document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.19s';
+				document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
 				setTimeout(() => {
 					this.camera = tmp;
 					oppponentObject.material.color.copy(startColor);
@@ -242,8 +250,9 @@ class Player
 							this.object.position.z + 1.5
 						);
 					}
-					document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
-					document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
+					document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
+					document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s';
+					document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
 				}, 200);
 			}, 4000);
 		}, 200)