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

13
docker-compose/requirements/djangoserver/file/server/server/TournamentGame.py
View File

@ -3,14 +3,15 @@
# ::: :::::::: # # ::: :::::::: #
# TournamentGame.py :+: :+: :+: # # TournamentGame.py :+: :+: :+: #
# +:+ +:+ +:+ # # +:+ +:+ +:+ #
# By: tomoron <marvin@42.fr> +#+ +:+ +#+ # # By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ # # +#+#+#+#+#+ +#+ #
# Created: 2024/10/12 22:49:00 by tomoron #+# #+# # # Created: 2024/10/12 22:49:00 by tomoron #+# #+# #
# Updated: 2024/10/14 20:29:06 by tomoron ### ########.fr # # Updated: 2024/10/14 21:57:14 by edbernar ### ########.fr #
# # # #
# **************************************************************************** # # **************************************************************************** #
import asyncio
from .Game import Game from .Game import Game
import asyncio
class TournamentGame: class TournamentGame:
def __init__(self, left, right): def __init__(self, left, right):
@ -38,7 +39,8 @@ class TournamentGame:
"pfp": r.socket.pfp, "pfp": r.socket.pfp,
"username":r.socket.username, "username":r.socket.username,
"skin" : r.skin, "skin" : r.skin,
"goal": r.goal "goal": r.goal,
"selfPfp": l.socket.pfp,
}) })
r.socket.sync_send("tournament", { r.socket.sync_send("tournament", {
"action":4, "action":4,
@ -46,7 +48,8 @@ class TournamentGame:
"pfp": l.socket.pfp, "pfp": l.socket.pfp,
"username": l.socket.username, "username": l.socket.username,
"skin" : l.skin, "skin" : l.skin,
"goal": l.goal "goal": l.goal,
"selfPfp": r.socket.pfp,
}) })
async def loop(self): async def loop(self):

4
docker-compose/requirements/djangoserver/file/server/server/typeRequests/tournamentRequest.py
View File

@ -6,7 +6,7 @@
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ # # By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ # # +#+#+#+#+#+ +#+ #
# Created: 2024/10/01 13:16:39 by edbernar #+# #+# # # Created: 2024/10/01 13:16:39 by edbernar #+# #+# #
# Updated: 2024/10/14 19:57:12 by tomoron ### ########.fr # # Updated: 2024/10/14 21:41:33 by edbernar ### ########.fr #
# # # #
# **************************************************************************** # # **************************************************************************** #
@ -51,6 +51,8 @@ from .tournamentActions.fetchAllData import fetchAllData
# 0 : start : start a tournament. if code == "", create a new tournament, else join the tournament with the code # 0 : start : start a tournament. if code == "", create a new tournament, else join the tournament with the code
# - code : code of the tournament # - code : code of the tournament
# - nbBot : number of bot in the tournament # - nbBot : number of bot in the tournament
# - skin : skin id of the player
# - goal : goal id of the player
# #
# 1 : leave : leave the tournament # 1 : leave : leave the tournament
# #

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

@ -6,7 +6,7 @@
/* 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/13 13:44:43 by edbernar ### ########.fr */ /* Updated: 2024/10/13 23:25:15 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -45,6 +45,8 @@ class barSelecter
selected = lastSelected ? lastSelected : availableSkins[0]; selected = lastSelected ? lastSelected : availableSkins[0];
bar = this.createBarPlayer(this.selected); bar = this.createBarPlayer(this.selected);
boundChangeSkin = this.changeSkin.bind(this); boundChangeSkin = this.changeSkin.bind(this);
boundSkinSelector = this.resizeSelector.bind(this);
div = null;
constructor(div) constructor(div)
@ -54,6 +56,7 @@ class barSelecter
this.renderer = new THREE.WebGLRenderer({antialias: true}); this.renderer = new THREE.WebGLRenderer({antialias: true});
this.camera = new THREE.PerspectiveCamera(60, (pos.width - 10) / (pos.height - 10)); this.camera = new THREE.PerspectiveCamera(60, (pos.width - 10) / (pos.height - 10));
this.div = div;
if (!lastSelected) if (!lastSelected)
lastSelected = availableSkins[0]; lastSelected = availableSkins[0];
this.scene.background = new THREE.Color(0x020202); this.scene.background = new THREE.Color(0x020202);
@ -90,12 +93,15 @@ class barSelecter
popup.removeEventListener('click', this.hideSkinSelector); popup.removeEventListener('click', this.hideSkinSelector);
popup.addEventListener('click', this.hideSkinSelector); popup.addEventListener('click', this.hideSkinSelector);
}); });
window.addEventListener('resize', () => { window.addEventListener('resize', this.boundSkinSelector);
const pos = div.getBoundingClientRect(); }
resizeSelector()
{
const pos = this.div.getBoundingClientRect();
this.renderer.setSize(pos.width - 10, pos.height - 10); this.renderer.setSize(pos.width - 10, pos.height - 10);
this.camera.aspect = (pos.width - 10) / (pos.height - 10); this.camera.aspect = (pos.width - 10) / (pos.height - 10);
this.camera.updateProjectionMatrix(); this.camera.updateProjectionMatrix();
});
} }
hideSkinSelector(event) hideSkinSelector(event)
@ -181,6 +187,7 @@ class barSelecter
} }
this.scene = null; this.scene = null;
actualBarSelecor = null; actualBarSelecor = null;
window.removeEventListener('resize', this.boundSkinSelector);
} }
} }
@ -199,6 +206,7 @@ class goalSelecter
boundChangeGoal = this.changeGoal.bind(this); boundChangeGoal = this.changeGoal.bind(this);
boundhideGoalSelector = this.hideGoalSelector.bind(this); boundhideGoalSelector = this.hideGoalSelector.bind(this);
boundshowGoals = this.showGoals.bind(this); boundshowGoals = this.showGoals.bind(this);
boundresizeSelector = this.resizeSelector.bind(this);
constructor(div) constructor(div)
{ {
@ -220,12 +228,15 @@ class goalSelecter
this.renderer.setAnimationLoop(this.#loop.bind(this)); this.renderer.setAnimationLoop(this.#loop.bind(this));
div.removeEventListener('click', this.boundshowGoals); div.removeEventListener('click', this.boundshowGoals);
div.addEventListener('click', this.boundshowGoals); div.addEventListener('click', this.boundshowGoals);
window.addEventListener('resize', () => { window.addEventListener('resize', this.boundresizeSelector);
const pos = div.getBoundingClientRect(); }
resizeSelector()
{
const pos = this.div.getBoundingClientRect();
this.renderer.setSize(pos.width - 10, pos.height - 10); this.renderer.setSize(pos.width - 10, pos.height - 10);
this.camera.aspect = (pos.width - 10) / (pos.height - 10); this.camera.aspect = (pos.width - 10) / (pos.height - 10);
this.camera.updateProjectionMatrix(); this.camera.updateProjectionMatrix();
});
} }
showGoals() showGoals()
@ -379,6 +390,7 @@ class goalSelecter
this.scene = null; this.scene = null;
actualGoalSelecter = null; actualGoalSelecter = null;
this.div.removeEventListener('click', this.boundshowGoals); 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. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */ /* 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 { sendRequest } from "/static/javascript/websocket.js";
import { pageRenderer } from '/static/javascript/main.js' import { pageRenderer } from '/static/javascript/main.js'
import { isMobile } from '/static/javascript/main.js'; import { isMobile } from '/static/javascript/main.js';
import { lastSelected } from '/static/javascript/lobbyPage/3d.js';
/* /*
Information : Information :
@ -195,12 +196,12 @@ function startTournmament()
let nbBot = document.getElementById('nbBot').value; let nbBot = document.getElementById('nbBot').value;
if (code != '') 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 else
{ {
nbBot = nbBot == '' ? 0 : nbBot; nbBot = nbBot == '' ? 0 : nbBot;
if (parseInt(nbBot) >= 0 && parseInt(nbBot) <= 7) 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 else
CN.new("Error", "You must enter a valid number of bot"); CN.new("Error", "You must enter a valid number of bot");
} }

5
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/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 { lastSelectedGoal, availableGoals } from '/static/javascript/lobbyPage/3d.js';
import * as THREE from '/static/javascript/three/build/three.module.js' import * as THREE from '/static/javascript/three/build/three.module.js'
import { layoutSelected } from '/static/javascript/lobbyPage/main.js' import { layoutSelected } from '/static/javascript/lobbyPage/main.js'
import { isMobile } from '/static/javascript/main.js'
/* /*
Explication du code : Explication du code :
@ -143,6 +144,7 @@ class Player
this.mapVar.putVideoOnCanvas(3, 'goal'); this.mapVar.putVideoOnCanvas(3, 'goal');
setTimeout(() => { setTimeout(() => {
this.mapVar.putVideoOnCanvas(0, null); this.mapVar.putVideoOnCanvas(0, null);
if (!isMobile)
this.mapVar.putVideoOnCanvas(2, 3); this.mapVar.putVideoOnCanvas(2, 3);
}, 4000); }, 4000);
@ -551,6 +553,7 @@ 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', (event) => { document.addEventListener('touchstart', (event) => {
const key = event.target.getAttribute("id"); const key = event.target.getAttribute("id");

4
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/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 { 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'; import { files } from '/static/javascript/filesLoader.js';
/* /*
Controls : Controls :
- w : monter - w : monter
@ -154,6 +155,7 @@ class MultiOnlineGamePage
renderer.setAnimationLoop(loop) renderer.setAnimationLoop(loop)
sendRequest('game', {action: 1}); sendRequest('game', {action: 1});
if (!isMobile)
map.putVideoOnCanvas(2, 3); map.putVideoOnCanvas(2, 3);
let lastPosition = player.object.position.x; let lastPosition = player.object.position.x;
let lastUp = player.isUp; let lastUp = player.isUp;

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/10/01 13:42:29 by edbernar #+# #+# */ /* 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."); console.warn("Tournament is full.");
return ; return ;
} }
if (alreadyConnected) // if (alreadyConnected)
{ // {
console.warn("Player is already in game."); // console.warn("Player is already in game.");
return ; // return ;
} // }
newInfo(`${content.username} joined the tournament.`); newInfo(`${content.username} joined the tournament.`);
document.getElementById('user-' + playerNb[i]).innerText = content.username; document.getElementById('user-' + playerNb[i]).innerText = content.username;
document.getElementById('pfp-' + playerNb[i]).style.backgroundImage = `url(${content.pfp})`; document.getElementById('pfp-' + playerNb[i]).style.backgroundImage = `url(${content.pfp})`;
@ -151,7 +151,9 @@ class TournamentPage
static startGame(content) 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});
} }
} }

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

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