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

Game

Browse Source 
- add vr support
    - add gamepad support and vr controller (only in vr for that)
This commit is contained in:
Kum1ta
2024-10-05 01:09:29 +02:00
parent 7f5cf36eb7
commit 0200a360e9
5 changed files with 191 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,13 +6,16 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */
/* Updated: 2024/10/03 14:48:51 by edbernar ### ########.fr */
/* Updated: 2024/10/05 01:06:19 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { fetchProfile, MotionController } from '/static/javascript/three/examples/jsm/libs/motion-controllers.module.js'
import { XRControllerModelFactory } from '/static/javascript/three/examples/jsm/webxr/XRControllerModelFactory.js'
import { scene, renderer, isInVrMode } from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js'
import { lastSelectedGoal, availableGoals } from '/static/javascript/lobbyPage/3d.js';
import * as THREE from '/static/javascript/three/build/three.module.js'
import { layoutSelected } from '/static/javascript/lobbyPage/main.js'
import { lastSelectedGoal, availableGoals } from '/static/javascript/lobbyPage/3d.js';
/*
Explication du code :
@ -45,12 +48,16 @@ import { lastSelectedGoal, availableGoals } from '/static/javascript/lobbyPage/3
- Ajouter une fonction pour l'animation de point marqué (OK)
*/
let playerExist = false;
let isOnPointAnim = false;
let pressedButton = [];
let mapLength = 0;
const goalAnimation = ["triangle", "cylinder", "star", "box", "rectangle", "ring"];
let key = null;
let playerExist = false;
let isOnPointAnim = false;
let pressedButton = [];
let mapLength = 0;
const goalAnimation = ["triangle", "cylinder", "star", "box", "rectangle", "ring"];
const controllerModelFactory = new XRControllerModelFactory();
let motionController = null;
let key = null;
let controller1 = null;
let controller2 = null;
class Player
{
@ -67,6 +74,8 @@ class Player
opponent = null;
playerGoalAnimation = null;
opponentGoal = null;
controller1 = null;
controller2 = null;
constructor (object, map, opponent, indexGoalAnimation, goalIdOppenent)
{
@ -280,6 +289,7 @@ class Player
update()
{
const gamepads = navigator.getGamepads();
const currentTime = Date.now();
this.deltaTime = (currentTime - this.previousTime) / 1000;
this.previousTime = currentTime;
@ -287,6 +297,23 @@ class Player
let i;
i = 0;
for (let i = 0; i< gamepads.length; i++)
{
if (gamepads[i])
{
const xAxis = gamepads[i].axes[0];
const yAxis = gamepads[i].axes[1];
if (!gamepads[i].buttons[0].touched)
this.buttonACheck = false;
else if (this.buttonACheck == false && gamepads[i].buttons[0].touched)
{
this.buttonACheck = true;
this.buttonAAction = true;
}
this.joysticksMove(xAxis, yAxis);
this.buttonAAction = false;
}
}
while (i < pressedButton.length)
{
if (pressedButton[i] == key.up && this.object.position.y < this.limits.up)
@ -336,6 +363,40 @@ class Player
}
i++;
}
if (isInVrMode)
{
if (controller1.userData.inputSource && controller1.userData.inputSource.gamepad)
{
const gamepad = controller1.userData.inputSource.gamepad;
const [a, b, xAxis, yAxis] = gamepad.axes;
this.joysticksMove(xAxis, yAxis);
}
}
}
buttonACheck = false;
buttonAAction = false;
joysticksMove(xAxis, yAxis)
{
if (yAxis > 0.75 || this.buttonAAction)
addKeyInArr({key: key.down})
else
remKeyInArr({key: key.down});
if (yAxis < -0.75 || this.buttonAAction)
addKeyInArr({key: key.up})
else
remKeyInArr({key: key.up});
if (xAxis > 0.5)
addKeyInArr({key: key.right})
else
remKeyInArr({key: key.right});
if (xAxis < -0.5)
addKeyInArr({key: key.left})
else
remKeyInArr({key: key.left});
}
setCameraPosition(x, y, z)
@ -369,6 +430,37 @@ class Player
}, i * 10);
}
}
configureVrController()
{
controller1 = renderer.xr.getController(0);
controller2 = renderer.xr.getController(1);
scene.add(controller1);
scene.add(controller2);
for (let i = 0; i < scene.children.length; i++)
{
if (scene.children[i].name === 'vrHeadset')
{
const controllerGrip1 = renderer.xr.getControllerGrip(0);
controllerGrip1.add(controllerModelFactory.createControllerModel(controllerGrip1));
scene.children[i].add(controllerGrip1);
const controllerGrip2 = renderer.xr.getControllerGrip(1);
controllerGrip2.add(controllerModelFactory.createControllerModel(controllerGrip2));
scene.children[i].add(controllerGrip2);
}
}
controller1.addEventListener('connected', (event) => {
controller1.userData.inputSource = event.data;
});
controller2.addEventListener('connected', (event) => {
controller2.userData.inputSource = event.data;
});
}
};
function addKeyInArr(e)

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

@ -6,20 +6,20 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/10/03 14:27:34 by edbernar ### ########.fr */
/* Updated: 2024/10/04 21:47:35 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { availableSkins, lastSelectedGoal } from '/static/javascript/lobbyPage/3d.js';
import * as THREE from '/static/javascript/three/build/three.module.js'
import { OrbitControls } from '/static/javascript/three/examples/jsm/controls/OrbitControls.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, isMobile } from '/static/javascript/main.js'
import { availableSkins, lastSelectedGoal } from '/static/javascript/lobbyPage/3d.js';
import { VRButton } from "/static/javascript/three/examples/jsm/webxr/VRButton.js"
import { Opponent } from '/static/javascript/multiOnlineGame/Opponent.js'
import * as THREE from '/static/javascript/three/build/three.module.js'
import { Player } from '/static/javascript/multiOnlineGame/Player.js'
import { pageRenderer, isMobile } from '/static/javascript/main.js'
import { Ball } from '/static/javascript/multiOnlineGame/Ball.js'
import { Map } from '/static/javascript/multiOnlineGame/Map.js'
import { sendRequest } from "/static/javascript/websocket.js";
/*
Controls :
- w : monter
@ -49,22 +49,32 @@ Controls :
- k : recreate et augmente le score de opponent
*/
const scoreMax = 5;
let scene = null;
let map = null;
let ball = null;
let renderer = null;
let player = null;
let spotLight = null;
let ambiantLight = null;
let opponent = null;
let interval = null;
let intervalPing = null;
let debug = false;
let lastPingTime = 0;
let lastFpsTime = 0;
let lastFpsDisplayed = 0;
let lastFpsArr = [60];
let VrButton = null;
let isInVrMode = false;
let scene = null;
let map = null;
let ball = null;
let renderer = null;
let player = null;
let spotLight = null;
let ambiantLight = null;
let opponent = null;
let interval = null;
let intervalPing = null;
let debug = false;
let lastPingTime = 0;
let lastFpsTime = 0;
let lastFpsDisplayed = 0;
const observer = new MutationObserver((mutationsList) => {
mutationsList.forEach((mutation) => {
if (VrButton.innerText == 'VR NOT SUPPORTED')
document.getElementById('newButtonVr').style.display = 'none';
if (mutation.attributeName === 'style')
VrButton.style.display = 'none';
});
});
// ------------------- (need to be remove) -------------------- //
const cameraTmp = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight);
@ -75,7 +85,6 @@ class MultiOnlineGamePage
{
static create(skin)
{
console.log(lastSelectedGoal);
if (!skin)
skin = {player: 0, opponent: 0};
const bar1 = createBarPlayer(availableSkins[skin.player]);
@ -89,6 +98,8 @@ class MultiOnlineGamePage
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.domElement.style.animation = 'fadeOutStartGames 1s';
renderer.domElement.style.filter = 'brightness(1)';
vrMode();
opponent = new Opponent(bar2, map, Math.floor(Math.random() * 100 % 6));
player = new Player(bar1, map, opponent, Math.floor(Math.random() * 100 % 6), skin.goalId);
spotLight = new THREE.SpotLight(0xffffff, 10000, 0, 0.2);
@ -175,6 +186,8 @@ class MultiOnlineGamePage
static dispose()
{
observer.disconnect();
VrButton = null;
window.removeEventListener('resize', windowUpdater);
if (interval)
clearInterval(interval);
@ -298,7 +311,6 @@ function loop()
renderer.render(scene, player.camera);
}
let lastFpsArr = [10, 3, 5];
function showFps()
{
@ -316,4 +328,40 @@ function showFps()
lastFpsTime = now;
}
export { MultiOnlineGamePage, player, opponent, ball, map};
function vrMode()
{
const supportsXR = 'xr' in window.navigator;
const newButton = configButton();
if (!supportsXR)
return ;
renderer.xr.enabled = true;
document.body.appendChild( VRButton.createButton(renderer) );
VrButton = document.getElementById('VRButton');
observer.observe(VrButton, { attributes: true });
if (VrButton.innerText !== 'VR NOT SUPPORTED')
document.body.append(newButton);
}
function configButton()
{
const newButton = document.createElement('button');
const cameraGroup = new THREE.Group();
cameraGroup.name = "vrHeadset";
newButton.innerText = "Vr mode";
newButton.setAttribute('id', 'newButtonVr');
newButton.addEventListener('click', () => {
VrButton.click();
scene.add(cameraGroup);
scene.remove(player.camera);
player.configureVrController();
cameraGroup.add(player.camera);
cameraGroup.position.set(0, 0.5, 7.5);
isInVrMode = true;
});
return (newButton);
}
export { MultiOnlineGamePage, player, opponent, ball, map, scene, renderer, isInVrMode };