From 5668d338b6b7ce36bd325e7b0623c87c68e65d4d Mon Sep 17 00:00:00 2001
From: Kum1ta <eddydhj@gmail.com>
Date: Tue, 17 Sep 2024 15:16:42 +0200
Subject: [PATCH] Site     - Add function for move ball     - add function for
 quit when opponent disconnect

---
 .../static/javascript/multiLocalGame/Map.js   |  3 +-
 .../static/javascript/multiOnlineGame/Ball.js | 30 ++++++++++++++-
 .../static/javascript/multiOnlineGame/Map.js  | 38 ++++++++++---------
 .../multiOnlineGame/multiOnlineGamePage.js    | 25 ++++++++++--
 .../javascript/typeResponse/typeGame.js       | 23 ++++++-----
 .../nginx/static/javascript/websocket.js      |  2 +-
 6 files changed, 84 insertions(+), 37 deletions(-)

diff --git a/docker-compose/requirements/nginx/static/javascript/multiLocalGame/Map.js b/docker-compose/requirements/nginx/static/javascript/multiLocalGame/Map.js
index 55f4fd0..192662e 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiLocalGame/Map.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiLocalGame/Map.js
@@ -6,12 +6,11 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/28 12:23:48 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/14 02:02:00 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/17 15:02:11 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import * as CANNON from '/static/javascript/cannon-es/dist/cannon-es.js'
-// import * as CANNON from '/static/javascript/cannon/build/cannon.min.js'
 import * as THREE from '/static/javascript/three/build/three.module.js'
 import { ball } from '/static/javascript/multiLocalGame/Ball.js'
 import { player1, player2 } from '/static/javascript/multiLocalGame/Players.js';
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js
index 8f77d61..41f18bc 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js
@@ -6,18 +6,23 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 17:02:47 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/15 14:56:07 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/17 15:13:50 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+import * as CANNON from '/static/javascript/cannon-es/dist/cannon-es.js'
 import * as THREE from '/static/javascript/three/build/three.module.js'
 
+const	timeStep		=	1 / 60;
+
 class Ball
 {
 	object		= null;
 	centerPos	= {};
 	limits		= {};
 	interval	= null;
+	world		= null;
+	ballBody	= null;
 
 	constructor(scene, map)
 	{
@@ -27,6 +32,13 @@ class Ball
 		this.limits = map.playerLimits;
 		this.resetPosBall();
 		scene.add(this.object);
+		this.world = new CANNON.World();
+		this.ballBody = new CANNON.Body({
+			shape: new CANNON.Sphere(0.15),
+			mass: 10,
+		});
+		this.ballBody.position.copy(this.object.position);
+		this.world.addBody(this.ballBody);
 	}
 
 	#createBall()
@@ -107,6 +119,22 @@ class Ball
 	}
 	/*---------------------------------------------------*/
 
+	updatePos(content)
+	{
+		// {action: 5, pos: [ball.object.position.x, ball.object.position.z], velocity: [ball.object.velocity.x, ball.object.velocity.z]}
+
+		this.ballBody.position.x = content.pos[0];
+		this.ballBody.position.z = content.pos[1];
+		this.ballBody.velocity.set(content.velocity[0], 0, content.velocity[1]);
+	}
+
+	update()
+	{
+		this.world.step(timeStep);
+		this.object.position.copy(this.ballBody.position);
+		this.object.quaternion.copy(this.ballBody.quaternion);
+	}
+
 	dispose()
 	{
 		if (this.interval)
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
index 6bee085..a1b99df 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
+++ b/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/15 15:24:37 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/17 13:59:13 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -26,13 +26,22 @@ let texturePlane		= null;
 let ctx					= null;
 
 let path = [
-	{name: 'goal', 			onChoice: true, src:'/static/video/multiOnlineGamePage/goal2.webm'},
-	{name: 'easteregg',		onChoice: true, src:'/static/video/multiOnlineGamePage/easteregg.webm'},
-	{name: 'outstanding', 	onChoice: true, src:'/static/video/multiOnlineGamePage/outstanding.webm'},
-	{name: 'ping', 			onChoice: false, src:'/static/video/multiOnlineGamePage/pingpong.mp4'},
-	{name: 'catch', 		onChoice: false, src:'/static/video/multiOnlineGamePage/catch.mp4'},
-	{name: 'fortnite', 		onChoice: false, src:'/static/video/multiOnlineGamePage/fortnite.mp4'},
+	{name: 'goal', 			onChoice: true, src:'/static/video/multiOnlineGamePage/goal2.webm', blob: null},
+	{name: 'easteregg',		onChoice: true, src:'/static/video/multiOnlineGamePage/easteregg.webm', blob: null},
+	{name: 'outstanding', 	onChoice: true, src:'/static/video/multiOnlineGamePage/outstanding.webm', blob: null},
+	{name: 'ping', 			onChoice: false, src:'/static/video/multiOnlineGamePage/pingpong.mp4', blob: null},
+	{name: 'catch', 		onChoice: false, src:'/static/video/multiOnlineGamePage/catch.mp4', blob: null},
+	{name: 'fortnite', 		onChoice: false, src:'/static/video/multiOnlineGamePage/fortnite.mp4', blob: null},
 ]
+
+path.forEach(elem => {
+	fetch(elem.src)
+	.then(response => response.blob())
+	.then(blob => {
+		elem.blob = URL.createObjectURL(blob);
+	});
+});
+
 let spacingImages = [
 	100 * 2.33 * 10 - (100 * 2.33),   // 2 images
 	100 * 2.33 * 5 - (100 * 2.33),    // 4 images
@@ -63,14 +72,9 @@ class Map
 
 	dispose()
 	{
-		videoList.forEach(elem => {
-			elem.video.pause();
-			elem.video.src = '';
-			elem.video.removeAttribute('src');
-			elem.video.load();
-		})
 		videoList = null;
-		videoCanvas.remove();
+		if (videoCanvas)
+			videoCanvas.remove();
 		if (videoCanvasTexture)
 			videoCanvasTexture.dispose();
 		if (materialCanvas)
@@ -374,10 +378,8 @@ class Map
 				continue ;
 			}
 			let videoTmp = null;
-			if (Math.random() < 0.99)
-				videoTmp = new Video(path[i].src).video;
-			else
-				videoTmp = new Video(path[getIndex('easteregg')].src).video;
+			videoTmp = new Video(path[i].blob).video;
+			console.log(videoTmp.src);
 			videoTmp.addEventListener('loadeddata', () => {
 				videoTmp.play();
 				drawVideoOnCanvas();
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
index d86294e..79e6391 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
@@ -6,15 +6,17 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:53:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/16 15:48:15 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/17 15:04:18 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+import { createNotification as CN } from "/static/javascript/notification/main.js";
 import * as THREE from '/static/javascript/three/build/three.module.js'
 import { sendRequest } from "/static/javascript/websocket.js";
 import { Player } from '/static/javascript/multiOnlineGame/Player.js'
 import { Map } from '/static/javascript/multiOnlineGame/Map.js'
 import { Ball } from '/static/javascript/multiOnlineGame/Ball.js'
+import { pageRenderer } from '/static/javascript/main.js'
 import { Opponent } from '/static/javascript/multiOnlineGame/Opponent.js'
 
 /*
@@ -110,13 +112,21 @@ class MultiOnlineGamePage
 
 		renderer.setAnimationLoop(loop)
 		sendRequest('game', {action: 1});
+		let lastPosition = player.object.position.x;
 		interval = setInterval(() => {
-			sendRequest('game', {action: 3, pos: player.object.position.x, up: player.isUp});
+			if (player && player.object.position.x != lastPosition)
+			{
+				lastPosition = player.object.position.x;
+				sendRequest('game', {action: 3, pos: player.object.position.x, up: player.isUp});
+			}
 		}, 1000 / 20);
 	}
 
 	static dispose()
 	{
+		if (interval)
+			clearInterval(interval);
+		interval = null;
 		if (renderer)
 			renderer.dispose();
 		renderer = null;
@@ -146,6 +156,14 @@ class MultiOnlineGamePage
 		}
 		scene = null;
 	}
+
+	static opponentDisconnect()
+	{
+		pageRenderer.changePage('lobbyPage');
+		setTimeout(() => {
+			CN.new("Game", "Opponent disconnect", CN.defaultIcon.error);
+		}, 1000);
+	}
 }
 
 function createBarPlayer(color)
@@ -167,8 +185,9 @@ function loop()
 {
 	player.update();
 	opponent.update();
+	ball.update();
 	map.update(ball);
 	renderer.render(scene, player.camera);
 }
 
-export { MultiOnlineGamePage, opponent };
+export { MultiOnlineGamePage, opponent, ball };
diff --git a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeGame.js b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeGame.js
index 94c879e..d823403 100644
--- a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeGame.js
+++ b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeGame.js
@@ -6,29 +6,28 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/15 12:00:01 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/16 15:05:01 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/17 14:38:06 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import { MultiOnlineGamePage, opponent } from "/static/javascript/multiOnlineGame/multiOnlineGamePage.js"
+import { ball } from "/static/javascript/multiOnlineGame/multiOnlineGamePage.js"
 import { WaitingGamePage } from "/static/javascript/waitingGame/main.js"
 import { pageRenderer } from '/static/javascript/main.js'
 
 function typeGame(content)
 {
-	if (content.action == 1)
+	if (content.action == 1 && pageRenderer.actualPage == WaitingGamePage)
+		WaitingGamePage.showOpponent(content.username);
+	else if (content.action == 3 && pageRenderer.actualPage == MultiOnlineGamePage)
 	{
-		if (pageRenderer.actualPage == WaitingGamePage)
-			WaitingGamePage.showOpponent(content.username);
-	}
-	else if (content.action == 3)
-	{
-		if (pageRenderer.actualPage == MultiOnlineGamePage)
-		{
-			if (content.is_opponent)
-				opponent.movePlayer(content);
-		}
+		if (content.is_opponent)
+			opponent.movePlayer(content);
 	}
+	else if (content.action == 4 && pageRenderer.actualPage == MultiOnlineGamePage)
+		MultiOnlineGamePage.opponentDisconnect();
+	else if (content.action == 5 && pageRenderer.actualPage == MultiOnlineGamePage)
+		ball.updatePos(content);
 }
 
 export { typeGame };
diff --git a/docker-compose/requirements/nginx/static/javascript/websocket.js b/docker-compose/requirements/nginx/static/javascript/websocket.js
index 21fa631..769ba38 100644
--- a/docker-compose/requirements/nginx/static/javascript/websocket.js
+++ b/docker-compose/requirements/nginx/static/javascript/websocket.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/31 22:17:24 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/16 15:47:51 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/17 14:31:46 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */