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

update last commit

Browse Source
This commit is contained in:
Kum1ta
2024-10-09 15:30:31 +02:00
parent 70ae30370d
commit 9c64b0098c
3 changed files with 117 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/29 22:36:43 by edbernar #+# #+# */ /* Created: 2024/09/29 22:36:43 by edbernar #+# #+# */
/* Updated: 2024/10/06 16:42:07 by edbernar ### ########.fr */ /* Updated: 2024/10/09 14:40:52 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -31,10 +31,42 @@ const url_files = {
wallTexture: '/static/img/multiOnlineGamePage/wallTexture.jpg', wallTexture: '/static/img/multiOnlineGamePage/wallTexture.jpg',
planeTexture: '/static/img/multiOnlineGamePage/pastel.jpg', planeTexture: '/static/img/multiOnlineGamePage/pastel.jpg',
skinOneTexture: '/static/img/skin/1.jpg', skinOneTexture: {
skinTwoTexture: '/static/img/skin/2.jpg', left: '/static/img/skin/1/left.jpg',
skinThreeTexture: '/static/img/skin/3.jpg', right: '/static/img/skin/1/right.jpg',
skinFourTexture: '/static/img/skin/4.jpg', top: '/static/img/skin/1/top.jpg',
bottom: '/static/img/skin/1/bottom.jpg',
front: '/static/img/skin/1/front.jpg',
back: '/static/img/skin/1/back.jpg',
show: '/static/img/skin/1/back.jpg',
},
skinTwoTexture: {
left: '/static/img/skin/1/left.jpg',
right: '/static/img/skin/1/right.jpg',
top: '/static/img/skin/1/top.jpg',
bottom: '/static/img/skin/1/bottom.jpg',
front: '/static/img/skin/1/front.jpg',
back: '/static/img/skin/1/back.jpg',
show: '/static/img/skin/1/back.jpg',
},
skinThreeTexture: {
left: '/static/img/skin/1/left.jpg',
right: '/static/img/skin/1/right.jpg',
top: '/static/img/skin/1/top.jpg',
bottom: '/static/img/skin/1/bottom.jpg',
front: '/static/img/skin/1/front.jpg',
back: '/static/img/skin/1/back.jpg',
show: '/static/img/skin/1/back.jpg',
},
skinFourTexture: {
left: '/static/img/skin/1/left.jpg',
right: '/static/img/skin/1/right.jpg',
top: '/static/img/skin/1/top.jpg',
bottom: '/static/img/skin/1/bottom.jpg',
front: '/static/img/skin/1/front.jpg',
back: '/static/img/skin/1/back.jpg',
show: '/static/img/skin/1/back.jpg',
},
} }
let files = { let files = {
@ -56,6 +88,18 @@ async function loadFiles()
}); });
}); });
Object.entries(url_files).forEach(([key, value]) => { Object.entries(url_files).forEach(([key, value]) => {
if (typeof value === 'object')
{
files[key] = {};
Object.entries(value).forEach(([k, v]) => {
fetch(v)
.then(response => response.blob())
.then(blob => {
files[key][k] = URL.createObjectURL(blob);
});
});
return;
}
fetch(value) fetch(value)
.then(response => response.blob()) .then(response => response.blob())
.then(blob => { .then(blob => {

63
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/10/03 21:15:40 by edbernar ### ########.fr */ /* Updated: 2024/10/09 15:24:50 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { createStar, createBox, createRectangle, createRing, colorList } from '/static/javascript/multiOnlineGame/Map.js' import { createStar, createBox, createRectangle, createRing, colorList } from '/static/javascript/multiOnlineGame/Map.js'
import { createBarPlayer } from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js'
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'; import { files } from '/static/javascript/filesLoader.js';
@ -42,7 +43,7 @@ class barSelecter
camera = null; camera = null;
spotLight = new THREE.SpotLight(0xffffff, 5); spotLight = new THREE.SpotLight(0xffffff, 5);
selected = lastSelected ? lastSelected : availableSkins[0]; selected = lastSelected ? lastSelected : availableSkins[0];
bar = this.createBarPlayer(this.selected.color ? this.selected.color : this.selected.texture); bar = this.createBarPlayer(this.selected);
boundChangeSkin = this.changeSkin.bind(this); boundChangeSkin = this.changeSkin.bind(this);
@ -82,7 +83,7 @@ class barSelecter
if (availableSkins[i].color != null) if (availableSkins[i].color != null)
skins[i].style.backgroundColor = `#${availableSkins[i].color.toString(16)}`; skins[i].style.backgroundColor = `#${availableSkins[i].color.toString(16)}`;
else else
skins[i].style.backgroundImage = `url("${availableSkins[i].texture}")` skins[i].style.backgroundImage = `url("${availableSkins[i].texture.show}")`
skins[i].removeEventListener('click', this.boundChangeSkin); skins[i].removeEventListener('click', this.boundChangeSkin);
skins[i].addEventListener('click', this.boundChangeSkin); skins[i].addEventListener('click', this.boundChangeSkin);
} }
@ -105,28 +106,45 @@ class barSelecter
const id = event.target.getAttribute('skinId'); const id = event.target.getAttribute('skinId');
popup.style.display = 'none'; popup.style.display = 'none';
this.bar.material.dispose(); if (Array.isArray(this.bar.material))
lastSelected = availableSkins[id]; {
if (availableSkins[id].color != null) this.bar.material.forEach(material => {
this.bar.material = new THREE.MeshPhysicalMaterial({color: availableSkins[id].color}); if (material.map)
material.map.dispose();
material.dispose();
});
}
else else
this.bar.material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture)}); {
if (this.bar.material.map)
this.bar.material.map.dispose();
this.bar.material.dispose();
}
lastSelected = availableSkins[id];
if (availableSkins[id].color)
this.bar.material = new THREE.MeshPhysicalMaterial({color: skin.color});
else
{
if (typeof availableSkins[id].texture !== 'object')
this.bar.material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(skin.texture)});
else
{
this.bar.material = [
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture.left)}),
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture.right)}),
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture.top)}),
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture.bottom)}),
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture.front)}),
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture.back)}),
]
}
}
this.selected = availableSkins[id]; this.selected = availableSkins[id];
} }
createBarPlayer(color) createBarPlayer(color)
{ {
const geometry = new THREE.BoxGeometry(1, 0.1, 0.1); return (createBarPlayer(color));
let material = null;
if (typeof(color) == 'number')
material = new THREE.MeshPhysicalMaterial({color: color});
else
material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(color)});
const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
return (mesh);
} }
#loop() #loop()
@ -204,6 +222,7 @@ class goalSelecter
const goal = document.getElementsByClassName('color-box-goal'); const goal = document.getElementsByClassName('color-box-goal');
popup.style.display = 'flex'; popup.style.display = 'flex';
for (let i = 0; i < goal.length; i++) for (let i = 0; i < goal.length; i++)
{ {
const canvas = goal[i].getElementsByTagName('canvas'); const canvas = goal[i].getElementsByTagName('canvas');
@ -223,11 +242,11 @@ class goalSelecter
{ {
const scene = new THREE.Scene(); const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({antialias: true}); const renderer = new THREE.WebGLRenderer({antialias: true});
const camera = new THREE.PerspectiveCamera(60, (pos.width - 5) / (pos.height - 5)); const camera = new THREE.PerspectiveCamera(60, (pos.width - 8) / (pos.height - 8));
const mesh = func(colorList[Math.floor(Math.random() * 100 % colorList.length)]); const mesh = func(colorList[Math.floor(Math.random() * 100 % colorList.length)]);
const spotLight = new THREE.SpotLight(0xffffff, 5000); const spotLight = new THREE.SpotLight(0xffffff, 5000);
renderer.setSize(pos.width - 5, pos.height - 5); renderer.setSize(pos.width - 8, pos.height - 8);
scene.add(mesh); scene.add(mesh);
camera.position.set(1.5, 1.5, 1.5); camera.position.set(1.5, 1.5, 1.5);
spotLight.position.set(1.5, 1.5, 1.5); spotLight.position.set(1.5, 1.5, 1.5);
@ -238,7 +257,7 @@ class goalSelecter
this.sceneList.push(scene); this.sceneList.push(scene);
this.rendererList.push(renderer); this.rendererList.push(renderer);
this.cameraList.push(camera); this.cameraList.push(camera);
return (renderer.domElement) return (renderer.domElement);
} }
changeGoal(event) changeGoal(event)

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

@ -6,7 +6,7 @@
/* 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/10/08 18:54:22 by edbernar ### ########.fr */ /* Updated: 2024/10/09 14:47:25 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -20,6 +20,7 @@ import { pageRenderer, isMobile } from '/static/javascript/main.js'
import { Ball } from '/static/javascript/multiOnlineGame/Ball.js' import { Ball } from '/static/javascript/multiOnlineGame/Ball.js'
import { Map } from '/static/javascript/multiOnlineGame/Map.js' import { Map } from '/static/javascript/multiOnlineGame/Map.js'
import { sendRequest } from "/static/javascript/websocket.js"; import { sendRequest } from "/static/javascript/websocket.js";
import { files } from '/static/javascript/filesLoader.js';
/* /*
Controls : Controls :
- w : monter - w : monter
@ -86,11 +87,16 @@ class MultiOnlineGamePage
static create(skin) static create(skin)
{ {
if (!skin) if (!skin)
skin = {player: 0, opponent: 0}; {
skin = {player: 4, opponent: 0};
availableSkins[4].texture = files.skinOneTexture;
availableSkins[5].texture = files.skinTwoTexture;
availableSkins[6].texture = files.skinThreeTexture;
availableSkins[7].texture = files.skinFourTexture;
}
const bar1 = createBarPlayer(availableSkins[skin.player]); const bar1 = createBarPlayer(availableSkins[skin.player]);
const bar2 = createBarPlayer(availableSkins[skin.opponent]); const bar2 = createBarPlayer(availableSkins[skin.opponent]);
console.log('skin : ', skin);
document.body.setAttribute('style', ''); document.body.setAttribute('style', '');
scene = new THREE.Scene() scene = new THREE.Scene()
map = new Map(scene, 13, false, skin.pfp, skin.pfpOpponent); map = new Map(scene, 13, false, skin.pfp, skin.pfpOpponent);
@ -284,13 +290,27 @@ class MultiOnlineGamePage
function createBarPlayer(skin) function createBarPlayer(skin)
{ {
const geometry = new THREE.BoxGeometry(1, 0.1, 0.1); const geometry = new THREE.BoxGeometry(1, 0.1, 0.1);
let material = null; let material = null;
if (skin.color) if (skin.color)
material = new THREE.MeshPhysicalMaterial({color: skin.color}); material = new THREE.MeshPhysicalMaterial({color: skin.color});
else else
material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(skin.texture)}); {
if (typeof skin.texture !== 'object')
material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(skin.texture)});
else
{
material = [
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(skin.texture.left)}),
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(skin.texture.right)}),
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(skin.texture.top)}),
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(skin.texture.bottom)}),
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(skin.texture.front)}),
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(skin.texture.back)}),
]
}
}
const mesh = new THREE.Mesh(geometry, material); const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true; mesh.castShadow = true;
@ -373,4 +393,4 @@ function configButton()
} }
export { MultiOnlineGamePage, player, opponent, ball, map, scene, renderer, isInVrMode }; export { MultiOnlineGamePage, player, opponent, ball, map, scene, renderer, isInVrMode, createBarPlayer };