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

Site

Browse Source 
- Add function for move ball
    - add function for quit when opponent disconnect
This commit is contained in:
Kum1ta
2024-09-17 15:16:42 +02:00
parent 2a42646b82
commit 5668d338b6
6 changed files with 84 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,12 +6,11 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/28 12:23:48 by edbernar #+# #+# */
/* Updated: 2024/09/14 02:02:00 by edbernar ### ########.fr */
/* Updated: 2024/09/17 15:02:11 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import * as CANNON from '/static/javascript/cannon-es/dist/cannon-es.js'
// import * as CANNON from '/static/javascript/cannon/build/cannon.min.js'
import * as THREE from '/static/javascript/three/build/three.module.js'
import { ball } from '/static/javascript/multiLocalGame/Ball.js'
import { player1, player2 } from '/static/javascript/multiLocalGame/Players.js';

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

@ -6,18 +6,23 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 17:02:47 by edbernar #+# #+# */
/* Updated: 2024/09/15 14:56:07 by edbernar ### ########.fr */
/* Updated: 2024/09/17 15:13:50 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import * as CANNON from '/static/javascript/cannon-es/dist/cannon-es.js'
import * as THREE from '/static/javascript/three/build/three.module.js'
const timeStep = 1 / 60;
class Ball
{
object = null;
centerPos = {};
limits = {};
interval = null;
world = null;
ballBody = null;
constructor(scene, map)
{
@ -27,6 +32,13 @@ class Ball
this.limits = map.playerLimits;
this.resetPosBall();
scene.add(this.object);
this.world = new CANNON.World();
this.ballBody = new CANNON.Body({
shape: new CANNON.Sphere(0.15),
mass: 10,
});
this.ballBody.position.copy(this.object.position);
this.world.addBody(this.ballBody);
}
#createBall()
@ -107,6 +119,22 @@ class Ball
}
/*---------------------------------------------------*/
updatePos(content)
{
// {action: 5, pos: [ball.object.position.x, ball.object.position.z], velocity: [ball.object.velocity.x, ball.object.velocity.z]}
this.ballBody.position.x = content.pos[0];
this.ballBody.position.z = content.pos[1];
this.ballBody.velocity.set(content.velocity[0], 0, content.velocity[1]);
}
update()
{
this.world.step(timeStep);
this.object.position.copy(this.ballBody.position);
this.object.quaternion.copy(this.ballBody.quaternion);
}
dispose()
{
if (this.interval)

38
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */
/* Updated: 2024/09/15 15:24:37 by edbernar ### ########.fr */
/* Updated: 2024/09/17 13:59:13 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -26,13 +26,22 @@ let texturePlane = null;
let ctx = null;
let path = [
{name: 'goal', onChoice: true, src:'/static/video/multiOnlineGamePage/goal2.webm'},
{name: 'easteregg', onChoice: true, src:'/static/video/multiOnlineGamePage/easteregg.webm'},
{name: 'outstanding', onChoice: true, src:'/static/video/multiOnlineGamePage/outstanding.webm'},
{name: 'ping', onChoice: false, src:'/static/video/multiOnlineGamePage/pingpong.mp4'},
{name: 'catch', onChoice: false, src:'/static/video/multiOnlineGamePage/catch.mp4'},
{name: 'fortnite', onChoice: false, src:'/static/video/multiOnlineGamePage/fortnite.mp4'},
{name: 'goal', onChoice: true, src:'/static/video/multiOnlineGamePage/goal2.webm', blob: null},
{name: 'easteregg', onChoice: true, src:'/static/video/multiOnlineGamePage/easteregg.webm', blob: null},
{name: 'outstanding', onChoice: true, src:'/static/video/multiOnlineGamePage/outstanding.webm', blob: null},
{name: 'ping', onChoice: false, src:'/static/video/multiOnlineGamePage/pingpong.mp4', blob: null},
{name: 'catch', onChoice: false, src:'/static/video/multiOnlineGamePage/catch.mp4', blob: null},
{name: 'fortnite', onChoice: false, src:'/static/video/multiOnlineGamePage/fortnite.mp4', blob: null},
]
path.forEach(elem => {
fetch(elem.src)
.then(response => response.blob())
.then(blob => {
elem.blob = URL.createObjectURL(blob);
});
});
let spacingImages = [
100 * 2.33 * 10 - (100 * 2.33), // 2 images
100 * 2.33 * 5 - (100 * 2.33), // 4 images
@ -63,14 +72,9 @@ class Map
dispose()
{
videoList.forEach(elem => {
elem.video.pause();
elem.video.src = '';
elem.video.removeAttribute('src');
elem.video.load();
})
videoList = null;
videoCanvas.remove();
if (videoCanvas)
videoCanvas.remove();
if (videoCanvasTexture)
videoCanvasTexture.dispose();
if (materialCanvas)
@ -374,10 +378,8 @@ class Map
continue ;
}
let videoTmp = null;
if (Math.random() < 0.99)
videoTmp = new Video(path[i].src).video;
else
videoTmp = new Video(path[getIndex('easteregg')].src).video;
videoTmp = new Video(path[i].blob).video;
console.log(videoTmp.src);
videoTmp.addEventListener('loadeddata', () => {
videoTmp.play();
drawVideoOnCanvas();

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

@ -6,15 +6,17 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/09/16 15:48:15 by edbernar ### ########.fr */
/* Updated: 2024/09/17 15:04:18 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { createNotification as CN } from "/static/javascript/notification/main.js";
import * as THREE from '/static/javascript/three/build/three.module.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 } from '/static/javascript/main.js'
import { Opponent } from '/static/javascript/multiOnlineGame/Opponent.js'
/*
@ -110,13 +112,21 @@ class MultiOnlineGamePage
renderer.setAnimationLoop(loop)
sendRequest('game', {action: 1});
let lastPosition = player.object.position.x;
interval = setInterval(() => {
sendRequest('game', {action: 3, pos: player.object.position.x, up: player.isUp});
if (player && player.object.position.x != lastPosition)
{
lastPosition = player.object.position.x;
sendRequest('game', {action: 3, pos: player.object.position.x, up: player.isUp});
}
}, 1000 / 20);
}
static dispose()
{
if (interval)
clearInterval(interval);
interval = null;
if (renderer)
renderer.dispose();
renderer = null;
@ -146,6 +156,14 @@ class MultiOnlineGamePage
}
scene = null;
}
static opponentDisconnect()
{
pageRenderer.changePage('lobbyPage');
setTimeout(() => {
CN.new("Game", "Opponent disconnect", CN.defaultIcon.error);
}, 1000);
}
}
function createBarPlayer(color)
@ -167,8 +185,9 @@ function loop()
{
player.update();
opponent.update();
ball.update();
map.update(ball);
renderer.render(scene, player.camera);
}
export { MultiOnlineGamePage, opponent };
export { MultiOnlineGamePage, opponent, ball };

23
docker-compose/requirements/nginx/static/javascript/typeResponse/typeGame.js
View File

@ -6,29 +6,28 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/15 12:00:01 by edbernar #+# #+# */
/* Updated: 2024/09/16 15:05:01 by edbernar ### ########.fr */
/* Updated: 2024/09/17 14:38:06 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { MultiOnlineGamePage, opponent } from "/static/javascript/multiOnlineGame/multiOnlineGamePage.js"
import { ball } from "/static/javascript/multiOnlineGame/multiOnlineGamePage.js"
import { WaitingGamePage } from "/static/javascript/waitingGame/main.js"
import { pageRenderer } from '/static/javascript/main.js'
function typeGame(content)
{
if (content.action == 1)
if (content.action == 1 && pageRenderer.actualPage == WaitingGamePage)
WaitingGamePage.showOpponent(content.username);
else if (content.action == 3 && pageRenderer.actualPage == MultiOnlineGamePage)
{
if (pageRenderer.actualPage == WaitingGamePage)
WaitingGamePage.showOpponent(content.username);
}
else if (content.action == 3)
{
if (pageRenderer.actualPage == MultiOnlineGamePage)
{
if (content.is_opponent)
opponent.movePlayer(content);
}
if (content.is_opponent)
opponent.movePlayer(content);
}
else if (content.action == 4 && pageRenderer.actualPage == MultiOnlineGamePage)
MultiOnlineGamePage.opponentDisconnect();
else if (content.action == 5 && pageRenderer.actualPage == MultiOnlineGamePage)
ball.updatePos(content);
}
export { typeGame };

2
docker-compose/requirements/nginx/static/javascript/websocket.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */
/* Updated: 2024/09/16 15:47:51 by edbernar ### ########.fr */
/* Updated: 2024/09/17 14:31:46 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */