tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site

Browse Source 
- fix bug canvas
This commit is contained in:
Kum1ta
2024-09-27 14:12:29 +02:00
parent 32ae90c399
commit f3416a13f4
3 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docker-compose/requirements/djangoserver/file/server/server/Game.py
View File

@ -6,7 +6,7 @@
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ # # By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ # # +#+#+#+#+#+ +#+ #
# Created: 2024/09/13 16:20:58 by tomoron #+# #+# # # 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.p1 = socket
self.p1Skin = skin self.p1Skin = skin
else: 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) socket.sendError("You are not invited to this game", 9103)
return; return;
self.p2 = socket self.p2 = socket

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ /* 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 updateScore(name, score) // document.getElementsByTagName('canvas')[0] Si fondu noir marche pas c'est la
{ {
console.log("fadeIN"); const canvasIndex = document.getElementsByTagName('canvas').length - 1;
document.getElementsByTagName('canvas')[3].style.animation = 'fadeInGames 0.99s';
document.getElementsByTagName('canvas')[3].style.filter = 'brightness(0)'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.99s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => { setTimeout(() => {
document.getElementsByTagName('canvas')[3].style.animation = 'fadeOutGames 0.99s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOutGames 0.99s';
document.getElementsByTagName('canvas')[3].style.filter = 'brightness(1)'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 200); }, 200);
setTimeout(() => { setTimeout(() => {

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

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Player.js :+: :+: :+: */ /* Player.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */ /* 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) pointAnimation(map)
{ {
const canvasIndex = document.getElementsByTagName('canvas').length - 1;
const tmpCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000); const tmpCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
const tmp = this.camera; const tmp = this.camera;
let interval = null; let interval = null;
const startColor = this.object.material.color.clone(); const startColor = this.object.material.color.clone();
let hue = 0; let hue = 0;
document.getElementsByTagName('canvas')[0].style.animation = 'fadeIn 0.199s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => { setTimeout(() => {
document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 300) }, 300)
setTimeout(() => { setTimeout(() => {
tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z); tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z);
isOnPointAnim = true; isOnPointAnim = true;
this.camera = tmpCamera; this.camera = tmpCamera;
@ -175,9 +179,9 @@ class Player
setTimeout(() => { setTimeout(() => {
clearInterval(interval); clearInterval(interval);
document.getElementsByTagName('canvas')[3].style.animation = null; document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[3].style.animation = 'fadeInGames 0.99s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.99s';
document.getElementsByTagName('canvas')[3].style.filter = 'brightness(0)'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => { setTimeout(() => {
this.camera = tmp; this.camera = tmp;
@ -191,8 +195,9 @@ class Player
this.object.position.z + 1.5 this.object.position.z + 1.5
); );
} }
document.getElementsByTagName('canvas')[3].style.animation = 'fadeOutGames 0.99s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
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)';
}, 400); }, 400);
}, 4000); }, 4000);
}, 200) }, 200)
@ -200,17 +205,20 @@ class Player
pointOpponentAnimation(map, oppponentObject) pointOpponentAnimation(map, oppponentObject)
{ {
const canvasIndex = document.getElementsByTagName('canvas').length - 1;
const tmpCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000); const tmpCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
const tmp = this.camera; const tmp = this.camera;
let interval = null; let interval = null;
const startColor = oppponentObject.material.color.clone(); const startColor = oppponentObject.material.color.clone();
let hue = 0; let hue = 0;
document.getElementsByTagName('canvas')[0].style.animation = 'fadeIn 0.199s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => { setTimeout(() => {
document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 300) }, 300)
setTimeout(() => { setTimeout(() => {
tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z); tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z);
@ -227,9 +235,9 @@ class Player
}, 10); }, 10);
setTimeout(() => { setTimeout(() => {
clearInterval(interval); clearInterval(interval);
document.getElementsByTagName('canvas')[0].style.animation = null; document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[0].style.animation = 'fadeIn 0.19s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.19s';
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => { setTimeout(() => {
this.camera = tmp; this.camera = tmp;
oppponentObject.material.color.copy(startColor); oppponentObject.material.color.copy(startColor);
@ -242,8 +250,9 @@ class Player
this.object.position.z + 1.5 this.object.position.z + 1.5
); );
} }
document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 200); }, 200);
}, 4000); }, 4000);
}, 200) }, 200)