Profile page

- add arrow to see more stat on dashboard

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

@@ -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>

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

@@ -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">

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

@@ -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();
+}
                    
 
 

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

@@ -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 {