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

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/13 13:59:46 by edbernar #+# #+# */
/* Updated: 2024/10/13 23:25:15 by edbernar ### ########.fr */
/* Updated: 2024/11/12 19:19:33 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -134,7 +134,7 @@ class barSelecter
}
lastSelected = availableSkins[id];
if (availableSkins[id].color)
this.bar.material = new THREE.MeshPhysicalMaterial({color: skin.color});
this.bar.material = new THREE.MeshPhysicalMaterial({color: availableSkins[id].color});
else
{
if (typeof availableSkins[id].texture !== 'object')
@ -256,6 +256,7 @@ class goalSelecter
goal[i].appendChild(this.showObject(availableGoals[i], goal[i].getBoundingClientRect()));
goal[i].removeEventListener('click', this.boundChangeGoal);
goal[i].addEventListener('click', this.boundChangeGoal);
goal[i].style.backgroundColor = `#1a1a1a`;
}
popup.removeEventListener('click', this.boundhideGoalSelector);
popup.addEventListener('click', this.boundhideGoalSelector);

23
docker-compose/requirements/nginx/static/javascript/login/3d.js Normal file
View File

@ -0,0 +1,23 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* 3d.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/11/13 11:36:46 by edbernar #+# #+# */
/* Updated: 2024/11/13 11:43:46 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
function main3d()
{
const div = document.getElementById('left-side');
div.innerHTML = '<canvas id="canvas-left-side" width="800" height="600"></canvas>';
const canvas = div.getElementsByTagName('canvas')[0];
}
export { main3d };

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 17:40:15 by edbernar #+# #+# */
/* Updated: 2024/10/08 23:32:11 by edbernar ### ########.fr */
/* Updated: 2024/11/13 11:40:25 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -14,6 +14,7 @@ import { userMeInfo, waitForLogin } from "/static/javascript/typeResponse/typeLo
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { sendRequest } from "/static/javascript/websocket.js";
import { pageRenderer } from '/static/javascript/main.js'
import { main3d } from '/static/javascript/login/3d.js'
class Login
{
@ -204,6 +205,7 @@ function showLoginDiv()
{
document.body.style.overflow = 'hidden';
popout.style.display = 'flex';
main3d();
}
}

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/10/02 00:18:51 by edbernar ### ########.fr */
/* Updated: 2024/11/13 15:11:00 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -16,6 +16,7 @@ import { loadFiles } from '/static/javascript/filesLoader.js';
let pageRenderer = null;
const isMobile = /mobile|android|iphone|ipad/.test(navigator.userAgent.toLowerCase())
const isOnChrome = /chrome/.test(navigator.userAgent.toLowerCase())
document.addEventListener('DOMContentLoaded', () => {
loadFiles().then(() => {
@ -24,4 +25,4 @@ document.addEventListener('DOMContentLoaded', () => {
});
});
export { pageRenderer, isMobile };
export { pageRenderer, isMobile, isOnChrome };

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

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* Map.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/28 12:23:48 by edbernar #+# #+# */
/* Updated: 2024/11/11 18:02:49 by hubourge ### ########.fr */
/* Updated: 2024/11/13 14:54:17 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */

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

6
docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
View File

@ -62,7 +62,7 @@ body {
align-items: center;
}
.main{
.main {
padding-block: 45px;
display: flex;
flex-direction: row;
@ -607,6 +607,10 @@ input:checked + .slider:before {
border-radius: 50%;
}
#canvas-left-side{
background-color: #21f356;
}
@media (max-aspect-ratio: 1/1){
.main {
flex-direction: column;

4
docker-compose/requirements/nginx/static/style/tournamentPage/tournamentPage.css
View File

@ -223,6 +223,10 @@
overflow-x: none;
}
#tournamentPage .chat-tournament .chat p {
word-break: break-all;
}
#tournamentPage #chat-title {
color: white;
font-size: 20px;