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

Game

Browse Source 
- update trail size for mobile
    - change end message when is a tournament
This commit is contained in:
Kum1ta
2024-10-15 21:12:56 +02:00
parent 197240948d
commit adae90904b
3 changed files with 50 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,13 +6,13 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 17:02:47 by edbernar #+# #+# */
/* Updated: 2024/10/11 10:43:04 by edbernar ### ########.fr */
/* Updated: 2024/10/15 21:10:18 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from '/static/javascript/three/build/three.module.js'
import { map, opponent, player} from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js'
import * as THREE from '/static/javascript/three/build/three.module.js'
import { isMobile } from '/static/javascript/main.js'
class Ball
{
@ -287,7 +287,8 @@ class Ball
this.updateTrail();
}
updateTrail() {
updateTrail()
{
const trailColors = trailGeometry.attributes.customColor.array;
for (let i = trailPositions.length - 3; i >= 3; i--)
@ -297,31 +298,32 @@ class Ball
trailPositions[2] = this.object.position.z;
for (let i = 0; i < 33; i++)
{
if (isMobile)
trailSizes[i] = Math.max(0.2 * (1 - i / 33), 0.1);
else
trailSizes[i] = Math.max(0.5 * (1 - i / 33), 0.1);
}
const velocityMagnitude = Math.sqrt(
this.srvPos.vel[0] * this.srvPos.vel[0] +
this.srvPos.vel[1] * this.srvPos.vel[1]
);
// Normalisation de la vitesse entre 0 (lente) et 1 (rapide)
const speedFactor = Math.min(velocityMagnitude / 10, 1); // Divisé par 10 pour ajuster l'échelle
const speedFactor = Math.min(velocityMagnitude / 10, 1);
for (let i = 0; i < 33; i++) {
const alpha = Math.max(1 - i / 33, 0);
// Couleur entre blanc et rouge selon la vitesse
const r = 1; // Rouge maximum
const g = 1 - speedFactor; // Moins de vert avec l'augmentation de la vitesse
const b = 1 - speedFactor; // Moins de bleu avec l'augmentation de la vitesse
const r = 1;
const g = 1 - speedFactor;
const b = 1 - speedFactor;
// Appliquer la couleur
trailColors[i * 4] = r;
trailColors[i * 4 + 1] = g;
trailColors[i * 4 + 2] = b;
trailColors[i * 4 + 3] = alpha;
}
// Marquer les attributs comme nécessitant une mise à jour
trailGeometry.attributes.position.needsUpdate = true;
trailGeometry.attributes.size.needsUpdate = true;
trailGeometry.attributes.customColor.needsUpdate = true;
@ -365,9 +367,9 @@ const vertexShader = `
`;
const fragmentShader = `
varying vec4 vColor; // Reçoit la couleur et l'alpha du vertex shader
varying vec4 vColor;
void main() {
gl_FragColor = vColor; // Utilise la couleur avec l'alpha
gl_FragColor = vColor;
}
`;

34
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/10/14 22:08:12 by edbernar ### ########.fr */
/* Updated: 2024/10/15 21:12:25 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -121,6 +121,8 @@ class Player
if (this.interval)
clearInterval(this.interval);
key = null;
document.addEventListener('touchstart', addKeyTouch);
document.addEventListener('touchend', removeKeyTouch);
}
reserCameraPlayer()
@ -540,8 +542,6 @@ function showGamePad()
{
const gamePad = document.getElementsByClassName('gamePad')[0];
const canvas = document.getElementById('canvasMultiGameOnline');
const keyList = ['padLeft', 'padRight', 'padTop', 'padBottom']
const keyAction = [key.left, key.right, key.up, key.down];
canvas.addEventListener('touchstart', function(e) {
e.preventDefault();
@ -553,25 +553,35 @@ function showGamePad()
goFullscreen();
});
gamePad.style.display = 'flex';
console.warn("change listener for touchstart and touchend because can't be removed");
document.addEventListener('touchstart', (event) => {
const key = event.target.getAttribute("id");
document.addEventListener('touchstart', addKeyTouch);
document.addEventListener('touchend', removeKeyTouch);
}
function addKeyTouch(event)
{
const keyId = event.target.getAttribute("id");
const keyAction = [key.left, key.right, key.up, key.down];
const keyList = ['padLeft', 'padRight', 'padTop', 'padBottom'];
console.log(key);
for (let i = 0; i < keyList.length; i++)
{
if (keyList[i] == key)
if (keyList[i] == keyId)
addKeyInArr({key: keyAction[i]})
}
});
document.addEventListener('touchend', (event) => {
const key = event.target.getAttribute("id");
}
function removeKeyTouch(event)
{
const keyId = event.target.getAttribute("id");
const keyAction = [key.left, key.right, key.up, key.down];
const keyList = ['padLeft', 'padRight', 'padTop', 'padBottom'];
for (let i = 0; i < keyList.length; i++)
{
if (keyList[i] == key)
if (keyList[i] == keyId)
remKeyInArr({key: keyAction[i]})
}
});
}
export { Player, playerExist, goalAnimation};

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/10/15 14:16:23 by edbernar ### ########.fr */
/* Updated: 2024/10/15 20:47:20 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -262,9 +262,9 @@ class MultiOnlineGamePage
endGameDiv.style.display = 'flex';
intervalEnd = setInterval(() => {
if (content.opponentLeft)
simpleText.innerText = `Your opponent has given up...\nYou will be redirected to the lobby in ${time} seconds`
simpleText.innerText = `Your opponent has given up...\nYou will be redirected to the ` + content.tournamentCode ? "tournamenet" : "lobby" + ` in ${time} seconds`
else
simpleText.innerText = `You will be redirected to the lobby in ${time} seconds`
simpleText.innerText = `You will be redirected to the ` + content.tournamentCode ? "tournamenet" : "lobby" + ` in ${time} seconds`
time--;
if (time == -1)
{