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

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

@ -6,13 +6,13 @@
/* 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/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 { 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 class Ball
{ {
@ -287,7 +287,8 @@ class Ball
this.updateTrail(); this.updateTrail();
} }
updateTrail() { updateTrail()
{
const trailColors = trailGeometry.attributes.customColor.array; const trailColors = trailGeometry.attributes.customColor.array;
for (let i = trailPositions.length - 3; i >= 3; i--) for (let i = trailPositions.length - 3; i >= 3; i--)
@ -297,31 +298,32 @@ class Ball
trailPositions[2] = this.object.position.z; trailPositions[2] = this.object.position.z;
for (let i = 0; i < 33; i++) for (let i = 0; i < 33; i++)
trailSizes[i] = Math.max(0.5 * (1 - i / 33), 0.1); {
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( const velocityMagnitude = Math.sqrt(
this.srvPos.vel[0] * this.srvPos.vel[0] + this.srvPos.vel[0] * this.srvPos.vel[0] +
this.srvPos.vel[1] * this.srvPos.vel[1] 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);
const speedFactor = Math.min(velocityMagnitude / 10, 1); // Divisé par 10 pour ajuster l'échelle
for (let i = 0; i < 33; i++) { for (let i = 0; i < 33; i++) {
const alpha = Math.max(1 - i / 33, 0); const alpha = Math.max(1 - i / 33, 0);
// Couleur entre blanc et rouge selon la vitesse const r = 1;
const r = 1; // Rouge maximum const g = 1 - speedFactor;
const g = 1 - speedFactor; // Moins de vert avec l'augmentation de la vitesse const b = 1 - speedFactor;
const b = 1 - speedFactor; // Moins de bleu avec l'augmentation de la vitesse
// Appliquer la couleur
trailColors[i * 4] = r; trailColors[i * 4] = r;
trailColors[i * 4 + 1] = g; trailColors[i * 4 + 1] = g;
trailColors[i * 4 + 2] = b; trailColors[i * 4 + 2] = b;
trailColors[i * 4 + 3] = alpha; trailColors[i * 4 + 3] = alpha;
} }
// Marquer les attributs comme nécessitant une mise à jour
trailGeometry.attributes.position.needsUpdate = true; trailGeometry.attributes.position.needsUpdate = true;
trailGeometry.attributes.size.needsUpdate = true; trailGeometry.attributes.size.needsUpdate = true;
trailGeometry.attributes.customColor.needsUpdate = true; trailGeometry.attributes.customColor.needsUpdate = true;
@ -365,9 +367,9 @@ const vertexShader = `
`; `;
const fragmentShader = ` const fragmentShader = `
varying vec4 vColor; // Reçoit la couleur et l'alpha du vertex shader varying vec4 vColor;
void main() { void main() {
gl_FragColor = vColor; // Utilise la couleur avec l'alpha gl_FragColor = vColor;
} }
`; `;

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */ /* 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) if (this.interval)
clearInterval(this.interval); clearInterval(this.interval);
key = null; key = null;
document.addEventListener('touchstart', addKeyTouch);
document.addEventListener('touchend', removeKeyTouch);
} }
reserCameraPlayer() reserCameraPlayer()
@ -540,8 +542,6 @@ function showGamePad()
{ {
const gamePad = document.getElementsByClassName('gamePad')[0]; const gamePad = document.getElementsByClassName('gamePad')[0];
const canvas = document.getElementById('canvasMultiGameOnline'); 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) { canvas.addEventListener('touchstart', function(e) {
e.preventDefault(); e.preventDefault();
@ -553,25 +553,35 @@ function showGamePad()
goFullscreen(); goFullscreen();
}); });
gamePad.style.display = 'flex'; gamePad.style.display = 'flex';
console.warn("change listener for touchstart and touchend because can't be removed"); document.addEventListener('touchstart', addKeyTouch);
document.addEventListener('touchstart', (event) => { document.addEventListener('touchend', removeKeyTouch);
const key = event.target.getAttribute("id"); }
for (let i = 0; i < keyList.length; i++) function addKeyTouch(event)
{ {
if (keyList[i] == key) const keyId = event.target.getAttribute("id");
addKeyInArr({key: keyAction[i]}) const keyAction = [key.left, key.right, key.up, key.down];
} const keyList = ['padLeft', 'padRight', 'padTop', 'padBottom'];
});
document.addEventListener('touchend', (event) => {
const key = event.target.getAttribute("id");
for (let i = 0; i < keyList.length; i++) console.log(key);
{ for (let i = 0; i < keyList.length; i++)
if (keyList[i] == key) {
remKeyInArr({key: keyAction[i]}) if (keyList[i] == keyId)
} addKeyInArr({key: keyAction[i]})
}); }
}
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] == keyId)
remKeyInArr({key: keyAction[i]})
}
} }
export { Player, playerExist, goalAnimation}; 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. +#+ +:+ +#+ */ /* 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/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'; endGameDiv.style.display = 'flex';
intervalEnd = setInterval(() => { intervalEnd = setInterval(() => {
if (content.opponentLeft) 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 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--; time--;
if (time == -1) if (time == -1)
{ {