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

Game

Browse Source 
- fix english
    - add pfp on scoreboard
This commit is contained in:
Kum1ta
2024-10-08 20:10:08 +02:00
parent 7401ea3c17
commit e343fd57a3
11 changed files with 105 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docker-compose/requirements/djangoserver/file/server/server/Game.py
View File

@ -6,7 +6,7 @@
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/09/13 16:20:58 by tomoron #+# #+# #
# Updated: 2024/10/08 10:50:47 by tomoron ### ########.fr #
# Updated: 2024/10/08 17:44:34 by edbernar ### ########.fr #
# #
# **************************************************************************** #
@ -110,8 +110,8 @@ class Game:
self.p2.skin = skin
if(self.p2 != None and self.p1 != None):
print("both players here, send opponent to both players")
self.p1.socket.sync_send({"type":"game", "content":{"action":1,"id":self.p2.socket.id,"username":self.p2.socket.username, "skin":self.p2.skin}})
self.p2.socket.sync_send({"type":"game", "content":{"action":1,"id":self.p1.socket.id,"username":self.p1.socket.username, "skin":self.p1.skin}})
self.p1.socket.sync_send({"type":"game", "content":{"action":1,"id":self.p2.socket.id,"username":self.p2.socket.username, "skin":self.p2.skin, 'pfpOpponent':self.p2.socket.pfp, 'pfpSelf':self.p1.socket.pfp}})
self.p2.socket.sync_send({"type":"game", "content":{"action":1,"id":self.p1.socket.id,"username":self.p1.socket.username, "skin":self.p1.skin, 'pfpOpponent':self.p1.socket.pfp, 'pfpSelf':self.p2.socket.pfp}})
except Exception as e:
socket.sendError("invalid request", 9005, e)

2
docker-compose/requirements/djangoserver/file/server/server/templates/multiOnlineGamePage.html
View File

@ -3,7 +3,7 @@
<p id="ping">0 ms</p>
</div>
<div id="endGameDiv">
<p id="endGameText">You lose...</p>
<p id="endGameText">You lost...</p>
<p id="endGameScore">0 - 0</p>
<p id="endGameSimpleText">You will be redirected to the lobby in 5 seconds</p>
</div>

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

@ -25,9 +25,9 @@ urlpatterns = [
path("multiOnlineGamePage", views.multiOnlineGamePage, name='multiOnlineGamePage'),
path("waitingGamePage", views.waitingGamePage, name='waitingGamePage'),
path("profilPage", views.profilPage, name='profilPage'),
path("game", views.game, name='game'),
# path("game", views.game, name='game'),
path("wait_game", views.game, name='wait_game'),
#path("tournament", views.tournament, name='tournament'),
path("tournament", views.tournament, name='tournament'),
path("login42", views.login42, name='login42'),
path("logout", views.logout, name='logout'),
path("verify", views.verify, name='verify'),

24
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/06 17:00:12 by edbernar ### ########.fr */
/* Updated: 2024/10/08 12:55:12 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -36,12 +36,13 @@ class LobbyPage
{
static create()
{
const methButton = document.getElementById("homeButton");
const startButton = document.getElementsByClassName('buttonStartGame')[0];
const usernameP = document.getElementById('loginButton').getElementsByTagName('p')[0];
const loginButton = document.getElementById('loginButton');
const inputUser = document.getElementById('searchInputUser');
const func = [selectGameModeOne, selectGameModeTwo, selectGameModeThree, selectGameModeFour];
const methButton = document.getElementById("homeButton");
const startButton = document.getElementsByClassName('buttonStartGame')[0];
const usernameP = document.getElementById('loginButton').getElementsByTagName('p')[0];
const loginButton = document.getElementById('loginButton');
const inputUser = document.getElementById('searchInputUser');
const tournamentCodeInput = document.getElementById('tournamentCode');
const func = [selectGameModeOne, selectGameModeTwo, selectGameModeThree, selectGameModeFour];
document.body.style.opacity = 1;
if (userMeInfo.id == -1)
@ -59,6 +60,10 @@ class LobbyPage
initButtonPopMenuLogin();
initButtonLaytout();
window.addEventListener('click', closePopUpWhenClickOutsite);
tournamentCodeInput.addEventListener('keypress', () => {
if (event.key == 'Enter')
startTournmament();
});
listSelectCard = document.getElementsByClassName('select-card');
listSelectCard[0].addEventListener('click', selectGameModeOne);
listSelectCard[1].addEventListener('click', selectGameModeTwo);
@ -177,11 +182,6 @@ function startTournmament()
sendRequest("tournament", {action: 0, code: code});
}
function showGameMode()
{
document.getElementById('loginPopup').style.display = 'flex';
}
function closePopUpWhenClickOutsite (event)
{
if (event.target == document.getElementById('loginPopup'))

65
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/10/06 16:12:40 by edbernar ### ########.fr */
/* Updated: 2024/10/08 20:06:46 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -33,8 +33,8 @@ let textureTextScore = null;
let animationSpeed = 0.02;
let animateGoalObjectUpdate = null;
let animateGoalObjectUp = false;
const sourceImageLeft = "/static/img/default_pfp.jpg";
const sourceImageRight = "/static/img/default_pfp.jpg";
let sourceImageLeft = null;
let sourceImageRight = null;
let path = [];
@ -119,7 +119,7 @@ class Map
scene = null;
}
constructor(sceneToSet, length, obstacles)
constructor(sceneToSet, length, obstacles, pfpSelf, pfpOpponent)
{
loader = new GLTFLoader();
scene = sceneToSet;
@ -153,6 +153,8 @@ class Map
0x0000CC
*/
}
sourceImageLeft = pfpSelf;
sourceImageRight = pfpOpponent;
this.putScoreboard(0xCCCCFF);
path = [
{name: 'goal', onChoice: true, src: files.goalVideoPub},
@ -456,10 +458,12 @@ class Map
meshBoardLeftBack = new THREE.Mesh(geometryBoardLeftBack, materialBoardLeftBack);
materialBoardRightBack = new THREE.MeshPhysicalMaterial({color: color});
geometryBoardRightBack = new THREE.BoxGeometry(width, height, depth);
meshBoardRightBack = new THREE.Mesh(geometryBoardRightBack, materialBoardRightBack);
meshBoardRightBack = new THREE.Mesh(geometryBoardRightBack, materialBoardRightBack);
meshBoardLeftFront.position.set(-spacing - width / 2 - 0.3, 1.6, -8.5);
meshBoardRightFront.position.set(spacing + width / 2 + 0.3, 1.6, -8.5);
meshBoardLeftFront.position.set(-spacing - width / 2 - 0.3, 1.6, -8.2);
meshBoardLeftFront.rotation.y = Math.PI + 0.4;
meshBoardRightFront.position.set(spacing + width / 2 + 0.3, 1.6, -8.2);
meshBoardRightFront.rotation.y = Math.PI - 0.4;
meshBoardLeftBack.rotation.y = Math.PI;
meshBoardLeftBack.position.set(-spacing - width / 2 - 0.3, 1.6, 8.5);
@ -488,14 +492,12 @@ class Map
canvasImageLeft.width = 960;
canvasImageLeft.height = 960;
textureImageLeft = new THREE.CanvasTexture(canvasImageLeft);
textureImageLeft.imageSmoothingEnabled = false;
contextImageLeft.clearRect(0, 0, canvasImageLeft.width, canvasImageLeft.height);
const imageLeft = new Image();
imageLeft.src = sourceImageLeft;
imageLeft.onload = () => {
contextImageLeft.drawImage(imageLeft, 0, 0, canvasImageLeft.width, canvasImageLeft.height);
textureImageLeft.needsUpdate = true;
};
canvasImageLeft.classList.add('imgScoreBoard');
imageLeft.onload = () => this.#putPlayerPfp(canvasImageLeft, contextImageLeft, textureImageLeft, imageLeft);
canvasImageRight = document.createElement('canvas');
contextImageRight = canvasImageRight.getContext('2d');
@ -505,11 +507,9 @@ class Map
contextImageLeft.clearRect(0, 0, canvasImageLeft.width, canvasImageLeft.height);
const imageRight = new Image();
imageRight.setAttribute('class', 'imgScoreBoard');
imageRight.src = sourceImageRight;
imageRight.onload = () => {
contextImageRight.drawImage(imageRight, 0, 0, canvasImageRight.width, canvasImageRight.height);
textureImageRight.needsUpdate = true;
};
imageRight.onload = () => this.#putPlayerPfp(canvasImageRight, contextImageRight, textureImageRight, imageRight);
let materialProfileLeft = null;
let materialProfileRight = null;
@ -537,8 +537,10 @@ class Map
geometryProfileRightBack = new THREE.PlaneGeometry(width - 0.15, height - 0.15);
meshProfileRightBack = new THREE.Mesh(geometryProfileRightBack, materialProfileRight);
meshProfileLeftFront.position.set(-spacing - width / 2 - 0.325, 1.6, - 8.5 + depth / 2 + 0.001);
meshProfileRightFront.position.set(spacing + width / 2 + 0.325, 1.6, - 8.5 + depth / 2 + 0.01);
meshProfileLeftFront.position.set(-spacing - width / 2 - 0.275, 1.6, - 8.15);
meshProfileLeftFront.rotation.y = 0.4;
meshProfileRightFront.position.set(spacing + width / 2 + 0.275, 1.6, - 8.15);
meshProfileRightFront.rotation.y = -0.4;
meshProfileLeftBack.rotation.y = Math.PI;
meshProfileLeftBack.position.set(-spacing - width / 2 - 0.325, 1.6, 8.5 - depth / 2 - 0.001);
@ -554,6 +556,33 @@ class Map
this.arrObject.push({mesh: meshProfileLeftBack, name: "", type: "profileBoard"});
this.arrObject.push({mesh: meshProfileRightBack, name: "", type: "profileBoard"});
};
#putPlayerPfp(canvasImage, contextImage, textureImage, img)
{
const canvasWidth = canvasImage.width;
const canvasHeight = canvasImage.height;
const imageWidth = img.width;
const imageHeight = img.height;
const canvasRatio = canvasWidth / canvasHeight;
const imageRatio = imageWidth / imageHeight;
let drawWidth, drawHeight;
if (imageRatio > canvasRatio)
{
drawWidth = canvasWidth;
drawHeight = canvasWidth / imageRatio;
}
else
{
drawWidth = canvasHeight * imageRatio;
drawHeight = canvasHeight;
}
const offsetX = (canvasWidth - drawWidth) / 2;
const offsetY = (canvasHeight - drawHeight) / 2;
contextImage.clearRect(0, 0, canvasWidth, canvasHeight);
contextImage.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
textureImage.needsUpdate = true;
}
putVideoOnCanvas(nbImage, vNameNb)
{

3
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/06 16:15:27 by edbernar ### ########.fr */
/* Updated: 2024/10/08 13:26:01 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -54,7 +54,6 @@ let pressedButton = [];
let mapLength = 0;
const goalAnimation = ["triangle", "cylinder", "star", "box", "rectangle", "ring"];
const controllerModelFactory = new XRControllerModelFactory();
let motionController = null;
let key = null;
let controller1 = null;
let controller2 = null;

7
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/08 03:10:55 by edbernar ### ########.fr */
/* Updated: 2024/10/08 18:54:22 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -90,9 +90,10 @@ class MultiOnlineGamePage
const bar1 = createBarPlayer(availableSkins[skin.player]);
const bar2 = createBarPlayer(availableSkins[skin.opponent]);
console.log('skin : ', skin);
document.body.setAttribute('style', '');
scene = new THREE.Scene()
map = new Map(scene, 13, false);
map = new Map(scene, 13, false, skin.pfp, skin.pfpOpponent);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
@ -264,7 +265,7 @@ class MultiOnlineGamePage
if (map && map.score)
endGameScore.innerText = `${map.score.player} - ${map.score.opponent}`;
if (content.won)
scoreText.innerText = "You win !"
scoreText.innerText = "You won !"
endGameDiv.style.display = 'flex';
intervalEnd = setInterval(() => {
if (content.opponentLeft)

20
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/05 03:48:19 by edbernar ### ########.fr */
/* Updated: 2024/10/08 13:13:38 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -28,12 +28,21 @@ let divTopInfo = null;
let divInfo = null;
let divChat = null;
// gerer quand la personne finit sa partie pour remettre tout comme il le faut
class TournamentPage
{
static create(code)
{
document.body.removeAttribute('style');
for (let i = 0; i < document.body.children.length; i++)
{
document.body.children[i].style.animation = 'animShowMenuDiv 0.5s';
}
setTimeout(() => {
for (let i = 0; i < document.body.children.length; i++)
{
document.body.children[i].style.animation = 'none';
}
}, 500);
divTopInfo = document.getElementById('actuality-tournament');
divInfo = document.getElementsByClassName('infoo')[0];
divChat = document.getElementsByClassName('chat')[0];
@ -48,6 +57,11 @@ class TournamentPage
divTopInfo = null;
divInfo = null;
divChat = null;
Object.values(playerList).forEach((info) => {
info.id = 0;
info.username = null;
info.pfp = null;
});
}
static newOpponent(content)

10
docker-compose/requirements/nginx/static/javascript/typeResponse/typeTournament.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/10/01 13:29:50 by edbernar #+# #+# */
/* Updated: 2024/10/06 15:32:04 by edbernar ### ########.fr */
/* Updated: 2024/10/08 13:03:19 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -54,7 +54,13 @@ function joinTournament(content)
else if (content.started)
CN.new("Information", "This tournament has already started");
else
pageRenderer.changePage('tournamentPage', false, content.code);
{
document.body.style.animation = "none";
document.body.style.animation = "startGameAnim 0.5s";
setTimeout(() => {
pageRenderer.changePage('tournamentPage', false, content.code);
}, 400);
}
}
export { typeTournament };

4
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/03 14:35:54 by edbernar ### ########.fr */
/* Updated: 2024/10/08 17:48:27 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -90,7 +90,7 @@ class WaitingGamePage
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.goalId});
pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected ? lastSelected.id : 0, opponent: content.skin, opponentGoaldId: content.goalId, pfp: content.pfpSelf, pfpOpponent: content.pfpOpponent});
}, 1000);
}, 500);
document.body.removeChild(returnButton);

9
docker-compose/requirements/nginx/static/style/game/games.css
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 11:23:41 by edbernar #+# #+# */
/* Updated: 2024/10/05 02:14:49 by edbernar ### ########.fr */
/* Updated: 2024/10/08 19:48:26 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -264,4 +264,11 @@ body {
padding: 0;
color: white;
background-color: rgba(0, 0, 0, 0.367);
}
.imgScoreBoard {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}