Site

- add real stats and history game in profil page
    - search will send now request in lower case in profile page
    - add key enter in search bar in profile page

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

@@ -27,19 +27,8 @@
                     </canvas>
                 </div>
             </div>
-            <div class="history">
+            <div class="history" id="history">
                 <h3>History</h3>
-                <div class="history-card">
-                    <div id="user-1">
-                        <div class="profile-img-history"></div>
-                        <p>User1</p>
-                    </div>
-                    <p id="score-history">0 - 0</p>
-                    <div id="user-2">
-                        <div class="profile-img-history"></div>
-                        <p>User2</p>
-                    </div>
-                </div>
             </div>
         </div>
     </div>

docker-compose/requirements/nginx/static/javascript/Page.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/25 00:00:21 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/28 02:43:26 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/28 19:48:30 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -126,7 +126,7 @@ class Page
 				document.body.innerHTML = text;
 				this.actualPage = null;
 				document.title = 'METH - Page not found';
-				history.pushState({}, this.availablePages[i].title, this.availablePages[i].url);
+				history.pushState({}, document.title, window.location.pathname);
 			})
 		})
 		.catch(error => {

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

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 17:08:46 by madegryc          #+#    #+#             */
-/*   Updated: 2024/09/27 23:21:25 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/28 16:58:08 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -109,7 +109,7 @@ function searchUser(event)
 	else
 	{
 		timeout = setTimeout(() => {
-			sendRequest("search_user", {username: event.target.value});
+			sendRequest("search_user", {username: event.target.value.toLowerCase()});
 		}, 10);
 	}
 }

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/09/27 00:54:02 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/28 19:47:17 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -57,6 +57,7 @@ class ProfilPage
 				pageRenderer.changePage('lobbyPage');
 		});
 		waitForUserInfo().then((userInfo) => {
+			console.log(userInfo);
 			if (userInfo == null)
 			{
 				pageRenderer.changePage('homePage');
@@ -74,8 +75,8 @@ class ProfilPage
 			banner.style.backgroundSize = "cover";
 			banner.style.backgroundRepeat = "no-repeat";
 			externButtons(userInfo);
-			createGraph(ctx, {win: 10, lose: 1});
+			createGraph(ctx, {win: userInfo.nbWin, lose: userInfo.nbLoss});
-			console.warn("Graph values are settled in code, please change it with data request")
+			showHistory(userInfo);
 			if (userInfo.id == userMeInfo.id)
 			{
 				inviteButton.remove();
@@ -203,5 +204,36 @@ function createGraph(ctx, data)
 	});
 }
 
+function showHistory(userInfo)
+{
+	const	divHistory	=	document.getElementById('history');
+	const	history		=	userInfo.history;
+
+	history.forEach(element => {
+		const	div	=	document.createElement('div');
+
+		div.setAttribute('class', 'history-card');
+		if (element.won)
+			div.style.backgroundColor = '#11ad11';
+		div.innerHTML = `
+		<div id="user-1">
+			<div class="profile-img-history">
+				<img src="${userInfo.pfp}">
+			</div>
+			<p>${userInfo.username}</p>
+		</div>
+		<p id="score-history">${element.p1.score} - ${element.p2.score}</p>
+		<div id="user-2">
+			<div class="profile-img-history">
+				<img src="${element.p2.pfp}">
+			</div>
+			<p>${element.p2.username}</p>
+		</div>`
+		divHistory.appendChild(div);
+	});
+}
+
+                   
+
 
 export { ProfilPage };

docker-compose/requirements/nginx/static/javascript/typeResponse/typeInvitation.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/28 00:22:31 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/28 00:41:16 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/28 16:50:17 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -15,8 +15,8 @@ import { pageRenderer } from '/static/javascript/main.js'
 
 function typeInvitation(content)
 {
-	CN.new("New invitation", content.invitor + " invit you to play !", null, () => {
+	CN.new("New invitation", content.username + " invit you to play !", null, () => {
-		pageRenderer.changePage('waitingGamePage', false, {username: "AAA", id: content.invitor});
+		pageRenderer.changePage('waitingGamePage', false, {username: content.username, id: content.invitor});
 	}, 'Join', 30000);
 }
 

docker-compose/requirements/nginx/static/javascript/typeResponse/typeSearchUser.js

@@ -6,13 +6,15 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/18 08:12:24 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/20 00:23:27 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/28 17:49:07 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import { LobbyPage } from "/static/javascript/lobbyPage/main.js";
 import { pageRenderer } from '/static/javascript/main.js'
 
+let	enterActivated = false;
+
 function typeSearchUser(userList)
 {
 	const	searchInputUser	= document.getElementById('searchInputUser');
@@ -21,7 +23,8 @@ function typeSearchUser(userList)
 
 	if (pageRenderer.actualPage !== LobbyPage)
 		return ;
-	document.body.addEventListener('click', removeAlluser)
+	document.body.removeEventListener('click', removeAlluser);
+	document.body.addEventListener('click', removeAlluser);
 	pos = searchInputUser.getBoundingClientRect();
 	searchResult.style.width = pos.width + 'px';
 	searchResult.style.top = pos.top + pos.height + 'px';
@@ -35,8 +38,26 @@ function typeSearchUser(userList)
 		searchResult.appendChild(div);
 		div.addEventListener('click', () => {
 			pageRenderer.changePage('profilPage', false, user[1]);
+			if (enterActivated)
+			{
+				document.body.removeEventListener('keypress', enterPressed);
+				enterActivated = false;
+			}
 		})
 	});
+	if (!enterActivated)
+	{
+		document.body.addEventListener('keypress', enterPressed);
+		enterActivated = true;
+	}
+}
+
+function enterPressed(e)
+{
+	const	searchResult	= document.getElementById('searchResult');
+
+	if (e.key == 'Enter' && searchResult.children && searchResult.children[0])
+		searchResult.children[0].click();
 }
 
 function removeAlluser()
@@ -45,6 +66,11 @@ function removeAlluser()
 	const	searchResult	= document.getElementById('searchResult');
 
 	document.body.removeEventListener('click', removeAlluser);
+	if (enterActivated)
+	{
+		document.body.removeEventListener('keypress', enterPressed);
+		enterActivated = false;
+	}
 	searchResult.innerHTML = '';
 	searchInputUser.value = '';
 }

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

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/14 21:20:45 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/28 02:08:21 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/28 16:54:02 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -81,7 +81,7 @@ class WaitingGamePage
 			setTimeout(() => {
 				document.body.style.animation = 'anim3 0.5s';
 				document.body.style.opacity = 0;
-				pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected.id, opponent: content.skin});
+				pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected ? lastSelected.id : 0, opponent: content.skin});
 			}, 1000);
 		}, 500);
 		document.body.removeChild(returnButton);

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

@@ -153,6 +153,15 @@
     margin-bottom: 5px;
 }
 
+#profil .profile-img-history img {
+    width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    object-fit: cover;
+    object-position: 50% 50%;
+    margin-top: 2.5px;
+}
+
 #profil .profile-img-history-enemy {
     width: 50px;
     height: 50px;