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

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

@ -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(() => {

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

@ -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)