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

Site

Browse Source 
- creater loader at the first launch
    - optimize loader
This commit is contained in:
Kum1ta
2024-09-30 01:24:32 +02:00
parent 76cf5d0585
commit 43c293c469
11 changed files with 178 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
docker-compose/requirements/nginx/static/javascript/filesLoader.js Normal file
View File

@ -0,0 +1,74 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* filesLoader.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/29 22:36:43 by edbernar #+# #+# */
/* Updated: 2024/09/30 00:56:01 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
const url_files = {
lampModel: '/static/models3D/homePage/lamp.glb',
plantModel: '/static/models3D/homePage/plant.glb',
gameboyModel: '/static/models3D/homePage/gameboy.glb',
tvModel: '/static/models3D/homePage/tv.glb',
bannerModel: '/static/models3D/multiOnlineGame/banner.glb',
pongVideo: '/static/video/homePage/pong.mp4',
notLoginVideo: '/static/video/homePage/notLogin.webm',
easterEggVideo: '/static/video/homePage/easteregg.webm',
goalVideoPub: '/static/video/multiOnlineGamePage/goal2.webm',
easterEggVideoPub: '/static/video/multiOnlineGamePage/easteregg.webm',
outstandingVideoPub: '/static/video/multiOnlineGamePage/outstanding.webm',
pingVideoPub: '/static/video/multiOnlineGamePage/pingpong.mp4',
catchVideoPub: '/static/video/multiOnlineGamePage/catch.mp4',
fortniteVideoPub: '/static/video/multiOnlineGamePage/fortnite.mp4',
planeTexture: '/static/img/multiOnlineGamePage/pastel.jpg',
skinOneTexture: '/static/img/skin/1.jpg',
skinTwoTexture: '/static/img/skin/2.jpg',
skinThreeTexture: '/static/img/skin/3.jpg',
skinFourTexture: '/static/img/skin/4.jpg',
}
let files = {
}
function sleep(ms)
{
return new Promise(resolve => setTimeout(resolve, ms));
}
async function loadFiles()
{
const percentText = document.getElementById('percentLoad');
const loadBar = document.getElementsByClassName('loading-bar')[0];
window.addEventListener('beforeunload', () => {
Object.values(files).forEach((file) => {
URL.revokeObjectURL(file);
});
});
Object.entries(url_files).forEach(([key, value]) => {
fetch(value)
.then(response => response.blob())
.then(blob => {
files[key] = URL.createObjectURL(blob);
});
});
while (Object.values(files).length < Object.values(url_files).length)
{
const value = Math.round(Object.values(files).length * 100 / Object.values(url_files).length) + '%'
percentText.innerText = value;
loadBar.style.width = value;
await sleep(50);
}
console.log(Object.values(files).length * 100 / Object.values(url_files).length + '%');
console.log('files loaded :', files);
}
export { files, loadFiles };

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

@ -6,15 +6,13 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 23:13:53 by edbernar #+# #+# */
/* Updated: 2024/09/18 20:18:51 by edbernar ### ########.fr */
/* Updated: 2024/09/29 23:17:04 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from '/static/javascript/three/build/three.module.js'
import { GLTFLoader } from '/static/javascript/three/examples/jsm/loaders/GLTFLoader.js';
const tvModel = '/static/models3D/homePage/tv.glb';
const sVideo = '/static/video/homePage/pong.mp4';
import * as THREE from '/static/javascript/three/build/three.module.js'
import { files } from '/static/javascript/filesLoader.js';
const loader = new GLTFLoader();
@ -37,7 +35,7 @@ class Screen
{
this.scene = scene;
this.screen = this.#createScreen(scene);
loader.load(tvModel, (gltf) => {
loader.load(files.tvModel, (gltf) => {
const tv = gltf.scene.children[0];
const boundingBox = new THREE.Box3().setFromObject(tv);
const center = boundingBox.getCenter(new THREE.Vector3());
@ -51,7 +49,7 @@ class Screen
tv.castShadow = true;
tv.receiveShadow = true;
scene.add(tv);
this.showVideo(sVideo);
this.showVideo(files.pongVideo);
}, undefined, function ( error ) {
console.error( error );
throw Error("Can't open file 'tv.glb'");

15
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/27 21:57:28 by edbernar ### ########.fr */
/* Updated: 2024/09/29 23:08:50 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -17,6 +17,7 @@ import { GLTFLoader } from '/static/javascript/three/examples/jsm/loaders/GLTFLo
import { userMeInfo } from "/static/javascript/typeResponse/typeLogin.js";
import * as THREE from '/static/javascript/three/build/three.module.js'
import { Screen, light } from '/static/javascript/home3D/Screen.js'
import { files } from '/static/javascript/filesLoader.js';
import { pageRenderer } from '/static/javascript/main.js'
const disable3D = false;
@ -102,8 +103,8 @@ function home3D()
let globalSpeed = 0.75;
const ambiantLight = new THREE.AmbientLight(0xffffff, 35);
const video = {
pong: '/static/video/homePage/pong.mp4',
login: '/static/video/homePage/notLogin.webm'
pong: files.pongVideo,
login: files.notLoginVideo
};
scene = new THREE.Scene();
@ -122,11 +123,11 @@ function home3D()
spotLight.rotateX(Math.PI / 2);
scene.add(spotLight);
if (Math.random() % 100 > 0.99)
video.pong = '/static/video/homePage/easteregg.webm'
video.pong = files.easterEggVideo;
newBgWall();
putObject('/static/models3D/homePage/lamp.glb', -2.5, 0, 2.5, 3, 0, Math.PI + Math.PI / 8, 0);
putObject('/static/models3D/homePage/plant.glb', 1.5, 0, 3, 0.5, 0, 0, 0);
putObject('/static/models3D/homePage/gameboy.glb', -0.5, -0.075, 0.5, 0.1, 0, 0.4, 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.gameboyModel, -0.5, -0.075, 0.5, 0.1, 0, 0.4, 0);
renderer.toneMapping = THREE.LinearToneMapping;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

15
docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
View File

@ -6,11 +6,12 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/13 13:59:46 by edbernar #+# #+# */
/* Updated: 2024/09/28 01:53:20 by edbernar ### ########.fr */
/* Updated: 2024/09/29 23:24:39 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from '/static/javascript/three/build/three.module.js'
import { files } from '/static/javascript/filesLoader.js';
let actualBarSelecor = null;
let actualGoalSelecter = null;
@ -20,10 +21,10 @@ const availableSkins = [
{id: 1, color: 0xaa24ea, texture: null},
{id: 2, color: 0x2c9c49, texture: null},
{id: 3, color: 0x101099, texture: null},
{id: 4, color: null, texture: '/static/img/skin/1.jpg'},
{id: 5, color: null, texture: '/static/img/skin/2.jpg'},
{id: 6, color: null, texture: '/static/img/skin/3.jpg'},
{id: 7, color: null, texture: '/static/img/skin/4.jpg'},
{id: 4, color: null, texture: null},
{id: 5, color: null, texture: null},
{id: 6, color: null, texture: null},
{id: 7, color: null, texture: null},
];
class barSelecter
@ -58,6 +59,10 @@ class barSelecter
this.spotLight.target = this.bar;
this.spotLight.lookAt(this.bar.position);
this.renderer.setAnimationLoop(this.#loop);
availableSkins[4].texture = files.skinOneTexture;
availableSkins[5].texture = files.skinTwoTexture;
availableSkins[6].texture = files.skinThreeTexture;
availableSkins[7].texture = files.skinFourTexture;
div.addEventListener('click', () => {
const popup = document.getElementById('popup-background');
const skins = document.getElementsByClassName('color-box');

14
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/09/26 16:41:32 by edbernar ### ########.fr */
/* Updated: 2024/09/29 23:30:25 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -198,18 +198,6 @@ function connect(e)
e.preventDefault();
sendRequest("login", {type: "byPass", mail: mail, password: e.target.password.value});
// waitForLogin().then((isConnected) => {
// if (isConnected)
// {
// usernameNode = document.createTextNode(userMeInfo.username);
// loginButton.replaceChild(usernameNode, pLoginButton);
// CN.new("Connected successfully", "Welcome " + userMeInfo.username, CN.defaultIcon.success);
// popout.style.display = 'none';
// }
// }).catch((err) => {
// console.error(err);
// CN.new("Error", "An error occured while trying to connect", CN.defaultIcon.error);
// });
}
function closeClickOutsiteGameMode(event)

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

@ -6,19 +6,22 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
/* Updated: 2024/09/27 15:22:23 by edbernar ### ########.fr */
/* Updated: 2024/09/29 22:50:23 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { launchSocket } from '/static/javascript/websocket.js';
import { Page } from '/static/javascript/Page.js';
import { loadFiles } from '/static/javascript/filesLoader.js';
let pageRenderer = null;
const isMobile = /mobile|android|iphone|ipad/.test(navigator.userAgent.toLowerCase())
document.addEventListener('DOMContentLoaded', () => {
pageRenderer = new Page();
launchSocket();
loadFiles().then(() => {
pageRenderer = new Page();
launchSocket();
});
});
export { pageRenderer, isMobile };

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

@ -6,11 +6,10 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 17:02:47 by edbernar #+# #+# */
/* Updated: 2024/09/25 13:47:32 by edbernar ### ########.fr */
/* Updated: 2024/09/29 23:31:12 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import * as CANNON from '/static/javascript/cannon-es/dist/cannon-es.js'
import * as THREE from '/static/javascript/three/build/three.module.js'
const timeStep = 1 / 60;
@ -100,13 +99,9 @@ class Ball
updatePos(content)
{
// {action: 5, pos: [ball.object.position.x, ball.object.position.z], velocity: [ball.object.velocity.x, ball.object.velocity.z]}
this.lastTime = new Date().getTime();
// this.ballBody.position.x = content.pos[0];
// this.ballBody.position.z = content.pos[1];
this.lastPos = [content.pos[0], this.object.position.y, content.pos[1]];
this.velocity = content.velocity;
// this.ballBody.velocity.set(content.velocity[0], 0, content.velocity[1]);
}
update()
@ -115,8 +110,6 @@ class Ball
const x = this.lastPos[0] + (deltaTime * this.velocity[0]);
const z = this.lastPos[2] + (deltaTime * this.velocity[1]);
this.object.position.set(x, this.object.position.y, z);
// this.object.position.copy(this.ballBody.position);
// this.world.step(timeStep);
}
dispose()

38
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
View File

@ -6,15 +6,15 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */
/* Updated: 2024/09/29 01:18:23 by edbernar ### ########.fr */
/* Updated: 2024/09/29 23:10:31 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { GLTFLoader } from '/static/javascript/three/examples/jsm/loaders/GLTFLoader.js';
import { files } from '/static/javascript/filesLoader.js';
import * as THREE from '/static/javascript/three/build/three.module.js'
import { Video } from '/static/javascript/multiOnlineGame/Video.js';
import { GUI } from '/static/javascript/three/examples/jsm/libs/lil-gui.module.min.js';
import { player, opponent, ball} from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js';
import { player, ball} from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js';
// import { Ball } from '/static/javascript/multiOnlineGame/Ball.js'
let loader = null;
@ -34,12 +34,12 @@ let animationSpeed = 0.02;
let animateGoalObjectUpdate = null;
let path = [
{name: 'goal', onChoice: true, src:'/static/video/multiOnlineGamePage/goal2.webm', blob: null},
{name: 'easteregg', onChoice: true, src:'/static/video/multiOnlineGamePage/easteregg.webm', blob: null},
{name: 'outstanding', onChoice: true, src:'/static/video/multiOnlineGamePage/outstanding.webm', blob: null},
{name: 'ping', onChoice: false, src:'/static/video/multiOnlineGamePage/pingpong.mp4', blob: null},
{name: 'catch', onChoice: false, src:'/static/video/multiOnlineGamePage/catch.mp4', blob: null},
{name: 'fortnite', onChoice: false, src:'/static/video/multiOnlineGamePage/fortnite.mp4', blob: null},
{name: 'goal', onChoice: true, src: files.goalVideoPub},
{name: 'easteregg', onChoice: true, src: files.easterEggVideoPub},
{name: 'outstanding', onChoice: true, src: files.outstandingVideoPub},
{name: 'ping', onChoice: false, src: files.pingVideoPub},
{name: 'catch', onChoice: false, src: files.catchVideoPub},
{name: 'fortnite', onChoice: false, src: files.fortniteVideoPub},
]
const colorList = [
@ -55,14 +55,6 @@ const colorList = [
0xFFFAE3, 0xE7D3D3, 0xFDE3A7, 0xCDE0C9, 0xF4D9E3 // Soft light peach, pale pink, green, lavender
]; // Merci chatGPT
path.forEach(elem => {
fetch(elem.src)
.then(response => response.blob())
.then(blob => {
elem.blob = URL.createObjectURL(blob);
});
});
let spacingImages = [
100 * 2.33 * 10 - (100 * 2.33), // 2 images
100 * 2.33 * 5 - (100 * 2.33), // 4 images
@ -140,8 +132,8 @@ class Map
this.centerPos.y = 0.15;
this.centerPos.z = -length / 2 + length / 2;
this.mapLength = length;
scene.add(this.#createPlanes(7.5, length, -(Math.PI / 2), "planeBottom", true, '/static/img/multiOnlineGamePage/pastel.jpg'));
scene.add(this.#createPlanes(7.5, length, (Math.PI / 2), "planeTop", false, '/static/img/multiOnlineGamePage/pastel.jpg'));
scene.add(this.#createPlanes(7.5, length, -(Math.PI / 2), "planeBottom", true, files.planeTexture));
scene.add(this.#createPlanes(7.5, length, (Math.PI / 2), "planeTop", false, files.planeTexture));
scene.add(this.#createWall(-3.5, 0.4, -length/2, "wallLeft"));
scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight"));
// if (obstacles)
@ -612,7 +604,7 @@ class Map
continue ;
}
let videoTmp = null;
videoTmp = new Video(path[i].blob).video;
videoTmp = new Video(path[i].src).video;
videoTmp.addEventListener('loadeddata', () => {
videoTmp.play();
drawVideoOnCanvas();
@ -656,7 +648,7 @@ class Map
materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: true});
// Load the banner
loader.load( '/static/models3D/multiOnlineGame/banner.glb', (gltf) => {
loader.load(files.bannerModel, (gltf) => {
this.banner = gltf.scene.children[0];
gltf = null;
this.banner.material = materialCanvas;
@ -832,10 +824,6 @@ class Map
ball.changeGravity();
for (let i = 0; this.arrObject && i < this.arrObject.length; i++)
{
console.log("/////////////");
console.log(this.arrObject[i].name);
console.log(name);
console.log("/////////////");
if (this.arrObject[i].name == name)
{
if (this.arrObject[i].name == "jumperTop")

6
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
View File

@ -6,13 +6,13 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/09/29 14:17:33 by edbernar ### ########.fr */
/* Updated: 2024/09/29 22:33:06 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { availableSkins } from '/static/javascript/lobbyPage/3d.js';
import * as THREE from '/static/javascript/three/build/three.module.js'
import { OrbitControls } from '/static/javascript/three/examples/jsm/Addons.js';
import { OrbitControls } from '/static/javascript/three/examples/jsm/controls/OrbitControls.js'
import { sendRequest } from "/static/javascript/websocket.js";
import { Player } from '/static/javascript/multiOnlineGame/Player.js'
import { Map } from '/static/javascript/multiOnlineGame/Map.js'
@ -174,7 +174,7 @@ class MultiOnlineGamePage
static dispose()
{
window.addEventListener('resize', windowUpdater);
window.removeEventListener('resize', windowUpdater);
if (interval)
clearInterval(interval);
interval = null;

45
docker-compose/requirements/nginx/static/style/index/loading.css Normal file
View File

@ -0,0 +1,45 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* loading.css :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/30 00:34:36 by edbernar #+# #+# */
/* Updated: 2024/09/30 00:50:11 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
#loadingDiv {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
flex-direction: column;
color: white;
}
#loadingDiv h1 {
padding: 0;
padding-top: 4px;
font-size: 35px;
color: white;
font-family: 'Poppins';
font-style: italic;
font-weight: bold;
}
#loadingDiv .loading {
width: 80%;
height: 10px;
background-color: #fff;
border-radius: 5px;
}
#loadingDiv .loading .loading-bar {
width: 0%;
height: 100%;
background-color: rgb(56, 106, 18);
border-radius: 5px;
}