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

Site/Game

Browse Source 
- goal selector finish | waiting for server
This commit is contained in:
Kum1ta
2024-10-03 14:51:07 +02:00
parent 61016cda28
commit 909104ce87
7 changed files with 115 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/13 13:59:46 by edbernar #+# #+# */
/* Updated: 2024/10/03 04:30:32 by edbernar ### ########.fr */
/* Updated: 2024/10/03 14:20:12 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -162,15 +162,17 @@ class barSelecter
class goalSelecter
{
scene = null;
renderer = null;
camera = null;
selected = lastSelectedGoal ? lastSelectedGoal : availableGoals[0];
ambiantLight = new THREE.AmbientLight(0xffffff, 35);
goal = this.selected(colorList[Math.floor(Math.random() * 100 % colorList.length)], true);
rendererList = [];
sceneList = [];
cameraList = [];
scene = null;
renderer = null;
camera = null;
selected = lastSelectedGoal ? lastSelectedGoal : availableGoals[0];
ambiantLight = new THREE.AmbientLight(0xffffff, 35);
goal = this.selected(colorList[Math.floor(Math.random() * 100 % colorList.length)], true);
rendererList = [];
sceneList = [];
cameraList = [];
boundChangeGoal = this.changeGoal.bind(this);
boundhideGoalSelector = this.hideGoalSelector.bind(this);
constructor(div)
{
@ -179,6 +181,7 @@ class goalSelecter
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.camera = new THREE.PerspectiveCamera(60, (pos.width - 10) / (pos.height - 10));
lastSelectedGoal = this.selected;
this.scene.background = new THREE.Color(0x020202);
this.renderer.setSize(pos.width - 10, pos.height - 10);
this.scene.add(this.ambiantLight);
@ -190,18 +193,18 @@ class goalSelecter
this.renderer.setAnimationLoop(this.#loop.bind(this));
div.addEventListener('click', () => {
const popup = document.getElementById('popup-goal-selector');
const skins = document.getElementsByClassName('color-box-goal');
const goal = document.getElementsByClassName('color-box-goal');
popup.style.display = 'flex';
for (let i = 0; i < skins.length; i++)
for (let i = 0; i < goal.length; i++)
{
skins[i].setAttribute('goalId', i);
skins[i].appendChild(this.showObject(availableGoals[i], skins[i].getBoundingClientRect()));
skins[i].removeEventListener('click', this.boundChangeSkin);
skins[i].addEventListener('click', this.boundChangeSkin);
goal[i].setAttribute('goalId', i);
goal[i].appendChild(this.showObject(availableGoals[i], goal[i].getBoundingClientRect()));
goal[i].removeEventListener('click', this.boundChangeGoal);
goal[i].addEventListener('click', this.boundChangeGoal);
}
popup.removeEventListener('click', this.hideGoalSelector);
popup.addEventListener('click', this.hideGoalSelector);
popup.removeEventListener('click', this.boundhideGoalSelector);
popup.addEventListener('click', this.boundhideGoalSelector);
});
}
@ -227,29 +230,62 @@ class goalSelecter
return (renderer.domElement)
}
changeGoal (event)
changeGoal(event)
{
const popup = document.getElementById('popup-skin-selector');
const popup = document.getElementById('popup-goal-selector');
const id = event.target.getAttribute('goalId');
const id = event.target.parentElement.getAttribute('goalId');
popup.style.display = 'none';
this.bar.material.dispose();
lastSelectedGoal = availableGoals[id];
// if (availableSkins[id].color != null)
// this.bar.material = new THREE.MeshPhysicalMaterial({color: availableSkins[id].color});
// else
// this.bar.material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture)});
this.selected = availableGoals[id];
this.scene.children[1].geometry.dispose();
this.scene.children[1].material.dispose();
this.scene.remove(this.scene.children[1]);
this.goal = this.selected(colorList[Math.floor(Math.random() * 100 % colorList.length)], true);
this.scene.add(this.goal);
this.camera.lookAt(this.goal.position);
this.disposeGoalSelector();
}
hideGoalSelector(event)
{
const popup = document.getElementById('popup-skin-selector');
const popup = document.getElementById('popup-goal-selector');
if (event.target.getAttribute('id') == 'popup-skin-selector')
if (event.target.getAttribute('id') == 'popup-goal-selector')
{
this.disposeGoalSelector();
popup.style.display = 'none';
}
}
disposeGoalSelector()
{
const colorBoxGoal = document.getElementsByClassName('color-box-goal');
for (let i = colorBoxGoal.length - 1; i >= 0; i--)
{
colorBoxGoal[i].getElementsByTagName('canvas')[0].remove();
if (this.rendererList && this.rendererList[i])
{
this.rendererList[i].dispose();
this.rendererList[i].forceContextLoss();
this.sceneList[i].children.forEach(child => {
if (child.geometry)
child.geometry.dispose();
if (child.material)
child.material.dispose();
if (child.texture)
child.texture.dispose();
this.scene.remove(child);
});
this.rendererList.splice(i, 1);
this.sceneList.splice(i, 1);
this.cameraList.splice(i, 1);
}
}
}
#loop()
{
actualGoalSelecter.goal.rotation.y += 0.01;
@ -296,4 +332,4 @@ class goalSelecter
}
}
export { barSelecter, goalSelecter, lastSelected, availableSkins}
export { barSelecter, goalSelecter, lastSelected, availableSkins, lastSelectedGoal, availableGoals };

4
docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
/* Updated: 2024/10/03 03:00:53 by edbernar ### ########.fr */
/* Updated: 2024/10/03 14:37:14 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -30,7 +30,7 @@ let gameMode = 0;
let barSelector = null;
let goalSelector = null;
let timeout = null;
let layoutSelected = {US: false, FR: false};
let layoutSelected = {US: true, FR: false};
class LobbyPage
{

37
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/10/03 03:14:28 by edbernar ### ########.fr */
/* Updated: 2024/10/03 14:40:41 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -680,43 +680,14 @@ class Map
scene.remove(this.banner);
};
animationGoal(cordX, cordY, cordZ, nameObject)
animationGoal(cordX, cordY, cordZ, nameObject, funcCreateObject)
{
this.#clearAnimationGoal();
let objectList = [];
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)]));
}
for (let i = 0; i < 6; i++)
objectList.push(funcCreateObject(colorList[Math.floor(Math.random() * 100 % colorList.length)]));
for (let i = 0; i < objectList.length; i++)
{
objectList[i].position.set(cordX, cordY, cordZ);

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

@ -6,12 +6,13 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */
/* Updated: 2024/10/03 01:09:57 by edbernar ### ########.fr */
/* Updated: 2024/10/03 14:48:51 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from '/static/javascript/three/build/three.module.js'
import { layoutSelected } from '/static/javascript/lobbyPage/main.js'
import { lastSelectedGoal, availableGoals } from '/static/javascript/lobbyPage/3d.js';
/*
Explication du code :
@ -53,20 +54,21 @@ let key = null;
class Player
{
isUp = false;
object = null;
camera = null;
speed = 4;
cameraFixed = false;
interval = null;
limits = {};
previousTime = Date.now();
deltaTime = 1;
mapVar = null;
opponent = null;
isUp = false;
object = null;
camera = null;
speed = 4;
cameraFixed = false;
interval = null;
limits = {};
previousTime = Date.now();
deltaTime = 1;
mapVar = null;
opponent = null;
playerGoalAnimation = null;
opponentGoal = null;
constructor (object, map, opponent, indexGoalAnimation)
constructor (object, map, opponent, indexGoalAnimation, goalIdOppenent)
{
this.mapVar = map;
this.opponent = opponent;
@ -77,6 +79,9 @@ class Player
pressedButton = [];
console.log(layoutSelected);
key = {up: layoutSelected.US ? "w" : "z", down: "s", left: layoutSelected.US ? "a" : "q", right: "d"};
console.warn("Remettre opponentGoal = availableGoals[goalIdOppenent] qaund le serveur le permettra");
this.opponentGoal = availableGoals[0];
// opponentGoal = availableGoals[goalIdOppenent];
this.object = object;
this.limits = map.playerLimits;
this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000);
@ -180,7 +185,8 @@ class Player
}, 10);
setTimeout(() => {
map.animationGoal(this.object.position.x, this.object.position.y, this.object.position.z, this.playerGoalAnimation);
console.log("Player : " + lastSelectedGoal);
map.animationGoal(this.object.position.x, this.object.position.y, this.object.position.z, this.playerGoalAnimation, lastSelectedGoal ? lastSelectedGoal : availableGoals[0]);
}, 1000);
setTimeout(() => {
@ -241,9 +247,9 @@ class Player
tmpCamera.updateProjectionMatrix();
}, 10);
console.log("Oppenent : " + this.opponentGoal);
setTimeout(() => {
map.animationGoal(this.opponent.object.position.x, this.opponent.object.position.y,
this.opponent.object.position.z, this.opponent.playerGoalAnimation);
map.animationGoal(this.opponent.object.position.x, this.opponent.object.position.y, this.opponent.object.position.z, this.opponent.playerGoalAnimation, this.opponentGoal);
}, 1000);
setTimeout(() => {

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

@ -3,14 +3,14 @@
/* ::: :::::::: */
/* multiOnlineGamePage.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/09/30 17:30:15 by hubourge ### ########.fr */
/* Updated: 2024/10/03 14:27:34 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { availableSkins } from '/static/javascript/lobbyPage/3d.js';
import { availableSkins, lastSelectedGoal } from '/static/javascript/lobbyPage/3d.js';
import * as THREE from '/static/javascript/three/build/three.module.js'
import { OrbitControls } from '/static/javascript/three/examples/jsm/controls/OrbitControls.js'
import { sendRequest } from "/static/javascript/websocket.js";
@ -75,6 +75,7 @@ class MultiOnlineGamePage
{
static create(skin)
{
console.log(lastSelectedGoal);
if (!skin)
skin = {player: 0, opponent: 0};
const bar1 = createBarPlayer(availableSkins[skin.player]);
@ -89,7 +90,7 @@ class MultiOnlineGamePage
renderer.domElement.style.animation = 'fadeOutStartGames 1s';
renderer.domElement.style.filter = 'brightness(1)';
opponent = new Opponent(bar2, map, Math.floor(Math.random() * 100 % 6));
player = new Player(bar1, map, opponent, Math.floor(Math.random() * 100 % 6));
player = new Player(bar1, map, opponent, Math.floor(Math.random() * 100 % 6), skin.goalId);
spotLight = new THREE.SpotLight(0xffffff, 10000, 0, 0.2);
spotLight.castShadow = true;
ambiantLight = new THREE.AmbientLight(0xffffff, 0.5);

21
docker-compose/requirements/nginx/static/javascript/waitingGame/main.js
View File

@ -6,11 +6,11 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/14 21:20:45 by edbernar #+# #+# */
/* Updated: 2024/10/03 01:21:20 by edbernar ### ########.fr */
/* Updated: 2024/10/03 14:35:54 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { lastSelected } from '/static/javascript/lobbyPage/3d.js';
import { lastSelected, lastSelectedGoal, availableGoals } from '/static/javascript/lobbyPage/3d.js';
import { sendRequest } from "/static/javascript/websocket.js";
import { pageRenderer } from '/static/javascript/main.js'
@ -27,6 +27,7 @@ class WaitingGamePage
const isTournament = opponentInfo && typeof(opponentInfo) != 'boolean' && opponentInfo.isTournament;
let text = sentence.innerText;
let points = "";
let goalId = goalIdSelect();
document.body.style.opacity = 1;
for (let i = 0; i < document.body.children.length; i++)
@ -44,9 +45,9 @@ class WaitingGamePage
}, 500);
timeout = setTimeout(() => {
if (opponentInfo && typeof(opponentInfo) != 'boolean')
sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, opponent: opponentInfo.id});
sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, goalId: goalId, opponent: opponentInfo.id});
else
sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, isRanked: opponentInfo ? true : false});
sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, goalId: goalId, isRanked: opponentInfo ? true : false});
timeout = null;
}, isTournament ? 1500 : 500);
if (!opponentInfo || !isTournament)
@ -89,7 +90,7 @@ class WaitingGamePage
setTimeout(() => {
document.body.style.animation = 'anim3 0.5s';
document.body.style.opacity = 0;
pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected ? lastSelected.id : 0, opponent: content.skin});
pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected ? lastSelected.id : 0, opponent: content.skin, opponentGoaldId: content.goalId});
}, 1000);
}, 500);
document.body.removeChild(returnButton);
@ -120,4 +121,14 @@ function returnToLobby()
}, 500);
}
function goalIdSelect()
{
for (let i = 0; i < availableGoals.length; i++)
{
if (availableGoals[i] == lastSelectedGoal)
return (i);
}
return (0);
}
export { WaitingGamePage };