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

Site

Browse Source 
- request 5-6 ok for tournament
This commit is contained in:
Kum1ta
2024-10-20 18:07:45 +02:00
parent 02bd95dceb
commit 1b6b921cbc
6 changed files with 147 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ # # By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ # # +#+#+#+#+#+ +#+ #
# Created: 2024/10/06 16:33:56 by tomoron #+# #+# # # Created: 2024/10/06 16:33:56 by tomoron #+# #+# #
# Updated: 2024/10/20 15:42:21 by tomoron ### ########.fr # # Updated: 2024/10/20 15:48:47 by edbernar ### ########.fr #
# # # #
# **************************************************************************** # # **************************************************************************** #
@ -43,7 +43,7 @@ class GameSettings:
wallLength = 1 wallLength = 1
wallWidth = 0.05 wallWidth = 0.05
bounceSpeedIncrease = 0.2 bounceSpeedIncrease = 0.2
maxScore = 2 maxScore = 1
maxPlayerSpeed = 6 maxPlayerSpeed = 6
BotMovement = False BotMovement = False

40
docker-compose/requirements/djangoserver/file/server/server/templates/tournamentPage.html
View File

@ -4,23 +4,20 @@
<p id="code-tournament">Code : 45HW28</p> <p id="code-tournament">Code : 45HW28</p>
</div> </div>
<div class="bracket"> <div class="bracket">
<div class="left"> <div class="left" style="margin-top: 100px;">
<div class="container"> <div class="container">
<p id="user-1">username1</p> <p id="user-1" class="nameText" style="top: 20px">username1</p>
<div class="circle" id="pfp-1"></div> <div class="circle" id="pfp-1"></div>
<div class="vertical-line"> <div class="vertical-line">
<div class="horizontal-container"> <div class="horizontal-container">
<div class="horizontal-line"></div> <div class="horizontal-line"></div>
<div class="circle" id="pfp-3"> <div class="circle" id="pfp-3">
<div class="container" style="margin-top: 50px;"> <div class="container" style="margin-top: 50px;">
<p style="position: absolute; top: -30px; " id="user-3">username3</p> <div class="vertical-line-demi" style="height: 220px">
<p style="position: absolute; bottom: -280px;" id="user-9">username9</p> <div class="horizontal-container-final" style="margin-left: -105px;">
<div class="vertical-line-demi" style="height: 220px;">
<div class="horizontal-container-final">
<div class="horizontal-line"></div> <div class="horizontal-line"></div>
<div class="circle" id="pfp-12"></div> <div class="circle" id="pfp-12"></div>
<p id="user-12">username12</p> <p style="position:absolute; right: 2px; bottom: 32px; color: white; font-size: 35px;">VS</p>
<p style="position:absolute; right: 25px; bottom: 43px; color: white; font-size: 35px;">VS</p>
</div> </div>
</div> </div>
</div> </div>
@ -28,9 +25,9 @@
</div> </div>
</div> </div>
<div class="circle" id="pfp-2"></div> <div class="circle" id="pfp-2"></div>
<p id="user-2">username2</p> <p id="user-2" class="nameText" style="top: 295px">username2</p>
<div class="container" style="margin-top: 20px;"> <div class="container" style="margin-top: 70px;">
<p id="user-4">username4</p> <p id="user-4" class="nameText" style="top: 520px">username4</p>
<div class="circle" id="pfp-4"></div> <div class="circle" id="pfp-4"></div>
<div class="vertical-line"> <div class="vertical-line">
<div class="horizontal-container"> <div class="horizontal-container">
@ -39,28 +36,27 @@
</div> </div>
</div> </div>
<div class="circle" id="pfp-5"></div> <div class="circle" id="pfp-5"></div>
<p id="user-5">username5</p> <p id="user-5" class="nameText" style="top: 250px">username5</p>
</div> </div>
</div> </div>
</div> </div>
<div class="right"> <div class="right" style="margin-left: -35px; margin-top: 0px;">
<div class="container" style="left: 350px;"> <div class="container">
<div class="horizontal-container" style="margin-top: 75px;"> <div class="horizontal-container" style="margin-top: 75px;">
<p style="margin-right: 10px;" id="user-58">username58</p>
<div class="circle" id="pfp-58"> <div class="circle" id="pfp-58">
</div> </div>
<div class="horizontal-line"></div> <div class="horizontal-line"></div>
<div class="container" style="margin-left: -25px;"> <div class="container" style="margin-left: -25px;">
<div style="display: flex; flex-direction: row; "> <div style="display: flex; flex-direction: row; ">
<div class="circle" id="pfp-27"> <div class="circle" id="pfp-27">
<div class="horizontal-container" style="position: absolute; left: 280px; transform: translateY(-38%); display: flex; flex-direction: row; align-items: center; justify-items: center; z-index: -1;"> <div class="horizontal-container" style="position: absolute; left: 170px; transform: translateY(-38%); display: flex; flex-direction: row; align-items: center; justify-items: center; z-index: -1;">
<div class="horizontal-line"></div> <div class="horizontal-line"></div>
<div style="display: flex; flex-direction: column; align-items: center; margin-left: -25px; justify-items: center;"> <div style="display: flex; flex-direction: column; align-items: center; margin-left: -25px; justify-items: center;">
<p style="position: absolute; top: -55px" id="user-13">username13</p> <p style="position: absolute; top: -55px" id="user-13" class="nameText">username13</p>
<div class="circle" id="pfp-13"></div> <div class="circle" id="pfp-13"></div>
<div class="vertical-line"></div> <div class="vertical-line"></div>
<p style="position: absolute; bottom: -55px;" id="user-14">username14</p> <p style="position: absolute; bottom: -55px;" id="user-14" class="nameText">username14</p>
<div class="circle" id="pfp-14"></div> <div class="circle" id="pfp-14"></div>
</div> </div>
</div> </div>
@ -68,19 +64,17 @@
</div> </div>
<div class="vertical-line-demi" style="height: 260px;"> <div class="vertical-line-demi" style="height: 260px;">
<p style="position: absolute; top: -105px" id="user-27">username27</p>
<p style="position: absolute; bottom: -105px" id="user-31">username31</p>
<div class="horizontal-container-final"></div> <div class="horizontal-container-final"></div>
</div> </div>
<div style="display: flex; flex-direction: row;"> <div style="display: flex; flex-direction: row;">
<div class="circle" id="pfp-31"> <div class="circle" id="pfp-31">
<div class="horizontal-container" style="position: absolute; left: 280px; transform: translateY(-37%); z-index: -1;"> <div class="horizontal-container" style="position: absolute; left: 170px; transform: translateY(-37%); z-index: -1;">
<div class="horizontal-line"></div> <div class="horizontal-line"></div>
<div style="display: flex; flex-direction: column; align-items: center; margin-left: -25px; justify-items: center;"> <div style="display: flex; flex-direction: column; align-items: center; margin-left: -25px; justify-items: center;">
<div class="circle" id="pfp-15"></div> <div class="circle" id="pfp-15"></div>
<p style="position: absolute; top: -55px;" id="user-15">username15</p> <p style="position: absolute; top: -55px;" id="user-15" class="nameText">username15</p>
<div class="vertical-line"></div> <div class="vertical-line"></div>
<p style="position: absolute; bottom: -55px;" id="user-16">username16</p> <p style="position: absolute; bottom: -55px;" id="user-16" class="nameText">username16</p>
<div class="circle" id="pfp-16"></div> <div class="circle" id="pfp-16"></div>
</div> </div>

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/19 22:54:14 by tomoron ### ########.fr # # Updated: 2024/10/20 15:02:51 by edbernar ### ########.fr #
# # # #
# **************************************************************************** # # **************************************************************************** #
@ -65,7 +65,7 @@ from .tournamentActions.fetchAllData import fetchAllData
# 2 : message tournament : send a message to the tournament chat # 2 : message tournament : send a message to the tournament chat
# - message : message to send # - message : message to send
# #
# 3 : fetchAllData : fetch all data of the tournament # 3 : fetchAllData and ready : fetch all data of the tournament
# --> server will send all the data of the tournament (players, messages, etc...) with his actions # --> server will send all the data of the tournament (players, messages, etc...) with his actions
actionList = [tournamentStart, tournamentLeave, sendMessage, fetchAllData] actionList = [tournamentStart, tournamentLeave, sendMessage, fetchAllData]

35
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/16 01:10:29 by edbernar ### ########.fr */ /* Updated: 2024/10/20 17:58:40 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -139,6 +139,8 @@ class TournamentPage
this.newMessage(content.messages[i]); this.newMessage(content.messages[i]);
for (let i = 0; i < content.players.length; i++) for (let i = 0; i < content.players.length; i++)
this.newOpponent(content.players[i]); this.newOpponent(content.players[i]);
for (let i = 0; i < content.history.length; i++)
this.newEndGame(content.history[i]);
} }
static startGame(content) static startGame(content)
@ -147,6 +149,35 @@ class TournamentPage
console.log(content); console.log(content);
pageRenderer.changePage("waitingGamePage", false, {username: content.username, id: content.id, isTournament: true, content: content}); pageRenderer.changePage("waitingGamePage", false, {username: content.username, id: content.id, isTournament: true, content: content});
} }
static newEndGame(content)
{
const player1Nb = playerNb[content.p1];
const player2Nb = playerNb[content.p2];
const winner = content.p1Win ? playerList['player' + player1Nb].username : playerList['player' + player2Nb].username;
const winnerData = content.p1Win ? playerList['player' + player1Nb] : playerList['player' + player2Nb];
let pos = 0;
let loserPos = 0;
newInfo(`${playerList['player' + player1Nb].username} vs ${playerList['player' + player2Nb].username} : <span style="font-weight: bold;">${winner}</span> won.`);
if (Math.floor(content.p1 / 2) == Math.floor(content.p2 / 2))
{
loserPos = content.p1Win ? player2Nb : player1Nb;
document.getElementById('pfp-' + loserPos).style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${playerList['player' + (content.p1Win ? player2Nb : player1Nb)].pfp}')`;
document.getElementById('pfp-' + (player1Nb + player2Nb)).style.backgroundImage = `url(${winnerData.pfp})`;
}
else
{
pos = (player1Nb + (player1Nb % 2 == 0 ? player1Nb - 1 : player1Nb)) + (player2Nb + (player2Nb % 2 == 0 ? player2Nb - 1: player2Nb));
if (content.p1Win)
loserPos = player2Nb + (player2Nb % 2 == 0 ? player2Nb - 1 : player2Nb);
else
loserPos = player1Nb + (player1Nb % 2 == 0 ? player1Nb - 1 : player1Nb);
document.getElementById('pfp-' + pos).style.backgroundImage = `url(${winnerData.pfp})`;
console.log("loserPos : ", loserPos);
document.getElementById('pfp-' + loserPos).style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${playerList['player' + (content.p1Win ? player2Nb : player1Nb)].pfp}')`;
}
}
} }
function newInfo(message) function newInfo(message)
@ -184,4 +215,4 @@ function initTournamentChat()
}); });
} }
export { TournamentPage } export { TournamentPage };

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/10/01 13:29:50 by edbernar #+# #+# */ /* Created: 2024/10/01 13:29:50 by edbernar #+# #+# */
/* Updated: 2024/10/16 01:20:33 by edbernar ### ########.fr */ /* Updated: 2024/10/20 18:07:15 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -41,6 +41,8 @@ function typeTournament(content)
TournamentPage.startGame(content); TournamentPage.startGame(content);
else if (content.action == 5) else if (content.action == 5)
TournamentPage.fetchAllData(content); TournamentPage.fetchAllData(content);
else if (content.action == 6)
TournamentPage.newEndGame(content);
} }
else else
console.warn("Request tournament not for this page..."); console.warn("Request tournament not for this page...");
@ -65,3 +67,87 @@ function joinTournament(content)
} }
export { typeTournament }; export { typeTournament };
document.addEventListener('keydown', (event) => {
if (event.key === "a")
{
typeTournament(
{
"action": 5,
"players": [
// {
// "id": 0,
// "username": "edbernar",
// "pfp": "/static/img/default_pfp.jpg"
// },
{
"id": 1,
"username": "bot",
"pfp": "/static/img/robot_pfp.jpg"
},
{
"id": 2,
"username": "bot",
"pfp": "/static/img/robot_pfp.jpg"
},
{
"id": 3,
"username": "bot",
"pfp": "/static/img/robot_pfp.jpg"
},
{
"id": 4,
"username": "bot",
"pfp": "/static/img/robot_pfp.jpg"
},
{
"id": 5,
"username": "bot",
"pfp": "/static/img/robot_pfp.jpg"
},
{
"id": 6,
"username": "bot",
"pfp": "/static/img/robot_pfp.jpg"
},
{
"id": 7,
"username": "bot",
"pfp": "/static/img/robot_pfp.jpg"
}
],
"messages": [],
"history": [
{
"p1": 3,
"p2": 2,
"p1Win": true
},
{
"p1": 5,
"p2": 4,
"p1Win": true
},
{
"p1": 7,
"p2": 6,
"p1Win": true
},
{
"p1": 7,
"p2": 5,
"p1Win": true
},
{
"p1": 1,
"p2": 0,
"p1Win": false
}
]
}
);
}
});

7
docker-compose/requirements/nginx/static/style/tournamentPage/tournamentPage.css
View File

@ -26,7 +26,6 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 100px; height: 100px;
margin-bottom: 20px;
} }
#tournamentPage #actuality-tournament { #tournamentPage #actuality-tournament {
@ -54,7 +53,7 @@
#tournamentPage .right{ #tournamentPage .right{
padding: 82px; padding: 82px;
padding-top: 250px; padding-top: 350px;
/* width: 50%; */ /* width: 50%; */
height: 100%; height: 100%;
} }
@ -323,3 +322,7 @@
#tournamentPage .buttonStartGame:hover { #tournamentPage .buttonStartGame:hover {
transform: scale(1.1); transform: scale(1.1);
} }
.nameText {
position: absolute;
}