Game

- add ping on multi online

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

@@ -1,3 +1,6 @@
+<div class="pingDiv">
+	<p id="ping">0 ms</p>
+</div>
 <div class="gamePad">
 	<div id="fullscreen" style="background-image: url('/static/img/multiOnlineGamePage/fullscreen.png');"></div>
 	<div class="gamePadLeft">

docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:53:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/28 03:15:02 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/28 21:46:40 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -62,7 +62,9 @@ let spotLight			= null;
 let ambiantLight		= null;
 let opponent			= null;
 let	interval			= null;
+let	intervalPing		= null;
 let debug				= false;
+let	lastPingTime		= 0;
 
 // ------------------- (need to be remove) -------------------- //
 const stats = new Stats();
@@ -164,6 +166,13 @@ class MultiOnlineGamePage
 				sendRequest('game', {action: 3, pos: player.object.position.x, up: player.isUp});
 			}
 		}, 1000 / 20);
+		intervalPing = setInterval(() => {
+			if (!lastPingTime)
+			{
+				sendRequest('game', {action: 4});
+				lastPingTime = Date.now();
+			}
+		}, 16);
 	}
 
 	static dispose()
@@ -172,6 +181,9 @@ class MultiOnlineGamePage
 		if (interval)
 			clearInterval(interval);
 		interval = null;
+		if (intervalPing)
+			clearInterval(intervalPing);
+		intervalPing = null;
 		if (renderer)
 			renderer.dispose();
 		renderer = null;
@@ -206,6 +218,21 @@ class MultiOnlineGamePage
 	{
 		pageRenderer.changePage('lobbyPage');
 	}
+
+	static ping()
+	{
+		const	text	=	document.getElementById('ping');
+		const	ping	=	Date.now() - lastPingTime;
+
+		if (ping < 90)
+			text.style.color = 'white';
+		else if (ping >= 90 && ping < 150)
+			text.style.color = 'orange';
+		else
+			text.style.color = 'red';
+		text.innerText = ping + ' ms';
+		lastPingTime = null;
+	}
 }
 
 function createBarPlayer(skin)

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

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/15 12:00:01 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/28 00:56:23 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/28 21:33:31 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -16,25 +16,28 @@ import { pageRenderer } from '/static/javascript/main.js'
 
 function typeGame(content)
 {
-	if (content.action == 1 && pageRenderer.actualPage == WaitingGamePage)
+	if (pageRenderer.actualPage == WaitingGamePage)
 	{
+		if (content.action == 1)
 			WaitingGamePage.showOpponent(content);
 	}
-	else if (content.action == 3 && pageRenderer.actualPage == MultiOnlineGamePage)
+	else if (pageRenderer.actualPage == MultiOnlineGamePage)
 	{
-		if (content.is_opponent)
+		if (content.action == 3 && content.is_opponent)
 			opponent.movePlayer(content);
-	}
+		else if (content.action == 4)
-	else if (content.action == 4 && pageRenderer.actualPage == MultiOnlineGamePage)
 			MultiOnlineGamePage.opponentDisconnect();
-	else if (content.action == 5 && pageRenderer.actualPage == MultiOnlineGamePage)
+		else if (content.action == 5)
 			ball.updatePos(content);
-	else if (content.action == 6 && pageRenderer.actualPage == MultiOnlineGamePage)
+		else if (content.action == 6)
 			player.makeAnimation(content.is_opponent);
-	else if (content.action == 7 && pageRenderer.actualPage == MultiOnlineGamePage)
+		else if (content.action == 7)
 			map.placeObject(content);
-	else if (content.action == 8 && pageRenderer.actualPage == MultiOnlineGamePage)
+		else if (content.action == 8)
 			map.activeJumper(content.name);
+		else if (content.action == 9)
+			MultiOnlineGamePage.ping();
+	}
 }
 
 export { typeGame };

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

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 11:23:41 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/27 21:59:51 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/28 21:38:24 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -190,3 +190,17 @@ body {
     -ms-user-select: none;
     touch-action: none;
 }
+
+.pingDiv {
+	position: absolute;
+	top: 100px;
+	left: 100px;
+	font-size: 20px;
+	color: white;
+	z-index: 800;
+}
+
+#ping {
+	font-size: 20px;
+	color: white;
+}