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

Site

Browse Source 
- Fix bug single page with back arrow
    - add animation when clock on tv
    - fix bug when return on home page for login button
This commit is contained in:
Kum1ta
2024-09-13 11:17:47 +02:00
parent 5927c36e54
commit 422ffcb440
5 changed files with 100 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docker-compose/requirements/nginx/static/javascript/Page.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/25 00:00:21 by edbernar #+# #+# */ /* Created: 2024/08/25 00:00:21 by edbernar #+# #+# */
/* Updated: 2024/09/11 17:26:02 by edbernar ### ########.fr */ /* Updated: 2024/09/13 11:05:33 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -29,7 +29,7 @@ class Page
{ {
if (window.location.pathname == thisClass.availablePages[i].url) if (window.location.pathname == thisClass.availablePages[i].url)
{ {
thisClass.changePage(thisClass.availablePages[i].name); thisClass.changePage(thisClass.availablePages[i].name, true);
return ; return ;
} }
} }
@ -45,7 +45,7 @@ class Page
this.#showUnknownPage(); this.#showUnknownPage();
} }
changePage(name) changePage(name, isBack = false)
{ {
if (this.actualPage != null) if (this.actualPage != null)
this.actualPage.dispose(); this.actualPage.dispose();
@ -67,7 +67,8 @@ class Page
document.body.innerHTML = text; document.body.innerHTML = text;
this.actualPage = this.availablePages[i].class; this.actualPage = this.availablePages[i].class;
document.title = this.availablePages[i].title; document.title = this.availablePages[i].title;
history.pushState({}, this.availablePages[i].title, this.availablePages[i].url); if (!isBack)
history.pushState({}, this.availablePages[i].title, this.availablePages[i].url);
this.actualPage.create(); this.actualPage.create();
}) })
}) })
@ -79,7 +80,7 @@ class Page
return ; return ;
} }
} }
throw Error("Page '" + page + "' not exist"); throw Error("Page '" + name + "' not exist");
} }
#showUnknownPage() #showUnknownPage()

59
docker-compose/requirements/nginx/static/javascript/home3D/home3D.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */ /* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */
/* Updated: 2024/08/26 11:12:50 by edbernar ### ########.fr */ /* Updated: 2024/09/13 10:53:06 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -141,11 +141,11 @@ function home3D()
} }
camera.position.x -= (0.01 * globalSpeed); camera.position.x -= (0.01 * globalSpeed);
camera.lookAt(screen.tv.position); camera.lookAt(screen.tv.position);
if (camera.position.x < 3.3) if (camera.position.x < 3.3 && interval)
fadeInOut(); fadeInOut();
if (dofPass.materialBokeh.uniforms.aperture.value > 0) if (dofPass.materialBokeh.uniforms.aperture.value > 0 && interval)
dofPass.materialBokeh.uniforms.aperture.value -= 0.0001; dofPass.materialBokeh.uniforms.aperture.value -= 0.0001;
if (camera.position.x < 3) if (camera.position.x < 3 && interval)
{ {
clearInterval(interval); clearInterval(interval);
camera.position.set(-2, 4, -6); camera.position.set(-2, 4, -6);
@ -158,9 +158,9 @@ function home3D()
camera.lookAt(screen.tv.position); camera.lookAt(screen.tv.position);
camera.position.x += (0.01 * globalSpeed); camera.position.x += (0.01 * globalSpeed);
camera.position.y -= (0.005 * globalSpeed); camera.position.y -= (0.005 * globalSpeed);
if (camera.position.x > 1.7) if (camera.position.x > 1.7 && interval)
fadeInOut(); fadeInOut();
if (camera.position.x > 2) if (camera.position.x > 2 && interval)
{ {
camera.position.set(0, 1.2, 0); camera.position.set(0, 1.2, 0);
clearInterval(interval); clearInterval(interval);
@ -173,9 +173,9 @@ function home3D()
camera.lookAt(screen.tv.position); camera.lookAt(screen.tv.position);
camera.position.y += (0.005 * globalSpeed); camera.position.y += (0.005 * globalSpeed);
camera.position.z -= (0.01 * globalSpeed); camera.position.z -= (0.01 * globalSpeed);
if (camera.position.x < -2.3) if (camera.position.x < -2.3 && interval)
fadeInOut(); fadeInOut();
if (camera.position.z < -2) if (camera.position.z < -2 && interval)
{ {
globalSpeed -= 0.001; globalSpeed -= 0.001;
if (globalSpeed < 0) if (globalSpeed < 0)
@ -188,11 +188,6 @@ function home3D()
}, 10); }, 10);
}, 500); }, 500);
setTimeout(() => {
screen.changeVideo(video.pong);
actualVideo = 0;
}, 100);
let clickDetect = false; let clickDetect = false;
function loop() function loop()
@ -326,7 +321,7 @@ function home3D()
renderer.setAnimationLoop(loop) renderer.setAnimationLoop(loop)
} }
function windowUpdater() function windowUpdater(e)
{ {
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight; camera.aspect = window.innerWidth / window.innerHeight;
@ -342,7 +337,41 @@ function mouseTracker (event)
function redirection() function redirection()
{ {
pageRenderer.changePage('lobbyPage'); const topBar = document.getElementById('topBar');
topBar.style.animation = 'animHideMenuDiv 0.5s';
topBar.style.opacity = 0;
moveCamera();
setTimeout(() => {
if (interval)
{
clearInterval(interval);
interval = null;
}
setTimeout(() => {
pageRenderer.changePage('lobbyPage');
}, 700);
}, 1000);
}
function moveCamera()
{
const targetPosition = screen.tv.position;
const initialPosition = camera.position.clone();
const startTime = Date.now();
function updateCameraPosition()
{
const elapsedTime = Date.now() - startTime;
const t = Math.min(elapsedTime / 1000, 1);
const position = initialPosition.clone().lerp(targetPosition, t * t);
camera.position.copy(position);
if (t < 1)
requestAnimationFrame(updateCameraPosition);
}
updateCameraPosition();
} }
export { Home3D }; export { Home3D };

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */ /* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
/* Updated: 2024/08/25 21:20:17 by edbernar ### ########.fr */ /* Updated: 2024/09/13 10:41:51 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -36,6 +36,10 @@ class LobbyPage
listSelectCard[1].addEventListener('click', selectGameModeTwo); listSelectCard[1].addEventListener('click', selectGameModeTwo);
listSelectCard[2].addEventListener('click', selectGameModeThree); listSelectCard[2].addEventListener('click', selectGameModeThree);
listSelectCard[3].addEventListener('click', selectGameModeFour); listSelectCard[3].addEventListener('click', selectGameModeFour);
for (let i = 0; i < document.body.children.length; i++)
{
document.body.children[i].style.animation = 'animShowMenuDiv 0.5s';
}
} }
static dispose() static dispose()

75
docker-compose/requirements/nginx/static/javascript/login/main.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 17:40:15 by edbernar #+# #+# */ /* Created: 2024/08/07 17:40:15 by edbernar #+# #+# */
/* Updated: 2024/09/12 17:44:51 by edbernar ### ########.fr */ /* Updated: 2024/09/13 11:12:15 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -21,32 +21,45 @@ class Login
const loginButton = document.getElementById('loginButton'); const loginButton = document.getElementById('loginButton');
const pLoginButton = loginButton.getElementsByTagName('p')[0]; const pLoginButton = loginButton.getElementsByTagName('p')[0];
const form = document.getElementById('loginForm'); const form = document.getElementById('loginForm');
let nodeText = null;
const registerButton = document.getElementsByClassName('new-player')[0]; const registerButton = document.getElementsByClassName('new-player')[0];
const button42 = document.getElementsByClassName('login-42-btn')[0]; const button42 = document.getElementsByClassName('login-42-btn')[0];
const registerForm = document.getElementById('registerForm'); const registerForm = document.getElementById('registerForm');
const loginBackButton = document.getElementsByClassName('old-player')[0]; const loginBackButton = document.getElementsByClassName('old-player')[0];
let usernameNode = null;
let nodeText = null;
registerButton.addEventListener('click', changeWindowLogin); registerButton.addEventListener('click', changeWindowLogin);
loginBackButton.addEventListener('click', changeWindowLoginBack); loginBackButton.addEventListener('click', changeWindowLoginBack);
button42.addEventListener('click', redirection); button42.addEventListener('click', redirection);
waitForLogin().then(() => { if (userMeInfo.id !== -1)
if (userMeInfo.id !== -1) {
{ usernameNode = document.createTextNode(userMeInfo.username);
nodeText = document.createTextNode(userMeInfo.username); loginButton.replaceChild(usernameNode, pLoginButton);
loginButton.replaceChild(nodeText, pLoginButton); loginButton.addEventListener('click', showMenu);
loginButton.addEventListener('click', showMenu); window.addEventListener('resize', movePopMenuLoginButton);
window.addEventListener('resize', movePopMenuLoginButton); movePopMenuLoginButton();
movePopMenuLoginButton(); initButtonPopMenuLogin();
initButtonPopMenuLogin(); }
} else
else {
{ waitForLogin().then(() => {
loginButton.addEventListener('click', showLoginDiv); if (userMeInfo.id !== -1)
} {
}); nodeText = document.createTextNode(userMeInfo.username);
form.addEventListener('submit', connect); loginButton.replaceChild(nodeText, pLoginButton);
registerForm.addEventListener('submit', createAccount); loginButton.addEventListener('click', showMenu);
window.addEventListener('resize', movePopMenuLoginButton);
movePopMenuLoginButton();
initButtonPopMenuLogin();
}
else
{
loginButton.addEventListener('click', showLoginDiv);
}
});
form.addEventListener('submit', connect);
registerForm.addEventListener('submit', createAccount);
}
} }
static dispose() static dispose()
@ -176,18 +189,18 @@ function connect(e)
e.preventDefault(); e.preventDefault();
sendRequest("login", {type: "byPass", mail: mail, password: e.target.password.value}); sendRequest("login", {type: "byPass", mail: mail, password: e.target.password.value});
// waitForLogin().then((isConnected) => { waitForLogin().then((isConnected) => {
// if (isConnected) if (isConnected)
// { {
// usernameNode = document.createTextNode(userMeInfo.username); usernameNode = document.createTextNode(userMeInfo.username);
// loginButton.replaceChild(usernameNode, pLoginButton); loginButton.replaceChild(usernameNode, pLoginButton);
// CN.new("Connected successfully", "Welcome " + userMeInfo.username, CN.defaultIcon.success); CN.new("Connected successfully", "Welcome " + userMeInfo.username, CN.defaultIcon.success);
// popout.style.display = 'none'; popout.style.display = 'none';
// } }
// }).catch((err) => { }).catch((err) => {
// console.error(err); console.error(err);
// CN.new("Error", "An error occured while trying to connect", CN.defaultIcon.error); CN.new("Error", "An error occured while trying to connect", CN.defaultIcon.error);
// }); });
} }
export { Login, changeWindowLoginBack }; export { Login, changeWindowLoginBack };

2
docker-compose/requirements/nginx/static/style/homePage/home.css
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */ /* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */
/* Updated: 2024/09/12 01:34:19 by edbernar ### ########.fr */ /* Updated: 2024/09/13 10:40:18 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */