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

Game

Browse Source 
- remove video when user is on mobile
Site
    - add skin in tournament request
    - fix bug with goal/bar selector
This commit is contained in:
Kum1ta
2024-10-14 22:16:00 +02:00
parent 7c0d0eb9b7
commit 93da99d559
8 changed files with 82 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/13 13:59:46 by edbernar #+# #+# */
/* Updated: 2024/10/13 13:44:43 by edbernar ### ########.fr */
/* Updated: 2024/10/13 23:25:15 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -38,13 +38,15 @@ const availableGoals = [
class barSelecter
{
scene = null;
renderer = null;
camera = null;
spotLight = new THREE.SpotLight(0xffffff, 5);
selected = lastSelected ? lastSelected : availableSkins[0];
bar = this.createBarPlayer(this.selected);
boundChangeSkin = this.changeSkin.bind(this);
scene = null;
renderer = null;
camera = null;
spotLight = new THREE.SpotLight(0xffffff, 5);
selected = lastSelected ? lastSelected : availableSkins[0];
bar = this.createBarPlayer(this.selected);
boundChangeSkin = this.changeSkin.bind(this);
boundSkinSelector = this.resizeSelector.bind(this);
div = null;
constructor(div)
@ -54,6 +56,7 @@ class barSelecter
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.camera = new THREE.PerspectiveCamera(60, (pos.width - 10) / (pos.height - 10));
this.div = div;
if (!lastSelected)
lastSelected = availableSkins[0];
this.scene.background = new THREE.Color(0x020202);
@ -90,12 +93,15 @@ class barSelecter
popup.removeEventListener('click', this.hideSkinSelector);
popup.addEventListener('click', this.hideSkinSelector);
});
window.addEventListener('resize', () => {
const pos = div.getBoundingClientRect();
this.renderer.setSize(pos.width - 10, pos.height - 10);
this.camera.aspect = (pos.width - 10) / (pos.height - 10);
this.camera.updateProjectionMatrix();
});
window.addEventListener('resize', this.boundSkinSelector);
}
resizeSelector()
{
const pos = this.div.getBoundingClientRect();
this.renderer.setSize(pos.width - 10, pos.height - 10);
this.camera.aspect = (pos.width - 10) / (pos.height - 10);
this.camera.updateProjectionMatrix();
}
hideSkinSelector(event)
@ -181,6 +187,7 @@ class barSelecter
}
this.scene = null;
actualBarSelecor = null;
window.removeEventListener('resize', this.boundSkinSelector);
}
}
@ -199,6 +206,7 @@ class goalSelecter
boundChangeGoal = this.changeGoal.bind(this);
boundhideGoalSelector = this.hideGoalSelector.bind(this);
boundshowGoals = this.showGoals.bind(this);
boundresizeSelector = this.resizeSelector.bind(this);
constructor(div)
{
@ -220,12 +228,15 @@ class goalSelecter
this.renderer.setAnimationLoop(this.#loop.bind(this));
div.removeEventListener('click', this.boundshowGoals);
div.addEventListener('click', this.boundshowGoals);
window.addEventListener('resize', () => {
const pos = div.getBoundingClientRect();
this.renderer.setSize(pos.width - 10, pos.height - 10);
this.camera.aspect = (pos.width - 10) / (pos.height - 10);
this.camera.updateProjectionMatrix();
});
window.addEventListener('resize', this.boundresizeSelector);
}
resizeSelector()
{
const pos = this.div.getBoundingClientRect();
this.renderer.setSize(pos.width - 10, pos.height - 10);
this.camera.aspect = (pos.width - 10) / (pos.height - 10);
this.camera.updateProjectionMatrix();
}
showGoals()
@ -379,6 +390,7 @@ class goalSelecter
this.scene = null;
actualGoalSelecter = null;
this.div.removeEventListener('click', this.boundshowGoals);
window.removeEventListener('resize', this.boundresizeSelector);
}
}

7
docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
/* Updated: 2024/10/12 17:08:11 by edbernar ### ########.fr */
/* Updated: 2024/10/14 21:45:07 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -17,6 +17,7 @@ import { LiveChat } from "/static/javascript/liveChat/main.js";
import { sendRequest } from "/static/javascript/websocket.js";
import { pageRenderer } from '/static/javascript/main.js'
import { isMobile } from '/static/javascript/main.js';
import { lastSelected } from '/static/javascript/lobbyPage/3d.js';
/*
Information :
@ -195,12 +196,12 @@ function startTournmament()
let nbBot = document.getElementById('nbBot').value;
if (code != '')
sendRequest("tournament", {action: 0, code: code});
sendRequest("tournament", {action: 0, code: code, skin: lastSelected ? lastSelected.id : 0, goal: goalSelector ? goalSelector.selected : 0});
else
{
nbBot = nbBot == '' ? 0 : nbBot;
if (parseInt(nbBot) >= 0 && parseInt(nbBot) <= 7)
sendRequest("tournament", {action: 0, code: '', nbBot: parseInt(nbBot)});
sendRequest("tournament", {action: 0, code: '', nbBot: parseInt(nbBot), skin: lastSelected ? lastSelected.id : 0, goal: goalSelector ? goalSelector.selected : 0});
else
CN.new("Error", "You must enter a valid number of bot");
}

7
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/12 16:58:41 by edbernar ### ########.fr */
/* Updated: 2024/10/14 22:08:12 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -16,6 +16,7 @@ import { scene, renderer, isInVrMode, ball } from '/static/javascript/multiOnlin
import { lastSelectedGoal, availableGoals } from '/static/javascript/lobbyPage/3d.js';
import * as THREE from '/static/javascript/three/build/three.module.js'
import { layoutSelected } from '/static/javascript/lobbyPage/main.js'
import { isMobile } from '/static/javascript/main.js'
/*
Explication du code :
@ -143,7 +144,8 @@ class Player
this.mapVar.putVideoOnCanvas(3, 'goal');
setTimeout(() => {
this.mapVar.putVideoOnCanvas(0, null);
this.mapVar.putVideoOnCanvas(2, 3);
if (!isMobile)
this.mapVar.putVideoOnCanvas(2, 3);
}, 4000);
ball.setVisibility(false);
@ -551,6 +553,7 @@ 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");

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/11 10:56:51 by edbernar ### ########.fr */
/* Updated: 2024/10/14 22:08:37 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -21,6 +21,7 @@ import { Ball } from '/static/javascript/multiOnlineGame/Ball.js'
import { Map } from '/static/javascript/multiOnlineGame/Map.js'
import { sendRequest } from "/static/javascript/websocket.js";
import { files } from '/static/javascript/filesLoader.js';
/*
Controls :
- w : monter
@ -154,7 +155,8 @@ class MultiOnlineGamePage
renderer.setAnimationLoop(loop)
sendRequest('game', {action: 1});
map.putVideoOnCanvas(2, 3);
if (!isMobile)
map.putVideoOnCanvas(2, 3);
let lastPosition = player.object.position.x;
let lastUp = player.isUp;
interval = setInterval(() => {

16
docker-compose/requirements/nginx/static/javascript/tournamentPage/TournamentPage.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/10/01 13:42:29 by edbernar #+# #+# */
/* Updated: 2024/10/12 23:26:19 by edbernar ### ########.fr */
/* Updated: 2024/10/14 21:49:04 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -88,11 +88,11 @@ class TournamentPage
console.warn("Tournament is full.");
return ;
}
if (alreadyConnected)
{
console.warn("Player is already in game.");
return ;
}
// if (alreadyConnected)
// {
// console.warn("Player is already in game.");
// return ;
// }
newInfo(`${content.username} joined the tournament.`);
document.getElementById('user-' + playerNb[i]).innerText = content.username;
document.getElementById('pfp-' + playerNb[i]).style.backgroundImage = `url(${content.pfp})`;
@ -151,7 +151,9 @@ class TournamentPage
static startGame(content)
{
pageRenderer.changePage("waitingGamePage", false, {username: content.username, id: content.id, isTournament: true})
console.log("Game is starting...");
console.log(content);
pageRenderer.changePage("waitingGamePage", false, {username: content.username, id: content.id, isTournament: true, content: content});
}
}

23
docker-compose/requirements/nginx/static/javascript/waitingGame/main.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/14 21:20:45 by edbernar #+# #+# */
/* Updated: 2024/10/12 17:30:41 by edbernar ### ########.fr */
/* Updated: 2024/10/14 22:09:18 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -45,10 +45,17 @@ class WaitingGamePage
sentence.innerText = text + points;
}, 500);
timeout = setTimeout(() => {
if (opponentInfo && typeof(opponentInfo) != 'boolean')
sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, goalId: goalId, opponent: opponentInfo.id});
if (!isTournament)
{
if (opponentInfo && typeof(opponentInfo) != 'boolean')
sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, goalId: goalId, opponent: opponentInfo.id});
else
sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, goalId: goalId, isRanked: opponentInfo ? true : false, with_bot: withBot});
}
else
sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, goalId: goalId, isRanked: opponentInfo ? true : false, with_bot: withBot});
{
this.showOpponent(opponentInfo);
}
timeout = null;
}, isTournament ? 1500 : 500);
if (!opponentInfo || !isTournament)
@ -91,10 +98,14 @@ class WaitingGamePage
timeout = setTimeout(() => {
document.body.style.animation = 'anim3 0.5s';
document.body.style.opacity = 0;
pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected ? lastSelected.id : 0, opponent: content.skin, opponentGoaldId: content.goal, pfp: content.pfpSelf, pfpOpponent: content.pfpOpponent});
if (content.isTournament)
pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected ? lastSelected.id : 0, opponent: content.id, opponentGoaldId: content.content.goal, pfp: content.content.selfPfp, pfpOpponent: content.content.pfp});
else
pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected ? lastSelected.id : 0, opponent: content.skin, opponentGoaldId: content.goal, pfp: content.pfpSelf, pfpOpponent: content.pfpOpponent});
}, 1000);
}, 500);
document.body.removeChild(returnButton);
if (returnButton)
document.body.removeChild(returnButton);
}
static opponentHasQuit(opponentId)