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

Site

Browse Source 
- Add variable for disable 3d in homePage
    - add 3d on lobby page
This commit is contained in:
Kum1ta
2024-09-13 16:44:08 +02:00
parent 422ffcb440
commit c332be46c0
4 changed files with 207 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */
/* Updated: 2024/09/13 10:53:06 by edbernar ### ########.fr */
/* Updated: 2024/09/13 16:42:37 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -18,6 +18,8 @@ import * as THREE from '/static/javascript/three/build/three.module.js'
import { Screen, light } from '/static/javascript/home3D/Screen.js'
import { pageRenderer } from '/static/javascript/main.js'
const disable3D = true;
let scene = null;
let renderer = null;
let camera = null;
@ -35,6 +37,7 @@ class Home3D
{
static create()
{
if (!disable3D)
home3D();
}
@ -44,6 +47,8 @@ class Home3D
document.removeEventListener('mousemove', mouseTracker);
document.removeEventListener('click', redirection);
if (!disable3D)
{
if (interval)
clearInterval(interval);
interval = null;
@ -84,6 +89,7 @@ class Home3D
mouse = null;
}
}
}
function home3D()
{
@ -120,6 +126,8 @@ function home3D()
document.body.getElementsByClassName('homeSection')[0].appendChild(renderer.domElement);
document.addEventListener('resize', windowUpdater);
mouse.x = 9999;
mouse.y = 9999;
document.addEventListener('mousemove', mouseTracker);
composer = new EffectComposer(renderer);

148
docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js Normal file
View File

@ -0,0 +1,148 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* 3d.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/13 13:59:46 by edbernar #+# #+# */
/* Updated: 2024/09/13 15:36:35 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from '/static/javascript/three/build/three.module.js'
let actualBarSelecor = null;
let actualGoalSelecter = null;
class barSelecter
{
scene = null;
renderer = null;
camera = null;
ambiantLight = new THREE.AmbientLight(0xffffff, 35);
bar = this.createBarPlayer(0xe3e3e3)
constructor(div)
{
const pos = div.getBoundingClientRect();
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.camera = new THREE.PerspectiveCamera(60, (pos.width - 10) / (pos.height - 10));
this.scene.background = new THREE.Color(0x020202);
this.renderer.setSize(pos.width - 10, pos.height - 10);
this.scene.add(this.ambiantLight);
this.camera.position.set(0.7, 0.5, 0.7);
div.appendChild(this.renderer.domElement);
actualBarSelecor = this;
this.scene.add(this.bar);
actualBarSelecor.camera.lookAt(actualBarSelecor.bar.position);
this.renderer.setAnimationLoop(this.#loop);
}
createBarPlayer(color)
{
const geometry = new THREE.BoxGeometry(1, 0.1, 0.1);
const material = new THREE.MeshPhysicalMaterial({color: color});
const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
return (mesh);
}
#loop()
{
actualBarSelecor.renderer.render(actualBarSelecor.scene, actualBarSelecor.camera);
actualBarSelecor.bar.rotation.y += 0.005;
}
dispose()
{
if (this.renderer)
this.renderer.dispose();
this.renderer = null;
if (this.scene)
{
this.scene.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.scene = null;
actualBarSelecor = null;
}
}
class goalSelecter
{
scene = null;
renderer = null;
camera = null;
ambiantLight = new THREE.AmbientLight(0xffffff, 35);
goal = this.createGoal(0xffffff);
constructor(div)
{
const pos = div.getBoundingClientRect();
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.camera = new THREE.PerspectiveCamera(60, (pos.width - 10) / (pos.height - 10));
this.scene.background = new THREE.Color(0x020202);
this.renderer.setSize(pos.width - 10, pos.height - 10);
this.scene.add(this.ambiantLight);
this.camera.position.set(0.7, 0.5, 0.7);
div.appendChild(this.renderer.domElement);
actualGoalSelecter = this;
this.scene.add(this.goal);
this.camera.lookAt(actualGoalSelecter.goal.position);
this.renderer.setAnimationLoop(this.#loop);
}
createGoal(color)
{
const geometry = new THREE.BoxGeometry(1, 0.1, 0.1);
const material = new THREE.MeshPhysicalMaterial({color: color});
const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
return (mesh);
}
#loop()
{
actualGoalSelecter.goal.rotation.y += 0.1;
actualGoalSelecter.goal.rotation.x += 0.1;
actualGoalSelecter.goal.rotation.z += 0.1;
actualGoalSelecter.renderer.render(actualGoalSelecter.scene, actualGoalSelecter.camera);
}
dispose()
{
if (this.renderer)
this.renderer.dispose();
this.renderer = null;
if (this.scene)
{
this.scene.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.scene = null;
actualGoalSelecter = null;
}
}
export { barSelecter, goalSelecter }

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

@ -6,10 +6,12 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
/* Updated: 2024/09/13 10:41:51 by edbernar ### ########.fr */
/* Updated: 2024/09/13 15:43:17 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { barSelecter, goalSelecter } from '/static/javascript/lobbyPage/3d.js';
/*
Information :
- 0: Multiplayer local
@ -20,6 +22,8 @@
let listSelectCard = null;
let gameMode = 0;
let barSelector = null;
let goalSelector = null;
class LobbyPage
{
@ -40,6 +44,8 @@ class LobbyPage
{
document.body.children[i].style.animation = 'animShowMenuDiv 0.5s';
}
barSelector = new barSelecter(document.getElementById('bar'));
goalSelector = new goalSelecter(document.getElementById('goal'));
}
static dispose()
@ -53,6 +59,10 @@ class LobbyPage
listSelectCard[2].removeEventListener('click', selectGameModeThree);
listSelectCard[3].removeEventListener('click', selectGameModeFour);
listSelectCard = null;
barSelector.dispose();
barSelector = null;
goalSelector.dispose();
goalSelector = null;
}
}

4
site/real_game/class/SoloGame.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* SoloGame.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/28 12:07:39 by edbernar #+# #+# */
/* Updated: 2024/09/11 17:14:19 by hubourge ### ########.fr */
/* Updated: 2024/09/13 15:33:01 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */