Site

- add gamepad for play on mobile
    - merge

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"> -->

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);

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 };
+export { pageRenderer, isMobile };

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;
+		this.listObject = listObject.content;
-		for (let i = 0; i < listObject.length; i++ )
+		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)
+			else if (this.listObject[i].type == 2)
-				scene.add(this.#createWallObstacle(listObject[i].pos.x, listObject[i].pos.y, listObject[i].pos.z, listObject[i].isUp));
+				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++)
+		if (this.listObject[index].isUp)
-		{
+			this.#animationGravityChanger(this.listObject[index].mesh, true);
-			console.log("/////////////");
+		else
-			console.log(this.arrObject[i].name);
+			this.#animationGravityChanger(this.listObject[index].mesh, false);
-			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);
-			}
-		}
 	}
 
 	#generateObstacle()

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};

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()
 {
 	/////////////

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;
+}