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. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/13 13:59:46 by edbernar #+# #+# */ /* 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]; lastSelected = availableSkins[id];
if (availableSkins[id].color) if (availableSkins[id].color)
this.bar.material = new THREE.MeshPhysicalMaterial({color: skin.color}); this.bar.material = new THREE.MeshPhysicalMaterial({color: availableSkins[id].color});
else else
{ {
if (typeof availableSkins[id].texture !== 'object') if (typeof availableSkins[id].texture !== 'object')
@ -256,6 +256,7 @@ class goalSelecter
goal[i].appendChild(this.showObject(availableGoals[i], goal[i].getBoundingClientRect())); goal[i].appendChild(this.showObject(availableGoals[i], goal[i].getBoundingClientRect()));
goal[i].removeEventListener('click', this.boundChangeGoal); goal[i].removeEventListener('click', this.boundChangeGoal);
goal[i].addEventListener('click', this.boundChangeGoal); goal[i].addEventListener('click', this.boundChangeGoal);
goal[i].style.backgroundColor = `#1a1a1a`;
} }
popup.removeEventListener('click', this.boundhideGoalSelector); popup.removeEventListener('click', this.boundhideGoalSelector);
popup.addEventListener('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. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 17:40:15 by edbernar #+# #+# */ /* 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 { createNotification as CN } from "/static/javascript/notification/main.js";
import { sendRequest } from "/static/javascript/websocket.js"; import { sendRequest } from "/static/javascript/websocket.js";
import { pageRenderer } from '/static/javascript/main.js' import { pageRenderer } from '/static/javascript/main.js'
import { main3d } from '/static/javascript/login/3d.js'
class Login class Login
{ {
@ -204,6 +205,7 @@ function showLoginDiv()
{ {
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
popout.style.display = 'flex'; 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. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */ /* 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; let pageRenderer = null;
const isMobile = /mobile|android|iphone|ipad/.test(navigator.userAgent.toLowerCase()) const isMobile = /mobile|android|iphone|ipad/.test(navigator.userAgent.toLowerCase())
const isOnChrome = /chrome/.test(navigator.userAgent.toLowerCase())
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
loadFiles().then(() => { 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 :+: :+: :+: */ /* Map.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/28 12:23:48 by edbernar #+# #+# */ /* 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. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 17:02:47 by edbernar #+# #+# */ /* 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() resetPosBall()
{ {
this.setPosition(this.centerPos.x, this.object.geometry.parameters.radius * 2, this.centerPos.z); this.setPosition(this.centerPos.x, this.object.geometry.parameters.radius * 2, this.centerPos.z);
this.object.material.opacity = 1;
} }
resetScaleBall() resetScaleBall()

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

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

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */ /* 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 { Opponent } from '/static/javascript/multiOnlineGame/Opponent.js'
import * as THREE from '/static/javascript/three/build/three.module.js' import * as THREE from '/static/javascript/three/build/three.module.js'
import { Player } from '/static/javascript/multiOnlineGame/Player.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 { Ball } from '/static/javascript/multiOnlineGame/Ball.js'
import { Map } from '/static/javascript/multiOnlineGame/Map.js' import { Map } from '/static/javascript/multiOnlineGame/Map.js'
import { sendRequest } from "/static/javascript/websocket.js"; import { sendRequest } from "/static/javascript/websocket.js";
@ -87,7 +87,6 @@ class MultiOnlineGamePage
{ {
static create(skin) static create(skin)
{ {
console.log('skin', skin);
if (!skin) if (!skin)
{ {
skin = {player: 4, opponent: 0}; skin = {player: 4, opponent: 0};
@ -129,7 +128,6 @@ class MultiOnlineGamePage
map.ballObject = ball.object; map.ballObject = ball.object;
if (isMobile) if (isMobile)
player.mobileMode(); player.mobileMode();
////////////////////////// //////////////////////////
controls = new OrbitControls(cameraTmp, renderer.domElement) controls = new OrbitControls(cameraTmp, renderer.domElement)
cameraTmp.position.set(5, 3, 5); cameraTmp.position.set(5, 3, 5);
@ -155,7 +153,7 @@ class MultiOnlineGamePage
renderer.setAnimationLoop(loop) renderer.setAnimationLoop(loop)
sendRequest('game', {action: 1}); sendRequest('game', {action: 1});
if (!isMobile) if (!isMobile && isOnChrome)
map.putVideoOnCanvas(2, 3); map.putVideoOnCanvas(2, 3);
let lastPosition = player.object.position.x; let lastPosition = player.object.position.x;
let lastUp = player.isUp; let lastUp = player.isUp;
@ -212,7 +210,7 @@ class MultiOnlineGamePage
scene.children.forEach(child => { scene.children.forEach(child => {
if (child.geometry) if (child.geometry)
child.geometry.dispose(); child.geometry.dispose();
if (child.material) if (child.material && child.material.dispose)
child.material.dispose(); child.material.dispose();
if (child.texture) if (child.texture)
child.texture.dispose(); child.texture.dispose();

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

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

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

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