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

Django

Browse Source 
- fix request game 10
Game
    - add screen and redirect when game is finish
    - fix bug with upper char
    - add own fps counter and latency counter
This commit is contained in:
Kum1ta
2024-09-29 02:06:00 +02:00
parent 217d4e27f8
commit 31a70311cc
8 changed files with 124 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docker-compose/requirements/djangoserver/file/server/server/Game.py
View File

@ -6,7 +6,7 @@
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/09/13 16:20:58 by tomoron #+# #+# #
# Updated: 2024/09/28 19:34:44 by tomoron ### ########.fr #
# Updated: 2024/09/29 02:03:40 by edbernar ### ########.fr #
# #
# **************************************************************************** #
@ -180,8 +180,8 @@ class Game:
def endGame(self, winner):
if(self.end):
return
self.p1.sync_send({"action":"game","content":{"action":10,"won":winner==1}})
self.p2.sync_send({"action":"game","content":{"action":10,"won":winner==2}})
self.p1.sync_send({"type":"game","content":{"action":10,"won":winner==1}})
self.p2.sync_send({"type":"game","content":{"action":10,"won":winner==2}})
self.winner = winner
self.end = True

8
docker-compose/requirements/djangoserver/file/server/server/templates/multiOnlineGamePage.html
View File

@ -1,6 +1,12 @@
<div class="pingDiv">
<p id="fps">0 fps</p>
<p id="ping">0 ms</p>
</div>
<div id="endGameDiv">
<p id="endGameText">You lose...</p>
<p id="endGameScore">0 - 0</p>
<p id="endGameSimpleText">You will be redirected to the lobby in 5 seconds</p>
</div>
<div class="gamePad">
<div id="fullscreen" style="background-image: url('/static/img/multiOnlineGamePage/fullscreen.png');"></div>
<div class="gamePadLeft">
@ -13,4 +19,6 @@
</div>
</div>
<!-- <img src="/static/img/multiOnlineGamePage/left-arrow.png"> -->

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
/* Updated: 2024/09/28 16:58:08 by edbernar ### ########.fr */
/* Updated: 2024/09/29 01:34:41 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -41,6 +41,7 @@ class LobbyPage
const inputUser = document.getElementById('searchInputUser');
const func = [selectGameModeOne, selectGameModeTwo, selectGameModeThree, selectGameModeFour];
document.body.style.opacity = 1;
if (userMeInfo.id == -1)
waitForLogin().then(() => usernameP.innerHTML = userMeInfo.username);
else
@ -145,7 +146,6 @@ function startMode()
function startMultiLocal()
{
document.body.style.animation = "none";
document.body.offsetHeight;
document.body.style.animation = "startGameAnim 0.5s";
document.body.style.opacity = 0;
setTimeout(() => {
@ -156,7 +156,6 @@ function startMultiLocal()
function startMatchmaking()
{
document.body.style.animation = "none";
document.body.offsetHeight;
document.body.style.animation = "startGameAnim 0.5s";
document.body.style.opacity = 0;
setTimeout(() => {

4
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/27 23:59:18 by edbernar ### ########.fr */
/* Updated: 2024/09/29 01:18:23 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -27,7 +27,6 @@ let materialCanvas = null;
let textureLoaderPlane = null;
let texturePlane = null;
let ctx = null;
let fireworkMixer = null;
let canvasTextScore = null;
let contextTextScore = null;
let textureTextScore = null;
@ -614,7 +613,6 @@ class Map
}
let videoTmp = null;
videoTmp = new Video(path[i].blob).video;
console.log(videoTmp.src);
videoTmp.addEventListener('loadeddata', () => {
videoTmp.play();
drawVideoOnCanvas();

16
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/09/28 03:13:14 by edbernar ### ########.fr */
/* Updated: 2024/09/29 01:37:45 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -103,7 +103,7 @@ class Player
document.removeEventListener('keypress', simplePressKey);
pressedButton = [];
if (this.interval)
clearInterval(interval);
clearInterval(this.interval);
}
resetPosPlayer()
@ -333,21 +333,23 @@ class Player
function addKeyInArr(e)
{
let i;
const key = e.key.toLowerCase();
let i;
i = 0;
while (i < pressedButton.length && e.key != pressedButton[i])
while (i < pressedButton.length && key != pressedButton[i])
i++;
if (i == pressedButton.length)
pressedButton.push(e.key);
pressedButton.push(e.key.toLowerCase());
}
function remKeyInArr(e)
{
let i;
const key = e.key.toLowerCase();
let i;
i = 0;
while (i < pressedButton.length && e.key != pressedButton[i])
while (i < pressedButton.length && key != pressedButton[i])
i++;
if (i != pressedButton.length)
pressedButton.splice(i, 1);

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

@ -6,14 +6,12 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/09/28 21:46:40 by edbernar ### ########.fr */
/* Updated: 2024/09/29 01:35:50 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { availableSkins } from '/static/javascript/lobbyPage/3d.js';
import * as THREE from '/static/javascript/three/build/three.module.js'
import Stats from '/static/javascript/three/examples/jsm/libs/stats.module.js'
import { OrbitControls } from '/static/javascript/three/examples/jsm/Addons.js';
import { sendRequest } from "/static/javascript/websocket.js";
import { Player } from '/static/javascript/multiOnlineGame/Player.js'
@ -65,11 +63,10 @@ let interval = null;
let intervalPing = null;
let debug = false;
let lastPingTime = 0;
let lastFpsTime = 0;
let lastFpsDisplayed = 0;
// ------------------- (need to be remove) -------------------- //
const stats = new Stats();
stats.showPanel(0);
const cameraTmp = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight);
let controls = null;
// ------------------------------------------------------------ //
@ -78,11 +75,12 @@ class MultiOnlineGamePage
{
static create(skin)
{
document.body.appendChild(stats.dom);
if (!skin)
skin = {player: 0, opponent: 0};
const bar1 = createBarPlayer(availableSkins[skin.player]);
const bar2 = createBarPlayer(availableSkins[skin.opponent]);
console.log(document.body.getAttribute('style'));
document.body.setAttribute('style', '');
scene = new THREE.Scene()
map = new Map(scene, 13, false);
@ -172,7 +170,7 @@ class MultiOnlineGamePage
sendRequest('game', {action: 4});
lastPingTime = Date.now();
}
}, 16);
}, 800);
}
static dispose()
@ -233,6 +231,29 @@ class MultiOnlineGamePage
text.innerText = ping + ' ms';
lastPingTime = null;
}
static endGame(win)
{
const endGameDiv = document.getElementById('endGameDiv');
const scoreText = document.getElementById('endGameScore');
const simpleText = document.getElementById('endGameSimpleText');
let intervalEnd = null;
let time = 4;
endGameScore.innerText = `${map.score.player} - ${map.score.opponent}`;
if (win)
endGameText.innerText = "You win !"
endGameDiv.style.display = 'flex';
intervalEnd = setInterval(() => {
simpleText.innerText = `You will be redirected to the lobby in ${time} seconds`
time--;
if (time == -1)
{
clearInterval(intervalEnd);
setTimeout(() => pageRenderer.changePage('lobbyPage'), 500);
}
}, 1000);
}
}
function createBarPlayer(skin)
@ -240,7 +261,6 @@ function createBarPlayer(skin)
const geometry = new THREE.BoxGeometry(1, 0.1, 0.1);
let material = null;
console.log(skin)
if (skin.color)
material = new THREE.MeshPhysicalMaterial({color: skin.color});
else
@ -251,14 +271,8 @@ function createBarPlayer(skin)
return (mesh);
}
function changeBarColor(bar, color)
function windowUpdater()
{
bar.material.color.set(color);
}
function windowUpdater(e)
{
console.log('udapte');
renderer.setSize(window.innerWidth, window.innerHeight);
player.camera.aspect = window.innerWidth / window.innerHeight;
player.camera.updateProjectionMatrix();
@ -266,10 +280,7 @@ function windowUpdater(e)
function loop()
{
/////////////
stats.begin();
/////////////
showFps();
player.update();
opponent.update();
ball.update();
@ -281,10 +292,24 @@ function loop()
}
else
renderer.render(scene, player.camera);
}
/////////////
stats.end();
////////////
let lastFpsArr = [10, 3, 5];
function showFps()
{
const fps = document.getElementById('fps')
const now = Date.now();
if (now > lastFpsDisplayed + 800)
{
fps.innerText = Math.round(lastFpsArr.reduce((a, b) => a + b, 0) / lastFpsArr.length) + ' fps';
lastFpsDisplayed = now;
lastFpsArr = [];
}
else
lastFpsArr.push(Math.floor(1000 / (now - lastFpsTime)));
lastFpsTime = now;
}
export { MultiOnlineGamePage, player, opponent, ball, map};

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/15 12:00:01 by edbernar #+# #+# */
/* Updated: 2024/09/28 21:33:31 by edbernar ### ########.fr */
/* Updated: 2024/09/29 00:22:13 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -37,6 +37,8 @@ function typeGame(content)
map.activeJumper(content.name);
else if (content.action == 9)
MultiOnlineGamePage.ping();
else if (content.action == 10)
MultiOnlineGamePage.endGame(content.won)
}
}

52
docker-compose/requirements/nginx/static/style/game/games.css
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 11:23:41 by edbernar #+# #+# */
/* Updated: 2024/09/28 21:38:24 by edbernar ### ########.fr */
/* Updated: 2024/09/29 01:11:55 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -193,14 +193,60 @@ body {
.pingDiv {
position: absolute;
top: 100px;
left: 100px;
left: 10px;
top: 10px;
font-size: 20px;
color: white;
z-index: 800;
display: flex;
flex-direction: row;
background-color: rgba(0, 0, 0, 0.329);
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
touch-action: none;
}
#ping {
font-size: 20px;
color: white;
border: 1px solid rgba(255, 255, 255, 0.123);
padding: 5px 10px 5px 10px;
}
#fps {
padding: 5px 10px 5px 10px;
border: 1px solid rgba(255, 255, 255, 0.123);
border-right: none;
}
#endGameDiv {
display: none;
flex-direction: column;
position: absolute;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(5px);
z-index: 900;
transition: all 0.5s;
animation: fadeOutGames 0.5s;
}
#endGameText {
font-size: 100px;
color: white;
}
#endGameScore {
font-size: 75px;
color: white;
}
#endGameSimpleText {
font-size: 25px;
color: white;
margin-top: 50px;
}