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

13
docker-compose/requirements/djangoserver/file/server/server/templates/index.html
View File

@ -14,6 +14,7 @@
<link rel='stylesheet' type='text/css' href='/static/style/game/games.css'> <link rel='stylesheet' type='text/css' href='/static/style/game/games.css'>
<link rel='stylesheet' type='text/css' href='/static/style/profilPage/profil.css'> <link rel='stylesheet' type='text/css' href='/static/style/profilPage/profil.css'>
<link rel='stylesheet' type='text/css' href='/static/style/settings/settings.css'> <link rel='stylesheet' type='text/css' href='/static/style/settings/settings.css'>
<link rel='stylesheet' type='text/css' href='/static/style/index/loading.css'>
<script type="module" src='/static/javascript/main.js'></script> <script type="module" src='/static/javascript/main.js'></script>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@ -21,6 +22,16 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head> </head>
<body> <body>
<div id="loadingDiv">
<h1>METH</h1>
<br/>
<br/>
<br/>
<div class="loading">
<div class="loading-bar"></div>
</div>
<br/>
<p id='percentLoad'>0%</p>
</div>
</body> </body>
</html> </html>

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. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 23:13:53 by edbernar #+# #+# */ /* 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'; import { GLTFLoader } from '/static/javascript/three/examples/jsm/loaders/GLTFLoader.js';
import * as THREE from '/static/javascript/three/build/three.module.js'
const tvModel = '/static/models3D/homePage/tv.glb'; import { files } from '/static/javascript/filesLoader.js';
const sVideo = '/static/video/homePage/pong.mp4';
const loader = new GLTFLoader(); const loader = new GLTFLoader();
@ -37,7 +35,7 @@ class Screen
{ {
this.scene = scene; this.scene = scene;
this.screen = this.#createScreen(scene); this.screen = this.#createScreen(scene);
loader.load(tvModel, (gltf) => { loader.load(files.tvModel, (gltf) => {
const tv = gltf.scene.children[0]; const tv = gltf.scene.children[0];
const boundingBox = new THREE.Box3().setFromObject(tv); const boundingBox = new THREE.Box3().setFromObject(tv);
const center = boundingBox.getCenter(new THREE.Vector3()); const center = boundingBox.getCenter(new THREE.Vector3());
@ -51,7 +49,7 @@ class Screen
tv.castShadow = true; tv.castShadow = true;
tv.receiveShadow = true; tv.receiveShadow = true;
scene.add(tv); scene.add(tv);
this.showVideo(sVideo); this.showVideo(files.pongVideo);
}, undefined, function ( error ) { }, undefined, function ( error ) {
console.error( error ); console.error( error );
throw Error("Can't open file 'tv.glb'"); 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. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */ /* 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 { userMeInfo } from "/static/javascript/typeResponse/typeLogin.js";
import * as THREE from '/static/javascript/three/build/three.module.js' import * as THREE from '/static/javascript/three/build/three.module.js'
import { Screen, light } from '/static/javascript/home3D/Screen.js' import { Screen, light } from '/static/javascript/home3D/Screen.js'
import { files } from '/static/javascript/filesLoader.js';
import { pageRenderer } from '/static/javascript/main.js' import { pageRenderer } from '/static/javascript/main.js'
const disable3D = false; const disable3D = false;
@ -102,8 +103,8 @@ function home3D()
let globalSpeed = 0.75; let globalSpeed = 0.75;
const ambiantLight = new THREE.AmbientLight(0xffffff, 35); const ambiantLight = new THREE.AmbientLight(0xffffff, 35);
const video = { const video = {
pong: '/static/video/homePage/pong.mp4', pong: files.pongVideo,
login: '/static/video/homePage/notLogin.webm' login: files.notLoginVideo
}; };
scene = new THREE.Scene(); scene = new THREE.Scene();
@ -122,11 +123,11 @@ function home3D()
spotLight.rotateX(Math.PI / 2); spotLight.rotateX(Math.PI / 2);
scene.add(spotLight); scene.add(spotLight);
if (Math.random() % 100 > 0.99) if (Math.random() % 100 > 0.99)
video.pong = '/static/video/homePage/easteregg.webm' video.pong = files.easterEggVideo;
newBgWall(); newBgWall();
putObject('/static/models3D/homePage/lamp.glb', -2.5, 0, 2.5, 3, 0, Math.PI + Math.PI / 8, 0); putObject(files.lampModel, -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(files.plantModel, 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.gameboyModel, -0.5, -0.075, 0.5, 0.1, 0, 0.4, 0);
renderer.toneMapping = THREE.LinearToneMapping; renderer.toneMapping = THREE.LinearToneMapping;
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; 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. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/13 13:59:46 by edbernar #+# #+# */ /* 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 * as THREE from '/static/javascript/three/build/three.module.js'
import { files } from '/static/javascript/filesLoader.js';
let actualBarSelecor = null; let actualBarSelecor = null;
let actualGoalSelecter = null; let actualGoalSelecter = null;
@ -20,10 +21,10 @@ const availableSkins = [
{id: 1, color: 0xaa24ea, texture: null}, {id: 1, color: 0xaa24ea, texture: null},
{id: 2, color: 0x2c9c49, texture: null}, {id: 2, color: 0x2c9c49, texture: null},
{id: 3, color: 0x101099, texture: null}, {id: 3, color: 0x101099, texture: null},
{id: 4, color: null, texture: '/static/img/skin/1.jpg'}, {id: 4, color: null, texture: null},
{id: 5, color: null, texture: '/static/img/skin/2.jpg'}, {id: 5, color: null, texture: null},
{id: 6, color: null, texture: '/static/img/skin/3.jpg'}, {id: 6, color: null, texture: null},
{id: 7, color: null, texture: '/static/img/skin/4.jpg'}, {id: 7, color: null, texture: null},
]; ];
class barSelecter class barSelecter
@ -58,6 +59,10 @@ class barSelecter
this.spotLight.target = this.bar; this.spotLight.target = this.bar;
this.spotLight.lookAt(this.bar.position); this.spotLight.lookAt(this.bar.position);
this.renderer.setAnimationLoop(this.#loop); 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', () => { div.addEventListener('click', () => {
const popup = document.getElementById('popup-background'); const popup = document.getElementById('popup-background');
const skins = document.getElementsByClassName('color-box'); 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. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 17:40:15 by edbernar #+# #+# */ /* 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(); e.preventDefault();
sendRequest("login", {type: "byPass", mail: mail, password: e.target.password.value}); 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) function closeClickOutsiteGameMode(event)

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

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

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

@ -6,11 +6,10 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 17:02:47 by edbernar #+# #+# */ /* 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' import * as THREE from '/static/javascript/three/build/three.module.js'
const timeStep = 1 / 60; const timeStep = 1 / 60;
@ -100,13 +99,9 @@ class Ball
updatePos(content) 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.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.lastPos = [content.pos[0], this.object.position.y, content.pos[1]];
this.velocity = content.velocity; this.velocity = content.velocity;
// this.ballBody.velocity.set(content.velocity[0], 0, content.velocity[1]);
} }
update() update()
@ -115,8 +110,6 @@ class Ball
const x = this.lastPos[0] + (deltaTime * this.velocity[0]); const x = this.lastPos[0] + (deltaTime * this.velocity[0]);
const z = this.lastPos[2] + (deltaTime * this.velocity[1]); const z = this.lastPos[2] + (deltaTime * this.velocity[1]);
this.object.position.set(x, this.object.position.y, z); this.object.position.set(x, this.object.position.y, z);
// this.object.position.copy(this.ballBody.position);
// this.world.step(timeStep);
} }
dispose() dispose()

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

@ -6,15 +6,15 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ /* 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 { 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 * as THREE from '/static/javascript/three/build/three.module.js'
import { Video } from '/static/javascript/multiOnlineGame/Video.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, ball} from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js';
import { player, opponent, ball} from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js';
// import { Ball } from '/static/javascript/multiOnlineGame/Ball.js' // import { Ball } from '/static/javascript/multiOnlineGame/Ball.js'
let loader = null; let loader = null;
@ -34,12 +34,12 @@ let animationSpeed = 0.02;
let animateGoalObjectUpdate = null; let animateGoalObjectUpdate = null;
let path = [ let path = [
{name: 'goal', onChoice: true, src:'/static/video/multiOnlineGamePage/goal2.webm', blob: null}, {name: 'goal', onChoice: true, src: files.goalVideoPub},
{name: 'easteregg', onChoice: true, src:'/static/video/multiOnlineGamePage/easteregg.webm', blob: null}, {name: 'easteregg', onChoice: true, src: files.easterEggVideoPub},
{name: 'outstanding', onChoice: true, src:'/static/video/multiOnlineGamePage/outstanding.webm', blob: null}, {name: 'outstanding', onChoice: true, src: files.outstandingVideoPub},
{name: 'ping', onChoice: false, src:'/static/video/multiOnlineGamePage/pingpong.mp4', blob: null}, {name: 'ping', onChoice: false, src: files.pingVideoPub},
{name: 'catch', onChoice: false, src:'/static/video/multiOnlineGamePage/catch.mp4', blob: null}, {name: 'catch', onChoice: false, src: files.catchVideoPub},
{name: 'fortnite', onChoice: false, src:'/static/video/multiOnlineGamePage/fortnite.mp4', blob: null}, {name: 'fortnite', onChoice: false, src: files.fortniteVideoPub},
] ]
const colorList = [ const colorList = [
@ -55,14 +55,6 @@ const colorList = [
0xFFFAE3, 0xE7D3D3, 0xFDE3A7, 0xCDE0C9, 0xF4D9E3 // Soft light peach, pale pink, green, lavender 0xFFFAE3, 0xE7D3D3, 0xFDE3A7, 0xCDE0C9, 0xF4D9E3 // Soft light peach, pale pink, green, lavender
]; // Merci chatGPT ]; // Merci chatGPT
path.forEach(elem => {
fetch(elem.src)
.then(response => response.blob())
.then(blob => {
elem.blob = URL.createObjectURL(blob);
});
});
let spacingImages = [ let spacingImages = [
100 * 2.33 * 10 - (100 * 2.33), // 2 images 100 * 2.33 * 10 - (100 * 2.33), // 2 images
100 * 2.33 * 5 - (100 * 2.33), // 4 images 100 * 2.33 * 5 - (100 * 2.33), // 4 images
@ -140,8 +132,8 @@ class Map
this.centerPos.y = 0.15; this.centerPos.y = 0.15;
this.centerPos.z = -length / 2 + length / 2; this.centerPos.z = -length / 2 + length / 2;
this.mapLength = length; 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), "planeBottom", true, files.planeTexture));
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), "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, "wallLeft"));
scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight")); scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight"));
// if (obstacles) // if (obstacles)
@ -612,7 +604,7 @@ class Map
continue ; continue ;
} }
let videoTmp = null; let videoTmp = null;
videoTmp = new Video(path[i].blob).video; videoTmp = new Video(path[i].src).video;
videoTmp.addEventListener('loadeddata', () => { videoTmp.addEventListener('loadeddata', () => {
videoTmp.play(); videoTmp.play();
drawVideoOnCanvas(); drawVideoOnCanvas();
@ -656,7 +648,7 @@ class Map
materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: true}); materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: true});
// Load the banner // Load the banner
loader.load( '/static/models3D/multiOnlineGame/banner.glb', (gltf) => { loader.load(files.bannerModel, (gltf) => {
this.banner = gltf.scene.children[0]; this.banner = gltf.scene.children[0];
gltf = null; gltf = null;
this.banner.material = materialCanvas; this.banner.material = materialCanvas;
@ -832,10 +824,6 @@ class Map
ball.changeGravity(); ball.changeGravity();
for (let i = 0; this.arrObject && i < this.arrObject.length; i++) 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 == name)
{ {
if (this.arrObject[i].name == "jumperTop") 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. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */ /* 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 { availableSkins } from '/static/javascript/lobbyPage/3d.js';
import * as THREE from '/static/javascript/three/build/three.module.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 { sendRequest } from "/static/javascript/websocket.js";
import { Player } from '/static/javascript/multiOnlineGame/Player.js' import { Player } from '/static/javascript/multiOnlineGame/Player.js'
import { Map } from '/static/javascript/multiOnlineGame/Map.js' import { Map } from '/static/javascript/multiOnlineGame/Map.js'
@ -174,7 +174,7 @@ class MultiOnlineGamePage
static dispose() static dispose()
{ {
window.addEventListener('resize', windowUpdater); window.removeEventListener('resize', windowUpdater);
if (interval) if (interval)
clearInterval(interval); clearInterval(interval);
interval = null; 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;
}