Django

- fix request game 10
Game
    - add screen and redirect when game is finish
    - fix bug with upper char
    - add own fps counter and latency counter

docker-compose/requirements/djangoserver/file/server/server/Game.py

@@ -6,7 +6,7 @@
 #    By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+         #
 #                                                 +#+#+#+#+#+   +#+            #
 #    Created: 2024/09/13 16:20:58 by tomoron           #+#    #+#              #
-#    Updated: 2024/09/28 19:34:44 by tomoron          ###   ########.fr        #
+#    Updated: 2024/09/29 02:03:40 by edbernar         ###   ########.fr        #
 #                                                                              #
 # **************************************************************************** #
 
@@ -180,8 +180,8 @@ class Game:
 	def endGame(self, winner):
 		if(self.end):
 			return
-		self.p1.sync_send({"action":"game","content":{"action":10,"won":winner==1}})
+		self.p1.sync_send({"type":"game","content":{"action":10,"won":winner==1}})
-		self.p2.sync_send({"action":"game","content":{"action":10,"won":winner==2}})
+		self.p2.sync_send({"type":"game","content":{"action":10,"won":winner==2}})
 		self.winner = winner
 		self.end = True
 	

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

@@ -1,6 +1,12 @@
 <div class="pingDiv">
+	<p id="fps">0 fps</p>
 	<p id="ping">0 ms</p>
 </div>
+<div id="endGameDiv">
+	<p id="endGameText">You lose...</p>
+	<p id="endGameScore">0 - 0</p>
+	<p id="endGameSimpleText">You will be redirected to the lobby in 5 seconds</p>
+</div>
 <div class="gamePad">
 	<div id="fullscreen" style="background-image: url('/static/img/multiOnlineGamePage/fullscreen.png');"></div>
 	<div class="gamePadLeft">
@@ -13,4 +19,6 @@
 	</div>
 </div>
 
+
+
 <!-- <img src="/static/img/multiOnlineGamePage/left-arrow.png"> -->

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/28 16:58:08 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/29 01:34:41 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -41,6 +41,7 @@ class LobbyPage
 		const	inputUser		= document.getElementById('searchInputUser');
 		const	func			= [selectGameModeOne, selectGameModeTwo, selectGameModeThree, selectGameModeFour];
 
+		document.body.style.opacity = 1;
 		if (userMeInfo.id == -1)
 			waitForLogin().then(() => usernameP.innerHTML = userMeInfo.username);
 		else
@@ -145,7 +146,6 @@ function startMode()
 function startMultiLocal()
 {
 	document.body.style.animation = "none";
-	document.body.offsetHeight;
 	document.body.style.animation = "startGameAnim 0.5s";
 	document.body.style.opacity = 0;
 	setTimeout(() => {
@@ -156,7 +156,6 @@ function startMultiLocal()
 function startMatchmaking()
 {
 	document.body.style.animation = "none";
-	document.body.offsetHeight;
 	document.body.style.animation = "startGameAnim 0.5s";
 	document.body.style.opacity = 0;
 	setTimeout(() => {

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

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 14:52:55 by hubourge          #+#    #+#             */
-/*   Updated: 2024/09/27 23:59:18 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/29 01:18:23 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -27,7 +27,6 @@ let materialCanvas				= null;
 let textureLoaderPlane			= null;
 let texturePlane				= null;
 let ctx							= null;
-let fireworkMixer				= null;
 let canvasTextScore				= null;
 let contextTextScore			= null;
 let textureTextScore			= null;
@@ -614,7 +613,6 @@ class Map
 			}
 			let videoTmp = null;
 			videoTmp = new Video(path[i].blob).video;
-			console.log(videoTmp.src);
 			videoTmp.addEventListener('loadeddata', () => {
 				videoTmp.play();
 				drawVideoOnCanvas();

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

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:30:31 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/28 03:13:14 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/29 01:37:45 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -103,7 +103,7 @@ class Player
 		document.removeEventListener('keypress', simplePressKey);
 		pressedButton = [];
 		if (this.interval)
-			clearInterval(interval);
+			clearInterval(this.interval);
 	}
 
 	resetPosPlayer()
@@ -333,21 +333,23 @@ class Player
 
 function addKeyInArr(e)
 {
+	const	key	= e.key.toLowerCase();
 	let		i;
 
 	i = 0;
-	while (i < pressedButton.length && e.key != pressedButton[i])
+	while (i < pressedButton.length && key != pressedButton[i])
 		i++;
 	if (i == pressedButton.length)
-		pressedButton.push(e.key);
+		pressedButton.push(e.key.toLowerCase());
 }
 
 function remKeyInArr(e)
 {
+	const	key	= e.key.toLowerCase();
 	let		i;
 
 	i = 0;
-	while (i < pressedButton.length && e.key != pressedButton[i])
+	while (i < pressedButton.length && key != pressedButton[i])
 		i++;
 	if (i != pressedButton.length)
 		pressedButton.splice(i, 1);

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

@@ -6,14 +6,12 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:53:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/28 21:46:40 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/29 01:35:50 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
-import { createNotification as CN } from "/static/javascript/notification/main.js";
 import { availableSkins } from '/static/javascript/lobbyPage/3d.js';
 import * as THREE from '/static/javascript/three/build/three.module.js'
-import Stats from '/static/javascript/three/examples/jsm/libs/stats.module.js'
 import { OrbitControls } from '/static/javascript/three/examples/jsm/Addons.js';
 import { sendRequest } from "/static/javascript/websocket.js";
 import { Player } from '/static/javascript/multiOnlineGame/Player.js'
@@ -65,11 +63,10 @@ let	interval			= null;
 let	intervalPing		= null;
 let debug				= false;
 let	lastPingTime		= 0;
+let	lastFpsTime			= 0;
+let lastFpsDisplayed	= 0;
 
 // ------------------- (need to be remove) -------------------- //
-const stats = new Stats();
-stats.showPanel(0);
-
 const cameraTmp = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight);
 let controls = null;
 // ------------------------------------------------------------ //
@@ -78,11 +75,12 @@ class MultiOnlineGamePage
 {
 	static create(skin)
 	{
-		document.body.appendChild(stats.dom);
+		if (!skin)
-
+			skin = {player: 0, opponent: 0};
 		const bar1		= createBarPlayer(availableSkins[skin.player]);
 		const bar2		= createBarPlayer(availableSkins[skin.opponent]);
 
+		console.log(document.body.getAttribute('style'));
 		document.body.setAttribute('style', '');
 		scene					= new THREE.Scene()
 		map						= new Map(scene, 13, false);
@@ -172,7 +170,7 @@ class MultiOnlineGamePage
 				sendRequest('game', {action: 4});
 				lastPingTime = Date.now();
 			}
-		}, 16);
+		}, 800);
 	}
 
 	static dispose()
@@ -233,6 +231,29 @@ class MultiOnlineGamePage
 		text.innerText = ping + ' ms';
 		lastPingTime = null;
 	}
+
+	static endGame(win)
+	{
+		const	endGameDiv	=	document.getElementById('endGameDiv');
+		const	scoreText	=	document.getElementById('endGameScore');
+		const	simpleText	=	document.getElementById('endGameSimpleText');
+		let		intervalEnd	=	null;
+		let		time		=	4;
+
+		endGameScore.innerText = `${map.score.player} - ${map.score.opponent}`;
+		if (win)
+			endGameText.innerText = "You win !"
+		endGameDiv.style.display = 'flex';
+		intervalEnd = setInterval(() => {
+			simpleText.innerText = `You will be redirected to the lobby in ${time} seconds`
+			time--;
+			if (time == -1)
+			{
+				clearInterval(intervalEnd);
+				setTimeout(() => pageRenderer.changePage('lobbyPage'), 500);
+			}
+		}, 1000);
+	}
 }
 
 function createBarPlayer(skin)
@@ -240,7 +261,6 @@ function createBarPlayer(skin)
 	const	geometry	= new THREE.BoxGeometry(1, 0.1, 0.1);
 	let		material	= null;
 
-	console.log(skin)
 	if (skin.color)
 		material = new THREE.MeshPhysicalMaterial({color: skin.color});
 	else
@@ -251,14 +271,8 @@ function createBarPlayer(skin)
 	return (mesh);
 }
 
-function changeBarColor(bar, color)
+function windowUpdater()
 {
-	bar.material.color.set(color);
-}
-
-function windowUpdater(e)
-{
-	console.log('udapte');
 	renderer.setSize(window.innerWidth, window.innerHeight);
 	player.camera.aspect = window.innerWidth / window.innerHeight;
 	player.camera.updateProjectionMatrix();
@@ -266,10 +280,7 @@ function windowUpdater(e)
 
 function loop()
 {
-	/////////////
+	showFps();
-	stats.begin();
-	/////////////
-
 	player.update();
 	opponent.update();
 	ball.update();
@@ -281,10 +292,24 @@ function loop()
 	}
 	else
 		renderer.render(scene, player.camera);
+}
 
-	/////////////
+let	lastFpsArr = [10, 3, 5];
-	stats.end();
+
-	////////////
+function showFps()
+{
+	const	fps		=	document.getElementById('fps')
+	const	now		=	Date.now();
+
+	if (now > lastFpsDisplayed + 800)
+	{
+		fps.innerText = Math.round(lastFpsArr.reduce((a, b) => a + b, 0) / lastFpsArr.length) + ' fps';
+		lastFpsDisplayed = now;
+		lastFpsArr = [];
+	}
+	else
+		lastFpsArr.push(Math.floor(1000 / (now - lastFpsTime)));
+	lastFpsTime = now;
 }
 
 export { MultiOnlineGamePage, player, opponent, ball, map};

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 21:33:31 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/29 00:22:13 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -37,6 +37,8 @@ function typeGame(content)
 			map.activeJumper(content.name);
 		else if (content.action == 9)
 			MultiOnlineGamePage.ping();
+		else if (content.action == 10)
+			MultiOnlineGamePage.endGame(content.won)
 	}
 }
 

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/28 21:38:24 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/29 01:11:55 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -193,14 +193,60 @@ body {
 
 .pingDiv {
 	position: absolute;
-	top: 100px;
+	left: 10px;
-	left: 100px;
+	top: 10px;
 	font-size: 20px;
 	color: white;
 	z-index: 800;
+	display: flex;
+	flex-direction: row;
+	background-color: rgba(0, 0, 0, 0.329);
+	user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    touch-action: none;
 }
 
 #ping {
 	font-size: 20px;
 	color: white;
+	border: 1px solid rgba(255, 255, 255, 0.123);
+	padding: 5px 10px 5px 10px;
+}
+
+#fps {
+	padding: 5px 10px 5px 10px;
+	border: 1px solid rgba(255, 255, 255, 0.123);
+	border-right: none;
+}
+
+#endGameDiv {
+	display: none;
+	flex-direction: column;
+	position: absolute;
+	justify-content: center;
+	align-items: center;
+	width: 100vw;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.9);
+	backdrop-filter: blur(5px);
+	z-index: 900;
+	transition: all 0.5s;
+	animation: fadeOutGames 0.5s;
+}
+
+#endGameText {
+	font-size: 100px;
+	color: white;
+}
+
+#endGameScore {
+	font-size: 75px;
+	color: white;
+}
+
+#endGameSimpleText {
+	font-size: 25px;
+	color: white;
+	margin-top: 50px;
 }