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

Login popup

Browse Source 
- add 3d on left
This commit is contained in:
Kum1ta
2024-11-13 23:36:54 +01:00
parent cf6ec99737
commit de77cfe9d4
8 changed files with 139 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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 */
/* */
/* ************************************************************************** */

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

@ -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>';
const canvas = div.getElementsByTagName('canvas')[0];
renderer = new THREE.WebGLRenderer({canvas: canvas});
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 };

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

@ -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';
}

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

@ -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 */
/* */
/* ************************************************************************** */

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

@ -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;

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

@ -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 */
/* */
/* ************************************************************************** */

4
docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
View File

@ -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;