Login popup

- add 3d on left

docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html

@@ -18,7 +18,9 @@
 </div>
 	<div id="loginPopup" class="popup">
 		<div class="containerHomePage">
-			<div class="left-side"></div>
+			<div class="left-side">
+				<canvas id="canvas-left-side" style="width: 100%; height: 100%;"></canvas>
+			</div>
 			<div class="right-side">
 				<img id="cross-login" src="/static/img/profilPage/back.svg"></img>
 				<h1>Access to a new WORLD</h1>

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

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   filesLoader.js                                     :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/29 22:36:43 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/09 18:06:05 by madegryc         ###   ########.fr       */
+/*   Updated: 2024/11/13 22:35:34 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 

docker-compose/requirements/nginx/static/javascript/login/3d.js

@@ -6,18 +6,138 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/11/13 11:36:46 by edbernar          #+#    #+#             */
-/*   Updated: 2024/11/13 11:43:46 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/11/13 23:34:24 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+import { files } from "/static/javascript/filesLoader.js";
+import * as THREE from "/static/javascript/three/build/three.module.js";
+import { GLTFLoader } from "/static/javascript/three/examples/jsm/loaders/GLTFLoader.js";
+
+let camera = null;
+let scene = null;
+let renderer = null;
+
 function main3d()
 {
-	const	div = document.getElementById('left-side');
+	const	loader		= new GLTFLoader();
+	const	canvas		= document.getElementById('canvas-left-side');
+	const	div			= document.getElementById('left-side');
+	const	objectList	= [files.lampModel, files.plantModel, files.gameboyModel, files.tvModel];
 
-	div.innerHTML = '<canvas id="canvas-left-side" width="800" height="600"></canvas>';
+	renderer = new THREE.WebGLRenderer({canvas: canvas});
-	const canvas = div.getElementsByTagName('canvas')[0];
+	renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+	scene = new THREE.Scene();
+	camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
+	camera.position.z = 5;
+	camera.position.y = 2;
+	scene.add(camera);
+	scene.background = new THREE.Color(0x696969);
+	scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+	const light = new THREE.DirectionalLight(0xffffff, 1);
+	light.position.set(0, 5, 5);
+	scene.add(light);
+	const nb = Math.floor(Math.random() * objectList.length);
+	loader.load(objectList[nb], (gltf) => {
+		const group = new THREE.Group();
+		const material =  new THREE.MeshPhysicalMaterial({color: 0x2e2e2e});
 
+		gltf.scene.children.forEach(elem => {
+			elem.traverse((child) => {
+				if (child.isMesh) {
+					child.material = material;
+					child.receiveShadow = true;
+					child.castShadow = true;
+				}
+			});
+			group.add(elem);
+		});
 
+		if (nb == 0)
+			lampSettings(group);
+		else if (nb == 1)
+			plantSettings(group);
+		else if (nb == 2)
+			gameBoySettings(group);
+		else if (nb == 3)
+			tvSettings(group);
+		scene.add(group);
+	});
+	renderer.setAnimationLoop(loop);
+
+	window.addEventListener('resize', resizeCanvas);
 }
 
-export { main3d };
+function resizeCanvas()
+{
+	canvas.style.width = '100%';
+	canvas.style.height = '100%';
+	renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+	camera.aspect = canvas.clientWidth / canvas.clientHeight;
+	camera.updateProjectionMatrix();
+};
+
+function dispose3d()
+{
+	window.removeEventListener('resize', resizeCanvas);
+	console.log('dispose3d');
+	if (renderer)
+		renderer.dispose();
+	if (scene)
+	{
+		for (let i = scene.children.length - 1; i >= 0; i--)
+		{
+			const obj = scene.children[i];
+			if (obj.type === 'Group')
+			{
+				for (let j = obj.children.length - 1; j >= 0; j--)
+				{
+					const child = obj.children[j];
+					if (child.type === 'Mesh')
+					{
+						child.geometry.dispose();
+						child.material.dispose();
+						obj.remove(child);
+					}
+				}
+				scene.remove(obj);
+			}
+		}
+	}
+	renderer = null;
+	scene = null;
+	camera = null;
+}
+
+function loop()
+{
+	console.log('loop');
+	renderer.render(scene, camera);
+	if (scene.children[3])
+		scene.children[3].rotation.y += 0.005;
+}
+
+function lampSettings(group)
+{
+	group.scale.set(3, 3, 3);
+}
+
+function plantSettings(group)
+{
+	group.scale.set(0.5, 0.5, 0.5);
+}
+
+function gameBoySettings(group)
+{
+	group.scale.set(0.7, 0.7, 0.7);
+	group.rotation.set(0, 0, -1.5);
+	group.position.set(0, 2, 0);
+}
+
+function tvSettings(group)
+{
+	group.scale.set(0.25, 0.25, 0.25);
+	group.position.set(0, 1.5, 0);
+}
+
+export { main3d, dispose3d };

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

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 17:40:15 by edbernar          #+#    #+#             */
-/*   Updated: 2024/11/13 11:40:25 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/11/13 23:29:05 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -14,7 +14,7 @@ import { userMeInfo, waitForLogin } from "/static/javascript/typeResponse/typeLo
 import { createNotification as CN } from "/static/javascript/notification/main.js";
 import { sendRequest } from "/static/javascript/websocket.js";
 import { pageRenderer } from '/static/javascript/main.js'
-import { main3d } from '/static/javascript/login/3d.js'
+import { main3d, dispose3d } from '/static/javascript/login/3d.js'
 
 class Login
 {
@@ -200,6 +200,7 @@ function	showLoginDiv()
 	{		
 		document.body.style.overflow = 'auto';
 		popout.style.display = 'none';
+		dispose3d();
 	}
 	else
 	{
@@ -225,6 +226,7 @@ function closeClickOutsiteGameMode(event)
 {
 	if (event.target == document.getElementById('loginPopup'))
 	{
+		dispose3d();
 		document.getElementById('loginPopup').style.display = 'none';
 		document.body.style.overflow = 'auto';	
 	}

docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 17:02:47 by edbernar          #+#    #+#             */
-/*   Updated: 2024/11/13 15:33:26 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/11/13 22:16:05 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 

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

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   home.css                                           :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 12:00:55 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/09 16:23:22 by madegryc         ###   ########.fr       */
+/*   Updated: 2024/11/13 23:33:35 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -128,7 +128,7 @@
 }
 
 .popup {
-    display: none; /* La popup est masquée par défaut */
+    display: none;
     position: fixed;
     top: 0;
     left: 0;

docker-compose/requirements/nginx/static/style/homePage/loginPage.css

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 17:15:28 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/26 11:04:43 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/11/13 23:33:28 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 

docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css

@@ -607,10 +607,6 @@ input:checked + .slider:before {
 	border-radius: 50%;
 }
 
-#canvas-left-side{
-	background-color: #21f356;
-}
-
 @media (max-aspect-ratio: 1/1){
 	.main {
 		flex-direction: column;