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

Site

Browse Source 
- Add responsive :
     - Lobby page
     - Fix bug profil/login/settings'
This commit is contained in:
Mathis Degryck
2024-10-05 23:50:34 +02:00
parent 667d5141dc 66fbfc2bc7
commit 58ae534e57
26 changed files with 561 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -172,11 +172,6 @@ function startTournmament()
{
const code = document.getElementById('tournamentCode').value;
if (code.length != 6 && code.length != 0)
{
CN.new("Information", "The code must be 6 characters long or empty");
return ;
}
sendRequest("tournament", {action: 0, code: code});
}

109
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 02:41:30 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)
@ -447,7 +539,6 @@ function showGamePad()
gamePad.style.display = 'flex';
document.addEventListener('touchstart', (event) => {
const key = event.target.getAttribute("id");
for (let i = 0; i < keyList.length; i++)
{

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

4
docker-compose/requirements/nginx/static/javascript/three/examples/jsm/webxr/XRControllerModelFactory.js
View File

@ -150,14 +150,14 @@ function findNodes( motionController, scene ) {
// If the extents cannot be found, skip this animation
if ( ! visualResponse.minNode ) {
console.warn( `Could not find ${minNodeName} in the model` );
// console.warn( `Could not find ${minNodeName} in the model` );
return;
}
if ( ! visualResponse.maxNode ) {
console.warn( `Could not find ${maxNodeName} in the model` );
// console.warn( `Could not find ${maxNodeName} in the model` );
return;
}

39
docker-compose/requirements/nginx/static/javascript/tournamentPage/TournamentPage.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/10/01 13:42:29 by edbernar #+# #+# */
/* Updated: 2024/10/03 02:27:58 by edbernar ### ########.fr */
/* Updated: 2024/10/05 03:48:19 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -38,7 +38,9 @@ class TournamentPage
divInfo = document.getElementsByClassName('infoo')[0];
divChat = document.getElementsByClassName('chat')[0];
document.getElementById('code-tournament').innerText = "Code : " + code;
sendRequest("tournament", {action: 3});
divTopInfo.innerText = 'Tournament';
initTournamentChat();
}
static dispose()
@ -103,7 +105,6 @@ class TournamentPage
while (i < playerNb.length - 1)
{
playerList['player' + playerNb[i]] = playerList['player' + playerNb[i + 1]];
console.log(playerList['player' + playerNb[i]]);
document.getElementById('user-' + playerNb[i]).innerText = playerList['player' + playerNb[i]].username;
document.getElementById('pfp-' + playerNb[i]).style.backgroundImage = `url(${playerList['player' + playerNb[i]].pfp})`;
i++;
@ -121,6 +122,14 @@ class TournamentPage
divChat.appendChild(newText);
}
static fetchAllData(content)
{
for (let i = 0; i < content.messages.length; i++)
this.newMessage(content.messages[i]);
for (let i = 0; i < content.players.length; i++)
this.newOpponent(content.players[i]);
}
static startGame(content)
{
pageRenderer.changePage("waitingGamePage", false, {username: content.username, id: content.id, isTournament: true})
@ -136,4 +145,30 @@ function newInfo(message)
divInfo.appendChild(newDiv);
}
function initTournamentChat()
{
const inputMessage = document.getElementById('inputMessage');
const sendButton = document.getElementById("sendButton");
sendButton.style.cursor = "pointer";
sendButton.addEventListener("click", () => {
sendRequest("tournament", {action: 2, message: inputMessage.value});
inputMessage.value = "";
inputMessage.focus();
});
inputMessage.addEventListener("keyup", (event) => {
if (event.key === "Enter" && inputMessage.value.trim() !== "")
{
event.preventDefault();
sendRequest("tournament", {action: 2, message: inputMessage.value});
inputMessage.value = "";
inputMessage.focus();
}
});
inputMessage.addEventListener("keydown", (event) => {
if (event.key === "Enter")
event.preventDefault();
});
}
export { TournamentPage }

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/10/01 13:29:50 by edbernar #+# #+# */
/* Updated: 2024/10/03 01:17:26 by edbernar ### ########.fr */
/* Updated: 2024/10/05 03:02:38 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -38,6 +38,8 @@ function typeTournament(content)
TournamentPage.newMessage(content);
else if (content.action == 4)
TournamentPage.startGame(content);
else if (content.action == 5)
TournamentPage.fetchAllData(content);
}
else
console.warn("Request tournament not for this page...");