From 7d319d020bef3cf038de94a2697a39b7e2f48527 Mon Sep 17 00:00:00 2001
From: Kum1ta <eddydhj@gmail.com>
Date: Fri, 27 Sep 2024 21:16:53 +0200
Subject: [PATCH] Site     - add gamepad for play on mobile     - merge

---
 .../server/templates/multiOnlineGamePage.html |  13 ++++
 .../img/multiOnlineGamePage/fullscreen.png    | Bin 0 -> 2831 bytes
 .../img/multiOnlineGamePage/left-arrow.png    | Bin 0 -> 6697 bytes
 .../nginx/static/javascript/home3D/home3D.js  |   4 +-
 .../nginx/static/javascript/main.js           |   7 +-
 .../static/javascript/multiOnlineGame/Map.js  |  35 ++++-----
 .../javascript/multiOnlineGame/Player.js      |  69 ++++++++++++++++-
 .../multiOnlineGame/multiOnlineGamePage.js    |  13 +++-
 .../nginx/static/style/game/games.css         |  71 +++++++++++++++++-
 9 files changed, 181 insertions(+), 31 deletions(-)
 create mode 100644 docker-compose/requirements/nginx/static/img/multiOnlineGamePage/fullscreen.png
 create mode 100644 docker-compose/requirements/nginx/static/img/multiOnlineGamePage/left-arrow.png

diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/multiOnlineGamePage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/multiOnlineGamePage.html
index e69de29..f352309 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/multiOnlineGamePage.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/multiOnlineGamePage.html
@@ -0,0 +1,13 @@
+<div class="gamePad">
+	<div id="fullscreen" style="background-image: url('/static/img/multiOnlineGamePage/fullscreen.png');"></div>
+	<div class="gamePadLeft">
+		<div class="buttonGamePad" id="padLeft" style="background-image: url('/static/img/multiOnlineGamePage/left-arrow.png');"></div>
+		<div class="buttonGamePad" id="padRight" style="background-image: url('/static/img/multiOnlineGamePage/left-arrow.png');"></div>
+	</div>
+	<div class="gamePadRight">
+		<div class="buttonGamePad" id="padTop" style="background-image: url('/static/img/multiOnlineGamePage/left-arrow.png');"></div>
+		<div class="buttonGamePad" id="padBottom" style="background-image: url('/static/img/multiOnlineGamePage/left-arrow.png');"></div>
+	</div>
+</div>
+
+<!-- <img src="/static/img/multiOnlineGamePage/left-arrow.png"> -->
diff --git a/docker-compose/requirements/nginx/static/img/multiOnlineGamePage/fullscreen.png b/docker-compose/requirements/nginx/static/img/multiOnlineGamePage/fullscreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..84b7ec5a665d6e47ab35f98d4cda805f4d88b676
GIT binary patch
literal 2831
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

literal 0
HcmV?d00001

diff --git a/docker-compose/requirements/nginx/static/img/multiOnlineGamePage/left-arrow.png b/docker-compose/requirements/nginx/static/img/multiOnlineGamePage/left-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..c81666e3da24322bcf15ceed3702ec66bf8247a2
GIT binary patch
literal 6697
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

literal 0
HcmV?d00001

diff --git a/docker-compose/requirements/nginx/static/javascript/home3D/home3D.js b/docker-compose/requirements/nginx/static/javascript/home3D/home3D.js
index 40747ce..cb0b78b 100644
--- a/docker-compose/requirements/nginx/static/javascript/home3D/home3D.js
+++ b/docker-compose/requirements/nginx/static/javascript/home3D/home3D.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 17:19:17 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/27 01:16:28 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/27 15:08:43 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -114,7 +114,7 @@ function home3D()
 	interval		= null;
 	mouse			= new THREE.Vector2();
 	isInFade		= false;
-	spotLight		= new THREE.SpotLight(0xffffff, 500);
+	spotLight		= new THREE.SpotLight(0xffffff, 1000);
 
 	
 	spotLight.position.set(0, 10, 0);
diff --git a/docker-compose/requirements/nginx/static/javascript/main.js b/docker-compose/requirements/nginx/static/javascript/main.js
index 06d9713..cc66502 100644
--- a/docker-compose/requirements/nginx/static/javascript/main.js
+++ b/docker-compose/requirements/nginx/static/javascript/main.js
@@ -6,18 +6,19 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:50:35 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/12 17:59:23 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/27 15:22:23 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import { launchSocket } from '/static/javascript/websocket.js';
 import { Page } from '/static/javascript/Page.js';
 
-let		pageRenderer = null;
+let		pageRenderer	= null;
+const	isMobile		= /mobile|android|iphone|ipad/.test(navigator.userAgent.toLowerCase())
 
 document.addEventListener('DOMContentLoaded', () => {
 	pageRenderer = new Page();
 	launchSocket();
 });
 
-export { pageRenderer };
\ No newline at end of file
+export { pageRenderer, isMobile };
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
index 293892d..230f793 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   Map.js                                             :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 14:52:55 by hubourge          #+#    #+#             */
-/*   Updated: 2024/09/27 18:21:20 by hubourge         ###   ########.fr       */
+/*   Updated: 2024/09/27 21:15:45 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -812,40 +812,31 @@ class Map
 		}, 10);
 	};
 
+	listObject = null;
 	placeObject(listObject)
 	{
 		let	nbJumper = 0; 
 		
-		listObject = listObject.content;
-		for (let i = 0; i < listObject.length; i++ )
+		this.listObject = listObject.content;
+		for (let i = 0; i < this.listObject.length; i++ )
 		{
-			if (listObject[i].type == 1)
+			if (this.listObject[i].type == 1)
 			{
-				this.#createGravityChanger(listObject[i].pos.x, listObject[i].pos.y, listObject[i].pos.z, listObject[i].name, listObject[i].isUp ? "jumperTop" : "jumperBottom", listObject[i].isUp);
+				this.#createGravityChanger(listObject[i].pos.x, listObject[i].pos.y, listObject[i].pos.z, "gravityChanger" + i, listObject[i].isUp ? "jumperTop" : "jumperBottom", listObject[i].isUp);
 				nbJumper++;
 			}
-			else if (listObject[i].type == 2)
-				scene.add(this.#createWallObstacle(listObject[i].pos.x, listObject[i].pos.y, listObject[i].pos.z, listObject[i].isUp));
+			else if (this.listObject[i].type == 2)
+				scene.add(this.#createWallObstacle(this.listObject[i].pos.x, this.listObject[i].pos.y, this.listObject[i].pos.z, this.listObject[i].isUp));
 		}
 	}
 
 	activeJumper(name)
 	{
 		ball.changeGravity();
-		for (let i = 0; this.arrObject && i < this.arrObject.length; i++)
-		{
-			console.log("/////////////");
-			console.log(this.arrObject[i].name);
-			console.log(name);
-			console.log("/////////////");
-			if (this.arrObject[i].name == name)
-			{
-				if (this.arrObject[i].name == "jumperTop")
-					this.#animationGravityChanger(this.arrObject[i].mesh, true);
-				else
-					this.#animationGravityChanger(this.arrObject[i].mesh, false);
-			}
-		}
+		if (this.listObject[index].isUp)
+			this.#animationGravityChanger(this.listObject[index].mesh, true);
+		else
+			this.#animationGravityChanger(this.listObject[index].mesh, false);
 	}
 
 	#generateObstacle()
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
index 19ded9b..15900b6 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
@@ -3,14 +3,16 @@
 /*                                                        :::      ::::::::   */
 /*   Player.js                                          :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:30:31 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/27 17:21:29 by hubourge         ###   ########.fr       */
+/*   Updated: 2024/09/27 21:16:32 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+import { isMobile } from '/static/javascript/main.js'
 import * as THREE from '/static/javascript/three/build/three.module.js'
+
 /*
 	Explication du code :
 		- Un seul joueur peut etre instancié, sinon ça throw une erreur
@@ -69,6 +71,8 @@ class Player
 		this.opponent = opponent;
 		if (playerExist)
 			throw Error("Player is already init.");
+		if (isMobile)
+			showGamePad();
 		playerExist = true;
 		isOnPointAnim = false;
 		pressedButton = [];
@@ -367,4 +371,65 @@ function simplePressKey(e)
 	}				
 }
 
+
+function goFullscreen()
+{
+	const	elem	= document.documentElement;
+
+	if (elem.requestFullscreen)
+		elem.requestFullscreen();
+	else if (elem.mozRequestFullScreen)
+		elem.mozRequestFullScreen();
+	else if (elem.webkitRequestFullscreen)
+		elem.webkitRequestFullscreen();
+	else if (elem.msRequestFullscreen)
+		elem.msRequestFullscreen();
+}
+
+function showGamePad()
+{
+	const	gamePad	=	document.getElementsByClassName('gamePad')[0];
+	const	buttons	=	document.getElementsByClassName('buttonGamePad');
+	const	canvas	=	document.getElementById('canvasMultiGameOnline');
+
+	canvas.addEventListener('touchstart', function(e) {
+		e.preventDefault();
+	});
+	canvas.addEventListener('mousedown', function(e) {
+		e.preventDefault();
+	});
+	document.getElementById('fullscreen').addEventListener('click', () => {
+		goFullscreen();
+	});
+	gamePad.style.display = 'flex';
+	for (let i = 0; i < buttons.length; i++)
+	{
+		buttons[i].addEventListener('touchstart', (event) => {
+			const	key	=	event.target.getAttribute("id");
+			
+			if (key == 'padLeft')
+				addKeyInArr({key: 'a'});
+			else if (key == 'padRight')
+				addKeyInArr({key: 'd'});
+			else if (key == 'padTop')
+				addKeyInArr({key: 'w'});
+			else if (key == 'padBottom')
+				addKeyInArr({key: 's'});
+
+		});
+		buttons[i].addEventListener('touchend', (event) => {
+			const	key	=	event.target.getAttribute("id");
+
+			if (key == 'padLeft')
+				remKeyInArr({key: 'a'});
+			else if (key == 'padRight')
+				remKeyInArr({key: 'd'});
+			else if (key == 'padTop')
+				remKeyInArr({key: 'w'});
+			else if (key == 'padBottom')
+				remKeyInArr({key: 's'});
+		});
+	}
+}
+
 export { Player, playerExist, goalAnimation};
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
index de90031..60efe82 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
+++ b/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/27 10:35:23 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/27 21:05:41 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -95,6 +95,7 @@ class MultiOnlineGamePage
 		ambiantLight			= new THREE.AmbientLight(0xffffff, 0.5);
 		ball					= new Ball(scene, map);
 
+		window.addEventListener('resize', windowUpdater);
 		scene.add(player.object);
 		scene.add(opponent.object);
 		scene.add(ambiantLight);
@@ -103,6 +104,7 @@ class MultiOnlineGamePage
 		scene.background = new THREE.Color(0x1a1a1a);
 		renderer.setSize(window.innerWidth, window.innerHeight);
 		document.body.appendChild(renderer.domElement);
+		renderer.domElement.setAttribute('id', 'canvasMultiGameOnline');
 		map.ballObject = ball.object;
 
 		//////////////////////////
@@ -163,6 +165,7 @@ class MultiOnlineGamePage
 
 	static dispose()
 	{
+		window.addEventListener('resize', windowUpdater);
 		if (interval)
 			clearInterval(interval);
 		interval = null;
@@ -217,6 +220,14 @@ function changeBarColor(bar, color)
 	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();
+};
+
 function loop()
 {
 	/////////////
diff --git a/docker-compose/requirements/nginx/static/style/game/games.css b/docker-compose/requirements/nginx/static/style/game/games.css
index 4869ca2..931a56c 100644
--- a/docker-compose/requirements/nginx/static/style/game/games.css
+++ b/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/14 01:56:23 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/27 21:05:45 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -97,3 +97,72 @@ body {
 	/* font-weight: 900; */
 	color: rgb(255, 255, 255, 0.1);
 }
+
+.gamePad {
+	display: none;
+	position: absolute;
+	z-index: 800;
+	width: 100%;
+	height: 100%;
+}
+
+.gamePad #fullscreen {
+	position: absolute;
+	top: 20px;
+	right: 20px;
+	width: 50px;
+	height: 50px;
+	background-repeat: no-repeat;
+	background-size: 80% 80%;
+	background-position: center;
+	border: none;
+	opacity: 0.5;
+}
+
+.gamePad .gamePadLeft {
+	display: flex;
+	position: absolute;
+	left: 50px;
+	bottom: 50px;
+}
+
+
+.gamePad .gamePadRight {
+	display: flex;
+	position: absolute;
+	flex-direction: column;
+	right: 50px;
+	bottom: 50px;
+}
+
+.gamePad .buttonGamePad
+{
+	width: 100px;
+	height: 100px;
+	background-color: rgba(255, 255, 255, 0.1);
+	background-repeat: no-repeat;
+	background-size: 80% 80%;
+	background-position: center;
+	border: none;
+}
+
+.gamePadLeft #padRight {
+	margin-left: 50px;
+	transform: rotate(180deg);
+}
+
+.gamePadRight #padTop {
+	margin-bottom: 20px;
+	transform: rotate(90deg);
+}
+
+.gamePadRight #padBottom {
+	transform: rotate(270deg);
+}
+
+#canvasMultiGameOnline {
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    touch-action: none;
+}
\ No newline at end of file