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

Site

Browse Source 
- update lobby page style
    - fix some bugs on lobby page
This commit is contained in:
Kum1ta
2024-10-04 00:08:21 +02:00
parent 88d2243f86
commit 6484969e4b
4 changed files with 92 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
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 14:20:12 by edbernar ### ########.fr */
/* Updated: 2024/10/03 21:15:40 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -171,8 +171,10 @@ class goalSelecter
rendererList = [];
sceneList = [];
cameraList = [];
div = null;
boundChangeGoal = this.changeGoal.bind(this);
boundhideGoalSelector = this.hideGoalSelector.bind(this);
boundshowGoals = this.showGoals.bind(this);
constructor(div)
{
@ -181,6 +183,7 @@ class goalSelecter
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.camera = new THREE.PerspectiveCamera(60, (pos.width - 10) / (pos.height - 10));
this.div = div;
lastSelectedGoal = this.selected;
this.scene.background = new THREE.Color(0x020202);
this.renderer.setSize(pos.width - 10, pos.height - 10);
@ -191,23 +194,31 @@ class goalSelecter
this.scene.add(this.goal);
this.camera.lookAt(actualGoalSelecter.goal.position);
this.renderer.setAnimationLoop(this.#loop.bind(this));
div.addEventListener('click', () => {
const popup = document.getElementById('popup-goal-selector');
const goal = document.getElementsByClassName('color-box-goal');
popup.style.display = 'flex';
for (let i = 0; i < goal.length; i++)
{
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.boundhideGoalSelector);
popup.addEventListener('click', this.boundhideGoalSelector);
});
div.removeEventListener('click', this.boundshowGoals);
div.addEventListener('click', this.boundshowGoals);
}
showGoals()
{
const popup = document.getElementById('popup-goal-selector');
const goal = document.getElementsByClassName('color-box-goal');
popup.style.display = 'flex';
for (let i = 0; i < goal.length; i++)
{
const canvas = goal[i].getElementsByTagName('canvas');
for (let j = 0; j < canvas.length; j++)
canvas[j].remove();
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.boundhideGoalSelector);
popup.addEventListener('click', this.boundhideGoalSelector);
};
showObject(func, pos)
{
const scene = new THREE.Scene();
@ -238,9 +249,12 @@ class goalSelecter
popup.style.display = 'none';
lastSelectedGoal = availableGoals[id];
this.selected = availableGoals[id];
this.scene.children[1].geometry.dispose();
this.scene.children[1].material.dispose();
this.scene.remove(this.scene.children[1]);
if (this.scene && this.scene.children && this.scene.children.length > 1)
{
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);
@ -265,7 +279,10 @@ class goalSelecter
for (let i = colorBoxGoal.length - 1; i >= 0; i--)
{
colorBoxGoal[i].getElementsByTagName('canvas')[0].remove();
const canvas = colorBoxGoal[i].getElementsByTagName('canvas');
for (let j = 0; j < canvas.length; j++)
canvas[j].remove();
if (this.rendererList && this.rendererList[i])
{
this.rendererList[i].dispose();
@ -301,6 +318,7 @@ class goalSelecter
dispose()
{
this.disposeGoalSelector();
if (this.renderer)
{
this.renderer.dispose();
@ -329,6 +347,7 @@ class goalSelecter
}
this.scene = null;
actualGoalSelecter = null;
this.div.removeEventListener('click', this.boundshowGoals);
}
}

63
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 14:37:14 by edbernar ### ########.fr */
/* Updated: 2024/10/04 00:07:11 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -58,8 +58,6 @@ class LobbyPage
initButtonLaytout();
window.addEventListener('click', closePopUpWhenClickOutsite);
listSelectCard = document.getElementsByClassName('select-card');
document.getElementsByClassName('game-mode')[0].addEventListener('click', showGameMode);
document.getElementById('closePopupBtn').addEventListener('click', hideGameMode);
listSelectCard[0].addEventListener('click', selectGameModeOne);
listSelectCard[1].addEventListener('click', selectGameModeTwo);
listSelectCard[2].addEventListener('click', selectGameModeThree);
@ -88,8 +86,6 @@ class LobbyPage
window.removeEventListener('click', closePopUpWhenClickOutsite);
window.removeEventListener('resize', movePopMenuLoginButton);
startButton.removeEventListener('click', startMode);
document.getElementsByClassName('game-mode')[0].removeEventListener('click', showGameMode);
document.getElementById('closePopupBtn').removeEventListener('click', hideGameMode);
window.removeEventListener('resize', ajustSearchUserList);
LiveChat.dispose();
@ -202,9 +198,22 @@ function hideGameMode()
function selectGameModeOne()
{
document.getElementById('loginPopup').style.display = 'none';
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[0].innerHTML;
const menuList = document.getElementsByClassName('menuSelected');
const gameModeDiv = document.getElementsByClassName('game-mode')[0].children;
for (let i = 0; i < menuList.length; i++)
{
menuList[i].style.display = 'none';
gameModeDiv[i].classList.remove('mode-card');
gameModeDiv[i].classList.remove('mode-card-ns');
}
document.getElementsByClassName('menuSelected')[0].style.display = 'flex';
for (let i = 0; i < gameModeDiv.length; i++)
{
if (i != 0)
gameModeDiv[i].classList.add('mode-card-ns');
}
gameModeDiv[0].classList.add('mode-card');
for (let i = 0; i < menuList.length; i++)
{
menuList[i].style.display = 'none';
@ -215,14 +224,22 @@ function selectGameModeOne()
function selectGameModeTwo()
{
document.getElementById('loginPopup').style.display = 'none';
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[1].innerHTML;
const menuList = document.getElementsByClassName('menuSelected');
const menuList = document.getElementsByClassName('menuSelected');
const gameModeDiv = document.getElementsByClassName('game-mode')[0].children;
for (let i = 0; i < menuList.length; i++)
{
menuList[i].style.display = 'none';
gameModeDiv[i].classList.remove('mode-card');
gameModeDiv[i].classList.remove('mode-card-ns');
}
document.getElementsByClassName('menuSelected')[1].style.display = 'flex';
for (let i = 0; i < gameModeDiv.length; i++)
{
if (i != 1)
gameModeDiv[i].classList.add('mode-card-ns');
}
gameModeDiv[1].classList.add('mode-card');
if (barSelector)
barSelector.dispose();
if (goalSelector)
@ -242,13 +259,22 @@ function selectGameModeTwo()
function selectGameModeThree()
{
document.getElementById('loginPopup').style.display = 'none';
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[2].innerHTML;
const menuList = document.getElementsByClassName('menuSelected');
const gameModeDiv = document.getElementsByClassName('game-mode')[0].children;
for (let i = 0; i < menuList.length; i++)
{
menuList[i].style.display = 'none';
gameModeDiv[i].classList.remove('mode-card');
gameModeDiv[i].classList.remove('mode-card-ns');
}
document.getElementsByClassName('menuSelected')[2].style.display = 'flex';
for (let i = 0; i < gameModeDiv.length; i++)
{
if (i != 2)
gameModeDiv[i].classList.add('mode-card-ns');
}
gameModeDiv[2].classList.add('mode-card');
document.getElementById('bar1').innerHTML = '';
document.getElementById('goal1').innerHTML = '';
document.getElementsByClassName('menuSelected')[2].style.display = 'flex';
@ -265,13 +291,22 @@ function selectGameModeThree()
function selectGameModeFour()
{
document.getElementById('loginPopup').style.display = 'none';
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[3].innerHTML;
const menuList = document.getElementsByClassName('menuSelected');
const gameModeDiv = document.getElementsByClassName('game-mode')[0].children;
for (let i = 0; i < menuList.length; i++)
{
menuList[i].style.display = 'none';
gameModeDiv[i].classList.remove('mode-card');
gameModeDiv[i].classList.remove('mode-card-ns');
}
document.getElementsByClassName('menuSelected')[3].style.display = 'flex';
for (let i = 0; i < gameModeDiv.length; i++)
{
if (i != 3)
gameModeDiv[i].classList.add('mode-card-ns');
}
gameModeDiv[3].classList.add('mode-card');
document.getElementById('bar2').innerHTML = '';
document.getElementById('goal2').innerHTML = '';
document.getElementsByClassName('menuSelected')[3].style.display = 'flex';