tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site

Browse Source 
- add gamepad for play on mobile
    - merge
This commit is contained in:
Kum1ta
2024-09-27 21:16:53 +02:00
parent 9650f0d390
commit 7d319d020b
9 changed files with 181 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

BIN
docker-compose/requirements/nginx/static/img/multiOnlineGamePage/fullscreen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
docker-compose/requirements/nginx/static/img/multiOnlineGamePage/left-arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

4
docker-compose/requirements/nginx/static/javascript/home3D/home3D.js
View File

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

5
docker-compose/requirements/nginx/static/javascript/main.js
View File

@ -6,7 +6,7 @@
/* 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 */
/* */
/* ************************************************************************** */
@ -14,10 +14,11 @@ import { launchSocket } from '/static/javascript/websocket.js';
import { Page } from '/static/javascript/Page.js';
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 };

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

@ -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);
if (this.listObject[index].isUp)
this.#animationGravityChanger(this.listObject[index].mesh, true);
else
this.#animationGravityChanger(this.arrObject[i].mesh, false);
}
}
this.#animationGravityChanger(this.listObject[index].mesh, false);
}
#generateObstacle()

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

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

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

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

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

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