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

Profile page

Browse Source 
- add arrow to see more stat on dashboard
This commit is contained in:
Kum1ta
2024-11-17 00:35:47 +01:00
parent ead5b1d23a
commit 3647853e0c
4 changed files with 76 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
View File

@ -76,7 +76,6 @@
</div>
</div>
<!--------- FOR MATHIS : I made some changes here ---------->
<div class="menuSelected" id="multiLocalSelected">
<div id="whatGame">
<p>The key to success is timing and precision, as you need to position your paddle correctly to deflect the ball at the right angle.</p>

7
docker-compose/requirements/djangoserver/file/server/server/templates/profilPage.html
View File

@ -20,11 +20,12 @@
<!-- Dashboard and History Section -->
<div class="content">
<div class="dashboard">
<div style="display: flex; justify-content: space-between; position: absolute; width: calc(100% - 40px);">
<button class="button-dashboard" id="leftArrowDashboard"><</button>
<button class="button-dashboard" id="rightArrowDashboard">></button>
</div>
<h3>Dashboard</h3>
<div class="contentStats">
<canvas id="stats">
</canvas>
</div>
</div>
<div class="history" id="history">

43
docker-compose/requirements/nginx/static/javascript/profilPage/main.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/19 23:08:31 by edbernar #+# #+# */
/* Updated: 2024/11/14 15:27:15 by edbernar ### ########.fr */
/* Updated: 2024/11/17 00:18:32 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -29,7 +29,6 @@ class ProfilPage
const convButton = document.getElementById('newConv');
const inviteButton = document.getElementById('invite');
const crossProfil = document.getElementById('cross-profil');
let ctx = document.getElementById('stats').getContext('2d');
const elo = document.getElementById('player-elo');
let editPenPfpBg = null;
let inputPfp = null;
@ -76,8 +75,8 @@ class ProfilPage
banner.style.backgroundRepeat = "no-repeat";
elo.innerHTML = `Elo: ${userInfo.elo}`;
externButtons(userInfo);
createGraph(ctx, {win: userInfo.nbWin, lose: userInfo.nbLoss});
showHistory(userInfo);
buttonDashboard(userInfo);
if (userInfo.id == userMeInfo.id)
{
inviteButton.remove();
@ -234,6 +233,44 @@ function showHistory(userInfo)
});
}
function buttonDashboard(userInfo)
{
const buttonLeft = document.getElementById('leftArrowDashboard');
const buttonRight = document.getElementById('rightArrowDashboard');
const contentStats = document.getElementsByClassName('contentStats')[0];
let actualPage = 0;
function changeDashboard()
{
contentStats.innerHTML = '';
if (actualPage == 0)
{
contentStats.innerHTML = `<canvas id="stats"></canvas>`;
const ctx = document.getElementById('stats').getContext('2d');
createGraph(ctx, {win: userInfo.nbWin, lose: userInfo.nbLoss});
}
else if (actualPage == 1)
{
contentStats.innerHTML = `
<p class="dashboard-line">Winrate<span>100%</span></p>
<p class="dashboard-line">Opponent give up rate<span>0%</span></p>
<p class="dashboard-line">Average goal number<span>3.5</span></p>
<p class="dashboard-line">Number of parties (last 30 days)<span>10</span></p>
`;
}
}
buttonLeft.addEventListener('click', () => {
actualPage = actualPage == 0 ? 1 : 0;
changeDashboard();
});
buttonRight.addEventListener('click', () => {
actualPage = actualPage == 0 ? 1 : 0;
changeDashboard();
});
changeDashboard();
}

32
docker-compose/requirements/nginx/static/style/profilPage/profil.css
View File

@ -103,6 +103,7 @@
display: flex;
justify-content: space-between;
margin-top: 100px;
position: relative;
}
#profil .dashboard {
@ -111,6 +112,7 @@
height: 42vh;
padding: 20px;
text-align: center;
position: relative;
}
#profil .history #scroll-match {
@ -261,6 +263,36 @@
cursor: pointer;
}
#profil .dashboard h3 {
margin-top: 10px;
}
#profil .dashboard .button-dashboard {
background-color: #aeaeae;
color: white;
border: none;
padding: 10px 20px;
border-radius: 10px;
font-size: 1rem;
cursor: pointer;
}
#profil .dashboard .button-dashboard:focus {
outline: none;
}
#profil .contentStats .dashboard-line {
width: 100%;
text-align: left;
margin-bottom: 20px;
position: relative;
}
#profil .contentStats .dashboard-line span {
font-weight: bold;
position: absolute;
right: 0;
}
@media (max-width: 700px){
#profil .container {