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

Site

Browse Source 
- trunc username if > 8 in loginButton
    - reduct vague effect on home page
    - replace ground by infinite wall home page
    - change pong video
This commit is contained in:
Kum1ta
2024-10-06 17:04:45 +02:00
parent bcb10e8a36
commit aabf888e25
9 changed files with 25 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docker-compose/requirements/nginx/static/javascript/filesLoader.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/29 22:36:43 by edbernar #+# #+# */ /* Created: 2024/09/29 22:36:43 by edbernar #+# #+# */
/* Updated: 2024/10/01 21:58:57 by edbernar ### ########.fr */ /* Updated: 2024/10/06 16:42:07 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -16,6 +16,7 @@ const url_files = {
gameboyModel: '/static/models3D/homePage/gameboy.glb', gameboyModel: '/static/models3D/homePage/gameboy.glb',
tvModel: '/static/models3D/homePage/tv.glb', tvModel: '/static/models3D/homePage/tv.glb',
bannerModel: '/static/models3D/multiOnlineGame/banner.glb', bannerModel: '/static/models3D/multiOnlineGame/banner.glb',
infinitPlane: '/static/models3D/homePage/infinitPlane.glb',
pongVideo: '/static/video/homePage/pong.mp4', pongVideo: '/static/video/homePage/pong.mp4',
notLoginVideo: '/static/video/homePage/notLogin.webm', notLoginVideo: '/static/video/homePage/notLogin.webm',

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 23:13:53 by edbernar #+# #+# */ /* Created: 2024/08/22 23:13:53 by edbernar #+# #+# */
/* Updated: 2024/10/03 02:33:35 by edbernar ### ########.fr */ /* Updated: 2024/10/06 16:47:57 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -24,7 +24,6 @@ class Screen
screenMaterial = null; screenMaterial = null;
canvasVideo = null; canvasVideo = null;
interval = null; interval = null;
intervalLight = null;
constructor(scene) constructor(scene)
{ {
@ -37,9 +36,7 @@ class Screen
tv.geometry.center(); tv.geometry.center();
this.tv = tv; this.tv = tv;
tv.position.set(0, 0.99, 2); tv.position.set(0, 0.99, 2);
tv.material = new THREE.MeshPhysicalMaterial({color: 0x454545}); tv.material = new THREE.MeshPhysicalMaterial({color: 0x050505});
tv.material.roughness = 1;
tv.material.metalness = 1.05;
tv.scale.set(0.05, 0.05, 0.05); tv.scale.set(0.05, 0.05, 0.05);
tv.castShadow = true; tv.castShadow = true;
tv.receiveShadow = true; tv.receiveShadow = true;
@ -159,8 +156,6 @@ class Screen
dispose() dispose()
{ {
this.#disposeVideo(); this.#disposeVideo();
if (this.intervalLight)
clearInterval(this.intervalLight);
} }

44
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/10/03 02:39:58 by edbernar ### ########.fr */ /* Updated: 2024/10/06 16:58:43 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -101,7 +101,7 @@ function home3D()
const loader = new GLTFLoader(); const loader = new GLTFLoader();
let actualVideo = -1; let actualVideo = -1;
let globalSpeed = 0.75; let globalSpeed = 0.75;
const ambiantLight = new THREE.AmbientLight(0xffffff, 35); const ambiantLight = new THREE.AmbientLight(0xffffff, 1);
const video = { const video = {
pong: files.pongVideo, pong: files.pongVideo,
login: files.notLoginVideo login: files.notLoginVideo
@ -117,7 +117,7 @@ function home3D()
isInFade = false; isInFade = false;
spotLight = new THREE.SpotLight(0xffffff, 1000); spotLight = new THREE.SpotLight(0xffffff, 1000);
spotLight.angle = Math.PI / 6; // angle d'ouverture spotLight.angle = Math.PI / 6;
spotLight.penumbra = 0.5; spotLight.penumbra = 0.5;
spotLight.decay = 2; spotLight.decay = 2;
spotLight.distance = 50; spotLight.distance = 50;
@ -128,10 +128,10 @@ function home3D()
if (Math.random() % 100 > 0.99) if (Math.random() % 100 > 0.99)
video.pong = files.easterEggVideo; video.pong = files.easterEggVideo;
// newBgWall();
putObject(files.lampModel, -2.5, 0, 2.5, 3, 0, Math.PI + Math.PI / 8, 0); putObject(files.lampModel, -2.5, 0, 2.5, 3, 0, Math.PI + Math.PI / 8, 0);
putObject(files.plantModel, 1.5, 0, 3, 0.5, 0, 0, 0); putObject(files.plantModel, 1.5, 0, 3, 0.5, 0, 0, 0);
putObject(files.gameboyModel, -0.5, -0.075, 0.5, 0.1, 0, 0.4, 0); putObject(files.gameboyModel, -0.5, -0.075, 0.5, 0.1, 0, 0.4, 0);
putObject(files.infinitPlane, -1, 0, 0, 10, 0, Math.PI / 2 + 0.5, 0, 0x252525);
renderer.toneMapping = THREE.LinearToneMapping; renderer.toneMapping = THREE.LinearToneMapping;
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
@ -141,7 +141,7 @@ function home3D()
scene.background = new THREE.Color(0x020202) scene.background = new THREE.Color(0x020202)
scene.add(ambiantLight); scene.add(ambiantLight);
createPlane(); // createPlane();
createCube(); createCube();
document.body.getElementsByClassName('homeSection')[0].appendChild(renderer.domElement); document.body.getElementsByClassName('homeSection')[0].appendChild(renderer.domElement);
@ -172,7 +172,7 @@ function home3D()
if (camera.position.x < 3.3 && interval) if (camera.position.x < 3.3 && interval)
fadeInOut(); fadeInOut();
if (dofPass.materialBokeh.uniforms.aperture.value > 0 && interval) if (dofPass.materialBokeh.uniforms.aperture.value > 0 && interval)
dofPass.materialBokeh.uniforms.aperture.value -= 0.0001; dofPass.materialBokeh.uniforms.aperture.value -= 0.0003;
if (camera.position.x < 3 && interval) if (camera.position.x < 3 && interval)
{ {
clearInterval(interval); clearInterval(interval);
@ -271,10 +271,11 @@ function home3D()
composer.render(); composer.render();
} }
function putObject(objUrl, x, y, z, scale, rX, rY, rZ) { function putObject(objUrl, x, y, z, scale, rX, rY, rZ, color = 0x080808)
{
loader.load(objUrl, (gltf) => { loader.load(objUrl, (gltf) => {
const group = new THREE.Group(); const group = new THREE.Group();
const material = new THREE.MeshPhysicalMaterial({color: 0x080808}); const material = new THREE.MeshPhysicalMaterial({color: color});
gltf.scene.children.forEach(elem => { gltf.scene.children.forEach(elem => {
elem.traverse((child) => { elem.traverse((child) => {
@ -294,21 +295,6 @@ function home3D()
}); });
} }
function newBgWall()
{
const geometry = new THREE.BoxGeometry(100, 100, 0.1);
const material = new THREE.MeshStandardMaterial({color: 0x020202});
const mesh = new THREE.Mesh(geometry, material);
const geometry2 = new THREE.BoxGeometry(10, 10, 0.1);
const material2 = new THREE.MeshStandardMaterial({color: 0x020202});
const mesh2 = new THREE.Mesh(geometry2, material2);
mesh.position.set(0, 0, 5);
scene.add(mesh);
mesh2.position.set(-5, 0, 0);
mesh2.rotateY(Math.PI / 2);
scene.add(mesh2);
}
function createCube() function createCube()
{ {
const geometry = new THREE.BoxGeometry(5, 5, 0.1); const geometry = new THREE.BoxGeometry(5, 5, 0.1);
@ -319,18 +305,6 @@ function home3D()
scene.add(mesh); scene.add(mesh);
} }
function createPlane()
{
const geometry = new THREE.PlaneGeometry(500, 500);
const material = new THREE.MeshPhysicalMaterial({side: THREE.DoubleSide, color: 0x020202});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
mesh.rotateX(-(Math.PI / 2));
mesh.receiveShadow = true;
scene.add(mesh);
}
function fadeInOut() { function fadeInOut() {
if (isInFade) if (isInFade)
return; return;

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

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* main.js :+: :+: :+: */ /* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */ /* 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/10/05 22:12:30 by madegryc ### ########.fr */ /* Updated: 2024/10/06 17:00:12 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -48,6 +48,8 @@ class LobbyPage
waitForLogin().then(() => usernameP.innerHTML = userMeInfo.username); waitForLogin().then(() => usernameP.innerHTML = userMeInfo.username);
else else
usernameP.innerHTML = userMeInfo.username; usernameP.innerHTML = userMeInfo.username;
if (usernameP.length > 8)
usernameP.innerHTML = usernameP.innerHTML.substring(0, 8) + '...';
LiveChat.create(); LiveChat.create();
inputUser.addEventListener('input', searchUser); inputUser.addEventListener('input', searchUser);
loginButton.addEventListener('click', showMenu); loginButton.addEventListener('click', showMenu);

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

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* main.js :+: :+: :+: */ /* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */ /* 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/10/05 22:32:01 by madegryc ### ########.fr */ /* Updated: 2024/10/06 17:01:31 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -35,7 +35,7 @@ class Login
button42.addEventListener('click', redirection); button42.addEventListener('click', redirection);
if (userMeInfo.id !== -1) if (userMeInfo.id !== -1)
{ {
usernameNode = document.createTextNode(userMeInfo.username); usernameNode = document.createTextNode(userMeInfo.username.lenght > 8 ? userMeInfo.username.substring(0, 8) + '...' : userMeInfo.username);
loginButton.replaceChild(usernameNode, pLoginButton); loginButton.replaceChild(usernameNode, pLoginButton);
loginButton.addEventListener('click', showMenu); loginButton.addEventListener('click', showMenu);
window.addEventListener('resize', movePopMenuLoginButton); window.addEventListener('resize', movePopMenuLoginButton);

7
docker-compose/requirements/nginx/static/javascript/profilPage/main.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/19 23:08:31 by edbernar #+# #+# */ /* Created: 2024/09/19 23:08:31 by edbernar #+# #+# */
/* Updated: 2024/10/02 13:34:58 by edbernar ### ########.fr */ /* Updated: 2024/10/06 16:32:51 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -182,12 +182,11 @@ function createGraph(ctx, data)
new Chart(ctx, { new Chart(ctx, {
type: 'pie', type: 'pie',
data: { data: {
labels: ['Win', 'Lose'], labels: [' Win ', ' Lose '],
datasets: [{ datasets: [{
label: 'Couleurs',
data: [data.win, data.lose], data: [data.win, data.lose],
backgroundColor: ['#11ad11', '#E74040'], backgroundColor: ['#11ad11', '#E74040'],
hoverOffset: 4 hoverOffset: 1,
}] }]
}, },
options: { options: {

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/25 17:00:35 by edbernar #+# #+# */ /* Created: 2024/09/25 17:00:35 by edbernar #+# #+# */
/* Updated: 2024/09/30 22:47:54 by edbernar ### ########.fr */ /* Updated: 2024/10/06 17:02:12 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -51,7 +51,7 @@ class settingsPage
interval = setInterval(() => { interval = setInterval(() => {
if (userMeInfo.username != "") if (userMeInfo.username != "")
{ {
loginButton.innerText = userMeInfo.username; loginButton.innerText = userMeInfo.username.length > 8 ? userMeInfo.username.substring(0, 8) + '...' : userMeInfo.username;
clearInterval(interval); clearInterval(interval);
} }
}, 200); }, 200);

BIN
docker-compose/requirements/nginx/static/models3D/homePage/infinitPlane.glb Normal file
View File

Binary file not shown.

BIN
docker-compose/requirements/nginx/static/video/homePage/pong.mp4
View File

Binary file not shown.