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

Game

Browse Source 
- remove pub on not chrome web viewer
    - force opacity 1 when ball pos reset
    - remove color hue when goal
    - fix bug when i have no color skin
Site
    - fix style bug on chat tournament
    - fix style bug on goal selector
This commit is contained in:
Kum1ta
2024-11-13 16:23:50 +01:00
parent 99e4d4943c
commit 5e5475eaa8
10 changed files with 55 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 17:02:47 by edbernar #+# #+# */
/* Updated: 2024/10/15 21:10:18 by edbernar ### ########.fr */
/* Updated: 2024/11/13 15:33:26 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -67,6 +67,7 @@ class Ball
resetPosBall()
{
this.setPosition(this.centerPos.x, this.object.geometry.parameters.radius * 2, this.centerPos.z);
this.object.material.opacity = 1;
}
resetScaleBall()

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */
/* Updated: 2024/10/22 16:24:58 by edbernar ### ########.fr */
/* Updated: 2024/11/13 15:23:47 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -16,7 +16,7 @@ import { scene, renderer, isInVrMode, ball } from '/static/javascript/multiOnlin
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 { isMobile } from '/static/javascript/main.js'
import { isMobile, isOnChrome } from '/static/javascript/main.js'
/*
Explication du code :
@ -152,7 +152,7 @@ class Player
this.mapVar.putVideoOnCanvas(3, 'goal');
setTimeout(() => {
this.mapVar.putVideoOnCanvas(0, null);
if (!isMobile)
if (!isMobile && isOnChrome)
this.mapVar.putVideoOnCanvas(2, 3);
}, 4000);
@ -176,8 +176,6 @@ class Player
const tmpCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
const tmp = this.camera;
let interval = null;
const startColor = this.object.material.color.clone();
let hue = 0;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.199s';
@ -196,10 +194,6 @@ class Player
this.camera = tmpCamera;
interval = setInterval(() => {
tmpCamera.lookAt(this.object.position);
hue += 0.01;
if (hue > 1)
hue = 0;
this.object.material.color.setHSL(hue, 1, 0.5);
tmpCamera.fov -= 0.05;
tmpCamera.updateProjectionMatrix();
}, 10);
@ -223,7 +217,6 @@ class Player
ball.setCastShadow(true);
this.camera = tmp;
this.object.material.color.copy(startColor);
isOnPointAnim = false;
if (!this.cameraFixed)
{
@ -248,7 +241,6 @@ class Player
const tmpCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
const tmp = this.camera;
let interval = null;
const startColor = oppponentObject.material.color.clone();
let hue = 0;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
@ -267,10 +259,6 @@ class Player
this.camera = tmpCamera;
interval = setInterval(() => {
tmpCamera.lookAt(oppponentObject.position);
hue += 0.01;
if (hue > 1)
hue = 0;
oppponentObject.material.color.setHSL(hue, 1, 0.5);
tmpCamera.fov -= 0.05;
tmpCamera.updateProjectionMatrix();
}, 10);
@ -279,7 +267,9 @@ class Player
}, 1000);
setTimeout(() => {
clearInterval(interval);
if (interval)
clearInterval(interval);
interval = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.99s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
@ -289,7 +279,6 @@ class Player
ball.setCastShadow(true);
this.camera = tmp;
oppponentObject.material.color.copy(startColor);
isOnPointAnim = false;
if (!this.cameraFixed)
{

10
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/10/16 00:55:59 by edbernar ### ########.fr */
/* Updated: 2024/11/13 15:22:43 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -16,7 +16,7 @@ import { VRButton } from "/static/javascript/three/examples/jsm/webxr/VRButton.j
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 { pageRenderer, isMobile, isOnChrome } 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";
@ -87,7 +87,6 @@ class MultiOnlineGamePage
{
static create(skin)
{
console.log('skin', skin);
if (!skin)
{
skin = {player: 4, opponent: 0};
@ -129,7 +128,6 @@ class MultiOnlineGamePage
map.ballObject = ball.object;
if (isMobile)
player.mobileMode();
//////////////////////////
controls = new OrbitControls(cameraTmp, renderer.domElement)
cameraTmp.position.set(5, 3, 5);
@ -155,7 +153,7 @@ class MultiOnlineGamePage
renderer.setAnimationLoop(loop)
sendRequest('game', {action: 1});
if (!isMobile)
if (!isMobile && isOnChrome)
map.putVideoOnCanvas(2, 3);
let lastPosition = player.object.position.x;
let lastUp = player.isUp;
@ -212,7 +210,7 @@ class MultiOnlineGamePage
scene.children.forEach(child => {
if (child.geometry)
child.geometry.dispose();
if (child.material)
if (child.material && child.material.dispose)
child.material.dispose();
if (child.texture)
child.texture.dispose();