Site

- Updated functions in class with function create/dispose

docker-compose/requirements/nginx/static/javascript/Page.js

@@ -0,0 +1,24 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   Page.js                                            :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/08/25 00:00:21 by edbernar          #+#    #+#             */
+/*   Updated: 2024/08/25 00:27:21 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+class Page
+{
+	actualPage = null;
+
+	constructor()
+	{
+		
+	}
+
+};
+
+export { Page }

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

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 23:13:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/24 23:27:42 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/25 02:16:17 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -25,15 +25,17 @@ let	light = {
 
 class Screen
 {
+	scene = null;
 	screen = null;
 	tv = null;
 	screenMaterial = null;
 	canvasVideo = null;
 	interval = null;
+	intervalLight = null;
 
 	constructor(scene)
 	{
-
+		this.scene = scene;
 		this.screen = this.#createScreen(scene);
 		loader.load(tvModel, (gltf) => {
 			const tv = gltf.scene.children[0];
@@ -89,7 +91,7 @@ class Screen
 		pointLight.target = targetObject;
 		pointLight.target.updateMatrixWorld();
 		scene.add(pointLight);
-		setInterval(() => {
+		this.intervalLight = setInterval(() => {
 			const	intensity = Math.random() * 2 + 10;
 			
 			pointLight.intensity = intensity * light.point > 13 * light.point ? 13 * light.point : intensity * light.point;
@@ -175,6 +177,13 @@ class Screen
 		}
 	}
 
+	dispose()
+	{
+		this.#disposeVideo();
+		if (this.intervalLight)
+			clearInterval(this.intervalLight);
+	}
+	
 
 };
 

docker-compose/requirements/nginx/static/javascript/home3D/home3D.js

@@ -6,41 +6,123 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 17:19:17 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/24 23:24:22 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/25 02:19:56 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
-import * as THREE from '/static/javascript/three/build/three.module.js'
-import { Screen, light } from '/static/javascript/home3D/Screen.js'
-
 import { EffectComposer } from '/static/javascript/three/examples/jsm/postprocessing/EffectComposer.js';
 import { RenderPass } from '/static/javascript/three/examples/jsm/postprocessing/RenderPass.js';
 import { BokehPass } from '/static/javascript/three/examples/jsm/postprocessing/BokehPass.js';
+import * as THREE from '/static/javascript/three/build/three.module.js'
+import { Screen, light } from '/static/javascript/home3D/Screen.js'
 
+let		scene			= null;
+let		renderer		= null;
+let		camera			= null;
+let		screen			= null;
+let		raycaster		= null;
+let		interval		= null;
+let		intervalFade	= null;
+let		isInFade		= false;
+let		composer		= null;
+let		mouse			= null;
+let		renderPass		= null;
+let		dofPass			= null;
 
-const	scene			= new THREE.Scene();
+class Home3D
-const	renderer		= new THREE.WebGLRenderer({antialias: true});
+{
-const	camera			= new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight);
+	static create()
+	{
+		home3D();
+	}
+
+	static dispose()
+	{
+		document.removeEventListener('resize', windowUpdater);
+		document.removeEventListener('mousemove', mouseTracker);
+
+		if (interval)
+			clearInterval(interval);
+		interval = null;
+		if (intervalFade)
+			clearInterval(intervalFade);
+		intervalFade = null;
+		if (screen)
+			screen.dispose();
+		screen = null;
+		if (composer)
+		{
+			if (dofPass)
+				composer.removePass(dofPass);
+			if (renderPass)
+				composer.removePass(renderPass);
+			composer.dispose();
+			dofPass = null;
+			composer = null;
+		}
+		isInFade = false;
+		if (renderer)
+			renderer.dispose();
+		renderer = null;
+		if (scene)
+		{
+			scene.children.forEach(child => {
+				scene.remove(child);
+				if (child.geometry)
+					child.geometry.dispose();
+				if (child.material)
+					child.material.dispose();
+				if (child.texture)
+					child.texture.dispose();
+			});
+		}
+		scene = null;
+		camera = null;
+		mouse = null;
+	}
+}
+
+function home3D()
+{
+	let		actualVideo		= -1;
+	let		globalSpeed		= 0.75;
 	const	ambiantLight	= new THREE.AmbientLight(0xffffff, 35);
-const	screen			= new Screen(scene);
+	const	video			= {
-const	cube			= createCube();
+		pong: '/static/video/homePage/pong.mp4',
+		login: '/static/video/homePage/notLogin.webm'
+	};
 	
+	scene			= new THREE.Scene();
+	renderer		= new THREE.WebGLRenderer({antialias: true});
+	camera			= new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight);
+	screen			= new Screen(scene);
+	raycaster		= new THREE.Raycaster();
+	interval		= null;
+	mouse			= new THREE.Vector2();
+	isInFade		= false;
+	
+	if (Math.random() % 100 > 0.97)
+		video.pong = '/static/video/homePage/easteregg.webm'
 	renderer.toneMapping = THREE.LinearToneMapping;
 	renderer.shadowMap.enabled = true;
 	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 	renderer.setSize(window.innerWidth, window.innerHeight);
-document.body.getElementsByClassName('homeSection')[0].appendChild(renderer.domElement);
-scene.background = new THREE.Color(0x020202)
 	camera.position.set(6, 1, -5.5);
 	camera.rotation.set(Math.PI + 0.2, 0, Math.PI);
+	scene.background = new THREE.Color(0x020202)
 	scene.add(ambiantLight);
 	
-let globalSpeed = 0.75;
+	createPlane();
+	createCube();
+	document.body.getElementsByClassName('homeSection')[0].appendChild(renderer.domElement);
 	
-const composer = new EffectComposer(renderer);
+	document.addEventListener('resize', windowUpdater);
-composer.addPass(new RenderPass(scene, camera));
+	document.addEventListener('mousemove', mouseTracker);
 
-const dofPass = new BokehPass(scene, camera, {
+	composer		= new EffectComposer(renderer);
+	renderPass		= new RenderPass(scene, camera);
+	composer.addPass(renderPass);
+	dofPass			= new BokehPass(scene, camera, {
 								focus: 10.0,
 								aperture: 0.02,
 								maxblur: 0.01,
@@ -48,7 +130,12 @@ const dofPass = new BokehPass(scene, camera, {
 	composer.addPass(dofPass);
 	
 	setTimeout(() => {
-	let interval = setInterval(() => {
+		interval = setInterval(() => {
+			if (screen == null)
+			{
+				clearInterval(interval);
+				return ;
+			}
 			camera.position.x -= (0.01 * globalSpeed);
 			camera.lookAt(screen.tv.position);
 			if (camera.position.x < 3.3)
@@ -60,6 +147,11 @@ setTimeout(() => {
 				clearInterval(interval);
 				camera.position.set(-2, 4, -6);
 				interval = setInterval(() => {
+					if (screen == null)
+					{
+						clearInterval(interval);
+						return ;
+					}
 					camera.lookAt(screen.tv.position);
 					camera.position.x += (0.01 * globalSpeed);
 					camera.position.y -= (0.005 * globalSpeed);
@@ -70,6 +162,11 @@ setTimeout(() => {
 						camera.position.set(0, 1.2, 0);
 						clearInterval(interval);
 						interval = setInterval(() => {
+							if (screen == null)
+							{
+								clearInterval(interval);
+								return ;
+							}
 							camera.lookAt(screen.tv.position);
 							camera.position.y += (0.005 * globalSpeed);
 							camera.position.z -= (0.01 * globalSpeed);
@@ -86,93 +183,7 @@ setTimeout(() => {
 				}, 10);
 			}
 		}, 10);
-}, 500)
-
-document.addEventListener('resize', () => {
-	renderer.setSize(window.innerWidth, window.innerHeight);
-	camera.aspect = window.innerWidth / window.innerHeight;
-	camera.updateProjectionMatrix();
-});
-
-let isInFade = false;
-
-function fadeInOut()
-{
-	if (isInFade)
-		return;
-	let interval = null;
-	isInFade = true;
-	interval = setInterval(() => {
-		light.point -= 0.2;
-		screen.screen.material.opacity -= 0.05;
-		if (screen.screen.material.opacity <= 0)
-		{
-			clearInterval(interval);
-			setTimeout(() => {
-				interval = setInterval(() => {
-					light.point += 0.2;
-					screen.screen.material.opacity += 0.05;
-					if (screen.screen.material.opacity >= 1)
-					{
-						clearInterval(interval);
-						interval = setInterval(() => {
-							light.point += 0.2;
-							if (light.point >= 1)
-								clearInterval(interval);
-						}, 10);
-						isInFade = false;
-					}
-				}, 20);
 	}, 500);
-		}
-	}, 20);
-}
-
-function createCube()
-{
-	const	geometry	= new THREE.BoxGeometry(5, 5, 0.1);
-	const	material	= new THREE.MeshStandardMaterial({color: 0x020202});
-	const	mesh		= new THREE.Mesh(geometry, material);
-
-	mesh.position.set(8, 1, -5);
-	scene.add(mesh);
-}
-
-const raycaster = new THREE.Raycaster();
-const mouse = new THREE.Vector2();
-
-document.addEventListener( 'mousemove', (event) => {
-	event.preventDefault();
-	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
-});
-
-
-function home3D()
-{
-	createPlane();
-	renderer.setAnimationLoop(loop)
-}
-
-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);
-}
-
-const video = {
-	pong: '/static/video/homePage/pong.mp4',
-	login: '/static/video/homePage/notLogin.webm'
-}
-let	actualVideo = -1;
-if (Math.random() % 100 > 0.97)
-	video.pong = '/static/video/homePage/easteregg.webm'
 
 	setTimeout(() => {
 		screen.changeVideo(video.pong);
@@ -213,5 +224,90 @@ function loop()
 		composer.render();
 	}
 
+	function createCube()
+	{
+		const	geometry	= new THREE.BoxGeometry(5, 5, 0.1);
+		const	material	= new THREE.MeshStandardMaterial({color: 0x020202});
+		const	mesh		= new THREE.Mesh(geometry, material);
 
-export { home3D };
+		mesh.position.set(8, 1, -5);
+		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()
+	{
+		if (isInFade)
+			return;
+		intervalFade = null;
+		isInFade = true;
+		intervalFade = setInterval(() => {
+			if (screen == null)
+			{
+				clearInterval(intervalFade);
+				return ;
+			}
+			light.point -= 0.2;
+			screen.screen.material.opacity -= 0.05;
+			if (screen.screen.material.opacity <= 0)
+			{
+				clearInterval(intervalFade);
+				setTimeout(() => {
+					if (screen == null)
+					{
+						clearInterval(intervalFade);
+						return ;
+					}
+					interval = setInterval(() => {
+						light.point += 0.2;
+						screen.screen.material.opacity += 0.05;
+						if (screen.screen.material.opacity >= 1)
+						{
+							if (screen == null)
+							{
+								clearInterval(intervalFade);
+								return ;
+							}
+							clearInterval(intervalFade);
+							intervalFade = setInterval(() => {
+								light.point += 0.2;
+								if (light.point >= 1)
+									clearInterval(intervalFade);
+							}, 10);
+							isInFade = false;
+						}
+					}, 20);
+				}, 500);
+			}
+		}, 20);
+	}
+
+	renderer.setAnimationLoop(loop)
+}
+
+function windowUpdater()
+{
+	renderer.setSize(window.innerWidth, window.innerHeight);
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+};
+
+function mouseTracker (event)
+{
+	event.preventDefault();
+	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+};
+
+export { Home3D };

docker-compose/requirements/nginx/static/javascript/homePage/main.js

@@ -0,0 +1,43 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   main.js                                            :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/08/25 00:02:19 by edbernar          #+#    #+#             */
+/*   Updated: 2024/08/25 02:06:24 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+import { Home3D } from "/static/javascript/home3D/home3D.js"
+
+class HomePage
+{
+	static create()
+	{
+		Home3D.create();
+		window.addEventListener('scroll', scrool);
+	}
+
+	static dispose()
+	{
+		Home3D.dispose();
+		window.addEventListener('scroll', scrool);
+	}
+};
+
+
+function scrool()
+{
+	const scrollPosition = window.scrollY;
+	const rotationAngle = scrollPosition * 0.1;
+	const parallaxElement = document.querySelector('#firstBall');
+	const parallaxElement2 = document.querySelector('#secondBall');
+	const parallaxSpeed = scrollPosition * -0.17;
+
+	parallaxElement.style.transform = `translateX(-50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
+	parallaxElement2.style.transform = `translateX(50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
+}
+
+export { HomePage };

docker-compose/requirements/nginx/static/javascript/main.js

@@ -6,31 +6,19 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:50:35 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/24 23:24:33 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/25 02:21:47 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import { liveChat } from "/static/javascript/liveChat/main.js";
 import { login } from "/static/javascript/login/main.js";
-import { home3D } from "/static/javascript/home3D/home3D.js"
+import { HomePage } from "/static/javascript/homePage/main.js"
-
-window.addEventListener('scroll', () => {
-	const scrollPosition = window.scrollY;
-	const rotationAngle = scrollPosition * 0.1;
-	const parallaxElement = document.querySelector('#firstBall');
-	const parallaxElement2 = document.querySelector('#secondBall');
-	const parallaxSpeed = scrollPosition * -0.17;
-
-	parallaxElement.style.transform = `translateX(-50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
-	parallaxElement2.style.transform = `translateX(50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
-});
-
-// document.getElementById('closePopupBtn').addEventListener('click', function() {
-// 	document.getElementById('loginPopup').style.display = 'none';
-// });
 
 document.addEventListener('DOMContentLoaded', () => {
 	liveChat();
 	login();
-	home3D();
+	HomePage.create();
+	setTimeout(() => {
+		HomePage.dispose();
+	}, 3000);
 });