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

merge

Browse Source
This commit is contained in:
Hugo Bourgeon
2024-09-25 18:28:42 +02:00
parent ae0c1dfeab
commit c20110e7c1
4 changed files with 94 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* Map.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */
/* Updated: 2024/09/25 17:07:57 by edbernar ### ########.fr */
/* Updated: 2024/09/25 18:28:18 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
@ -31,12 +31,8 @@ let fireworkMixer = null;
let canvasTextScore = null;
let contextTextScore = null;
let textureTextScore = null;
let animationSpeed1 = 0.05;
let animationSpeed2 = 0.05;
let animationSpeed3 = 0.05;
let animateGoalObjectUpdate1 = null;
let animateGoalObjectUpdate2 = null;
let animateGoalObjectUpdate3 = null;
let animationSpeed = 0.02;
let animateGoalObjectUpdate = null;
let path = [
{name: 'goal', onChoice: true, src:'/static/video/multiOnlineGamePage/goal2.webm', blob: null},
@ -47,6 +43,19 @@ let path = [
{name: 'fortnite', onChoice: false, src:'/static/video/multiOnlineGamePage/fortnite.mp4', blob: null},
]
const colorList = [
0xFFB3BA, 0xFFDFBA, 0xFFFFBA, 0xBAFFC9, 0xBAE1FF, // Pastel pink, peach, yellow, green, blue
0xFFD1DC, 0xFF9AA2, 0xFFB7B2, 0xFFDAC1, 0xE2F0CB, // More pastel pinks, greens
0xB5EAD7, 0xC7CEEA, 0xE0BBE4, 0xFFDFD3, 0xF3FFE3, // Soft purple, beige, mint
0xFFB3B3, 0xFFC1E3, 0xFDDDE6, 0xD4C0E2, 0xFFC2D1, // Soft reds, pinks, purples
0xA9E5BB, 0xFFF2CC, 0xFFC3A0, 0xFFB7CE, 0xFFFFCB, // Pastel greens, peaches, yellows
0x9EADBA, 0xE4BAD4, 0xFFCECE, 0xD4E157, 0xC1E7E3, // Gentle blues, violets, greens
0xFFEDCC, 0xC6D6E7, 0xFDDDEC, 0xC4DFDF, 0xD3FBD8, // Very soft pastels, blues, peaches
0xFCF7DE, 0xDBFFD6, 0xD4E2D4, 0xFFD6E0, 0xFFEDDF, // Soft beige, mint, light rose
0xF5F0E1, 0xB1E1FF, 0xFAD4C0, 0xFFC9DE, 0xBFD7EA, // Soft tan, peach, blue, light pink
0xFFFAE3, 0xE7D3D3, 0xFDE3A7, 0xCDE0C9, 0xF4D9E3 // Soft light peach, pale pink, green, lavender
]; // Merci chatGPT
path.forEach(elem => {
fetch(elem.src)
.then(response => response.blob())
@ -699,79 +708,60 @@ class Map
scene.remove(this.banner);
};
handleAnimation(ball, name)
{
if (name == "object3d") // 0, 0.3, 6.3
this.#animationGoal1(ball.object.position.x, ball.object.position.y, ball.object.position.z);
if (name == "downScale")
this.#animationGoal2(ball.object.position.x, ball.object.position.y, ball.object.position.z);
if (name == "upScale")
this.#animationGoal3(ball.object.position.x, ball.object.position.y, ball.object.position.z);
}
#animationGoal1(cordX, cordY, cordZ)
animationGoal(cordX, cordY, cordZ, nameObject)
{
this.#clearAnimationGoal();
const colorList = [
0xFF5733, // Orange
0x3357FF, // Bleu clair
0x33FFFF, // Cyan
0x9933FF, // Violet
0x33FF99, // Vert menthe
0xFF9933, // Orange doux
0xFF33CC, // Magenta
0xCC33FF, // Violet profond
0x33FFCC, // Aqua
0xFF6633, // Rouge brique
];
let objectList = [];
let triangle = createTriangle(colorList[Math.floor(Math.random() * 100 % colorList.length)]);
let cylinder = createCylinder(colorList[Math.floor(Math.random() * 100 % colorList.length)]);
let box = createBox(colorList[Math.floor(Math.random() * 100 % colorList.length)]);
let star = createStar(colorList[Math.floor(Math.random() * 100 % colorList.length)]);
let rectangle = createRectangle(colorList[Math.floor(Math.random() * 100 % colorList.length)]);
let ring = createRing(colorList[Math.floor(Math.random() * 100 % colorList.length)]);
if (nameObject == "triangle")
{
for (let i = 0; i < 6; i++)
objectList.push(createTriangle(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
}
else if (nameObject == "cylinder")
{
for (let i = 0; i < 6; i++)
objectList.push(createCylinder(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
}
else if (nameObject == "star")
{
for (let i = 0; i < 6; i++)
objectList.push(createStar(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
}
else if (nameObject == "box")
{
for (let i = 0; i < 6; i++)
objectList.push(createBox(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
}
else if (nameObject == "rectangle")
{
for (let i = 0; i < 6; i++)
objectList.push(createRectangle(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
}
else if (nameObject == "ring")
{
for (let i = 0; i < 6; i++)
objectList.push(createRing(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
}
triangle.position.set(cordX, cordY, cordZ);
cylinder.position.set(cordX, cordY, cordZ);
star.position.set(cordX, cordY, cordZ);
box.position.set(cordX, cordY, cordZ);
rectangle.position.set(cordX, cordY, cordZ);
ring.position.set(cordX, cordY, cordZ);
for (let i = 0; i < objectList.length; i++)
{
objectList[i].position.set(cordX, cordY, cordZ);
objectList[i].scale.set(0.2, 0.2, 0.2);
triangle.scale.set(0.2, 0.2, 0.2);
cylinder.scale.set(0.2, 0.2, 0.2);
star.scale.set(0.2, 0.2, 0.2);
box.scale.set(0.2, 0.2, 0.2);
rectangle.scale.set(0.2, 0.2, 0.2);
ring.scale.set(0.2, 0.2, 0.2);
if (Math.random() < 0.5)
objectList[i].rotateX(Math.PI / 2);
if (Math.random() < 0.5)
objectList[i].rotateY(Math.PI / 2);
if (Math.random() < 0.5)
objectList[i].rotateZ(Math.PI / 2);
scene.add(triangle);
scene.add(cylinder);
scene.add(star);
scene.add(box);
scene.add(rectangle);
scene.add(ring);
scene.add(objectList[i]);
this.arrObject.push({mesh: objectList[i], name: "object" + i, type: "goalObject"});
}
this.arrObject.push({mesh: triangle, name: "triangle", type: "goalObject"});
this.arrObject.push({mesh: cylinder, name: "cylinder", type: "goalObject"});
this.arrObject.push({mesh: star, name: "star", type: "goalObject"});
this.arrObject.push({mesh: box, name: "box", type: "goalObject"});
this.arrObject.push({mesh: rectangle, name: "rectangle", type: "goalObject"});
this.arrObject.push({mesh: ring, name: "ring", type: "goalObject"});
animateGoalObjectUpdate1 = true;
};
#animationGoal2(cordX, cordY, cordZ)
{
animateGoalObjectUpdate2 = true;
};
#animationGoal3(cordX, cordY, cordZ)
{
animateGoalObjectUpdate3 = true;
animateGoalObjectUpdate = true;
};
#clearAnimationGoal()
@ -847,7 +837,6 @@ class Map
this.#animationGravityChanger(this.arrObject[index].mesh, false);
}
#generateObstacle()
{
const wallPos = [
@ -938,52 +927,52 @@ class Map
this.arrObject[i].mesh.children[j].rotation.y = Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.1 + Math.cos(Date.now() * 0.001) * 0.1;;
}
}
if (animateGoalObjectUpdate1 && this.arrObject[i].type == "goalObject")
this.#updateGoalAnimation1(this.arrObject[i], animationSpeed1 += 0.004);
else if (animateGoalObjectUpdate2);
// this.#updateGoalAnimation2(ball, animationSpeed2 += 0.000);
else if (animateGoalObjectUpdate3);
// this.#updateGoalAnimation3(ball, animationSpeed3 += 0.000);
if (animateGoalObjectUpdate && this.arrObject[i].type == "goalObject")
this.#updateGoalAnimation(this.arrObject[i], animationSpeed += 0.003);
}
};
#updateGoalAnimation1(object, speed)
#updateGoalAnimation(object, speed)
{
object.mesh.rotation.x += 0.03;
object.mesh.rotation.y += 0.03;
object.mesh.rotation.z += 0.03;
if (object.name == "triangle")
object.mesh.scale.x -= 0.001 * speed;
object.mesh.scale.y -= 0.001 * speed;
object.mesh.scale.z -= 0.001 * speed;
if (object.name == "object0")
{
object.mesh.position.x += 0.05 * speed;
object.mesh.position.y += 0.05 * speed;
object.mesh.position.z += 0.02 * speed;
}
else if (object.name == "cylinder")
else if (object.name == "object1")
{
object.mesh.position.x -= 0.03 * speed;
object.mesh.position.y += 0.04 * speed;
object.mesh.position.z -= 0.05 * speed;
}
else if (object.name == "star")
else if (object.name == "object2")
{
object.mesh.position.x += 0.04 * speed;
object.mesh.position.y += 0.03 * speed;
object.mesh.position.z += 0.06 * speed;
}
else if (object.name == "box")
else if (object.name == "object3")
{
object.mesh.position.x -= 0.06 * speed;
object.mesh.position.y += 0.02 * speed;
object.mesh.position.z += 0.05 * speed;
}
else if (object.name == "rectangle")
else if (object.name == "object4")
{
object.mesh.position.x += 0.03 * speed;
object.mesh.position.y += 0.04 * speed;
object.mesh.position.z += 0.03 * speed;
}
else if (object.name == "ring")
else if (object.name == "object5")
{
object.mesh.position.x -= 0.05 * speed;
object.mesh.position.y += 0.03 * speed;
@ -991,16 +980,6 @@ class Map
}
};
#updateGoalAnimation2(object, speed)
{
};
#updateGoalAnimation3(object, speed)
{
};
updateScore(name, score)
{
if (name == "player")
@ -1014,10 +993,8 @@ class Map
reCreate(name)
{
this.#clearAnimationGoal();
animateGoalObjectUpdate1 = false;
animateGoalObjectUpdate2 = false;
animateGoalObjectUpdate3 = false;
animationSpeed1 = 0.05;
animateGoalObjectUpdate = false;
animationSpeed = 0.02;
this.updateScore(name, this.score);
player.reserCameraPlayer();

6
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Opponent.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* Opponent.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/21 10:34:49 by edbernar #+# #+# */
/* Updated: 2024/09/17 00:22:47 by edbernar ### ########.fr */
/* Updated: 2024/09/25 15:29:52 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
@ -27,7 +27,7 @@ class Opponent
left: -3,
right: 3,
};
last = false;
last = false;
playerGoalAnimation = null;
constructor (object, map, indexGoalAnimation)

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

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* Player.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */
/* Updated: 2024/09/23 13:44:55 by edbernar ### ########.fr */
/* Updated: 2024/09/25 18:13:50 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
@ -46,7 +46,7 @@ let playerExist = false;
let isOnPointAnim = false;
let pressedButton = [];
let mapLength = 0;
const goalAnimation = ["object3d", "downScale", "upScale"];
const goalAnimation = ["triangle", "cylinder", "star", "box", "rectangle", "ring"];
class Player
{

16
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* multiOnlineGamePage.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/09/25 17:07:14 by edbernar ### ########.fr */
/* Updated: 2024/09/25 18:28:23 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
@ -86,8 +86,8 @@ class MultiOnlineGamePage
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.domElement.style.animation = 'fadeOutStartGames 1s';
renderer.domElement.style.filter = 'brightness(1)';
opponent = new Opponent(bar2, map, 1);
player = new Player(bar1, map, opponent, 0);
opponent = new Opponent(bar2, map, Math.floor(Math.random() * 100 % 6));
player = new Player(bar1, map, opponent, Math.floor(Math.random() * 100 % 6));
spotLight = new THREE.SpotLight(0xffffff, 10000, 0, 0.2);
spotLight.castShadow = true;
ambiantLight = new THREE.AmbientLight(0xffffff, 0.5);
@ -113,14 +113,14 @@ class MultiOnlineGamePage
if (e.key == 'g')
{
player.pointAnimation(map);
map.handleAnimation(ball, player.playerGoalAnimation);
// map.animationGoal1(0, 0.30, 6.3); // Le serv envoie la position de la balle pour faire l'explosion la ou il y a but
map.animationGoal(ball.object.position.x, ball.object.position.y, ball.object.position.z, player.playerGoalAnimation);
console.log('player.playerGoalAnimation', player.playerGoalAnimation);
}
if (e.key == 'h')
{
player.pointOpponentAnimation(map, opponent.object);
map.handleAnimation(ball, opponent.playerGoalAnimation);
// map.animationGoal1(0, 0.30, -6.3);
map.animationGoal(ball.object.position.x, ball.object.position.y, ball.object.position.z, opponent.playerGoalAnimation);
console.log('player.playerGoalAnimation', opponent.playerGoalAnimation);
}
if (e.key == 'c')
debug = !debug;