diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js index 118607b..293892d 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: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ -/* Updated: 2024/09/27 13:44:33 by edbernar ### ########.fr */ +/* Updated: 2024/09/27 18:21:20 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ @@ -145,8 +145,8 @@ class Map scene.add(this.#createPlanes(7.5, length, (Math.PI / 2), "planeTop", false, '/static/img/multiOnlineGamePage/pastel.jpg')); scene.add(this.#createWall(-3.5, 0.4, -length/2, "wallLeft")); scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight")); - if (obstacles) - this.#generateObstacle(); + // if (obstacles) + // this.#generateObstacle(); { // A retirer /* Style de couleur why not @@ -273,6 +273,7 @@ class Map for (let i = 0; i < this.arrObject.length; i++) { + console.log(name); if (this.arrObject[i].name == name) throw Error("Name already exist."); } @@ -820,7 +821,7 @@ class Map { if (listObject[i].type == 1) { - this.#createGravityChanger(listObject[i].pos.x, listObject[i].pos.y, listObject[i].pos.z, "gravityChanger" + i, listObject[i].isUp ? "jumperTop" : "jumperBottom", listObject[i].isUp); + this.#createGravityChanger(listObject[i].pos.x, listObject[i].pos.y, listObject[i].pos.z, listObject[i].name, listObject[i].isUp ? "jumperTop" : "jumperBottom", listObject[i].isUp); nbJumper++; } else if (listObject[i].type == 2) @@ -828,13 +829,23 @@ class Map } } - activeJumper(index) + activeJumper(name) { ball.changeGravity(); - if (this.arrObject[index].isUp) - this.#animationGravityChanger(this.arrObject[index].mesh, true); - else - this.#animationGravityChanger(this.arrObject[index].mesh, false); + for (let i = 0; this.arrObject && i < this.arrObject.length; i++) + { + console.log("/////////////"); + console.log(this.arrObject[i].name); + console.log(name); + console.log("/////////////"); + if (this.arrObject[i].name == name) + { + if (this.arrObject[i].name == "jumperTop") + this.#animationGravityChanger(this.arrObject[i].mesh, true); + else + this.#animationGravityChanger(this.arrObject[i].mesh, false); + } + } } #generateObstacle() @@ -884,9 +895,9 @@ class Map // Move the wall with the ball position if (ball.object.position.z < this.mapLength / 2 - 0.35 && ball.object.position.z > -this.mapLength / 2 + 0.35) this.arrObject[i].mesh.position.z = ball.object.position.z; - if (ball.object.position.y > 0.4 + 0.1 && ball.object.position.y < 3.2) + if (ball.object.position.y >= 0.3 && ball.object.position.y <= 3) this.arrObject[i].mesh.position.y = ball.object.position.y - 0.1; - + // Change the opacity of the wall let diff = ball.object.position.x - this.arrObject[i].mesh.position.x - 0.1; if (diff > 2) @@ -899,7 +910,7 @@ class Map // Move the wall with the ball position if (ball.object.position.z < this.mapLength / 2 - 0.35 && ball.object.position.z > -this.mapLength / 2 + 0.35) this.arrObject[i].mesh.position.z = ball.object.position.z; - if (ball.object.position.y > 0.4 + 0.1 && ball.object.position.y < 3.2) + if (ball.object.position.y >= 0.3 && ball.object.position.y <= 3) this.arrObject[i].mesh.position.y = ball.object.position.y - 0.1; // Change the opacity of the wall @@ -1002,6 +1013,23 @@ class Map }, 200); } + resetPosWalls() + { + for (let i = 0; i < this.arrObject.length; i++) + { + if (this.arrObject[i].type == "wallLeft") + { + this.arrObject[i].mesh.position.set(-3.5, 0.4, -length/2); + this.arrObject[i].mesh.material.opacity = 0.5; + } + else if (this.arrObject[i].type == "wallRight") + { + this.arrObject[i].mesh.position.set(3.5, 0.4, -length/2); + this.arrObject[i].mesh.material.opacity = 0.5; + } + } + } + reCreate(name) { this.#clearAnimationGoal(); @@ -1010,6 +1038,7 @@ class Map this.updateScore(name, this.score); player.reserCameraPlayer(); + this.resetPosWalls(); ball.resetPosBall(); // player.resetPosPlayer(); // opponent.resetPosOpponent(); diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js index d2d7c90..19ded9b 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: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */ -/* Updated: 2024/09/27 13:55:55 by edbernar ### ########.fr */ +/* Updated: 2024/09/27 17:21:29 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ @@ -166,16 +166,9 @@ class Player tmpCamera.updateProjectionMatrix(); }, 10); - /////////////////////// - // Ici je souhaite savoir ou la camera est oriente : this.playerGoalAnimation soit this.opponent.playerGoalAnimation - // Egalement, l'animation se lance uniquement sur 1 seul client (celui qui a marque le point) setTimeout(() => { - if (0) - map.animationGoal(this.object.position.x, this.object.position.y, this.object.position.z, this.playerGoalAnimation); - else - map.animationGoal(this.object.position.x, this.object.position.y, this.object.position.z, this.opponent.playerGoalAnimation); + map.animationGoal(this.object.position.x, this.object.position.y, this.object.position.z, this.playerGoalAnimation); }, 1000); - /////////////////////// setTimeout(() => { clearInterval(interval); @@ -215,11 +208,13 @@ class Player 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')[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; @@ -233,11 +228,18 @@ class Player tmpCamera.fov -= 0.05; tmpCamera.updateProjectionMatrix(); }, 10); + + setTimeout(() => { + map.animationGoal(this.opponent.object.position.x, this.opponent.object.position.y, + this.opponent.object.position.z, this.opponent.playerGoalAnimation); + }, 1000); + setTimeout(() => { clearInterval(interval); document.getElementsByTagName('canvas')[canvasIndex].style.animation = null; - document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.19s'; + document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.99s'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)'; + setTimeout(() => { this.camera = tmp; oppponentObject.material.color.copy(startColor); @@ -251,9 +253,9 @@ class Player ); } document.getElementsByTagName('canvas')[canvasIndex].style.animation = null; - document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s'; + document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOutGames 0.99s'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)'; - }, 200); + }, 400); }, 4000); }, 200) } diff --git a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeGame.js b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeGame.js index 3f32225..5e04019 100644 --- a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeGame.js +++ b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeGame.js @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* typeGame.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/09/15 12:00:01 by edbernar #+# #+# */ -/* Updated: 2024/09/25 13:38:28 by edbernar ### ########.fr */ +/* Updated: 2024/09/27 17:56:06 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ @@ -32,7 +32,7 @@ function typeGame(content) else if (content.action == 7 && pageRenderer.actualPage == MultiOnlineGamePage) map.placeObject(content); else if (content.action == 8 && pageRenderer.actualPage == MultiOnlineGamePage) - map.activeJumper(content.index); + map.activeJumper(content.name); } export { typeGame };