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

Site

Browse Source 
- skin working
    - fix bug three js lobby page
    - add notification for join a invitation
Game
    - fix bug fade
This commit is contained in:
Kum1ta
2024-09-28 03:15:41 +02:00
parent b2bc0f2190
commit afb5742e65
13 changed files with 116 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */
/* Updated: 2024/09/27 21:54:19 by edbernar ### ########.fr */
/* Updated: 2024/09/27 23:59:18 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -991,18 +991,8 @@ class Map
}
};
updateScore(name, score) // document.getElementsByTagName('canvas')[0] Si fondu noir marche pas c'est la
updateScore(name, score)
{
const canvasIndex = document.getElementsByTagName('canvas').length - 1;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.99s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => {
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOutGames 0.99s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 200);
setTimeout(() => {
if (name == "player")
score.player++;

61
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */
/* Updated: 2024/09/27 21:21:02 by edbernar ### ########.fr */
/* Updated: 2024/09/28 03:13:14 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -148,12 +148,12 @@ class Player
let hue = 0;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => {
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOutGames 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 300)
@ -212,7 +212,7 @@ class Player
let hue = 0;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => {
@ -220,7 +220,6 @@ class Player
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 300)
setTimeout(() => {
tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z);
isOnPointAnim = true;
@ -390,9 +389,10 @@ function goFullscreen()
function showGamePad()
{
const gamePad = document.getElementsByClassName('gamePad')[0];
const buttons = document.getElementsByClassName('buttonGamePad');
const canvas = document.getElementById('canvasMultiGameOnline');
const gamePad = document.getElementsByClassName('gamePad')[0];
const canvas = document.getElementById('canvasMultiGameOnline');
const keyList = ['padLeft', 'padRight', 'padTop', 'padBottom']
const keyAction = ['a', 'd', 'w', 's']
canvas.addEventListener('touchstart', function(e) {
e.preventDefault();
@ -404,34 +404,25 @@ function showGamePad()
goFullscreen();
});
gamePad.style.display = 'flex';
for (let i = 0; i < buttons.length; i++)
{
buttons[i].addEventListener('touchstart', (event) => {
const key = event.target.getAttribute("id");
if (key == 'padLeft')
addKeyInArr({key: 'a'});
else if (key == 'padRight')
addKeyInArr({key: 'd'});
else if (key == 'padTop')
addKeyInArr({key: 'w'});
else if (key == 'padBottom')
addKeyInArr({key: 's'});
document.addEventListener('touchstart', (event) => {
const key = event.target.getAttribute("id");
});
buttons[i].addEventListener('touchend', (event) => {
const key = event.target.getAttribute("id");
for (let i = 0; i < keyList.length; i++)
{
if (keyList[i] == key)
addKeyInArr({key: keyAction[i]})
}
});
document.addEventListener('touchend', (event) => {
const key = event.target.getAttribute("id");
if (key == 'padLeft')
remKeyInArr({key: 'a'});
else if (key == 'padRight')
remKeyInArr({key: 'd'});
else if (key == 'padTop')
remKeyInArr({key: 'w'});
else if (key == 'padBottom')
remKeyInArr({key: 's'});
});
}
for (let i = 0; i < keyList.length; i++)
{
if (keyList[i] == key)
remKeyInArr({key: keyAction[i]})
}
});
}
export { Player, playerExist, goalAnimation};
export { Player, playerExist, goalAnimation};

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

@ -6,11 +6,12 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/09/27 21:21:29 by edbernar ### ########.fr */
/* Updated: 2024/09/28 03:15:02 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { availableSkins } from '/static/javascript/lobbyPage/3d.js';
import * as THREE from '/static/javascript/three/build/three.module.js'
import Stats from '/static/javascript/three/examples/jsm/libs/stats.module.js'
import { OrbitControls } from '/static/javascript/three/examples/jsm/Addons.js';
@ -73,12 +74,12 @@ let controls = null;
class MultiOnlineGamePage
{
static create()
static create(skin)
{
document.body.appendChild(stats.dom);
const bar1 = createBarPlayer(0xed56ea);
const bar2 = createBarPlayer(0xf3e11e);
const bar1 = createBarPlayer(availableSkins[skin.player]);
const bar2 = createBarPlayer(availableSkins[skin.opponent]);
document.body.setAttribute('style', '');
scene = new THREE.Scene()
@ -207,10 +208,16 @@ class MultiOnlineGamePage
}
}
function createBarPlayer(color)
function createBarPlayer(skin)
{
const geometry = new THREE.BoxGeometry(1, 0.1, 0.1);
const material = new THREE.MeshPhysicalMaterial({color: color});
const geometry = new THREE.BoxGeometry(1, 0.1, 0.1);
let material = null;
console.log(skin)
if (skin.color)
material = new THREE.MeshPhysicalMaterial({color: skin.color});
else
material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(skin.texture)});
const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;