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

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;